Module 69 : Css project using basic to advance level build a website
Project Goals:
Learn CSS fundamentals to advanced concepts
Use examples
Include exercises and mini-projects
Master layout systems like Flexbox and Grid
Apply responsive design
Use animations, custom properties, and best practices
1. Project Setup & HTML Structure
Folder Structure:
pgsql
code
portfolio/
├── index.html
├── style.css
└── images/
index.html (Basic Structure):
html
code
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>My Portfolio</title> <link rel="stylesheet" href="style.css" /> </head> <body> <header> <h1>Hi, I'm John Doe</h1> <p>Web Developer & Designer</p> </header> <nav> <a href="#about">About</a> <a href="#projects">Projects</a> <a href="#contact">Contact</a> </nav> <section id="about"> <h2>About Me</h2> <p>I’m a web developer with a passion for building beautiful websites.</p> </section> <section id="projects"> <h2>My Projects</h2> <div class="project"> <h3>Project 1</h3> <p>Description of project 1.</p> </div> <div class="project"> <h3>Project 2</h3> <p>Description of project 2.</p> </div> </section> <section id="contact"> <h2>Contact</h2> <form> <input type="text" placeholder="Your Name" /> <input type="email" placeholder="Your Email" /> <textarea placeholder="Message"></textarea> <button type="submit">Send</button> </form> </section> <footer> <p>© 2025 John Doe</p> </footer> </body> </html>
2. Basic CSS Styling (style.css)
Add some global styling:
css
code
/* Reset & Base */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Arial', sans-serif; line-height: 1.6; background-color: #f4f4f4; color: #333; padding: 20px; } /* Header Styling */ header { background-color: #333; color: #fff; padding: 20px; text-align: center; } /* Navigation */ nav { background-color: #444; text-align: center; padding: 10px; } nav a { color: #fff; margin: 0 15px; text-decoration: none; } /* Section Styling */ section { margin: 20px 0; padding: 20px; background-color: #fff; } /* Footer */ footer { text-align: center; padding: 10px; background-color: #333; color: white; }
Explanation:
* selector resets margins/paddings.
Header, nav, footer get background colors for separation.
Typography set globally.
3. Intermediate Level CSS: Layouts with Flexbox
Add Flexbox for Projects Section:
css
code
#projects { display: flex; flex-wrap: wrap; gap: 20px; } .project { flex: 1 1 45%; background-color: #eaeaea; padding: 15px; border-radius: 10px; }
Exercise:
Try changing flex: 1 1 45% to flex: 1 1 100% and see how it stacks.
Explanation:
flex-wrap: wrap makes elements wrap to new lines.
flex: 1 1 45% lets each .project take ~half the row.
gap adds spacing.
4. Advanced CSS: Responsive Design with Media Queries
css
code
@media (max-width: 768px) { #projects { flex-direction: column; } .project { flex: 1 1 100%; } nav a { display: block; margin: 10px 0; } }
Explanation:
Media query for screens <= 768px.
Converts project layout to stacked columns.
Makes nav links more mobile-friendly.
5. Advanced CSS: Transitions and Hover Effects
css
code
.project:hover { background-color: #d0e1ff; transform: scale(1.02); transition: all 0.3s ease; }
Explanation:
transform: scale(1.02) zooms slightly.
transition makes it smooth.
6. Custom Properties (CSS Variables)
css
code
:root { --primary-color: #007bff; --bg-light: #f8f9fa; --text-dark: #212529; } body { background-color: var(--bg-light); color: var(--text-dark); } header { background-color: var(--primary-color); }
Why use variables?
Easy to update your design system in one place.
Reusable and consistent colors/themes.
7. Bonus: Animations
Simple fade-in effect:
css
code
@keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } section { animation: fadeIn 1s ease-in-out; }
Explanation:
@keyframes defines the animation steps.
animation applies it to elements.
Practice Exercises
1: Change the color theme using variables.
2: Add an image section with CSS Grid layout.
html
code
<section id="gallery"> <h2>Gallery</h2> <div class="grid"> <img src="images/img1.jpg" alt="" /> <img src="images/img2.jpg" alt="" /> <img src="images/img3.jpg" alt="" /> <img src="images/img4.jpg" alt="" /> </div> </section>
css
code
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; } .grid img { width: 100%; border-radius: 10px; }
3: Add a dark mode toggle using JavaScript + CSS.
Conclusion
By building this portfolio project, you:
Master basic to advanced CSS (selectors, flex, grid, variables, media queries, animations)
Practice on components (header, nav, forms, galleries)
Learn responsive and modern design practices
No comments:
Post a Comment