We may earn an affiliate commission when you visit our partners.

Responsive Web Design

Dr Matthew Yee-King, Dr Kate Devlin, Dr Mick Grierson, and Prof Marco Gillies

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

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.

Enroll now

Or subscribe to Coursera Plus

And get unlimited access to Coursera

What's inside

Syllabus

Responsive Web Design: Course overview

Web design principles

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!

Realising design principles in code

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!

Adding content to websites

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!

Building a full gallery app

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!

Good to know

Know what's good

, what to watch for

, and possible dealbreakers

Introduces industry standard tools and methods

Teaches responsive design, which is a core skill for web developers

Course content and trainers are recognized for their expertise in this field

Exposes learners to core skills needed for effective information architecture

May require learners to have prior programming experience

Save this course

Save Responsive Web Design to your list so you can find it easily later:

Save

Reviews summary

Bootstrap-based responsive design

Learners say this basic and outdated overview of responsive web design provides detailed lectures on the "how and why" of the code and JavaScript libraries. However, it lacks fundamentals of CSS and JavaScript, instead relying on the Bootstrap library. Overall, reviews indicate that this course is a good starting point but may not provide the full range of skills needed for a job as a web developer.

Outdated content, needs update

"I would suggest (if they update the course) to change Handlebars framework for Angular, React or Vue."

Covers JavaScript libraries, not JavaScript

"The last two weeks cover JavaScript. Or more precisely: they cover a few JavaScript libraries."

Focuses on Bootstrap, not fundamentals

"This class relies on shortcuts, specifically the Bootstrap library, so it doesn't actually teach the fundamentals of CSS or JavaScript."

Activities

Be better prepared before your course. Deepen your understanding during and after it. Supplement your coursework and achieve mastery of the topics covered in Responsive Web Design with these activities:

Connect with web designers

Show steps

Expand your network and gain insights from professionals in the field by attending networking events focused on web design.

Browse courses on Networking

Show steps

Identify and attend networking events or meetups related to web design.
Introduce yourself to other attendees and engage in conversations about web design trends and techniques.
Exchange contact information and follow up with potential connections after the event.

Review HTML and CSS fundamentals

Show steps

Strengthen your understanding of HTML and CSS before starting the course, ensuring a solid foundation for responsive web design concepts.

Browse courses on HTML

Show steps

Review online tutorials or resources on HTML and CSS.
Practice writing HTML and CSS code by creating simple web pages.
Review examples and best practices for using HTML and CSS.

Explore Bootstrap components

Show steps

Enhance your understanding of Bootstrap, a popular front-end framework, by following guided tutorials that demonstrate its components and features.

Browse courses on Bootstrap

Show steps

Find online tutorials or documentation for Bootstrap.
Follow the tutorials to learn about different Bootstrap components, such as buttons, navigation bars, and grids.
Experiment with implementing Bootstrap components in your own web design projects.

Five other activities

Expand to see all activities and additional details

Show all eight activities

Build a resource library for web design

Show steps

Consolidate your learning by creating a resource library that includes articles, tutorials, and tools related to web design, making it easy to refer back to key concepts.

Browse courses on Knowledge Base

Show steps

Create a folder or digital notebook to store web design resources.
Add articles, tutorials, and videos that you find helpful.
Organize the resources into categories, such as design principles, development techniques, and industry trends.
Regularly review and update the resource library as you learn new things.

Attend a web development workshop

Show steps

Gain practical experience and learn from experts by attending a workshop focused on web development, such as responsive design or JavaScript techniques.

Browse courses on Web Development

Show steps

Research and identify a relevant web development workshop.
Register for the workshop and attend all sessions.
Actively participate in the workshop activities and discussions.
Apply the knowledge and skills gained in your own web design projects.

Apply responsive design techniques

Show steps

Build on the concepts of responsive web design by practicing techniques to adapt web page designs to different screen sizes.

Browse courses on Responsive Web Design

Show steps

