Buy Now AED 274.99 + VAT

Monthly Subscription Starting at AED 99 + VAT

Responsive Web Design
  • Level Foundation
  • Duration 26 hours
  • Course by University of London
  • Offered by

About

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.

Modules

Introduction

    • 3 Readings
Show info about module content

3 Readings

  • Course outline
  • Grading and assessment
  • Learning outcomes

Module introduction

    • 1 Videos
    • 1 Readings
Show info about module content

1 Videos

  • Overview

1 Readings

  • Lecture slides

Usability and user experience

    • 1 Videos
    • 1 Assignment
Show info about module content

1 Assignment

  • Usability and user experience

1 Videos

  • Usability and user experience

Where can you go?

    • 1 Videos
    • 1 Assignment
Show info about module content

1 Assignment

  • Where can you go?

1 Videos

  • Where can you go?

What is here?

    • 1 Videos
    • 1 Assignment
Show info about module content

1 Assignment

  • What is here?

1 Videos

  • What is here?

Accessiblity

    • 1 Videos
    • 1 Readings
    • 1 Assignment
Show info about module content

1 Assignment

  • Accessibility

1 Videos

  • Accessibility

1 Readings

  • URL for this lesson

Guidelines for design

    • 1 Videos
    • 2 Readings
    • 1 Assignment
Show info about module content

1 Assignment

  • Guidelines for design

1 Videos

  • Guidelines for design

2 Readings

  • URLs for this lesson
  • Lecture slides

Design examples

    • 1 Videos
    • 2 Readings
    • 1 Assignment
Show info about module content

1 Assignment

  • Design examples

1 Videos

  • Design examples

2 Readings

  • URL for this lesson
  • Lecture slides

Summary

    • 1 Videos
    • 1 PeerReview
    • 1 Assignment
Show info about module content

1 Assignment

  • Web design principles summary quiz

1 Peer Review

  • Design principles on your favourite website

1 Videos

  • Summary

Introduction

    • 1 Videos
    • 1 Readings
Show info about module content

1 Videos

  • Overview

1 Readings

  • Code for this module

Basic bootstrap setup

    • 1 Videos
    • 2 Readings
    • 1 Assignment
Show info about module content

1 Assignment

  • Basic Bootstrap set up

1 Videos

  • Basic Bootstrap set up

2 Readings

  • URL for this lesson
  • Basic Bootstrap starter code (inc. images)

Where can you go?

    • 1 Videos
    • 1 Readings
    • 1 Assignment
Show info about module content

1 Assignment

  • Where can you go?

1 Videos

  • Where can you go?

1 Readings

  • URL for this lesson

Collapsible navbars

    • 1 Videos
    • 1 Assignment
Show info about module content

1 Assignment

  • Collapsible navbars

1 Videos

  • Collapsible navbars

Building out the site

    • 1 Videos
    • 1 Assignment
Show info about module content

1 Assignment

  • Building out the site

1 Videos

  • Building out the site

Where am I?

    • 1 Videos
    • 1 Readings
    • 1 Assignment
Show info about module content

1 Assignment

  • Where am I?

1 Videos

  • Where am I?

1 Readings

  • URL for this lesson

Responsive grid

    • 1 Videos
    • 1 Readings
    • 1 Assignment
Show info about module content

1 Assignment

  • Responsive grid

1 Videos

  • Responsive grid

1 Readings

  • URL for this lesson

Bootstrap themes

    • 1 Videos
    • 1 Readings
    • 1 Assignment
Show info about module content

1 Assignment

  • Bootstrap themes

1 Videos

  • Bootstrap themes

1 Readings

  • URLs for this lesson

Summary

    • 1 Videos
    • 1 PeerReview
    • 1 Assignment
Show info about module content

1 Assignment

  • Realising design principles in code summary quiz

1 Peer Review

  • Working with navbars

1 Videos

  • Summary

Introduction

    • 1 Videos
    • 1 Readings
Show info about module content

1 Videos

  • Overview

1 Readings

  • URL for this module

Separating structure and content

    • 1 Videos
    • 1 Assignment
Show info about module content

1 Assignment

  • Separating structure and content

