Milestone Completed • Ready for 03-JavaScript

CSS Styling & Layout Architecture Hub

A structured archive documenting my journey across CSS foundations: from selectors and box model mechanics to custom Flexbox, CSS Grid layouts, keyframe animations, and 4 complete web projects.

Explore 4 Projects Browse 24 Practices Download CSS Notes (PDF)

24 Targeted Practice Labs

04 Independent Web Projects

39+ Modular CSS Stylesheets

PDF CSS Quick Reference Notes

🚀 Production Builds

02. Independent Web Projects

Four standalone multi-section and multi-page interfaces applying styling, responsive grids, and layout systems.

Aurora Café

Late-Night Coffee House Landing Page

Food & Beverage

Modern dark-themed café landing page featuring sticky frosted-glass navigation, signature drink menu cards with hover elevations, opening hours table, and responsive breakpoints[cite: 13].

Key Implementations

Sticky blur navigation with backdrop-filter
3-column card grid with hover translate
Opening hours tabular data & contact card
Fluid breakpoints at 64rem, 48rem, and 30rem

CSS Techniques

CSS Grid Flexbox Sticky Nav Media Queries

Live Preview Local HTML style.css

Ben 10 Photo Album

Themed Gallery & Slide-Out Sidebar

Media Gallery

Categorized pop-culture photo album site organized into 5 photo galleries with an off-canvas drawer controlled via the CSS checkbox hack and keyframe icon rotation[cite: 13].

Key Implementations

5x2 CSS Grid photo showcase galleries
Checkbox-hack off-canvas slide-out sidebar
@keyframes crossRot 90deg close icon animation
JS helper for auto-closing drawer on item click

CSS Techniques

CSS Grid Fixed Drawer Keyframes clamp() Type

Live Preview Local HTML style.css

Get Together

Unified Campus Platform Multi-Page UI

Campus Platform

Large-scale campus interface with 13 modular stylesheets covering the hero, features, academics, upcoming events, and dedicated Login & Sign-Up portals[cite: 10, 13].

Key Implementations

13 modular stylesheets in CSS-Files/
Glassmorphic topbar with :has(#menu:checked) drawer
Split-screen responsive auth forms (Login & Sign-up)
Event card grids with calendar date badges

CSS Techniques

Modular CSS :has() Selector Form UI Multi-Breakpoints

Live Preview Home Login Sign Up

Spotify Clone v1.0

Desktop Web Player UI Recreation

Web App UI

Desktop application layout featuring an independent dual-pane scrollable architecture, scroll-driven sticky nav tint, and fixed bottom music player with custom range styling[cite: 12].

Key Implementations

Fixed 25vw sidebar + 75vw scrollable content shell
Modern animation-timeline: scroll() sticky header
Persistent fixed audio player with track info & controls
Custom green WebKit range progress slider

CSS Techniques

App Shell Scroll-Driven CSS WebKit Pseudo Fixed Elements

Live Preview Local HTML style.css

📚 01. Course Practices

24 Practice Exercises

Systematic exercises progressing from basic selectors to flexbox alignment matrices, CSS Grid spanning, and keyframe animations.

Concept Progression Matrix

Exercises Q01 through Q24[cite: 21, 22]

Range	Focus Area	Core Properties & Implementations
Q01–Q02	Foundations & Colour	Inline, internal & external stylesheets, hex/rgb/rgba, Ozymandias poem typography
Q03–Q04	Selectors & Combinators	Universal, element, ID, class, descendant, child (`>`), sibling (`+`), attribute selectors
Q05–Q06	Typography & Pseudo-Selectors	Tony Stark MCU wiki layout, `:hover`, `:focus`, `:checked`, `:nth-child`, `::selection`
Q07–Q08	Box Model & Traffic Light	Dimensions, padding, border-radius, margins & complete 3-state Traffic Light UI component
Q09–Q10	Transforms & Transitions	`rotate()`, `skew()`, `scale()`, `translateY()` transitions & interactive wedding profile cards
Q11–Q12	Positioning Contexts	`static`, `relative`, `absolute`, and `fixed` demos + "Keep Smiling" face composition
Q13–Q16	Flexbox Playgrounds (Pt 1–4)	Flex container foundations, justify-content main-axis alignment, cross-axis align-items, flex-wrap, and align-content
Q17–Q18	Flexbox Applications	3x3 keypad alignment matrix & SVMCM multi-tier responsive navbar with flyout sub-menus
Q19–Q22	CSS Grid Playgrounds (Pt 1–4)	Track sizing, `repeat()`, `fr` units, column/row spans, and complete justify/align/place alignment tasks
Q23–Q24	Keyframes & Pet Adoption UI	Chained border color cycling keyframes, preloader overlay spinner, and responsive Pet Adoption page

Showing 24 exercises

📝 03. CSS Notes

CSS Course Revision Notes (PDF)

A dedicated reference document compiling all CSS concepts studied throughout the course. Covers selector specificity calculation, box model margin collapsing, positioning schemes, Flexbox vs. Grid layout decision rules, and keyframe animations.

Download Notes (PDF) Open PDF in Tab View README.md

PDF DOCUMENT

CSS Mastery & Reference Notes

Comprehensive lecture notes, code snippets, syntax rules, and layout cheatsheets.

CSS Specificity & Cascade Hierarchy
Box Model: content-box vs. border-box
Positioning: static, relative, absolute, fixed, sticky
Flexbox & Grid Sizing Matrices
Transforms, Transitions & @keyframes

CSS-Notes.pdf Get File

📁 File Architecture

Repository Directory Structure

Clean modular layout separating course practices, independent builds, CSS notes, and root files.

02-CSS Directory Tree

02-CSS/
│
├── 01-Course-Practices/
│   ├── Attachments/
│   ├── CSS-Files/          (02-CSS-Colour-System.css → 24-Pet-Adoption-Page.css)
│   └── HTML-Files/         (01-CSS-and-CSS-Colors.html → 24-Pet-Adoption-Page.html)
│
├── 02-Aurora-Cafe-Site/
│   ├── Assets/
│   ├── index.html
│   └── style.css
│
├── 03-Ben10-Photo-Album-Site/
│   ├── Attachments/
│   ├── index.html
│   └── style.css
│
├── 04-Get-Together-Site/
│   ├── Assets/
│   ├── CSS-Files/          (13 modular stylesheets)
│   ├── HTML-Files/         (Login-Page.html, Signup-Page.html)
│   └── index.html
│
├── 05-Spotify-Clone-v1.0/
│   ├── Assets/
│   ├── index.html
│   └── style.css
│
├── CSS-Notes.pdf           (Dedicated Revision Notes PDF)
├── README.md               (Repository Documentation)
├── index.html              (Repository Showcase Hub)
├── style.css
└── app.js

Technologies & Standards

HTML5
Semantic page regions, accessible forms, audio player markups, and responsive media tags.
CSS3
Custom CSS variables, Flexbox, Grid, @keyframes, and scroll-driven timelines[cite: 12].
JavaScript
DOM query helpers, mobile menu state management, and real-time exercise search.

5-Step Learning Approach

1 Learn core specifications

2 Solve targeted practices (Q1–Q24)

3 Build independent web projects

4 Inspect box models & breakpoints

5 Refine modular stylesheet architecture