Choose a web design tool and create a new project.
Design a simple web page with multiple sections and elements.
Implement responsive design using CSS media queries or a framework like Bootstrap.
Test the web page on different devices or screen sizes to ensure it adapts properly.

Build a portfolio website

Show steps

Showcase your web design skills by creating a portfolio website that demonstrates your proficiency in both design and development.

Browse courses on Web Design

Show steps

Plan the structure and content of your portfolio website.
Design and develop a visually appealing and user-friendly layout.
Include examples of your best web design work.
Publish your website and share it with potential clients or employers.
Seek feedback on your portfolio website and make improvements based on it.

Create a responsive website for a small business

Show steps

Apply your skills in responsive web design by creating a functional website for a small business, ensuring it adapts to various screen sizes and provides a seamless user experience.

Browse courses on Responsive Web Design

Show steps

Identify a small business that needs a website.
Plan the website's structure, design, and content.
Develop the website using responsive design techniques.
Test the website on different devices and screen sizes.
Launch the website and track its performance.

Career center

Learners who complete Responsive Web Design will develop knowledge and skills that may be useful to these careers:

Web Developer

A Web Developer is responsible for the development and maintenance of websites. They work with designers and content writers to create websites that are both visually appealing and functional. This course can help you become a Web Developer by teaching you the basics of web design and development. You will learn how to use HTML, CSS, and JavaScript to create websites. You will also learn how to use responsive design techniques to make your websites adapt to different screen sizes.

See salaries and explore the career path for Web Developer

UX Designer

A UX Designer is responsible for the user experience of a product or service. They work to make sure that the product is easy to use and enjoyable to interact with. This course can help you become a UX Designer by teaching you the principles of interaction design and human computer interaction. You will learn how to create wireframe mockups of web pages and how to use Bootstrap components to realise page designs. You will also learn how to use JavaScript data structures and templates to add interactivity to your designs.

See salaries and explore the career path for UX Designer

Front-End Developer

A Front-End Developer is responsible for the design and implementation of the user interface of a website. They work with UX Designers to create websites that are both visually appealing and easy to use. This course can help you become a Front-End Developer by teaching you the principles of interaction design and human computer interaction. You will learn how to create wireframe mockups of web pages and how to use Bootstrap components to realise page designs. You will also learn how to use JavaScript data structures and templates to add interactivity to your designs.

See salaries and explore the career path for Front-End Developer

Product Designer

A Product Designer is responsible for the design and development of products. They work with engineers and marketers to create products that are both useful and desirable. This course can help you become a Product Designer by teaching you the principles of interaction design and human computer interaction. You will learn how to create wireframe mockups of web pages and how to use Bootstrap components to realise page designs. You will also learn how to use JavaScript data structures and templates to add interactivity to your designs.

See salaries and explore the career path for Product Designer

Interaction Designer

An Interaction Designer is responsible for the design of the user experience of a product or service. They work to make sure that the product is easy to use and enjoyable to interact with. This course can help you become an Interaction Designer by teaching you the principles of interaction design and human computer interaction. You will learn how to create wireframe mockups of web pages and how to use Bootstrap components to realise page designs. You will also learn how to use JavaScript data structures and templates to add interactivity to your designs.

See salaries and explore the career path for Interaction Designer

UI Designer

A UI Designer is responsible for the design of the user interface of a product or service. They work to make sure that the product is easy to use and enjoyable to interact with. This course can help you become a UI Designer by teaching you the principles of interaction design and human computer interaction. You will learn how to create wireframe mockups of web pages and how to use Bootstrap components to realise page designs. You will also learn how to use JavaScript data structures and templates to add interactivity to your designs.

See salaries and explore the career path for UI Designer

Software Engineer

A Software Engineer is responsible for the design, development, and maintenance of software applications. They work with designers and product managers to create software that is both useful and reliable. This course can help you become a Software Engineer by teaching you the basics of web development. You will learn how to use HTML, CSS, and JavaScript to create websites. You will also learn how to use responsive design techniques to make your websites adapt to different screen sizes.

See salaries and explore the career path for Software Engineer

Marketing Manager

