Introduction

This repository contains HTML and CSS code created to solve different layout design challenges.
Each task involves converting a given visual layout into a working webpage using HTML for structure and CSS (Flexbox) for layout, alignment, and styling.

The repository includes both:

• Challenge designs

• Coded solutions (HTML + CSS)

Purpose of This Repository

This repository is created to:

• Practice HTML structure building for Flexbox layouts

• Apply CSS layout and styling techniques

• Improve understanding of design cloning using code

• Learn how to break complex layouts into manageable Flexbox sections

Challenges

• Challenge-01: Complex Box Nesting Layout
  A box-based layout challenge created using CSS Flexbox to practice nesting, alignment, and spacing.
  View Challenge

Intended Structure

learn-CSS-Flexbox
│
├── challenge-01/
│   ├── index.html        HTML solution
│   ├── style.css         CSS styling
│   ├── preview-01.jpg       Challenge / reference layout
│   └── README.md        Challenge + solution details
│
└── README.md            Root documentation

Topics Covered

The following concepts are practiced across all tasks:

• display: flex

• flex-direction

• justify-content

• align-items

• gap

• main axis vs cross axis

• box alignment

• margin and padding

• border

• box-sizing

• Alignment and spacing

• Visual layout cloning using code

NOTES:

• Focus is on layout and design, not functionality

• No JavaScript or backend is included

• Created strictly for learning and assignment purposes