CSS and Responsive Design
MotiGraph
AR Login Start Your Journey
AR Login Start Your Journey
Web Foundation Beginner Certificate

CSS and Responsive Design

Styling as a layout system. The box model, Flexbox and Grid, responsive design with media queries and a mobile-first mindset, and the transitions and variables that keep a design consistent.

6 lessons 330 min
  • CSS
  • Flexbox
  • Grid
  • Responsive
Skills

What You Will Learn in This Course

Lay out a page with Flexbox and Grid.
Build responsive, mobile-first designs.
Use custom properties for a consistent system.
Add tasteful transitions and animations.

About This Course

Styling as a layout system. The box model, Flexbox and Grid, responsive design with media queries and a mobile-first mindset, and the transitions and variables that keep a design consistent.

Requirements

  • HTML5.

Who It Is For

  • Beginners to the web.
Curriculum

Course Content

6 items · 1 sections

  1. 01 Selectors, colours, fonts and the box model Preview 50 min
  2. 02 Display, position and Flexbox 55 min
  3. 03 CSS Grid 55 min
  4. 04 Responsive design, media queries, mobile-first 55 min
  5. 05 Transitions, animations and CSS variables 45 min
  6. 06 Project: a responsive business website 70 min
Certified

Certificates You Can Earn

Finish your course and receive an accredited MotiGraph certificate you can add to your CV and share with employers.

MotiGraph certificate sample
MotiGraph certificate sample
MotiGraph certificate sample
MotiGraph certificate sample
MotiGraph certificate sample
MotiGraph certificate sample
MotiGraph certificate sample
MotiGraph certificate sample
MotiGraph certificate sample
MotiGraph certificate sample
MotiGraph certificate sample
MotiGraph certificate sample
MotiGraph certificate sample
MotiGraph certificate sample
MotiGraph certificate sample
MotiGraph certificate sample
MotiGraph certificate sample
MotiGraph certificate sample
MotiGraph certificate sample
MotiGraph certificate sample
MotiGraph certificate sample
MotiGraph certificate sample
MotiGraph certificate sample
MotiGraph certificate sample
MotiGraph certificate sample
MotiGraph certificate sample
MotiGraph certificate sample