Aesthetic
start interview

Creating a Responsive Design Webpage

130 CQ
14 Lessons
Course Info
Previous...
  • Playing
    16 CQ
    6. Setting Up a Responsive Layout
    A lesson with Brian Wood Training
    View lesson

    Now that you understand media queries and mobile-first design, start styling a responsive design webpage yourself with the help of web developer Brian Wood.

    Setting Up a Responsive Layout
    with Brian Wood Training

    Now that you understand media queries and mobile-first design, start styling a responsive design webpage yourself with the help of web developer Brian Wood.

  • Playing
    11 CQ
    7. Web Design Fonts & Font Sizing
    A lesson with Brian Wood Training
    View lesson

    Font size is imperative to consider when developing a reader-friendly website. Learn how to style fonts by size and by style in CSS to best fit your webpages!

    Web Design Fonts & Font Sizing
    with Brian Wood Training

    Font size is imperative to consider when developing a reader-friendly website. Learn how to style fonts by size and by style in CSS to best fit your webpages!

  • Playing
    11 CQ
    8. Working with Responsive Images
    A lesson with Brian Wood Training
    View lesson

    Don’t forget about images when creating a responsive design website! Learn how to write CSS that tells images to scale up or down depending on browsing device.

    Working with Responsive Images
    with Brian Wood Training

    Don’t forget about images when creating a responsive design website! Learn how to write CSS that tells images to scale up or down depending on browsing device.

  • Playing
    14 CQ
    9. Adding SVG to a Responsive Design
    A lesson with Brian Wood Training
    View lesson

    Having a responsive design website means one thing: scaling. What better way to scale than with a scalable vector graphic? Learn about SVGs in this lesson!

    Adding SVG to a Responsive Design
    with Brian Wood Training

    Having a responsive design website means one thing: scaling. What better way to scale than with a scalable vector graphic? Learn about SVGs in this lesson!

  • Playing
    7 CQ
    10. Adding Icon Fonts to a Webpage
    A lesson with Brian Wood Training
    View lesson

    Want custom icons that work across all browsers and devices? Increase traffic to your various social media sites by learning how to use icon fonts.

    Adding Icon Fonts to a Webpage
    with Brian Wood Training

    Want custom icons that work across all browsers and devices? Increase traffic to your various social media sites by learning how to use icon fonts.

More...
  • Recommended Recommended
  • History & In Progress History
  • Browse Library
  • Most Popular Library

Get Personalized Recommendations

Let us help you figure out what to learn! By taking a short interview you’ll be able to specify your learning interests and goals, so we can recommend the perfect courses and lessons to try next.

Start Interview

    You don't have any lessons in your history.
    Just find something that looks interesting and start learning!

    2 Comments
    500 characters max

    Andy P
    Hi Brian - Quick question. I created another section underneath "Contain". Instead of a two column grid it is a three column grid called "Trio". How to I keep the 3 column grid lined up in a row underneath the section "Contain"? It seems to shift based on the content length of the divs in "Contain" and screws up the grid? Does that make sense?
    appreciate appreciated
     –  reply
     –  delete

    Brian Wood Training
    Hi Andy - sorry for the delay, been on vacation with my family :) So, first I assume that you are applying three same size columns? If so, you are applying the ".span_4_of_12" style to get 3 equal columns. To make sure they are the same height (at least), you could add a "min-height: 300px" (or whatever you want) to the span_4... class style. See if that helps, and let me know.
    appreciate appreciated
     –  reply
     –  delete
    500 characters max