Welcome! This repository contains a collection of beginner-friendly CSS projects designed to help you learn and practice modern CSS. Each project focuses on a specific layout or technique, making it easy to build your skills step by step.
-
Basic Portfolio
Create a simple, personal portfolio website using HTML and CSS. Learn about structuring pages, using multiple CSS files, and customizing your own content. -
Grid Image Gallery
Build a responsive image gallery using CSS Grid. Practice arranging images in creative layouts and making your gallery look great on any device. -
G3 Architects Landing Page
Recreate a professional landing page for an architecture firm. Explore multi-section layouts, navigation bars, feature sections, and sponsor logos.
-
Clone or Download
Download this repository or clone it to your computer. -
Open in Your Code Editor
Use Visual Studio Code or your favorite editor. -
Pick a Project
Each project is in its own folder (e.g.,1.basic-portfolio,2.grid-img-gallery,3.G3-architects).
Open the folder and start with theindex.htmlfile. -
Run the Project
Open theindex.htmlfile in your web browser to see the result. -
Experiment and Learn
- Edit the HTML and CSS files to see how changes affect the page.
- Try customizing text, images, colors, and layouts.
- Use the Live Server extension in VS Code for real-time preview.
- Read the README in each project folder for specific instructions.
- Don’t be afraid to break things—experimentation is the best way to learn!
- Look up any CSS property or HTML tag you don’t understand on MDN Web Docs.
- Share your progress and ask questions with others who are learning.
These projects are designed to:
- Give you hands-on practice with real-world layouts.
- Help you understand how CSS works in different scenarios.
- Build your confidence as you move from simple to more complex designs.
Happy coding and enjoy your CSS