|
3 | 3 | [](https://github.com/OpenCodeChicago/HTML-CSS_fundamentals_part2/commits/main) |
4 | 4 | [](https://github.com/OpenCodeChicago/HTML-CSS_fundamentals_part2/blob/main/LICENSE) |
5 | 5 |
|
6 | | -> 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. |
| 6 | +> This repository delves into essential `**CSS**` layout techniques, focusing on the `**box model**`, `**flexbox**`, and understanding the intricacies of `**content-box**` vs. `**border-box**`. It is ideal for those looking to enhance their web development skills with a solid grasp of layout principles. |
7 | 7 | |
8 | 8 | --- |
9 | 9 |
|
10 | 10 | ## What We Covered |
11 | 11 |
|
12 | 12 | In this lesson, we explored: |
13 | 13 |
|
14 | | -- **HTML Basics**: Understanding the structure of HTML documents, including tags and elements. |
15 | | -- **Element Hierarchy**: Learning how HTML elements are nested and how this affects the document structure. |
16 | | -- **Semantic HTML**: Using meaningful tags to improve accessibility and SEO. |
17 | | -- **CSS Basics**: Applying styles to HTML elements and understanding how to connect external, internal, and inline styles to HTML files. |
| 14 | +- **Box Model**: Understanding how the box model affects the layout, including padding, margin, and border. |
| 15 | +- **Content-Box vs. Border-Box**: Learning the differences between these two box-sizing models and how they influence element sizing. |
| 16 | +- **Flexbox Basics**: An introduction to the flexbox layout model, which provides a flexible and efficient way to arrange items within a container. |
18 | 17 |
|
19 | 18 | --- |
| 19 | + |
| 20 | +## Getting Started |
| 21 | + |
| 22 | +To explore the content of this repository: |
| 23 | + |
| 24 | +1. **Clone the Repository**: |
| 25 | + ```bash |
| 26 | + git clone https://github.com/OpenCodeChicago/HTML-CSS_fundamentals_part2.git |
| 27 | + ``` |
| 28 | +2. **Open the Project**: |
| 29 | + Open the `index.html` file in your browser to see the basic structure and styling in action. |
| 30 | +3. **Edit and Experiment**: |
| 31 | + Modify the HTML and CSS files to see how changes affect the appearance and structure of the web page. |
| 32 | + |
| 33 | +--- |
| 34 | + |
| 35 | +## Folder Structure |
| 36 | + |
| 37 | +This repository follows the folder structure below: |
| 38 | +- **`index.html`**: This is the main HTML file where the content and structure of the web page are defined. |
| 39 | +- **`styles.css`**: This external CSS file is used for styling the HTML elements. |
| 40 | + |
| 41 | +--- |
| 42 | + |
| 43 | +**Stay tuned as we build on these foundational skills and move toward more advanced concepts in web development.** |
| 44 | + |
| 45 | +## Languages and Tools: |
| 46 | + |
| 47 | +<div align="center"> |
| 48 | + |
| 49 | +<a href="https://en.wikipedia.org/wiki/HTML5" target="_blank"><img style="margin: 10px" src="https://profilinator.rishav.dev/skills-assets/html5-original-wordmark.svg" alt="HTML5" height="50" /></a> |
| 50 | +<a href="https://www.w3schools.com/css/" target="_blank"><img style="margin: 10px" src="https://profilinator.rishav.dev/skills-assets/css3-original-wordmark.svg" alt="CSS3" height="50" /></a> |
| 51 | +<a href="https://git-scm.com/" target="_blank" rel="noreferrer"> |
| 52 | +<img src="https://www.vectorlogo.zone/logos/git-scm/git-scm-icon.svg" alt="git" width="40" height="40"/></a> |
| 53 | + |
| 54 | +</div> |
| 55 | + |
| 56 | +--- |
| 57 | + |
| 58 | +## Issues |
| 59 | + |
| 60 | +If you encounter any issues or have suggestions for improvements, please let us know by [opening an issue](https://github.com/OpenCodeChicago/HTML-CSS_fundamentals_part2/issues) on GitHub. |
| 61 | + |
| 62 | +## License |
| 63 | + |
| 64 | +This repository is licensed under the MIT License. See the [LICENSE](LICENSE) file for more details. |
| 65 | + |
| 66 | +## Feedback |
| 67 | + |
| 68 | +Your feedback is valuable to us! If you have any thoughts on how we can improve, please [submit feedback](https://github.com/OpenCodeChicago/HTML-CSS_fundamentals_part2/issues) or contact us directly. |
| 69 | + |
| 70 | +## Contact Us |
| 71 | + |
| 72 | +For any questions, suggestions, or further discussion, feel free to reach out to us: |
| 73 | + |
| 74 | +<div align="center"> |
| 75 | +<a href="https://linkedin.com/in/alex-smagin29" target="_blank"> |
| 76 | +<img src=https://img.shields.io/badge/linkedin-%231E77B5.svg?&style=for-the-badge&logo=linkedin&logoColor=white alt=linkedin style="margin-bottom: 5px;" /> |
| 77 | +</a> |
| 78 | +<a href="https://discord.gg/t6MGsCqdFX" target="_blank"> |
| 79 | +<img src="https://img.shields.io/badge/discord-%237289DA.svg?&style=for-the-badge&logo=discord&logoColor=white" alt="Discord" style="margin-bottom: 5px;" /> |
| 80 | +</a> |
| 81 | +<a href="https://stackoverflow.com/users/22484161/alex-smagin" target="_blank"> |
| 82 | +<img src=https://img.shields.io/badge/stackoverflow-%23F28032.svg?&style=for-the-badge&logo=stackoverflow&logoColor=white alt=stackoverflow style="margin-bottom: 5px;" /> |
| 83 | +</a> |
| 84 | +<a href="https://dribbble.com/Alexandrbig1" target="_blank"> |
| 85 | +<img src=https://img.shields.io/badge/dribbble-%23E45285.svg?&style=for-the-badge&logo=dribbble&logoColor=white alt=dribbble style="margin-bottom: 5px;" /> |
| 86 | +</a> |
| 87 | +<a href="https://www.behance.net/a1126" target="_blank"> |
| 88 | +<img src=https://img.shields.io/badge/behance-%23191919.svg?&style=for-the-badge&logo=behance&logoColor=white alt=behance style="margin-bottom: 5px;" /> |
| 89 | +</a> |
| 90 | + |
| 91 | +</div> |
0 commit comments