About this Course
5,851 recent views

100% online

Start instantly and learn at your own schedule.

Flexible deadlines

Reset deadlines in accordance to your schedule.

Approx. 15 hours to complete

Suggested: 4 weeks of study, 1-2 hours/week...

English

Subtitles: English

100% online

Start instantly and learn at your own schedule.

Flexible deadlines

Reset deadlines in accordance to your schedule.

Approx. 15 hours to complete

Suggested: 4 weeks of study, 1-2 hours/week...

English

Subtitles: English

Syllabus - What you will learn from this course

Week
1
25 minutes to complete

Responsive Website Tutorials and Examples outline: Course overview

...
1 video (Total 1 min), 2 readings, 1 quiz
1 video
2 readings
Course outline10m
Grading and assessment information10m
1 practice exercise
Prerequisite quiz4m
4 hours to complete

Creating a Portfolio Website with a Blog

Welcome to the first module of 'Responsive Website Tutorial and Examples!'. In this session we will be exploring a real-world web development task based on a common brief that web developers have to respond to every day – producing a portfolio website with both static and dynamic content features. I hope you enjoy the module! -Mick

...
6 videos (Total 44 min), 5 readings, 7 quizzes
6 videos
Recap7m
Getting started11m
Adding a page12m
Administrating the blog and making it responsive9m
Creating A Portfolio Website with Blog summary54s
5 readings
Source code10m
Slides for this module10m
Getting started: learning outcomes10m
Adding a page: learning outcomes10m
Administrating the blog and making it responsive: learning outcomes10m
6 practice exercises
Introduction2m
Recap4m
Getting started4m
Adding a page4m
Administration4m
Creating A Portfolio Website with Blog summary quiz20m
Week
2
5 hours to complete

Collaborative Apps 1 : Music Machine

Welcome to the second module of 'Responsive Website Tutorial and Examples!'. Meteor is great at making collaboration simple. You can make collaborative sites in a day or so that work across many devices including mobile. By the end of this session you will understand how to structure and build collaborative, real-time applications, how to integrate the web audio API, and how to specifically set and get variables stored in the database using basic interface elements.

...
7 videos (Total 50 min), 7 readings, 7 quizzes
7 videos
Introduction: Music Machine5m
Project structure4m
Adding sound12m
Adding interaction20m
Collaboration6m
Collaborative Apps 1 : Music Machine 2015 summary33s
7 readings
Source code10m
Slides for this module10m
Project structure: learning outcomes10m
Adding sound: learning outcomes10m
Adding interaction : learning outcomes10m
Making it collaborative: learning outcomes10m
URL in lecture video10m
6 practice exercises
Introduction2m
Project structure4m
Adding sound4m
Adding interaction6m
Making it collaborative4m
Collaborative Apps 1 : Music Machine 2015 summary quiz20m
Week
3
4 hours to complete

Collaborative Apps 2 : Drawing Machine

Welcome to the third module of 'Responsive Website Tutorial and Examples!'.Meteor allows us to make creative, collaborative apps that work in real-time. Both the Client and the Server can insert information into a Mongo collection. Ordinary web users can do this interactively, without having to program the database manually. In this session we will look at this approach through the lens of collaborative drawing. You will learn how to create a canvas using d3.js, change attributes of the canvas, create client code for inserting data into the database and how to render database entries as a drawing.

...
7 videos (Total 48 min), 6 readings, 7 quizzes
7 videos
Drawing machine5m
Drawing machine: worked example6m
Creating the application21m
Creating and serving data10m
Review2m
Collaborative Apps 2 : Drawing Machine summary42s
6 readings
Source code10m
Slides for this module10m
Drawing machine example: learning outcomes10m
Creating the application: learning outcomes10m
Creating and serving data: learning outcomes10m
Review: learning outcomes10m
6 practice exercises
Drawing machine introduction4m
Drawing machine- worked example2m
Creating the application6m
Creating and serving data6m
Review2m
Collaborative Apps 2 : Drawing Machine summary quiz20m
Week
4
4 hours to complete

Creating a Data Visualisation Application

Welcome to the final module of 'Responsive Website Tutorial and Examples!'.In this session we will be looking at how to use data from external sources to create interactive visualisations for the purposes of creating an interactive data visualisation web app.

...
7 videos (Total 49 min), 6 readings, 7 quizzes
7 videos
Module introduction43s
Setting up the interface12m
Getting data9m
Rendering data on the page19m
Review3m
Creating a Data Visualisation Application summary47s
6 readings
Source code10m
Slides for this module10m
Setting up the interface: learning outcomes10m
Getting data: learning outcomes10m
Rendering data on the page: learning outcomes10m
Review: learning outcomes10m
6 practice exercises
Introduction2m
Setting up the interface4m
Getting data6m
Rendering data on the page6m
Review2m
Creating a Data Visualisation Application summary quiz20m
4.2
54 ReviewsChevron Right

Top reviews from Responsive Website Tutorial and Examples

By ZBMay 22nd 2017

Exciting course that connects all the previous course's materials together into a professional backdrop. Very rewarding and I can't wait to take the capstone!

By VSFeb 14th 2016

Very excited to wrap up this specialization and go on a high note. Hoping to do an awesome capstone project at the end :)

Instructors

Avatar

Dr Matthew Yee-King

Lecturer
Computing Department, Goldsmiths, University of London
Avatar

Dr Mick Grierson

Reader
Computing Department, Goldsmiths, University of London

About University of London

The University of London is a federal University which includes 18 world leading Colleges. Our distance learning programmes were founded in 1858 and have enriched the lives of thousands of students, delivering high quality University of London degrees wherever our students are across the globe. Our alumni include 7 Nobel Prize winners. Today, we are a global leader in distance and flexible study, offering degree programmes to over 50,000 students in over 180 countries. To find out more about studying for one of our degrees where you are, visit www.london.ac.uk...

About Goldsmiths, University of London

Championing research-rich degrees that provoke thought, stretch the imagination and tap into tomorrow’s world, at Goldsmiths we’re asking the questions that matter now in subjects as diverse as the arts and humanities, social sciences, cultural studies, computing, and entrepreneurial business and management. We are a community defined by its people: innovative in spirit, analytical in approach and open to all....

About the Responsive Website Development and Design Specialization

This Specialization covers the basics of modern full stack web development, from UX design, to front-end coding, to custom databases. You’ll build foundational skills in a full range of technologies, including HTML/CSS, Javascript, and MongoDB, and you’ll learn to implement a reactive, multi-user web application using the meteor.js framework. We’ll also touch on more advanced topics, such as APIs, data visualization, and animation....
Responsive Website Development and Design

Frequently Asked Questions

  • Once you enroll for a Certificate, you’ll have access to all videos, quizzes, and programming assignments (if applicable). Peer review assignments can only be submitted and reviewed once your session has begun. If you choose to explore the course without purchasing, you may not be able to access certain assignments.

  • 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. If you only want to read and view the course content, you can audit the course for free.

More questions? Visit the Learner Help Center.