1-Week Frontend Training Course: Mastering CSS
Layouts
Focus: CSS Layouts (Flexbox, Grid, Positioning), Responsive Design, Minimal JS
Interactions
Audience: Junior Developers
Style: Hands-on, Practical Tasks, Real-world Use Cases
Training Method: Learn → Explain → Build → Showcase(LEBS)
Day 1: HTML Structure & CSS Fundamentals for Layouts
Topics:
1. Semantic HTML for Layouts
○ <header>, <nav>, <main>, <section>, <article>, <footer>
○ Importance of accessibility & SEO
○ Task: Structure a blog page using semantic tags
2. CSS Box Model & Basic Styling
○ margin, padding, border, box-sizing
○ display: block vs inline vs inline-block
○ Task: Style a card component with proper spacing
3. Positioning in CSS
○ static, relative, absolute, fixed, sticky
○ Use case: Navigation bars, modals, tooltips
○ Task: Create a sticky navbar and a tooltip on hover
Day 2: Flexbox for Modern Layouts
Topics:
1. Flexbox Fundamentals
○ display: flex, flex-direction, justify-content, align-items
○ Use case: Navigation menus, card grids, centered layouts
○ Task: Build a responsive navbar and a centered hero section
2. Flexbox Advanced Properties
○ flex-grow, flex-shrink, flex-basis, order
○ Use case: Dynamic spacing in galleries
○ Task: Create a flexible image gallery
3. Real-world Flexbox Layouts
○ Holy Grail Layout (Header, Sidebar, Main, Footer)
○ Task: Implement a responsive dashboard layout
Day 3: CSS Grid for Complex Layouts
Topics:
1. Grid Basics
○ display: grid, grid-template-columns/rows, gap
○ Use case: Magazine layouts, product grids
○ Task: Design a Pinterest-style grid
2. Grid Advanced Techniques
○ fr units, minmax(), auto-fit vs auto-fill
○ Use case: Responsive grids without media queries
○ Task: Build a fully responsive gallery
3. Grid Template Areas
○ Naming grid sections for readability
○ Task: Recreate a newspaper-style layout
Day 4: Responsive Design & Media Queries
Topics:
1. Mobile-First vs Desktop-First
○ Best practices for responsive design
○ Task: Convert a desktop layout to mobile-first
2. Media Queries & Breakpoints
○ @media (min-width: ...)
○ Common breakpoints (mobile, tablet, desktop)
○ Task: Make a navbar collapse into a hamburger menu
3. Responsive Images & Units
○ vw, vh, rem, em
○ <picture> and srcset
○ Task: Optimize images for different screens
Day 5: Advanced CSS Techniques for Layouts
Topics:
1. CSS Variables (Custom Properties)
○ :root, var(--color-primary)
○ Use case: Theming, reusable styles
○ Task: Implement a dark/light mode toggle
2. Pseudo-classes & Pseudo-elements
○ :hover, :focus, :nth-child(), ::before, ::after
○ Use case: Interactive buttons, decorative elements
○ Task: Style a button with hover effects
3. Transitions & Animations
○ transition, transform, @keyframes
○ Use case: Smooth hover effects, loading animations
○ Task: Animate a dropdown menu
Day 6: Minimal JavaScript for Layout Interactivity
Topics:
1. DOM Manipulation Basics
○ querySelector, classList.add/remove/toggle
○ Use case: Toggling menus, modals
○ Task: Build a mobile menu toggle
2. Event Listeners for UI Interactions
○ click, mouseover, resize
○ Use case: Accordions, tabs
○ Task: Create an FAQ accordion
3. Dynamic Styling with JS
○ Changing CSS variables with JS
○ Task: Implement a theme switcher
Day 7: Capstone Project
Task: Build a responsive portfolio website integrating:
✅ Semantic HTML
✅ Flexbox & Grid
✅ Positioning (sticky nav, modals)
✅ Media queries (mobile-friendly)
✅ CSS variables (theming)
✅ Transitions/animations (hover effects)
✅ JS interactivity (mobile menu, dark mode)
