Responsive Website Tutorial and Examples (Coursera)

Responsive Website Tutorial and Examples (Coursera)

In this course, we will show you exciting examples of collaborative, interactive web applications that use various types of media including sound, images and big data. We will show you how to build sites that provide precisely this functionality, using Meteor. We will also provide fully working example application code that you can use for your own commercial web projects. The course also provides a range of advice and suggestions about how to develop bespoke web applications which match the requirements of clients, where clients are people who commission the product or people who use the product.

Class Deals by MOOC List - Click here and see Coursera's Active Discounts, Deals, and Promo Codes.

We will take you through the development of the following applications:

  1. A portfolio website with collaborative blogging functionality.
  2. An interactive, realtime, multi user music remixing system.
  3. An interactive, online graffiti wall where users can collaborate to create graphics.
  4. An interactive data visualisation platform for exploring and plotting big data in exciting ways.

At the end of this course, you will be able to:
• Implement animated data visualisations and graphics using advanced user interface libraries such as vis.js
• Work with external data sources
• Create multi user, realtime, collaborative environments
• Use media APIs such as the Web Audio API
Participation in or completion of this online course will not confer academic credit for University of London programmes.

Course 5 of 6 in the Responsive Website Development and Design Specialization

Syllabus

WEEK 1
Responsive Website Tutorials and Examples outline: Course overview
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

WEEK 2
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.

WEEK 3
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.

WEEK 4
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.

Go to Class
MOOC List is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

Related Courses

Python Data Visualization (Coursera) Coursera
Rice University

Python Data Visualization (Coursera)

This if the final course in the specialization which builds upon the knowledge learned in Python Programming Essentials, Python Data Representations, and Python Data Analysis. We will learn how to install external packages for use within Python, acquire data from sources on the Web, and then we will clean, process, analyze, and visualize that data. This course will combine the skills learned throughout the specialization to enable you to write interesting, practical, and useful programs.

Sep 4th 2026
4 Weeks
Learn Bootstrap (Coursera) Coursera
Scrimba

Learn Bootstrap (Coursera)

This instructional course guides you through the essential knowledge required to build comprehensive websites using Bootstrap v4. Bootstrap is an open-source front-end framework designed for responsive development, prioritizing mobile-first websites and web applications. The Scrimba course offers interactive code engagement within tutorials, providing an opportunity to reinforce concepts as you learn.

Sep 7th 2026
1 Week
Healthcare Information Design and Visualizations (Coursera) Coursera
Northeastern University

Healthcare Information Design and Visualizations (Coursera)

Introduces processes and design principles for creating meaningful displays of information that support effective business decision-making. Studies how to collect and process data; create visualizations (both static and interactive); and use them to provide insight into a problem, situation, or opportunity. Introduces methods to critique visualizations along with ways to answer the elusive question: “What makes a visualization effective?”

Sep 7th 2026
4 Weeks
Business Intelligence Concepts, Tools, and Applications (Coursera) Coursera
University of Colorado System

Business Intelligence Concepts, Tools, and Applications (Coursera)

This is the fourth course in the Data Warehouse for Business Intelligence specialization. Ideally, the courses should be taken in sequence. In this course, you will gain the knowledge and skills for using data warehouses for business intelligence purposes and for working as a business intelligence developer. You’ll have the opportunity to work with large data sets in a data warehouse environment and will learn the use of MicroStrategy's Online Analytical Processing (OLAP) and Visualization capabilities to create visualizations and dashboards.

Aug 31st 2026
5-12 Weeks
Introduction to Accounting Data Analytics and Visualization (Coursera) Coursera
University of Illinois at Urbana-Champaign

Introduction to Accounting Data Analytics and Visualization (Coursera)

Accounting has always been about analytical thinking. From the earliest days of the profession, Luca Pacioli emphasized the importance of math and order for analyzing business transactions. The skillset that accountants have needed to perform math and to keep order has evolved from pencil and paper, to typewriters and calculators, then to spreadsheets and accounting software. A new skillset that is becoming more important for nearly every aspect of business is that of big data analytics: analyzing large amounts of data to find actionable insights. This course is designed to help accounting students develop an analytical mindset and prepare them to use data analytic programming languages like Python and R.

Sep 7th 2026
5-12 Weeks
Python and Statistics for Financial Analysis (Coursera) Coursera
The Hong Kong University of Science and Technology - HKUST

Python and Statistics for Financial Analysis (Coursera)

Python is now becoming the number 1 programming language for data science. Due to python’s simplicity and high readability, it is gaining its importance in the financial industry. The course combines both python coding and statistical concepts and applies into analyzing financial data, such as stock data.

Sep 7th 2026
4 Weeks
From Excel to Power BI (Coursera) Coursera
Knowledge Accelerators

From Excel to Power BI (Coursera)

Are you using Excel to manage, analyze, and visualize your data? Would you like to do more? Perhaps you've considered Power BI as an alternative, but have been intimidated by the idea of working in an advanced environment. The fact is, many of the same tools and mechanisms exist across both these Microsoft products. This means Excel users are actually uniquely positioned to transition to data modeling and visualization in Power BI! Using methods that will feel familiar, you can learn to use Power BI to make data-driven business decisions using large volumes of data.

Sep 7th 2026
1 Week
Math for MBA and GMAT Prep (Coursera) Coursera
Emory University

Math for MBA and GMAT Prep (Coursera)

This course gives participants a basic understanding of statistics as they apply in business situations. A fair share of students considering MBA programs come from backgrounds that do not include a large amount of training in mathematics and statistics. Often, students find themselves at a disadvantage when they apply for or enroll in MBA programs. This course will give you the tools to understand how these business statistics are calculated for navigating the built-in formulas that are included in Excel, but also how to apply these formulas in an range of business settings and situations.

Sep 7th 2026
5-12 Weeks
Julia Scientific Programming (Coursera) Coursera
University of Cape Town

Julia Scientific Programming (Coursera)

This four-module course introduces users to Julia as a first language. Julia is a high-level, high-performance dynamic programming language developed specifically for scientific computing. This language will be particularly useful for applications in physics, chemistry, astronomy, engineering, data science, bioinformatics and many more.

Sep 14th 2026
4 Weeks
Introduction to ES6+ (Coursera) Coursera
Scrimba

Introduction to ES6+ (Coursera)

Introduction to ES6+ covers modern JavaScript features, specifically ES6 and newer ECMAScript versions. JavaScript, a widely used programming language in various domains, is essential for developers aiming to stay relevant across web applications, servers, mobile, and IoT devices. Developers who are already familiar with JavaScript will be able to update their skills and broaden their knowledge in this tiny but mighty course.

Sep 7th 2026
1 Week
Learn Imba (Coursera) Coursera
Scrimba

Learn Imba (Coursera)

In this class, you'll dive into Imba, the programming language used to build scrimba.com. Imba, a compile-to-JavaScript language, packs a punch with nifty features for whipping up web apps, including built-in tags and styles. We'll cover the ABCs of Imba syntax and work on creating a Dopamine Box app. By the finish line, you'll be armed with the skills to construct your very own web app UI using Imba.

Sep 14th 2026
1 Week