Responsive Web Design

Seize the savings! Get 40% off 3 months of Coursera Plus and full access to thousands of courses.

Responsive Web Design

This course is part of Responsive Website Development and Design Specialization

Instructors: Professor Matthew Yee-King

88,134 already enrolled

Included with

Learn more

5 modules

Gain insight into a topic and learn the fundamentals.

1,946 reviews

3 weeks to complete

at 10 hours a week

Flexible schedule

Learn at your own pace

96%

Most learners liked this course

5 modules

Gain insight into a topic and learn the fundamentals.

1,946 reviews

3 weeks to complete

at 10 hours a week

Flexible schedule

Learn at your own pace

96%

Most learners liked this course

Skills you'll gain

Tools you'll learn

Details to know

Shareable certificate

Add to your LinkedIn profile

Assessments

29 assignments¹

AI Graded see disclaimer

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 part of the Responsive Website Development and Design 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

There are 5 modules in this course

In this course you will learn how to apply concepts from interaction design and human computer interaction in order to design and build an interactive, professional looking website. You will learn how to make your web page designs adapt to different screen sizes using responsive grid layouts. You will learn how to add navigation and other design elements, and you will learn how to separate data and display using JavaScript objects and templates.

At the end of the course, you will be able to: 1. Explain why users need to know where they are, where they can go and what is on a web page 2. Create wireframe mockups of web pages 3. Identify the key functional elements of web pages 4. Use Bootstrap components to realise page designs 5. Use JavaScript data structures such as arrays and objects to define the data used in a web page 6. Use the Handlebars template library to convert data to HTML 7. Add interactivity to templates using JavaScript event listeners In this course, you will complete: 1 website design assignment taking ~1 hour to complete 1 programming assignment taking ~1 hour to complete 4 quizzes, each taking ~20 minutes to complete multiple practice quizzes, each taking ~5 minutes to complete Participation in or completion of this online course will not confer academic credit for University of London programmes.

What's included

3 readings

Welcome to the first module of 'Responsive Web Design'. By the end of this module you will be able to understand the basic concepts of usability and user experience and tell the user where they can go with navbars. In addition you will be able to tell the user what is here with effective layout and understand the high level requirements of creating an accessible website. We hope you enjoy the module!

What's included

8 videos6 readings7 assignments1 peer review

8 videos Total 44 minutes

Overview 1 minute
Usability and user experience 2 minutes
Where can you go? 6 minutes
What is here? 3 minutes
Accessibility 5 minutes
Guidelines for design 11 minutes
Design examples 16 minutes
Summary 0 minutes

6 readings Total 60 minutes

Lecture slides 10 minutes
URL for this lesson 10 minutes
URLs for this lesson 10 minutes
Lecture slides 10 minutes
URL for this lesson 10 minutes
Lecture slides 10 minutes

7 assignments Total 184 minutes

Usability and user experience 30 minutes
Where can you go? 4 minutes
What is here? 30 minutes
Accessibility 30 minutes
Guidelines for design 30 minutes
Design examples 30 minutes
Web design principles summary quiz 30 minutes

1 peer review Total 120 minutes

Design principles on your favourite website 120 minutes

Welcome to the second module of 'Responsive Web Design'. By the end of this module you will be able to set up a basic Bootstrap site and build Bootstrap collapsible, responsive navbars using titles and breadcrumb trails and you'll also be able to build multiple layouts in one with a responsive grid. We'll also be looking at installing Bootstrap themes. Enjoy!

What's included

9 videos7 readings8 assignments1 peer review

9 videos Total 67 minutes

Overview 1 minute
Basic Bootstrap set up 7 minutes
Where can you go? 7 minutes
Collapsible navbars 9 minutes
Building out the site 13 minutes
Where am I? 11 minutes
Responsive grid 15 minutes
Bootstrap themes 4 minutes
Summary 1 minute

7 readings Total 70 minutes

Code for this module 10 minutes
URL for this lesson 10 minutes
Basic Bootstrap starter code (inc. images) 10 minutes
URL for this lesson 10 minutes
URL for this lesson 10 minutes
URL for this lesson 10 minutes
URLs for this lesson 10 minutes

8 assignments Total 240 minutes

Basic Bootstrap set up 30 minutes
Where can you go? 30 minutes
Collapsible navbars 30 minutes
Building out the site 30 minutes
Where am I? 30 minutes
Responsive grid 30 minutes
Bootstrap themes 30 minutes
Realising design principles in code summary quiz 30 minutes

1 peer review Total 120 minutes

Working with navbars 120 minutes

Welcome to the third module of 'Responsive Web Design' By the end of this module, you will be able to separate page structure from page content, use JavaScript objects and implement JavaScript templates with Handlebars as well as being able to display different data with the same template and the same data with different templates. Finally we will be looking at using a Bootstrap modal. We hope you enjoy the module!

