CSS Fundamentals Curriculum

Public curriculum preview for visitors and enrolled students. Use this page to evaluate module scope, outcomes, and learning path.

Download PDFBack to Course
Curriculum

CSS Fundamentals

Style websites with layouts, colors, typography, and responsive design using modern CSS.

Duration: 12 Weeks
Level: Beginner
Study Time: 2 hours/week + labs
School: Hexadigitall Academy

Welcome to CSS Fundamentals! 🎓

This curriculum is designed to take you from core understanding to confident delivery through weekly applied practice, measurable outcomes, and portfolio evidence.

Each week builds progressively with practical tasks, implementation checkpoints, and reflection points so you can convert knowledge into repeatable professional performance.

Your success is our priority. Stay consistent with weekly execution, document your work, and use feedback loops to continuously improve your delivery quality.

Essential Resources

  • Language-specific style guides, design patterns reference, and debugging tools inventory
  • Testing frameworks, mock libraries, and performance profiling instructions for your tech stack
  • Refactoring patterns, security best practices, and code quality tooling configurations

Learning Roadmap

  • Early Weeks: Language fundamentals, testing basics, and design patterns
  • Middle Weeks: Advanced architectures, performance optimization, and debugging
  • Late Weeks: Production systems, scalability, and cross-platform deployment
  • Typography, Color, and Visual Hierarchy
  • Flexbox Fundamentals for One-Dimensional Layouts
  • Responsive Design with Media Queries
  • CSS Grid for Two-Dimensional Layouts
  • Complex Layout Patterns and Alignment Techniques
  • Transitions, Transforms, and Micro-Interactions
  • Keyframe Animations and Motion Basics
  • Component Styling, Naming Conventions, and Reuse
  • Capstone: Responsive Multi-Section Landing Page

Detailed Weekly Curriculum

Each week includes outcomes and practical lab work aligned to the curriculum structure.

Week 1

CSS Syntax, Selectors, Cascade, and Specificity

2 hours/week + labs
Learning Outcomes
  • Identify the principles of CSS Syntax, Selectors, Cascade, and Specificity and link them to course outcomes through structured core competency milestones.
  • Explain CSS Syntax, Selectors, Cascade, and Specificity in a guided scenario using realistic tools, constraints, and quality gates.
  • Apply trade-offs, risks, and decision points for CSS Syntax, Selectors, Cascade, and Specificity, then record rationale for stakeholder review.
  • Document a portfolio-ready delivery strategy memo for CSS Syntax, Selectors, Cascade, and Specificity with measurable success criteria and next actions.
  • Track measurable progress using rubric scores, defect/risk trends, and evidence completeness each week.
  • Run a short retrospective focused on what to retain, improve, and scale into the following week.
  • Incorporate peer or mentor feedback and revise the week deliverable to professional publication quality.
  • Publish the week output into your cumulative portfolio with concise outcome narrative and proof artifacts.
Week 2

Box Model, Display, and Normal Document Flow

2 hours/week + labs
Learning Outcomes
  • Identify the principles of Box Model, Display, and Normal Document Flow and link them to course outcomes through structured core competency milestones.
  • Explain Box Model, Display, and Normal Document Flow in a guided scenario using realistic tools, constraints, and quality gates.
  • Apply trade-offs, risks, and decision points for Box Model, Display, and Normal Document Flow, then record rationale for stakeholder review.
  • Document a portfolio-ready delivery strategy memo for Box Model, Display, and Normal Document Flow with measurable success criteria and next actions.
  • Track measurable progress using rubric scores, defect/risk trends, and evidence completeness each week.
  • Run a short retrospective focused on what to retain, improve, and scale into the following week.
  • Incorporate peer or mentor feedback and revise the week deliverable to professional publication quality.
  • Publish the week output into your cumulative portfolio with concise outcome narrative and proof artifacts.
Week 3

Spacing, Sizing, and Positioning Systems

2 hours/week + labs
Learning Outcomes
  • Identify the principles of Spacing, Sizing, and Positioning Systems and link them to course outcomes through structured core competency milestones.
  • Explain Spacing, Sizing, and Positioning Systems in a guided scenario using realistic tools, constraints, and quality gates.
  • Apply trade-offs, risks, and decision points for Spacing, Sizing, and Positioning Systems, then record rationale for stakeholder review.
  • Document a portfolio-ready delivery strategy memo for Spacing, Sizing, and Positioning Systems with measurable success criteria and next actions.
  • Track measurable progress using rubric scores, defect/risk trends, and evidence completeness each week.
  • Run a short retrospective focused on what to retain, improve, and scale into the following week.
  • Incorporate peer or mentor feedback and revise the week deliverable to professional publication quality.
  • Publish the week output into your cumulative portfolio with concise outcome narrative and proof artifacts.
