A curated collection of frontend projects built with HTML and CSS, designed to support hands-on learning and skill development in modern web development.
Each project lives in its own numbered directory and includes all necessary source files and assets.
| # | Project | Key Concepts |
|---|---|---|
| 01 | Tea Station | CSS Variables, Transitions, Multi-page Layout |
| 02 | Flexbox Mini Project | Flexbox Fundamentals |
| 03 | Backroads Tours | Flexbox, Responsive Design |
| 04 | Grid Mini Project | CSS Grid Fundamentals |
| 05 | Portfolio (Grid) | CSS Grid, Multi-page Layout |
| 06 | Usability Hub Clone | Flexbox, Component Design |
| 07 | Simply Recipes | CSS Grid, Typography |
| 08 | Portfolio | Grid, Animations, Multi-page |
| 09 | Form | Form Styling, Validation UI |
| 10 | Restaurant Website | Flexbox, CSS Grid, Full Layout |
| 11 | Space Website | Advanced CSS, Animations |
| 12 | 404 Page | CSS Centering, Custom Error Pages |
| 13 | Portfolio | Responsive Layout, Personal Branding |
| 14 | Product Design Portfolio | CSS Grid, Portfolio Showcase |
| # | Project | Live Link |
|---|---|---|
| 01 | Tea Station | View → |
| 02 | Flexbox Mini Project | View → |
| 03 | Backroads Tours | View → |
| 04 | Grid Mini Project | View → |
| 05 | Portfolio (Grid) | View → |
| 06 | Usability Hub Clone | View → |
| 07 | Simply Recipes | View → |
| 08 | Portfolio | View → |
| 09 | Form | View → |
| 10 | Restaurant Website | View → |
| 11 | Space Website | View → |
| 12 | 404 Page | View → |
| 13 | Product Design Portfolio | View → |
Follow these steps to get up and running:
-
Clone the repository
git clone https://github.com/your-username/html-css-frontend-projects.git
-
Navigate to a project directory
cd project-name -
Open in your browser Open the
index.htmlfile directly in your browser, or use a local development server such as Live Server in VS Code. -
Explore and build Study the existing structure, then experiment by modifying the HTML and CSS to deepen your understanding.
-
Focus on responsiveness Ensure your implementations adapt gracefully across screen sizes — from mobile to desktop.
Contributions are welcome and appreciated. To contribute:
- Fork the repository
- Create a new branch:
git checkout -b feature/your-feature-name - Commit your changes:
git commit -m "Add: brief description of changes" - Push to your branch:
git push origin feature/your-feature-name - Open a Pull Request with a clear description of what you've added or changed
Please ensure your code is clean, well-structured, and consistent with the existing style of the project.
Built with focus on clean code, responsive design, and progressive skill-building.