What's included

8 videos5 readings7 assignments1 peer review

8 videos Total 49 minutes

Overview 1 minute
Separating structure and content 7 minutes
JavaScript objects 7 minutes
JavaScript templates with Handlebars 7 minutes
Putting data into templates 6 minutes
Displaying different data with the same template 8 minutes
Displaying the same data with different templates, Use a Bootstrap modal 12 minutes
Summary 1 minute

5 readings Total 50 minutes

URL for this module 10 minutes
URL for this lesson 10 minutes
Source Code 10 minutes
Source Code 10 minutes
Source Code 10 minutes

7 assignments Total 210 minutes

Separating structure and content 30 minutes
JavaScript objects 30 minutes
JavaScript templates with Handlebars 30 minutes
Putting data into templates 30 minutes
Displaying different data with the same template 30 minutes
Displaying the same data with different templates, Use a Bootstrap modal 30 minutes
Adding content to websites summary quiz 30 minutes

1 peer review Total 60 minutes

Edit a template 60 minutes

Welcome to the fourth module of 'Responsive Web Design'. By the end of this module you will be able to store objects in an array and display them with a template, and dynamically display single images from an array. We will also be looking at implementing a search function, and by working with complex data structures, switching between different templates. Enjoy!

What's included

8 videos4 readings7 assignments1 peer review

8 videos Total 60 minutes

Overview 1 minute
JavaScript arrays 5 minutes
Storing objects in arrays and displaying them with a template 6 minutes
Dynamically displaying single images from an array 8 minutes
Implementing a search function 13 minutes
Data structure for a complete image gallery 7 minutes
Writing the templates for the gallery 7 minutes
Switching displays in the gallery 13 minutes

4 readings Total 40 minutes

Source Code for this module 10 minutes
URL for this lesson 10 minutes
Source Code 10 minutes
Source code for the gallery 10 minutes

7 assignments Total 210 minutes

JavaScript arrays 30 minutes
Storing objects in arrays and displaying them with a template 30 minutes
Dynamically displaying single images from an array 30 minutes
Implementing a search function 30 minutes
Data structure for a complete image gallery 30 minutes
Writing the templates for the gallery 30 minutes
Building a full gallery app summary quiz 30 minutes

1 peer review Total 60 minutes

Animal gallery 60 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.

Instructors

Instructor ratings

(111 ratings)

Professor Matthew Yee-King

University of London

24 Courses 434,409 learners

Dr Kate Devlin

University of London

3 Courses 239,871 learners

Offered by

University of London

Goldsmiths, University of London

Explore more from Mobile and Web Development

Status: Free Trial
University of London
Responsive Website Basics: Code with HTML, CSS, and JavaScript
Course
Packt
CSS Modern Responsive Web Design – Build 5 Websites
Course
Status: Free Trial
University of London
Responsive Website Development and Design
Specialization
Status: Free Trial
Scrimba
Responsive Web Design
Specialization

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
69.21%
4 stars
22.09%
3 stars
5.85%
2 stars
1.43%
1 star
1.38%

Showing 3 of 1946

Reviewed on Jun 1, 2020

This course went into a lot more detail on the javascript end with a look at arrays and handlebars.js which introduces templates. I enjoyed this module, it was suitably challenging.

Reviewed on Jan 13, 2017

This course gave me the skill needed to create web pages with interaction and handlebars-based as well.It's a great course and a good well to improve everyone skills in web development.

Reviewed on Jul 19, 2020

Enough concise coverage for the student to build on top. The emphasizes on the pointers to good web experience, in a sea of options, this course is the lighthouse that will guide your way.

View more reviews

Open new doors with Coursera Plus

Unlimited access to 10,000+ world-class courses, hands-on projects, and job-ready certificate programs - all included in your subscription

Learn more

Advance your career with an online degree

Earn a degree from world-class universities - 100% online

Explore degrees

Join over 3,400 global companies that choose Coursera for Business

Upskill your employees to excel in the digital economy

Learn more

Frequently asked questions

To access the course materials, assignments and to earn a Certificate, you will need to purchase the Certificate experience when you enroll in a course. You can try a Free Trial instead, or apply for Financial Aid. The course may offer 'Full Course, No Certificate' instead. This option lets you see all course materials, submit required assessments, and get a final grade. This also means that you will not be able to purchase a Certificate experience.

When you enroll in the course, you get access to all of the courses in the Specialization, and you earn a certificate when you complete the work. Your electronic Certificate will be added to your Accomplishments page - from there, you can print your Certificate or add it to your LinkedIn profile.

Yes. In select learning programs, you can apply for financial aid or a scholarship if you can’t afford the enrollment fee. If fin aid or scholarship is available for your learning program selection, you’ll find a link to apply on the description page.