YoVDO

Responsive Layouts Course (How To)

Offered By: Treehouse

Tags

HTML & CSS Courses Web Development Courses Web Design Courses Responsive Design Courses Breakpoints Courses Media Queries Courses

Course Description

Overview

Responsive web design is a collection of techniques for building websites that work on multiple screen sizes. In these lessons, we're going to use the foundational principles of responsive design as a framework for thinking about page layout. By the end, you should have a better understanding of how to approach common decisions in responsive design.

What you'll learn

  • Responsive design theory
  • Media queries
  • Breakpoints
  • Page layout

Syllabus

Responsive Theory

In general, responsive design consists of fluid grids, fluid images, and media queries. By this point, you should have already done some responsive design, but understanding the origins and foundational principles will help you step into more advanced concepts.

Chevron 5 steps
  • Course Overview

    1:29

  • What is Responsive Web Design?

    1:27

  • What is Responsive Web Design?

    3 questions

  • Thinking in Relative Units

    2:12

  • Thinking in Relative Units

    4 questions

  • Extra Credit

    If you have an older website that's built using fixed units like pixels, try converting it to relative units, like percentages or ems. Alternatively, you could create a wireframe and then try using percentages to express it using relative units.

Media Queries

Media queries are CSS rules that help us include CSS code only when certain conditions are met. These conditions are called media features, and in the case of responsive web design, the media feature most commonly used is width, or more specifically, min-width. However, media queries actually come with many media features, and width is just one of them.

Chevron 5 steps
  • Media Query Review

    7:17

  • Media Query Review

    4 questions

  • Understanding Breakpoints

    2:53

  • Creating Breakpoints

    3:49

  • Creating Breakpoints

    4 questions

  • Extra Credit

    Fork the template provided in the Workspaces associated with this course, and then remove all the media queries. Next, try creating your own breakpoints based on the content. Finally, test your breakpoints on any web browsing devices you have available.

Responsive Patterns

It's important to consider how different design patterns will translate from one breakpoint to another. Thinking about pieces of atomic design, such as tabs or an image carrousel, is a great way to break down a responsive layout into its component parts.

Chevron 3 steps
  • Responsive Design Patterns

    2:32

  • Flexbox

    8:21

  • Responsive Design Review

    6 questions

  • Extra Credit

    Fork the responsive template included in the Workspaces associated with these lessons. Then, try converting the layout to use flexbox instead of floats.


Related Courses

Front-End Web UI Frameworks and Tools: Bootstrap 4
The Hong Kong University of Science and Technology via Coursera
Build Restaurant Business Website using Google Sites
Coursera Project Network via Coursera
Build Training Website using Google Sites
Coursera Project Network via Coursera
Building High Quality User Experience Using Material UI
NIIT StackRoute via Coursera
Learn Bootstrap
Codecademy