Web developmentBeginner Popular

CSS Essentials

Design interfaces that adapt to every screen.

Go from unstyled HTML to confident layouts. Learn the cascade, the box model, Flexbox, Grid, positioning, custom properties, form states, keyframes and responsive design by rebuilding real interface patterns, then ship a small design system.

16 lessons 4 hours Certificate included Self-paced

Start the first lesson View curriculum

Reviewed and updated October 2026 · Free to start

What you will learn

By the end, you can do this.

Style any HTML document with confidence
Build layouts with Flexbox, Grid and positioning
Theme interfaces with custom properties
Create responsive, accessible form states
Add motion that respects user preferences
Ship a small design system you can extend

Curriculum

16 lessons in 6 modules

464 practice drills included for extra repetition

0/16 complete

01Selectors and the cascadeHow CSS decides which rule wins, and how to write selectors that stay maintainable. 12 min 02The box modelContent, padding, border and margin — the four boxes behind every element. 13 min 03Color, units and typeBuild a readable, accessible type scale with modern CSS color and relative units. 12 min

04Normal flow and displayLearn how block and inline elements flow by default and how the display property changes that layout. 10 min 05Spacing and sizingUnderstand margin, padding, box-sizing and units so your boxes end up the size you expect. 12 min 06Focus and accessibilityKeep your pages usable for everyone with a visible focus state and readable contrast. 10 min 07Debugging CSSUse devtools and the cascade to work out why a style is not applying. 12 min

08FlexboxAlign and distribute items along one axis with the layout model you will use every day. 15 min 09CSS GridBuild two-dimensional layouts with named areas and fluid tracks. 16 min 10Responsive designDesign mobile-first and add breakpoints only where the content demands it. 14 min

11Positioning and stackingPin badges, keep toolbars visible and control which layer wins. 13 min 12Custom properties and themingDefine tokens once, then let the cascade theme every component. 13 min 13Forms and statesMake inputs obvious in every state, especially with a keyboard. 14 min

14Transitions and motionAdd feedback with motion that feels fast, purposeful and accessible. 11 min 15Transforms and keyframesMove, scale and rotate without triggering layout, then choreograph a sequence. 14 min

16Project: a design systemDefine tokens, build components and ship every state as one coherent kit. 25 min

Certification

Finish the course. Prove the skill.

Complete every lesson, then pass a timed assessment to earn the CSS Essentials Certificate. Each credential has a unique ID and a QR code that resolves to a live public record.

16 randomized questions
32 minute limit · 80% to pass
3 attempts per enrolment
Verifiable by QR or credential ID

Certification details Verify a credential

Pro members get five certification attempts and unlimited timed mock exams. Compare Pro

EduByte.tech

EduByte · Skills certificationIssued 26 Oct 2026

This certifies that

Your name

has successfully completed the assessed program

CSS Essentials

Style any HTML document with confidenceBuild layouts with Flexbox, Grid and positioningTheme interfaces with custom properties

CSS Essentials

By the end, you can do this.

16 lessons in 6 modules

Finish the course. Prove the skill.

What to learn next.

Actix Web

AI Literacy for Developers

Apache Airflow