1 Videos

  • Separating structure and content

JavaScript objects

    • 1 Videos
    • 1 Assignment
Show info about module content

1 Assignment

  • JavaScript objects

1 Videos

  • JavaScript objects

JavaScript templates with Handlebars

    • 1 Videos
    • 1 Readings
    • 1 Assignment
Show info about module content

1 Assignment

  • JavaScript templates with Handlebars

1 Videos

  • JavaScript templates with Handlebars

1 Readings

  • URL for this lesson

Putting data into templates

    • 1 Videos
    • 1 Readings
    • 1 Assignment
Show info about module content

1 Assignment

  • Putting data into templates

1 Videos

  • Putting data into templates

1 Readings

  • Source Code

Displaying different data with the same template

    • 1 Videos
    • 1 Readings
    • 1 Assignment
Show info about module content

1 Assignment

  • Displaying different data with the same template

1 Videos

  • Displaying different data with the same template

1 Readings

  • Source Code

Displaying the same data with different templates, Use a Bootstrap modal

    • 1 Videos
    • 1 Readings
    • 1 Assignment
Show info about module content

1 Assignment

  • Displaying the same data with different templates, Use a Bootstrap modal

1 Videos

  • Displaying the same data with different templates, Use a Bootstrap modal

1 Readings

  • Source Code

Summary

    • 1 Videos
    • 1 PeerReview
    • 1 Assignment
Show info about module content

1 Assignment

  • Adding content to websites summary quiz

1 Peer Review

  • Edit a template

1 Videos

  • Summary

Introduction

    • 1 Videos
    • 1 Readings
Show info about module content

1 Videos

  • Overview

1 Readings

  • Source Code for this module

JavaScript arrays

    • 1 Videos
    • 1 Readings
    • 1 Assignment
Show info about module content

1 Assignment

  • JavaScript arrays

1 Videos

  • JavaScript arrays

1 Readings

  • URL for this lesson

Storing objects in arrays and displaying them with a template

    • 1 Videos
    • 1 Assignment
Show info about module content

1 Assignment

  • Storing objects in arrays and displaying them with a template

1 Videos

  • Storing objects in arrays and displaying them with a template

Dynamically displaying single images from an array

    • 1 Videos
    • 1 Assignment
Show info about module content

1 Assignment

  • Dynamically displaying single images from an array

1 Videos

  • Dynamically displaying single images from an array

Implementing a search function

    • 1 Videos
    • 1 Readings
    • 1 Assignment
Show info about module content

1 Assignment

  • Implementing a search function

1 Videos

  • Implementing a search function

1 Readings

  • Source Code

Data structure for a complete image gallery

    • 1 Videos
    • 1 Readings
    • 1 Assignment
Show info about module content

1 Assignment

  • Data structure for a complete image gallery

1 Videos

  • Data structure for a complete image gallery

1 Readings

  • Source code for the gallery

Writing the templates for the gallery

    • 1 Videos
    • 1 Assignment
Show info about module content

1 Assignment

  • Writing the templates for the gallery

1 Videos

  • Writing the templates for the gallery

Switching displays in the gallery

    • 1 Videos
Show info about module content

1 Videos

  • Switching displays in the gallery

Summary

    • 1 PeerReview
    • 1 Assignment
Show info about module content

1 Assignment

  • Building a full gallery app summary quiz

1 Peer Review

  • Animal gallery

Auto Summary

Dive into the world of Responsive Web Design with this foundational course from Coursera. Focused on IT and Computer Science, you'll explore interaction design, human-computer interaction, and learn to create adaptable web designs using responsive grid layouts. Gain skills in wireframing, Bootstrap, JavaScript, and Handlebars to build professional, interactive websites. Led by expert instructors, this 1560-minute course includes assignments and quizzes to solidify your knowledge. Ideal for beginners and available through a Starter subscription, it's perfect for aspiring web designers looking to enhance their skills.

Dr Matthew Yee-King
Instructors

Dr Matthew Yee-King

Dr Kate Devlin
Instructors

Dr Kate Devlin

Prof Marco Gillies
Instructors

Prof Marco Gillies

Dr Mick Grierson
Instructors

Dr Mick Grierson