Designing Web Layouts with CSS and Flexbox
INTERACTIVE COURSE

Designing Web Layouts with CSS and Flexbox

Beginner

64 Lessons

10h

Certificate of Completion

Designing Web Layouts with CSS and Flexbox

This course includes:

66 Playgrounds
11 Challenges
13 Quizzes
28 Illustrations

Takeaway Skills

Learn the basics of creating web layouts

Understand how Flexbox works

Get hands on experience in designing mobile-responsive web layouts using Flexbox

Course Overview

In this course, you will get hands-on experience in designing mobile-responsive web layouts using Flexbox. You will start with the basics like the Box Model and the process of layouting. You will then move on to advanced concepts such as Flexbox containers, and aligning individual Flexbox items. Near the end of the course, you will put everything you just learned into practice. You will work on a project that focuses on developing a mobile-first website where you’ll experiment with page layout, headers, fo...Show More

Course Content

1

Getting Started

Course Introduction
CSS Basics
Box Model ReviewThe Process of LayoutingChallenges with Traditional LayoutingTraditional Layouting - Solution with FlexboxMedia Queries, Responsive Design, Mobile-FirstFlexbox Layouting ExerciseFlexbox Layouting SolutionCSS Review QuizCSS Review Summary
2

Using Flexbox Containers

Introduction to Flexbox
Using Flexbox - ExerciseUsing Flexbox - SolutionsFlex-directionFlex-direction ExerciseFlex-direction SolutionJustify-contentJustify-content ExercisesJustify-content SolutionAlign-itemsAlign-items ExercisesAlign-items SolutionFlex-wrapFlex-wrap ExercisesFlex-wrap SolutionFlex-flow: Combining flex-direction and flex-wrapAlign-contentAlign-content ExerciseAlign-content SolutionFlex Container QuizUsing Flexbox Containers - Summary
3

Aligning Individual Flexbox Items

Introduction to Flexbox Item PropertiesAlign-selfAlign-self ExerciseAlign-self SolutionFlex-grow and flex-basisFlex-grow and Flex-basis ExerciseFlex-grow and Flex-basis SolutionFlex-shrinkFlex-shrink ExerciseFlex-shrink SolutionFlex Shorthand NotationFlex Shorthand Notation ExerciseFlex Shorthand Notation SolutionOrderOrder ExerciseOrder SolutionFlex Items QuizAligning Individual Flexbox Items - Summary
4

Designing a Mobile-first Website Using Flexbox

Project Introduction
Page LayoutHeader Component LayoutFooter ComponentMain Banner Title and TaglineBlog post Box LayoutingHighlighted BlogpostsFlexbox Wrapping in Incomplete RowsForm Input Field Markup and LayoutContact Form MarkupRemoving the Layout IndicatorsFinal QuizSummary
5

Flexbox Conclusion and Next Steps

Conclusion and Next Steps
COURSE AUTHOR
Zsolt Nagy

How You'll Learn

Hands-on Coding Environments

You don’t get better at swimming by watching others. Coding is no different. Practice as you learn with live code environments inside your browser.

2x Faster Learning — With No Setup

Videos are holding you back. Educative‘s interactive, text-based lessons accelerate learning — no setup, downloads, or alt-tabbing required.

AI-Powered Learning

Learn faster and smarter with adaptive AI tools embedded in every Educative course.

Progress You Can Show

Built-in assessments let you test your skills. Completion certificates let you show them off.

FOR TEAMS

Interested in this course for your business or team?

Unlock this course (and 1,000+ more) for your entire org with DevPath