This repository covers the fundamentals of HTML and CSS, focusing on creating structured web pages and basic styling techniques. It is perfect for beginners or anyone looking to solidify their foundational skills in web development.
In this lesson, we explored:
- HTML Basics: Understanding the structure of HTML documents, including tags and elements.
- Element Hierarchy: Learning how HTML elements are nested and how this affects the document structure.
- Semantic HTML: Using meaningful tags to improve accessibility and SEO.
- CSS Basics: Applying styles to HTML elements and understanding how to connect external, internal, and inline styles to HTML files.
To explore the content of this repository:
- Clone the Repository:
git clone https://github.com/OpenCodeChicago/HTML-CSS_fundamentals_part1.git
- Open the Project:
Open the
index.htmlfile in your browser to see the basic structure and styling in action. - Edit and Experiment: Modify the HTML and CSS files to see how changes affect the appearance and structure of the web page.
This repository follows the folder structure below:
index.html: This is the main HTML file where the content and structure of the web page are defined.styles.css: This external CSS file is used for styling the HTML elements.images/: This folder contains image assets used in the project.
As we continue to dive deeper into HTML and CSS, the next lesson will cover:
- Block vs. Inline Elements: Understanding the difference between block-level and inline-level elements.
- Box Model: Exploring the box model, including content-box vs. border-box, and how padding, margins, and borders work.
- Flexbox Basics: An introduction to Flexbox, a powerful layout module that allows for flexible and efficient alignment of elements on the web.
Stay tuned as we build on these foundational skills and move toward more advanced concepts in web development.
If you encounter any issues or have suggestions for improvements, please let us know by opening an issue on GitHub.
This repository is licensed under the MIT License. See the LICENSE file for more details.
Your feedback is valuable to us! If you have any thoughts on how we can improve, please submit feedback or contact us directly.
For any questions, suggestions, or further discussion, feel free to reach out to us:
