{"id":19957358,"url":"https://github.com/opencodechicago/html-css_fundamentals_part2","last_synced_at":"2025-09-19T15:32:28.498Z","repository":{"id":254932943,"uuid":"847883402","full_name":"OpenCodeChicago/HTML-CSS_fundamentals_part2","owner":"OpenCodeChicago","description":"This repository delves into the box model, flexbox, and key layout techniques in CSS. We explored margin, padding, and the differences between content-box and border-box. Additionally, we introduced the flexbox layout model, which provides a flexible and efficient way to arrange items within a container.","archived":false,"fork":false,"pushed_at":"2024-09-24T02:42:46.000Z","size":338,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2024-11-13T01:37:37.661Z","etag":null,"topics":["css","css3","frontend","frontend-mentor","frontend-web","frontenddevelopment","html","html-css","html5","it-community","open-source","opencodechicago","webdev","webdevelopment"],"latest_commit_sha":null,"homepage":"https://opencodechicago.github.io/HTML-CSS_fundamentals_part2","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/OpenCodeChicago.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-08-26T18:19:21.000Z","updated_at":"2024-09-24T02:42:48.000Z","dependencies_parsed_at":"2024-08-27T02:52:51.510Z","dependency_job_id":"4c588823-cd1c-4ce0-8cc9-0fe42526ddfb","html_url":"https://github.com/OpenCodeChicago/HTML-CSS_fundamentals_part2","commit_stats":null,"previous_names":["opencodechicago/html-css_fundamentals_part2"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OpenCodeChicago%2FHTML-CSS_fundamentals_part2","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OpenCodeChicago%2FHTML-CSS_fundamentals_part2/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OpenCodeChicago%2FHTML-CSS_fundamentals_part2/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OpenCodeChicago%2FHTML-CSS_fundamentals_part2/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/OpenCodeChicago","download_url":"https://codeload.github.com/OpenCodeChicago/HTML-CSS_fundamentals_part2/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":233574873,"owners_count":18696523,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","css3","frontend","frontend-mentor","frontend-web","frontenddevelopment","html","html-css","html5","it-community","open-source","opencodechicago","webdev","webdevelopment"],"created_at":"2024-11-13T01:37:40.395Z","updated_at":"2025-09-19T15:32:23.184Z","avatar_url":"https://github.com/OpenCodeChicago.png","language":"CSS","readme":"# HTML/CSS Fundamentals: Box Model \u0026 Flexbox\n\n[![GitHub last commit](https://img.shields.io/github/last-commit/OpenCodeChicago/HTML-CSS_fundamentals_part2)](https://github.com/OpenCodeChicago/HTML-CSS_fundamentals_part2/commits/main)\n[![GitHub license](https://img.shields.io/github/license/OpenCodeChicago/HTML-CSS_fundamentals_part2)](https://github.com/OpenCodeChicago/HTML-CSS_fundamentals_part2/blob/main/LICENSE)\n\n\u003e 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.\n\n---\n\n## What We Covered\n\nIn this lesson, we explored:\n\n- **Box Model**: Understanding how the box model affects the layout, including padding, margin, and border.\n- **Content-Box vs. Border-Box**: Learning the differences between these two box-sizing models and how they influence element sizing.\n- **Flexbox Basics**: An introduction to the flexbox layout model, which provides a flexible and efficient way to arrange items within a container.\n\n---\n\n## Images\n\n![box-model](images/box-sizing.png) _Image 1\n(CSS box-smodel)_\n\n![flex-box](images/flex-box.png) _Image 2\n(CSS flex-box)_\n\n---\n\n## Getting Started\n\nTo explore the content of this repository:\n\n1. **Clone the Repository**: \n   ```bash\n   git clone https://github.com/OpenCodeChicago/HTML-CSS_fundamentals_part2.git\n   ```\n2. **Open the Project**:\n   Open the `index.html` file in your browser to see the basic structure and styling in action.\n3. **Edit and Experiment**:\n   Modify the HTML and CSS files to see how changes affect the appearance and structure of the web page.\n\n---\n\n## Folder Structure\n\nThis repository follows the folder structure below:\n- **`index.html`**: This is the main HTML file where the content and structure of the web page are defined.\n- **`styles.css`**: This external CSS file is used for styling the HTML elements.\n\n---\n\n## What's Next\n\nAs we continue to dive deeper into **`HTML`** and **`CSS`**, the next lesson will cover:\n- **Forms**: Learning how to create user-friendly forms, including input types like text fields, checkboxes, radio buttons, and submit buttons.\n- **Form Accessibility**: Best practices for making forms accessible to all users, including proper labeling and structuring.\n- **Styling Forms**: Understanding how to use CSS to enhance the visual appearance and usability of form elements.\n\n**Stay tuned as we build on these foundational skills and move toward more advanced concepts in web development.**\n\n## Languages and Tools:\n\n\u003cdiv align=\"center\"\u003e\n\n\u003ca href=\"https://en.wikipedia.org/wiki/HTML5\" target=\"_blank\"\u003e\u003cimg style=\"margin: 10px\" src=\"https://profilinator.rishav.dev/skills-assets/html5-original-wordmark.svg\" alt=\"HTML5\" height=\"50\" /\u003e\u003c/a\u003e\n\u003ca href=\"https://www.w3schools.com/css/\" target=\"_blank\"\u003e\u003cimg style=\"margin: 10px\" src=\"https://profilinator.rishav.dev/skills-assets/css3-original-wordmark.svg\" alt=\"CSS3\" height=\"50\" /\u003e\u003c/a\u003e\n\u003ca href=\"https://git-scm.com/\" target=\"_blank\" rel=\"noreferrer\"\u003e\n\u003cimg src=\"https://www.vectorlogo.zone/logos/git-scm/git-scm-icon.svg\" alt=\"git\" width=\"40\" height=\"40\"/\u003e\u003c/a\u003e\n\n\u003c/div\u003e\n\n---\n\n## Issues\n\nIf 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.\n\n## License\n\nThis repository is licensed under the MIT License. See the [LICENSE](LICENSE) file for more details.\n\n## Feedback\n\nYour 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.\n\n## Contact Us\n\nFor any questions, suggestions, or further discussion, feel free to reach out to us:\n\n\u003cdiv align=\"center\"\u003e\n\u003ca href=\"https://www.youtube.com/@AlexSmaginDev\" target=\"_blank\"\u003e\n\u003cimg src=\"https://img.shields.io/badge/youtube-%23FF0000.svg?\u0026style=for-the-badge\u0026logo=youtube\u0026logoColor=white\" alt=\"YouTube\" style=\"margin-bottom: 5px;\" /\u003e\n\u003c/a\u003e\n\u003ca href=\"https://linkedin.com/in/alex-smagin29\" target=\"_blank\"\u003e\n\u003cimg src=https://img.shields.io/badge/linkedin-%231E77B5.svg?\u0026style=for-the-badge\u0026logo=linkedin\u0026logoColor=white alt=linkedin style=\"margin-bottom: 5px;\" /\u003e\n\u003c/a\u003e\n\u003ca href=\"https://discord.gg/t6MGsCqdFX\" target=\"_blank\"\u003e\n\u003cimg src=\"https://img.shields.io/badge/discord-%237289DA.svg?\u0026style=for-the-badge\u0026logo=discord\u0026logoColor=white\" alt=\"Discord\" style=\"margin-bottom: 5px;\" /\u003e\n\u003c/a\u003e\n\u003ca href=\"https://stackoverflow.com/users/22484161/alex-smagin\" target=\"_blank\"\u003e\n\u003cimg src=https://img.shields.io/badge/stackoverflow-%23F28032.svg?\u0026style=for-the-badge\u0026logo=stackoverflow\u0026logoColor=white alt=stackoverflow style=\"margin-bottom: 5px;\" /\u003e\n\u003c/a\u003e\n\u003ca href=\"https://dribbble.com/Alexandrbig1\" target=\"_blank\"\u003e\n\u003cimg src=https://img.shields.io/badge/dribbble-%23E45285.svg?\u0026style=for-the-badge\u0026logo=dribbble\u0026logoColor=white alt=dribbble style=\"margin-bottom: 5px;\" /\u003e\n\u003c/a\u003e\n\u003ca href=\"https://www.behance.net/a1126\" target=\"_blank\"\u003e\n\u003cimg src=https://img.shields.io/badge/behance-%23191919.svg?\u0026style=for-the-badge\u0026logo=behance\u0026logoColor=white alt=behance style=\"margin-bottom: 5px;\" /\u003e\n\u003c/a\u003e\n\n\u003c/div\u003e\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fopencodechicago%2Fhtml-css_fundamentals_part2","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fopencodechicago%2Fhtml-css_fundamentals_part2","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fopencodechicago%2Fhtml-css_fundamentals_part2/lists"}