A Marketing Manager is responsible for the development and execution of marketing campaigns. They work with businesses to help them reach their target audience and achieve their marketing goals. This course can help you become a Marketing Manager by teaching you the principles of interaction design and human computer interaction. You will learn how to create wireframe mockups of web pages and how to use Bootstrap components to realise page designs. You will also learn how to use JavaScript data structures and templates to organise and analyse data.

See salaries and explore the career path for Marketing Manager

User Experience Researcher

A User Experience Researcher is responsible for the study of user behaviour. They work with businesses to help them understand how users interact with their products or services. This course can help you become a User Experience Researcher by teaching you the principles of interaction design and human computer interaction. You will learn how to create wireframe mockups of web pages and how to use Bootstrap components to realise page designs. You will also learn how to use JavaScript data structures and templates to organise and analyse data.

See salaries and explore the career path for User Experience Researcher

Project Manager

A Project Manager is responsible for the planning, execution, and closure of projects. They work with teams to ensure that projects are completed on time, within budget, and to the required quality. This course can help you become a Project Manager by teaching you the principles of interaction design and human computer interaction. You will learn how to create wireframe mockups of web pages and how to use Bootstrap components to realise page designs. You will also learn how to use JavaScript data structures and templates to organise and analyse data.

See salaries and explore the career path for Project Manager

Sales Manager

A Sales Manager is responsible for the development and execution of sales strategies. They work with businesses to help them reach their sales goals. This course can help you become a Sales Manager by teaching you the principles of interaction design and human computer interaction. You will learn how to create wireframe mockups of web pages and how to use Bootstrap components to realise page designs. You will also learn how to use JavaScript data structures and templates to organise and analyse data.

See salaries and explore the career path for Sales Manager

Data Scientist

A Data Scientist is responsible for the collection, analysis, and interpretation of data. They work with businesses to help them make better decisions. This course can help you become a Data Scientist by teaching you the basics of data analysis. You will learn how to use JavaScript data structures and templates to organise and analyse data. You will also learn how to use visualisation techniques to present your findings.

See salaries and explore the career path for Data Scientist

Business Analyst

A Business Analyst is responsible for the analysis of business processes and systems. They work with businesses to help them improve their efficiency and effectiveness. This course can help you become a Business Analyst by teaching you the principles of interaction design and human computer interaction. You will learn how to create wireframe mockups of web pages and how to use Bootstrap components to realise page designs. You will also learn how to use JavaScript data structures and templates to organise and analyse data.

See salaries and explore the career path for Business Analyst

Technical Writer

A Technical Writer is responsible for the creation of technical documentation. They work with engineers and other technical professionals to create documentation that is clear, concise, and accurate. This course can help you become a Technical Writer by teaching you the principles of interaction design and human computer interaction. You will learn how to create wireframe mockups of web pages and how to use Bootstrap components to realise page designs. You will also learn how to use JavaScript data structures and templates to organise and analyse data.

See salaries and explore the career path for Technical Writer

Customer Success Manager

A Customer Success Manager is responsible for the satisfaction and retention of customers. They work with customers to help them achieve their goals and get the most out of their products or services. This course can help you become a Customer Success Manager by teaching you the principles of interaction design and human computer interaction. You will learn how to create wireframe mockups of web pages and how to use Bootstrap components to realise page designs. You will also learn how to use JavaScript data structures and templates to organise and analyse data.

See salaries and explore the career path for Customer Success Manager

Reading list

We've selected 14 books that we think will supplement your learning. Use these to develop background knowledge, enrich your coursework, and gain a deeper understanding of the topics covered in Responsive Web Design.

Perspectives on Radio and Television

Save

Comprehensive reference for web developers, covering a wide range of topics, including HTML, CSS, JavaScript, PHP, and MySQL. It good choice for those who want to have a single reference for all of their web development needs.

Responsive Web Design

What's inside

Syllabus

Good to know

Save this course

Reviews summary

Bootstrap-based responsive design

Activities

Career center

Reading list

Share

Similar courses