Responsive Web Design

This course is part of Responsive Website Development and Design Specialization

Instructors: Dr Matthew Yee-King

Access provided by Google

87,233 already enrolled

5 modules

Gain insight into a topic and learn the fundamentals.

4.6

(1,944 reviews)

25 hours to complete

3 weeks at 8 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.

4.6

(1,944 reviews)

25 hours to complete

3 weeks at 8 hours a week

Flexible schedule

Learn at your own pace

96%

Most learners liked this course

Skills you'll gain

Details to know

Shareable certificate

Add to your LinkedIn profile

Assessments

29 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 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

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 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 videosTotal 44 minutes

Overview0 minutesPreview module
Usability and user experience2 minutes
Where can you go?6 minutes
What is here?3 minutes
Accessibility4 minutes
Guidelines for design10 minutes
Design examples16 minutes
Summary0 minutes

6 readingsTotal 60 minutes

Lecture slides10 minutes
URL for this lesson10 minutes
URLs for this lesson10 minutes
Lecture slides10 minutes
URL for this lesson10 minutes
Lecture slides10 minutes

7 assignmentsTotal 184 minutes

Usability and user experience30 minutes
Where can you go?4 minutes
What is here?30 minutes
Accessibility30 minutes
Guidelines for design30 minutes
Design examples30 minutes
Web design principles summary quiz30 minutes

1 peer reviewTotal 60 minutes

Design principles on your favourite website60 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 videosTotal 67 minutes

Overview0 minutesPreview module
Basic Bootstrap set up7 minutes
Where can you go?6 minutes
Collapsible navbars8 minutes
Building out the site12 minutes
Where am I?10 minutes
Responsive grid15 minutes
Bootstrap themes4 minutes
Summary0 minutes

7 readingsTotal 70 minutes

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

8 assignmentsTotal 240 minutes

Basic Bootstrap set up30 minutes
Where can you go?30 minutes
Collapsible navbars30 minutes
Building out the site30 minutes
Where am I?30 minutes
Responsive grid30 minutes
Bootstrap themes30 minutes
Realising design principles in code summary quiz30 minutes

1 peer reviewTotal 60 minutes

Working with navbars60 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 videosTotal 48 minutes

Overview0 minutesPreview module
Separating structure and content6 minutes
JavaScript objects6 minutes
JavaScript templates with Handlebars7 minutes
Putting data into templates6 minutes
Displaying different data with the same template7 minutes
Displaying the same data with different templates, Use a Bootstrap modal11 minutes
Summary0 minutes

5 readingsTotal 50 minutes

URL for this module10 minutes
URL for this lesson10 minutes
Source Code10 minutes
Source Code10 minutes
Source Code10 minutes

7 assignmentsTotal 210 minutes

Separating structure and content30 minutes
JavaScript objects30 minutes
JavaScript templates with Handlebars30 minutes
Putting data into templates30 minutes
Displaying different data with the same template30 minutes
Displaying the same data with different templates, Use a Bootstrap modal30 minutes
Adding content to websites summary quiz30 minutes

1 peer reviewTotal 60 minutes

Edit a template60 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 videosTotal 59 minutes

Overview0 minutesPreview module
JavaScript arrays5 minutes
Storing objects in arrays and displaying them with a template6 minutes
Dynamically displaying single images from an array8 minutes
Implementing a search function12 minutes
Data structure for a complete image gallery6 minutes
Writing the templates for the gallery7 minutes
Switching displays in the gallery12 minutes

4 readingsTotal 40 minutes

Source Code for this module10 minutes
URL for this lesson10 minutes
Source Code10 minutes
Source code for the gallery10 minutes

7 assignmentsTotal 210 minutes

JavaScript arrays30 minutes
Storing objects in arrays and displaying them with a template30 minutes
Dynamically displaying single images from an array30 minutes
Implementing a search function30 minutes
Data structure for a complete image gallery30 minutes
Writing the templates for the gallery30 minutes
Building a full gallery app summary quiz30 minutes

1 peer reviewTotal 60 minutes

Animal gallery60 minutes

Instructors

Instructor ratings

4.5 (111 ratings)

Dr Matthew Yee-King

University of London

22 Courses418,082 learners

Dr Kate Devlin

University of London

3 Courses237,000 learners

Offered by

University of London

Goldsmiths, University of London

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.6

1,944 reviews

5 stars
69.29%
4 stars
22.06%
3 stars
5.86%
2 stars
1.44%
1 star
1.33%

Showing 3 of 1944

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 Sep 23, 2020

Concepts are a bit crammed. Content is great. I had to take 4 days of gap to re-read template part from other sources on the internet - and frankly am a bit unclear even now.

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