Learn Responsive Web Design

Learn Responsive Web Design

This course is part of CSS Specialization

Instructor: Kevin Powell

What you'll learn

Responsive web design, CSS, HTML

Details to know

Shareable certificate

Add to your LinkedIn profile

Assessments

6 assignments

Taught in English

See how employees at top companies are mastering in-demand skills

Learn more about Coursera for Business

Build your subject-matter expertise

This course is part of the CSS Specialization

When you enroll in this course, you'll also be enrolled in this Specialization.

Learn new concepts from industry experts
Gain a foundational understanding of a subject or tool
Develop job-relevant skills with hands-on projects
Earn a shareable career certificate

Earn a career certificate

Add this credential to your LinkedIn profile, resume, or CV

Share it on social media and in your performance review

There are 6 modules in this course

This course will take you to a professional level in responsive web design. You'll learn to build advanced layouts while solving fun coding challenges along the way.

Let me ask you a few questions: Do you want to learn to build responsive websites that look 100% professional? Do you want to be confident that your website works well on all devices? Are you tired of feeling that your CSS is a mess? If your answer is YES, then this is the perfect course for you! It gives you a deep understanding of CSS and responsive design while keeping you fully engaged along the way. You'll learn to build four different layouts: a blog, a landing page, a banner, and a company website. Each one will take your skills to a new level. To ensure that the knowledge sticks with you, you are given interactive coding challenges as you progress. It's as if you and the instructor are pair-programming together! This kind of fast-paced interactivity simply isn't possible with any other platform than Scrimba!

The learning module dives into CSS fundamentals, providing learners with a solid foundation in CSS syntax, selectors, properties, and layout techniques to effectively style and structure web pages with creativity and precision.

What's included

1 assignment25 plugins

1 assignmentTotal 30 minutes

CSS Fundamentals Quiz30 minutes

25 pluginsTotal 175 minutes

Welcome to the course!4 minutes
An Important note before we start1 minute
Introduction to the CSS Fundamentals module3 minutes
Margin and Padding - Margins and spacing out text5 minutes
Margin and Padding - Collapsing margins7 minutes
Margin and Padding - Consistency and a new type of selector5 minutes
Inline and Block elements6 minutes
The span element4 minutes
Styling links12 minutes
Practice Time!22 minutes
Inline-block5 minutes
Styling buttons9 minutes
Specificity basics5 minutes
Specificity - two selectors of equal value2 minutes
Compound Selectors15 minutes
Compound selectors and specificity7 minutes
A better way to name our CSS classes9 minutes
The text properties3 minutes
Font-family and font stacks6 minutes
How to use Google fonts9 minutes
Inheritance2 minutes
Working with, overwriting, and applying inheritance4 minutes
Putting it all together8 minutes
Putting it all together - the CSS18 minutes
Solution to the challenge and module wrap up4 minutes

The learning module trains developers to adopt a responsive mindset when building websites and applications in HTML and CSS.

What's included

1 assignment45 plugins

1 assignmentTotal 30 minutes

Starting to Think Responsively Quiz30 minutes

45 pluginsTotal 246 minutes

Starting to think responsively3 minutes
CSS Units3 minutes
CSS Units - Percentage6 minutes
Controlling the width of images5 minutes
min-width and max-width3 minutes
CSS Units - The em unit5 minutes
The problem with ems2 minutes
CSS Units - rems5 minutes
Picking which unit to use4 minutes
ems and rems - an example8 minutes
Flexbox refresher and setting up some HTML8 minutes
Basic styles and setting up the columns7 minutes
Adding the background color4 minutes
Setting the column widths4 minutes
Spacing out the columns4 minutes
Controlling the vertical position of flex items5 minutes
Media Query basics10 minutes
Making our layout responsive with flex-direction7 minutes
flex-direction explained3 minutes
Creating a navigation5 minutes
Using flexbox to start styling our navigation8 minutes
Making our navigation look good7 minutes
Adding the underline4 minutes
A more complicated navigation7 minutes
Making the navigation responsive7 minutes
Taking a look at the rest of the project4 minutes
Setting up the structure8 minutes
Featured article structure5 minutes
The home page - HTML for the recent articles2 minutes
home page - html for the aside6 minutes
Starting the CSS for our page15 minutes
Starting the layout - looking at the big picture9 minutes
Starting to think mobile first3 minutes
Styling the featured article6 minutes
Changing the visual order with flexbox5 minutes
Playing with the title's position, and the downsides of negative margins5 minutes
Styling recent articles for large screens8 minutes
Changing image sizes with object-fit4 minutes
Setting up the widgets and talking breakpoints7 minutes
Using a new pseudo-class to wrap-up the homepage7 minutes
Creating the recent posts page3 minutes
Setting up the About Me page4 minutes
Fixing up some loose ends4 minutes
Important Note: The viewport meta tag4 minutes
Module wrap up3 minutes

Elevates your styling skills in HTML and CSS, and equip yourself with advanced techniques and best practices to create visually stunning and polished web designs.

What's included

1 assignment38 plugins

1 assignmentTotal 25 minutes

Stepping up our style quiz25 minutes

38 pluginsTotal 172 minutes

It's time to step up our style3 minutes
A look at line-height5 minutes
text-transform: uppercase4 minutes
Making things easier to read with letter-spacing4 minutes
A nice color trick with rgba()5 minutes
background-images4 minutes
Background images and the file path (very important note)2 minutes
Controlling our background images8 minutes
BBQ Splash Page - Project Introduction3 minutes
Writing the HTML for the BBQ splash page7 minutes
Starting to style it up - BBQ Splash Page11 minutes
Adding the background image - BBQ Splash Page4 minutes
Changing the order - BBQ Splash Page4 minutes
Styling the main content area - BBQ Splash page3 minutes
Adding the media query - BBQ Splash Page4 minutes
Setting up the typography for large screens - BBQ Splash Page2 minutes
Starting to set things up for large screens - BBQ Splash Page3 minutes
Viewport units7 minutes
Adding viewport units to the BBQ Splash Page2 minutes
Enter box-sizing: border-box7 minutes
Using flexbox to vertically center the main content - BBQ Splash Page3 minutes
Fixing the intro section on both small and large screens - BBQ Splash Page3 minutes
Dealing with very large screens solution #14 minutes
Dealing with very big screens solution #25 minutes
The very basics of forms11 minutes
Form basics - form attributes4 minutes
The basics of styling form5 minutes
Adding the form - BBQ Splash Page4 minutes
Starting to style up the form - BBQ Splash Page4 minutes
Making the inputs look good - BBQ Splash Page4 minutes
CSS Gradients6 minutes
Styling the button - BBQ Splash Page5 minutes
Basic transitions5 minutes
Intro to transforms (and a quick word on performance)3 minutes
We can transition more than :hover3 minutes
Border gradients5 minutes
Blending images, colors, and gradients with background-blend-mode4 minutes
Wrap up2 minutes

This module takes your understanding of Flexbox to new heights, exploring advanced concepts and techniques that maximize the power of Flexbox for building complex and responsive layouts

What's included

1 assignment17 plugins

1 assignmentTotal 15 minutes

Taking Flexbox to the next level quiz15 minutes

17 pluginsTotal 76 minutes

Taking flexbox to the next level2 minutes
flex-direction, flex-wrap, and flex-flow5 minutes
justify-content and align-items and their relationship to flex-direction7 minutes
Exploring align-content4 minutes
flex-grow and flex-shrink explained5 minutes
flex-basis4 minutes
The flex shorthand property4 minutes
Aligning individual elements with align-self2 minutes
Margin auto and flexbox4 minutes
Building a card component with flexbox - Introduction3 minutes
Building a card component with flexbox - The markup5 minutes
Building a card component with flexbox - Typography6 minutes
Building a card component with flexbox - Mobile layout11 minutes
Building a card component with flexbox - Large screens part one5 minutes
Building a card component with flexbox - Large screens part two5 minutes
Centering something on the screen with flexbox2 minutes
Module wrap-up2 minutes

Unleash the power of CSS Grid, allowing you to create versatile and intricate page layouts with ease, precision, and responsive capabilities.

What's included

1 assignment19 plugins

1 assignmentTotal 25 minutes

CSS Grid: The Ultimate Layout Tool Quiz25 minutes

19 pluginsTotal 96 minutes

Introduction to CSS Grid3 minutes
Setting up a basic grid5 minutes
Placing items on the grid4 minutes
grid-row and grid-column shorthands5 minutes
Spanning columns2 minutes
Some similarities to flexbox5 minutes
Using grid for our card component13 minutes
The grid-gap property3 minutes
Adding the gap to our card3 minutes
The implicit and explicit grid6 minutes
Exploring grid areas8 minutes
grid-areas and media queries6 minutes
minmax()4 minutes
the fr unit3 minutes
minmax() and the fr unit2 minutes
Putting grid to use - part 112 minutes
Putting grid to use - part 24 minutes
repeat()3 minutes
auto-fit and auto-fill5 minutes

Discover how to craft stunning and feature-rich web designs with exceptional functionality and aesthetic finesse.

What's included

1 assignment29 plugins

1 assignmentTotal 20 minutes

Taking it to the next level quiz20 minutes

29 pluginsTotal 121 minutes

Taking it to the next level2 minutes
Analyzing the layouts3 minutes
Starting work on the homepage3 minutes
The HTML for the homepage4 minutes
The first lines of CSS you should always write4 minutes
Setting up our grid for small screens3 minutes
Continuing the hero area5 minutes
The "info" section4 minutes
Setting up the footer3 minutes
Using Font Awesome for our icons5 minutes
Wrapping up the footer2 minutes
Setting up the grid and hero for larger screens5 minutes
Setting up the rest of the page for larger screens6 minutes
Starting to style our navigation3 minutes
Setting up our navigation for small screens with positioning5 minutes
Making the close button3 minutes
Adding the open button to our navigation4 minutes
Styling the navigation for large screens2 minutes
Fixing up the navigation and hero area6 minutes
Creating the second page2 minutes
Styling the about page9 minutes
Exploring box-shadows to get the effect on our images5 minutes
Using pseudo-elements to add the yellow lines5 minutes
Adding the yellow bar to our titles3 minutes
Creating the contact page4 minutes
Styling the contact form7 minutes
Styling the contact form for larger screens6 minutes
The loose ends5 minutes
You did it!3 minutes

Instructor

Kevin Powell

Scrimba

4 Courses3,364 learners

Offered by

Scrimba

Why people choose Coursera for their career

Felipe M.

Learner since 2018

"To be able to take courses at my own pace and rhythm has been an amazing experience. I can learn whenever it fits my schedule and mood."

Jennifer J.

Learner since 2020

"I directly applied the concepts and skills I learned from my courses to an exciting new project at work."

Larry W.

Learner since 2021

"When I need courses on topics that my university doesn't offer, Coursera is one of the best places to go."

Chaitanya A.

"Learning isn't just about being better at your job: it's so much more than that. Coursera allows me to learn without limits."

Learner reviews

4.4

11 reviews

5 stars
72.72%
4 stars
9.09%
3 stars
9.09%
2 stars
0%
1 star
9.09%

Showing 3 of 11

Reviewed on Dec 24, 2023

I have been following Kevin from youtube, he really puts of the great content, I really like the way he teaches to make site responsive effortlessly

Reviewed on Oct 1, 2023

Detailed, hands-on and fun. This course simplifies intimidating CSS concepts like Flex-box, CSS Grid and Media - Queries. The instructor is amazing. Thanks so much for this terrific course.

View more reviews