Author
Released
10/24/2018- What is responsive design?
- The responsive page structure
- Accessibility and responsive design
- Using media queries
- Designing with CSS Grid
- Designing with CSS Flexbox
Skill Level Intermediate
Duration
Views
- [Clarissa] Back in the olden days of web design, there were very few ways to move things around on the screen, and we had to rely on hacks to get things to look the way we wanted. Now, with so many more different devices to design for, we face new challenges, but HTML and CSS have tons of new features and properties to help us do our jobs. Hi, I'm Clarissa Peterson, and welcome to this course on responsive layout. In this course, we'll learn the basics of web page layout, including CSS Grid and Flexbox. We'll start out with some of the basics of page structure and layout.
Then we'll dive into the details of CSS Grid Layout and Flexbox, including all the properties you'll need for each. Then we'll go through examples of a few different ways to lay out a webpage using Grid, Flexbox, and both of them together. Now let's get started with Responsive Layout.
Related Courses
-
Introduction
-
What you should know1m 7s
-
1. Basic Page Structure
-
Viewport2m 22s
-
Required CSS3m 39s
-
Display property2m 25s
-
Positioning4m 59s
-
Floats2m 37s
-
Units3m 33s
-
-
2. Responsive Layout
-
Responsive design1m 55s
-
Media queries6m 25s
-
Flexbox and Grid1m 9s
-
Accessibility5m 48s
-
Browser support1m 36s
-
-
3. Grid Layout
-
Intro to CSS Grid2m 10s
-
Defining rows and columns3m 55s
-
Grid gap1m 52s
-
Sizing rows and columns5m 52s
-
Placing grid items5m 51s
-
Grid alignment overview1m 13s
-
Aligning tracks3m 46s
-
Variable columns4m 45s
-
Grid template areas4m 12s
-
Naming grid lines2m 47s
-
Ordering grid items1m 16s
-
Solution: The rainbow box6m 42s
-
-
4. Flexbox
-
Defining a flexbox container1m 53s
-
Direction3m 36s
-
Wrapping2m 30s
-
Ordering flex items1m 28s
-
Flexbox alignment overview1m 39s
-
Aligning items on main axis3m 16s
-
Aligning items on cross axis3m 35s
-
Aligning lines on cross axis3m 15s
-
Challenge: Floats to flexbox1m 21s
-
Solution: Floats to flexbox8m 17s
-
-
5. Layout Design
-
Centering content1m 54s
-
3-column layout with flexbox3m 14s
-
12-column layout setup4m 7s
-
-
Conclusion
-
Next steps35s
-
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.
CancelTake notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.
Share this video
Embed this video
Video: Go cross-platform with responsive design