Labs
4 Layouts

Layouts

Objective

  1. Media queries for responsive design.
  2. Flex and grid layout.
  3. Mixing and matching different layouts.
  4. Layout patterns.
  5. Responsive images.

1 Flexbox

You can learn more about flexbox using this guide (opens in a new tab) from CSS-Tricks.

  1. Use an external stylesheet to present the quantum.html and qubit.html pages from 3.1 Basics as shown in Figure 1.1.

    quantum.html
    <head>
  <link rel="stylesheet" href="style.css" />
</head>
    style.css
    * {
  box-sizing: border-box;
}
    • You must modify the structure of your pages to be able to use a flex layout.
    • Notice how the navigation bar layout and three-column main content layout are inadequate for smaller viewport sizes.

Figure 1.1: Flex layout

Complete the Flexbox Froggy (opens in a new tab) game to test your flex layout skills.

  1. Modify your external stylesheet to implement a responsive design with three breakpoints as shown in Figure 1.2.

    style.css
    @media screen and (min-width: 600px) {
}
 
@media screen and (min-width: 1024px) {
}
 
@media screen and (min-width: 1600px) {
}

You can learn more about media queries using this guide (opens in a new tab) from CSS-Tricks.

Figure 1.2: Responsive flex layout

2 Grid

You can learn more about grids using this guide (opens in a new tab) from CSS-Tricks.

  1. Use a grid layout to present the present the quantum.html and qubit.html pages from 3.1 Basics as shown in Figure 2.1.
    • Notice how the two-column grid is inadequate for smaller viewport sizes.

Figure 2.1: Grid layout

  1. Modify your external stylesheet to implement a responsive layout with one breakpoint as shown in Figure 2.2.

Figure 2.2: Responsive grid layout

Complete the Grid Garden (opens in a new tab) game to test your grid layout skills.

3 Patterns

  1. Use a RAM (repeat-auto-minmax) layout pattern (opens in a new tab) to present the gallery of images as shown in Figure 3.

Figure 3: RAM gallery

  1. Explore the collection of layout patterns (opens in a new tab) from web.dev.

4 Extra

  1. Further expand your understanding of media queries by completing these three mini projects (opens in a new tab).
  2. Online challenges:
    1. News homepage (opens in a new tab)
    2. Sunnyside agency landing page (opens in a new tab)

Resources

3 Presentation5 Scripting