Css Module 65

 Module 65 : “Mastering Modern CSS: From Fundamentals to Advanced Concepts” 

This module is designed to take learners from basic CSS concepts to mastering modern, powerful techniques. Through a blend of theory, 

1: Introduction to CSS Fundamentals

Detailed Explanation:

CSS (Cascading Style Sheets) is used to control the layout and appearance of HTML elements. It works through selectors and declarations.

Example:

css

 code

p { color: blue; font-size: 16px; }

Exercise:

Style a sample HTML page with headings and paragraphs using different colors, font sizes, and background colors.

 Understand the box model.

Create a div with padding, border, and margin.

Use DevTools to inspect and analyze its computed size.

css

 code

div { width: 200px; padding: 20px; border: 5px solid black; margin: 15px; }

Explanation: The total rendered width is 200 + 40 (padding) + 10 (border) = 250px.

2: CSS Positioning and Layout Techniques

 Explanation:

Flexbox is ideal for one-dimensional layouts (row or column), while Grid is for two-dimensional layouts.

css

 code

.container { display: flex; justify-content: space-between; align-items: center; }

Exercise:

Create a navigation bar using Flexbox that distributes items evenly and centers them vertically.

Build a responsive image gallery using CSS Grid.

css

 code

.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }

Explanation: The gallery adapts to screen width, adjusting the number of columns automatically.

 3: Responsive Design and Media Queries

 Explanation:

Media queries enable conditional styling based on screen dimensions.

css

 code

@media (max-width: 600px) { body { background-color: lightgray; } }

Exercise:

Create a page with 3 breakpoints: mobile (<600px), tablet (600px–900px), desktop (>900px), each with a different layout.

 Design a multi-column layout that becomes a single-column on mobile.

Use Grid or Flexbox and media queries.

 4: Advanced CSS Features

Explanation:

CSS variables make themes and reusable design patterns easier.

css

 code

:root { --primary-color: #3498db; } .button { background-color: var(--primary-color); }

Exercise:

Create a dark/light theme toggle using CSS variables.

 Animate a card that scales and adds a shadow on hover.

css

 code

.card { transition: transform 0.3s ease, box-shadow 0.3s ease; } .card:hover { transform: scale(1.05); box-shadow: 0 4px 12px rgba(0,0,0,0.2); }

5: Modern CSS Techniques

 Explanation:

Clamp() Example:

css

code

h1 { font-size: clamp(1.2rem, 2vw, 2.5rem); }

Ensures responsive font size without media queries.

Container Query Example:

css

 code

@container (min-width: 600px) { .card { flex-direction: row; } }

Exercise:

Build a responsive card layout that adjusts using clamp() and container queries.

 Design a dynamic profile card using aspect-ratio, min(), and max() functions.

css

code

.image { aspect-ratio: 1 / 1; width: min(100%, 300px); }

 6: CSS Architecture 

Explanation:

BEM Naming Convention Example:

html

 code

<div class="card card--highlighted"> <h2 class="card__title">Title</h2> </div>

Exercise:

Refactor an HTML page using BEM methodology.

 Build a component using both vanilla CSS (BEM) and a utility-first approach.

Compare maintainability, readability, and scalability.

Final Project: Build a Responsive Portfolio Website

Requirements:

Flexbox and Grid layout

Responsive design with media queries

Animations and transitions

Use of CSS variables and custom properties

Dark/light theme toggle

Deliverables:

GitHub Repository

Live Deployment (GitHub Pages, Netlify, etc.)

Written reflection on architecture choices and responsiveness

Assessment Criteria:

Code structure and readability

Use of modern CSS features

Responsiveness and accessibility

Clean design and usability