Responsive Design

Kickoff 22 minutes

1. One Code To Rule Them All 3 minutes

Time to respond to responsive design! This course will progress your HTML skills from basic to intermediate and teach you what you need to produce beautiful websites on a variety of platforms.

2. A Room With A Project View 2 minutes

Here you'll find the overview of the goals and different projects we're going to be working on throughout the course which will help you develop coding confidence, front-end optimization, and responsive web design skills.

3. If You're Responsive And You Know It, Fit To Frame 9 minutes

In this lesson, we take a look at what responsive web design actually looks like - and what it doesn't. You'll learn why it's important to adjust content and functionality for different platform views, and also the value of looking at cute dogs.

4. Three Ingredients: Sugar, Spice, And Ethan Marcotte 8 minutes

In this lesson, we dive into the three key ingredients of responsive web design - flexible grids, imagery, and media queries - are. And don't worry, we do it with more puppies and some freestyle rhyming.

5. Download All The Projects

6. Send yourself a weekly reminder to learn

"We are what we do repeatedly, Excellence is not an act, but a habit" - Aristotle

Project 1: Happy Birthday Alexis! about 1 hour

1. Domain Names: The Gift That Keeps On Giving

Welcome to your first project, and aren't you looking younger! In this lesson I'll introduce the birthday page we're going to build, which will utilize HTML5; media queries; flexible images; CSS, and much more.

2. Challenge 1: Get Your Mobile Revving

In this lesson, we cover the benefits of a mobile-first approach to page design and the differences you should be aware of between platforms. Then, we get our hands dirty and start actually playing with unicorns. Or coding. That's what we mean. Coding.

3. Challenge 1 Answers: What's In The Box?

Now that you've built out the body of the invitation yourself, we'll review how the code should look and pat you on the back for successfully completing the first part of your project. Metaphorically "pat" you. (Can you feel it? Good job!)

4. Have Your Cake And Make It Flexible Too

In this lesson, we learn how to be 100% flexible - or at least how to ensure our images look that way. This is the first truly responsive code you're going to design.

5. Own The Newest Style (Sheet)

Welcome to the wonderful world of Media Queries! In this lesson, we cover the principal of specificity and how to create conditional CSS sheets to keep your images beautiful at every size.

6. Keep Floating On

We step Aside for a moment and talk about some cool new elements of HTML5. Then we keep the magic rolling and figure out how to float images in both our mobile and desktop views.

7. Get Embed With Google Maps

Just in case you need us to map it out for you...we quickly review how to add embeds into your code.

8. Best Practices: Keeping Your Code Ship-Shape

Time to tidy-up, make the final adjustments, and streamline our code. And also, apparently, to find multiple ways to enjoy an intermission.

9. Pixels, Ems, and Rems (Oh My!)

In this lesson, we take a moment to go over the differences between Pixels, Ems, and Rems, and talk about which unit is the most useful for creating responsive code. Hint: No need to ask What's the Frequency, Kenneth or be Losing My Religion over the Em/Rem debate. Everybody hurts.

10. Divide And Conquer The Rems

Can you calculate how easy it is to adjust your rems? Don't worry. We cover everything you need to know to use rems and keep your page on-spec.

11. Rem Review And Get Ready

Here, we review some of the ways you could have adjusted your code to include rems, as well as how to set the background image for your desktop view.

12. Challenge: A Very Merry Live Birthday Site - By You!

Congratulations! You made it to the end of this first project. Now, it's time to create a birthday site all on your own.

Project 2: AirCnC - Rent a Dog for the Day about 1 hour

1. Is It Time for Dogs to Have a Social Network of Their Own?

In this lesson, we get started on our next project, and consider one of the great societal questions of our time.

2. A Royale With Dogs

Before you head off to complete AirCnC, Chris gives you some options for how to tackle the project, good mindsets to have as you code, and more Pulp Fiction references.

3. All Designs Go To <Section>

In this lesson, we review the header setup and then talk about how to read our design mock-ups. We start thinking strategically about the comp breaks into sections and divs, and how those relate on different platforms.

4. Get Friendly With The Layout

Now it's time to buckle down and write some responsive code. You can work on your own first and come back to this, or follow along with Chris as we work through inputting all the assets into our first section.

5. Responsive Layout Part 2: CSS Boogaloo

Now we turn to the CSS and style our first section with a lot of trial and error, tweaking, and tasty beverages.

6. Media Queries: How To Reach Your Breakpoint(s)

In this lesson, we set up our media queries so we can begin coding the desktop version of our site.

7. Layout Continued: Everything You Code In A Box To The Left

We dive into creating responsive design within our media query and arrange columns so that all our content (center) aligns with the design layout.

8. Rems Vs. Pixels: When To Be Firm

At this point, we're ready to convert our pixels to rems and make our code as responsive as possible. But before we do talk, we talk about when and why to convert to rems, and where and how to get the most out of them. Who? Chris, of course.

9. Fetch! The Rest Of The Site

We wrap up the first section of our AirCnC project, and challenge you to keep going! Keep coding, and finish up the site so cats and canines alike finally get the responsive platform they deserve.

Project 3: Responsive Prototyping a Landing Page 15 minutes

1. This Ain't No Disco, It's A Teaching Opportunity

Welcome to our third major challenge! No, really. We hit the ground running with an opportunity for you to pass on what you've learned about responsive design so far. That and Chris' taste in music.

2. Time For A Breakpoint

Don't put your feet up just yet! In this lesson we discuss how to structure your media query breakpoints so that they're easy to maintain and adaptive to all kinds of different platforms.

3. The Place For A Placeholder

In this lesson, we talk about how to toggle between different images optimized for different view sizes using a couple of techniques - .book-image and srcset.

4. Hide And Display (None)

In this video, we explore the kinds of customization you might want to think about for your mobile platform - how to hide functions, or change content to fit a different screen size. It's all about the optimization, yo.

Project 4: AirCnC - Dashboard - Fix This Project! 28 minutes

1. Celebrate With Fours

Welcome to Week Four! Let's celebrate your achievements. #NSFW: an exploration of Chris' feelings and fears, bad accents, and mentions of nudity.

2. Hamburger Time

Are you hungry? We cover how to responsively display navigation on a mobile site by making hamburgers. Out of code, alas.

3. The Three Step Veggieburger

Now you're ready to add your hamburger onto your site! We've provided the basic code you need, but watch the video for how to properly set it up for mobile view and hide it away on a desktop.

4. Testing 1, 2, Web Developer 3

Now it's time to actually put the sites we've built to the test. We use the web inspector to study how they look and run on various web and mobile platforms.

5. Print: Responsive In The Real World

In this video, we cover how media queries help you format for beyond the screen - specifically for printer-friendly web pages. Your mom will thank you.

6. Get Your Certificate!

How to Get Your Site Live! 25 minutes

1. Upload Your Website to the Internet

Looking good! Get it live and share your project with the web

2. Upload Your Site with FTP

CyberDuck will help you upload & download files to the Web

3. How to Update your Site After the Site is Live

Let's go a bit further with FTP to make live updates

Course Progress