Overview

Coursera Plus Annual Sale: All Certificates & Courses 25% Off!

Grab it

This course provides a foundational understanding of web development, focusing on essential browser-side techniques. Topics include creating web pages using HTML, enhancing them with CSS for styling, and incorporating visually appealing interactive content. Students will learn to write JavaScript code to add interactivity to web pages and manipulate the Document Object Model (DOM) for dynamic content updates. The course also emphasizes modular JavaScript coding, allowing students to tackle programming projects of increasing complexity. Additionally, the curriculum introduces scalable vector graphics (SVG) and the HTML canvas—two powerful tools for creating rich visual elements and animations on web pages. Throughout the course, students will engage in practical programming exercises, including the development of exciting game projects that reinforce their learning. By the end of the course, students will be well-equipped to develop their own web applications using the technologies and skills they have acquired.

Syllabus

HTML and CSS

In this module, you will acquire fundamental skills in HTML and CSS. You will begin with the construction of web pages from scratch, using various HTML elements to build web page components. After learning the use of CSS styles, you will be able to adjust the presentation and visual styles of the HTML elements by applying appropriate CSS rules, including font styling, paragraph, colour and spacing settings.

CSS Animations and JavaScript

In this module, you will start by learning additional CSS rules for creating simple animations. To enable further interactivity and dynamic behaviours, you will integrate simple JavaScript code into web pages. This involves the understanding and manipulation of the DOM representation of web pages inside browsers. At the end of the module is a programming exercise, where you will build a guessing game, applying the skills you have learned in the first two modules of this course.

jQuery and CSS Selectors

In this module, you will be introduced to the jQuery library, which makes JavaScript coding easier and quicker. By introducing more advanced CSS selectors, you will be able to precisely target and manipulate specific HTML elements in jQuery. After a quick look at the implementation of jQuery event handling, you will test your jQuery skills you have learned throughout this module by building a hammer game.

SVG with CSS Animations

In this module, you will learn to construct vector graphics elements on your web pages with SVG, a text-based language for creating web-based graphics. Building upon the CSS animation techniques from the previous modules, you will then apply these skills to create interesting animations of your SVG components. Additionally, you will be introduced specific CSS animation properties and JavaScript animation events, which provide you greater controls over those animations. By the end of this module, you will apply your SVG and CSS animation skills to develop a jumping game.

More JavaScript Features

In this module, you will sharpen your JavaScript skills by learning a few more JavaScript language features. First, you will be introduced to the use of JavaScript arrays and objects, including the spread operator and the destructuring operation. You will then explore different ways of writing JavaScript functions and their ability to form a closure. Using the capabilities provided by JavaScript closures, you will write modular JavaScript code using a module pattern.

Using HTML Canvas

In this module, you will be introduced the HTML canvas element, which lets you draw graphics on web pages. By writing JavaScript code, you will draw different shapes inside the HTML canvas area. The second half of the lesson will focus on using HTML canvas to work on image-based objects called sprites. By animating these sprites, you will build a game called 'Gem Rush!' at the end of the module.