Welcome to the Women-Web-Dev-Basics repository!
This repository contains materials for celebrating International Women's Day through web development basics. It includes HTML, CSS, and JavaScript exercises to help you get started with web development.
To get started with this project, follow these steps:
git https://github.com/fadhlaouir/Women-Web-Dev-Basics.gitOpen the project folder in your preferred code editor, such as Visual Studio Code.
index.html: This file represents the structure of our web page.
- The
<!DOCTYPE html>declaration defines the document type and ensures proper rendering in browsers. - The
<html>tag represents the root of the HTML document, with thelangattribute specifying the language. - Inside the
<head>section, we have metadata such as character encoding (<meta charset="UTF-8">) and viewport settings (<meta name="viewport" content="width=device-width, initial-scale=1.0">). - The
<title>tag sets the title of the webpage. - External resources such as stylesheets (
<link rel="stylesheet" href="style.css">) and scripts (<script src="script.js"></script>) are linked. - The
<body>section contains the content of our webpage, including a header, main section, and a form.
style.css: This file contains the CSS styles to enhance the visual presentation of our webpage.
- Styles for
body,header,main,img,ul, andlielements are defined. - These styles include background colors, text alignment, padding, margin, list formatting, and image sizing.
script.js: This file provides interactive functionality to our webpage.
- The
changeBackgroundColor()function changes the background color of the webpage when triggered. - Event listeners are added to the "Change Background Color" button (
changeColorBtn) and the form submit button (submitBtn). - Form validation ensures that the user fills in all required fields before submission.
- Image hover effect changes the image source when hovering over it.
Open index.html in a web browser to view the webpage. You can interact with the webpage by clicking the "Change Background Color" button, submitting the form, and hovering over the image.
Contributing
Contributions to this project are welcome! If you have any improvements, suggestions, or corrections, feel free to open an issue or submit a pull request.
This project is licensed under the MIT License - see the LICENSE file for details.
Feel free to customize this README file further according to your preferences or additional details you want to include.