https://github.com/opencodechicago/html-css_fundamentals_part2

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.
https://github.com/opencodechicago/html-css_fundamentals_part2

css css3 frontend frontend-mentor frontend-web frontenddevelopment html html-css html5 it-community open-source opencodechicago webdev webdevelopment

Last synced: 2 days ago
JSON representation

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.

• Host: GitHub
• URL: https://github.com/opencodechicago/html-css_fundamentals_part2
• Owner: OpenCodeChicago
• License: mit
• Created: 2024-08-26T18:19:21.000Z (3 months ago)
• Default Branch: main
• Last Pushed: 2024-08-28T06:14:29.000Z (3 months ago)
• Last Synced: 2024-08-29T02:55:32.895Z (3 months ago)
• Topics: css, css3, frontend, frontend-mentor, frontend-web, frontenddevelopment, html, html-css, html5, it-community, open-source, opencodechicago, webdev, webdevelopment
• Language: CSS
• Homepage: https://opencodechicago.github.io/HTML-CSS_fundamentals_part2
• Size: 321 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# HTML/CSS Fundamentals: Box Model & Flexbox

[![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)

[![GitHub license](https://img.shields.io/github/license/OpenCodeChicago/HTML-CSS_fundamentals_part2)](https://github.com/OpenCodeChicago/HTML-CSS_fundamentals_part2/blob/main/LICENSE)

> 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.

---

## What We Covered

In this lesson, we explored:

- **Box Model**: Understanding how the box model affects the layout, including padding, margin, and border.

- **Content-Box vs. Border-Box**: Learning the differences between these two box-sizing models and how they influence element sizing.

- **Flexbox Basics**: An introduction to the flexbox layout model, which provides a flexible and efficient way to arrange items within a container.

---

## Images

![box-model](images/box-sizing.png) _Image 1

(CSS box-smodel)_

![flex-box](images/flex-box.png) _Image 2

(CSS flex-box)_

---

## Getting Started

To explore the content of this repository:

1. **Clone the Repository**: 

   ```bash

   git clone https://github.com/OpenCodeChicago/HTML-CSS_fundamentals_part2.git

   ```

2. **Open the Project**:

   Open the `index.html` file in your browser to see the basic structure and styling in action.

3. **Edit and Experiment**:

   Modify the HTML and CSS files to see how changes affect the appearance and structure of the web page.

---

## Folder Structure

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.

---

## What's Next

As we continue to dive deeper into **`HTML`** and **`CSS`**, the next lesson will cover:

- **Forms**: Learning how to create user-friendly forms, including input types like text fields, checkboxes, radio buttons, and submit buttons.

- **Form Accessibility**: Best practices for making forms accessible to all users, including proper labeling and structuring.

- **Styling Forms**: Understanding how to use CSS to enhance the visual appearance and usability of form elements.

**Stay tuned as we build on these foundational skills and move toward more advanced concepts in web development.**

## Languages and Tools:













---

## Issues

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.

## License

This repository is licensed under the MIT License. See the [LICENSE](LICENSE) file for more details.

## Feedback

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.

## Contact Us

For any questions, suggestions, or further discussion, feel free to reach out to us: