Learn Responsive Web Design

Learn Responsive Web Design

This course is part of multiple programs.

Instructor: Kevin Powell

Access provided by Kalinga Institute of Industrial Technology

6 modules

Gain insight into a topic and learn the fundamentals.

15 reviews

Intermediate level

Recommended experience

2 weeks to complete

at 10 hours a week

Flexible schedule

Learn at your own pace

6 modules

Gain insight into a topic and learn the fundamentals.

15 reviews

Intermediate level

Recommended experience

2 weeks to complete

at 10 hours a week

Flexible schedule

Learn at your own pace

What you'll learn

Responsive web design, CSS, HTML

Skills you'll gain

Tools you'll learn

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

logos of Petrobras, TATA, Danone, Capgemini, P&G and L'Oreal

Build your subject-matter expertise

This course is available as part of

When you enroll in this course, you'll also be asked to select a specific program.

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

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 assignment26 plugins

1 assignment Total 30 minutes

CSS Fundamentals Graded Assignment 30 minutes

26 plugins Total 176 minutes

Welcome to interactive lessons! 1 minute
Welcome to the course! 4 minutes
An Important note before we start 1 minute
Introduction to the CSS Fundamentals module 3 minutes
Margin and Padding - Margins and spacing out text 5 minutes
Margin and Padding - Collapsing margins 7 minutes
Margin and Padding - Consistency and a new type of selector 5 minutes
Inline and Block elements 6 minutes
The span element 4 minutes
Styling links 12 minutes
Practice Time! 22 minutes
Inline-block 5 minutes
Styling buttons 9 minutes
Specificity basics 5 minutes
Specificity - two selectors of equal value 2 minutes
Compound Selectors 15 minutes
Compound selectors and specificity 7 minutes
A better way to name our CSS classes 9 minutes
The text properties 3 minutes
Font-family and font stacks 6 minutes
How to use Google fonts 9 minutes
Inheritance 2 minutes
Working with, overwriting, and applying inheritance 4 minutes
Putting it all together 8 minutes
Putting it all together - the CSS 18 minutes
Solution to the challenge and module wrap up 4 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 assignment Total 30 minutes

Starting to Think Responsively Graded Assignment 30 minutes

45 plugins Total 246 minutes

Starting to think responsively 3 minutes
CSS Units 3 minutes
CSS Units - Percentage 6 minutes
Controlling the width of images 5 minutes
min-width and max-width 3 minutes
CSS Units - The em unit 5 minutes
The problem with ems 2 minutes
CSS Units - rems 5 minutes
Picking which unit to use 4 minutes
ems and rems - an example 8 minutes
Flexbox refresher and setting up some HTML 8 minutes
Basic styles and setting up the columns 7 minutes
Adding the background color 4 minutes
Setting the column widths 4 minutes
Spacing out the columns 4 minutes
Controlling the vertical position of flex items 5 minutes
Media Query basics 10 minutes
Making our layout responsive with flex-direction 7 minutes
flex-direction explained 3 minutes
Creating a navigation 5 minutes
Using flexbox to start styling our navigation 8 minutes
Making our navigation look good 7 minutes
Adding the underline 4 minutes
A more complicated navigation 7 minutes
Making the navigation responsive 7 minutes
Taking a look at the rest of the project 4 minutes
Setting up the structure 8 minutes
Featured article structure 5 minutes
The home page - HTML for the recent articles 2 minutes
home page - html for the aside 6 minutes
Starting the CSS for our page 15 minutes
Starting the layout - looking at the big picture 9 minutes
Starting to think mobile first 3 minutes
Styling the featured article 6 minutes
Changing the visual order with flexbox 5 minutes
Playing with the title's position, and the downsides of negative margins 5 minutes
Styling recent articles for large screens 8 minutes
Changing image sizes with object-fit 4 minutes
Setting up the widgets and talking breakpoints 7 minutes
Using a new pseudo-class to wrap-up the homepage 7 minutes
Creating the recent posts page 3 minutes
Setting up the About Me page 4 minutes
Fixing up some loose ends 4 minutes
Important Note: The viewport meta tag 4 minutes
Module wrap up 3 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 assignment Total 25 minutes

Stepping Up Our Style Graded Assignment 25 minutes

38 plugins Total 172 minutes