Week 4

Typography, Color, and Visual Hierarchy

2 hours/week + labs
Learning Outcomes
  • Identify the principles of Typography, Color, and Visual Hierarchy and link them to course outcomes through structured core competency milestones.
  • Explain Typography, Color, and Visual Hierarchy in a guided scenario using realistic tools, constraints, and quality gates.
  • Apply trade-offs, risks, and decision points for Typography, Color, and Visual Hierarchy, then record rationale for stakeholder review.
  • Document a portfolio-ready delivery strategy memo for Typography, Color, and Visual Hierarchy with measurable success criteria and next actions.
  • Track measurable progress using rubric scores, defect/risk trends, and evidence completeness each week.
  • Run a short retrospective focused on what to retain, improve, and scale into the following week.
  • Incorporate peer or mentor feedback and revise the week deliverable to professional publication quality.
  • Publish the week output into your cumulative portfolio with concise outcome narrative and proof artifacts.
Week 5

Flexbox Fundamentals for One-Dimensional Layouts

2 hours/week + labs
Learning Outcomes
  • Apply the principles of Flexbox Fundamentals for One-Dimensional Layouts and link them to course outcomes through structured core competency milestones.
  • Analyze Flexbox Fundamentals for One-Dimensional Layouts in a guided scenario using realistic tools, constraints, and quality gates.
  • Evaluate trade-offs, risks, and decision points for Flexbox Fundamentals for One-Dimensional Layouts, then record rationale for stakeholder review.
  • Document a portfolio-ready delivery strategy memo for Flexbox Fundamentals for One-Dimensional Layouts with measurable success criteria and next actions.
  • Track measurable progress using rubric scores, defect/risk trends, and evidence completeness each week.
  • Run a short retrospective focused on what to retain, improve, and scale into the following week.
  • Incorporate peer or mentor feedback and revise the week deliverable to professional publication quality.
  • Publish the week output into your cumulative portfolio with concise outcome narrative and proof artifacts.
Week 6

Responsive Design with Media Queries

2 hours/week + labs
Learning Outcomes
  • Apply the principles of Responsive Design with Media Queries and link them to course outcomes through structured core competency milestones.
  • Analyze Responsive Design with Media Queries in a guided scenario using realistic tools, constraints, and quality gates.
  • Evaluate trade-offs, risks, and decision points for Responsive Design with Media Queries, then record rationale for stakeholder review.
  • Document a portfolio-ready delivery strategy memo for Responsive Design with Media Queries with measurable success criteria and next actions.
  • Track measurable progress using rubric scores, defect/risk trends, and evidence completeness each week.
  • Run a short retrospective focused on what to retain, improve, and scale into the following week.
  • Incorporate peer or mentor feedback and revise the week deliverable to professional publication quality.
  • Publish the week output into your cumulative portfolio with concise outcome narrative and proof artifacts.
Week 7

CSS Grid for Two-Dimensional Layouts

2 hours/week + labs
Learning Outcomes
  • Apply the principles of CSS Grid for Two-Dimensional Layouts and link them to course outcomes through structured core competency milestones.
  • Analyze CSS Grid for Two-Dimensional Layouts in a guided scenario using realistic tools, constraints, and quality gates.
  • Evaluate trade-offs, risks, and decision points for CSS Grid for Two-Dimensional Layouts, then record rationale for stakeholder review.
  • Document a portfolio-ready delivery strategy memo for CSS Grid for Two-Dimensional Layouts with measurable success criteria and next actions.
  • Track measurable progress using rubric scores, defect/risk trends, and evidence completeness each week.
  • Run a short retrospective focused on what to retain, improve, and scale into the following week.
  • Incorporate peer or mentor feedback and revise the week deliverable to professional publication quality.
  • Publish the week output into your cumulative portfolio with concise outcome narrative and proof artifacts.
Week 8

Complex Layout Patterns and Alignment Techniques

2 hours/week + labs
Learning Outcomes
  • Apply the principles of Complex Layout Patterns and Alignment Techniques and link them to course outcomes through structured core competency milestones.
  • Analyze Complex Layout Patterns and Alignment Techniques in a guided scenario using realistic tools, constraints, and quality gates.
  • Evaluate trade-offs, risks, and decision points for Complex Layout Patterns and Alignment Techniques, then record rationale for stakeholder review.
  • Document a portfolio-ready delivery strategy memo for Complex Layout Patterns and Alignment Techniques with measurable success criteria and next actions.
  • Track measurable progress using rubric scores, defect/risk trends, and evidence completeness each week.
  • Run a short retrospective focused on what to retain, improve, and scale into the following week.
  • Incorporate peer or mentor feedback and revise the week deliverable to professional publication quality.
  • Publish the week output into your cumulative portfolio with concise outcome narrative and proof artifacts.
Week 9

Transitions, Transforms, and Micro-Interactions

2 hours/week + labs
Learning Outcomes
  • Analyze the principles of Transitions, Transforms, and Micro-Interactions and link them to course outcomes through structured core competency milestones.
  • Evaluate Transitions, Transforms, and Micro-Interactions in a guided scenario using realistic tools, constraints, and quality gates.
  • Create trade-offs, risks, and decision points for Transitions, Transforms, and Micro-Interactions, then record rationale for stakeholder review.
  • Defend a portfolio-ready delivery strategy memo for Transitions, Transforms, and Micro-Interactions with measurable success criteria and next actions.
  • Track measurable progress using rubric scores, defect/risk trends, and evidence completeness each week.
  • Run a short retrospective focused on what to retain, improve, and scale into the following week.
  • Incorporate peer or mentor feedback and revise the week deliverable to professional publication quality.
  • Publish the week output into your cumulative portfolio with concise outcome narrative and proof artifacts.
Week 10

Keyframe Animations and Motion Basics

2 hours/week + labs
Learning Outcomes
  • Analyze the principles of Keyframe Animations and Motion Basics and link them to course outcomes through structured core competency milestones.
  • Evaluate Keyframe Animations and Motion Basics in a guided scenario using realistic tools, constraints, and quality gates.
  • Create trade-offs, risks, and decision points for Keyframe Animations and Motion Basics, then record rationale for stakeholder review.
  • Defend a portfolio-ready delivery strategy memo for Keyframe Animations and Motion Basics with measurable success criteria and next actions.
  • Track measurable progress using rubric scores, defect/risk trends, and evidence completeness each week.
  • Run a short retrospective focused on what to retain, improve, and scale into the following week.
  • Incorporate peer or mentor feedback and revise the week deliverable to professional publication quality.
  • Publish the week output into your cumulative portfolio with concise outcome narrative and proof artifacts.
Week 11

Component Styling, Naming Conventions, and Reuse

2 hours/week + labs
Learning Outcomes
  • Analyze the principles of Component Styling, Naming Conventions, and Reuse and link them to course outcomes through structured core competency milestones.
  • Evaluate Component Styling, Naming Conventions, and Reuse in a guided scenario using realistic tools, constraints, and quality gates.
  • Create trade-offs, risks, and decision points for Component Styling, Naming Conventions, and Reuse, then record rationale for stakeholder review.
  • Defend a portfolio-ready delivery strategy memo for Component Styling, Naming Conventions, and Reuse with measurable success criteria and next actions.
  • Track measurable progress using rubric scores, defect/risk trends, and evidence completeness each week.
  • Run a short retrospective focused on what to retain, improve, and scale into the following week.
  • Incorporate peer or mentor feedback and revise the week deliverable to professional publication quality.
  • Publish the week output into your cumulative portfolio with concise outcome narrative and proof artifacts.
Week 12

Capstone: Responsive Multi-Section Landing Page

2 hours/week + labs
Learning Outcomes
  • Analyze the principles of Capstone: Responsive Multi-Section Landing Page and link them to course outcomes through structured core competency milestones.
  • Evaluate Capstone: Responsive Multi-Section Landing Page in a guided scenario using realistic tools, constraints, and quality gates.
  • Create trade-offs, risks, and decision points for Capstone: Responsive Multi-Section Landing Page, then record rationale for stakeholder review.
  • Defend a portfolio-ready delivery strategy memo for Capstone: Responsive Multi-Section Landing Page with measurable success criteria and next actions.
  • Track measurable progress using rubric scores, defect/risk trends, and evidence completeness each week.
  • Run a short retrospective focused on what to retain, improve, and scale into the following week.
  • Incorporate peer or mentor feedback and revise the week deliverable to professional publication quality.
  • Publish the week output into your cumulative portfolio with concise outcome narrative and proof artifacts.

Capstone Projects

Project 1: Responsive Feature Section System

Create a reusable set of responsive feature sections with consistent spacing, typography, and component states.

  • Three reusable section templates
  • Documented spacing and type scale tokens
  • Cross-device screenshot comparison

Project 2: Dashboard Layout and Component Library

Build a dashboard-style interface using grid and flexbox, including reusable cards, tables, and action bars.

  • Complex two-dimensional layout implementation
  • Reusable component class architecture
  • Interaction and accessibility checklist

Project 3: Capstone: Production-Ready Landing Page

Deliver a polished multi-section landing page that demonstrates responsive design, motion restraint, and maintainable CSS architecture.

  • Complete responsive page across mobile, tablet, and desktop
  • Accessible interaction and reduced-motion support
  • Final style guide and implementation walkthrough