It's time to step up our style 3 minutes
A look at line-height 5 minutes
text-transform: uppercase 4 minutes
Making things easier to read with letter-spacing 4 minutes
A nice color trick with rgba() 5 minutes
background-images 4 minutes
Background images and the file path (very important note) 2 minutes
Controlling our background images 8 minutes
BBQ Splash Page - Project Introduction 3 minutes
Writing the HTML for the BBQ splash page 7 minutes
Starting to style it up - BBQ Splash Page 11 minutes
Adding the background image - BBQ Splash Page 4 minutes
Changing the order - BBQ Splash Page 4 minutes
Styling the main content area - BBQ Splash page 3 minutes
Adding the media query - BBQ Splash Page 4 minutes
Setting up the typography for large screens - BBQ Splash Page 2 minutes
Starting to set things up for large screens - BBQ Splash Page 3 minutes
Viewport units 7 minutes
Adding viewport units to the BBQ Splash Page 2 minutes
Enter box-sizing: border-box 7 minutes
Using flexbox to vertically center the main content - BBQ Splash Page 3 minutes
Fixing the intro section on both small and large screens - BBQ Splash Page 3 minutes
Dealing with very large screens solution #1 4 minutes
Dealing with very big screens solution #2 5 minutes
The very basics of forms 11 minutes
Form basics - form attributes 4 minutes
The basics of styling form 5 minutes
Adding the form - BBQ Splash Page 4 minutes
Starting to style up the form - BBQ Splash Page 4 minutes
Making the inputs look good - BBQ Splash Page 4 minutes
CSS Gradients 6 minutes
Styling the button - BBQ Splash Page 5 minutes
Basic transitions 5 minutes
Intro to transforms (and a quick word on performance) 3 minutes
We can transition more than :hover 3 minutes
Border gradients 5 minutes
Blending images, colors, and gradients with background-blend-mode 4 minutes
Wrap up 2 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 assignment Total 15 minutes

Taking Flexbox to the Next Level Graded Assignment 15 minutes

17 plugins Total 76 minutes

Taking flexbox to the next level 2 minutes
flex-direction, flex-wrap, and flex-flow 5 minutes
justify-content and align-items and their relationship to flex-direction 7 minutes
Exploring align-content 4 minutes
flex-grow and flex-shrink explained 5 minutes
flex-basis 4 minutes
The flex shorthand property 4 minutes
Aligning individual elements with align-self 2 minutes
Margin auto and flexbox 4 minutes
Building a card component with flexbox - Introduction 3 minutes
Building a card component with flexbox - The markup 5 minutes
Building a card component with flexbox - Typography 6 minutes
Building a card component with flexbox - Mobile layout 11 minutes
Building a card component with flexbox - Large screens part one 5 minutes
Building a card component with flexbox - Large screens part two 5 minutes
Centering something on the screen with flexbox 2 minutes
Module wrap-up 2 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 assignment Total 25 minutes

CSS Grid: The Ultimate Layout Tool Graded Assignment 25 minutes

19 plugins Total 96 minutes

Introduction to CSS Grid 3 minutes
Setting up a basic grid 5 minutes
Placing items on the grid 4 minutes
grid-row and grid-column shorthands 5 minutes
Spanning columns 2 minutes
Some similarities to flexbox 5 minutes
Using grid for our card component 13 minutes
The grid-gap property 3 minutes
Adding the gap to our card 3 minutes
The implicit and explicit grid 6 minutes
Exploring grid areas 8 minutes
grid-areas and media queries 6 minutes
minmax() 4 minutes
the fr unit 3 minutes
minmax() and the fr unit 2 minutes
Putting grid to use - part 1 12 minutes
Putting grid to use - part 2 4 minutes
repeat() 3 minutes
auto-fit and auto-fill 5 minutes

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

What's included

1 assignment29 plugins

1 assignment Total 20 minutes

Taking it to the Next Level Graded Assignment 20 minutes

29 plugins Total 121 minutes

Taking it to the next level 2 minutes
Analyzing the layouts 3 minutes
Starting work on the homepage 3 minutes
The HTML for the homepage 4 minutes
The first lines of CSS you should always write 4 minutes
Setting up our grid for small screens 3 minutes
Continuing the hero area 5 minutes
The "info" section 4 minutes
Setting up the footer 3 minutes
Using Font Awesome for our icons 5 minutes
Wrapping up the footer 2 minutes
Setting up the grid and hero for larger screens 5 minutes
Setting up the rest of the page for larger screens 6 minutes
Starting to style our navigation 3 minutes
Setting up our navigation for small screens with positioning 5 minutes
Making the close button 3 minutes
Adding the open button to our navigation 4 minutes
Styling the navigation for large screens 2 minutes
Fixing up the navigation and hero area 6 minutes
Creating the second page 2 minutes
Styling the about page 9 minutes
Exploring box-shadows to get the effect on our images 5 minutes
Using pseudo-elements to add the yellow lines 5 minutes
Adding the yellow bar to our titles 3 minutes
Creating the contact page 4 minutes
Styling the contact form 7 minutes
Styling the contact form for larger screens 6 minutes
The loose ends 5 minutes
You did it! 3 minutes

Earn a career certificate

Add this credential to your LinkedIn profile, resume, or CV. Share it on social media and in your performance review.

Instructor

Kevin Powell

Scrimba

5 Courses 9,728 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

5 stars
73.33%
4 stars
13.33%
3 stars
6.66%
2 stars
0%
1 star
6.66%

Showing 3 of 15

Reviewed on Sep 30, 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.

Reviewed on Dec 23, 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

View more reviews