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.

Learning HTML, CSS and JavaScript through Game Development

Learning HTML, CSS and JavaScript through Game Development

Instructor: Gibson Lam
Access provided by HKUST
Recommended experience
Recommended experience
Intermediate level
At least 2 years of programming experience in intermediate level
Recommended experience
Recommended experience
Intermediate level
At least 2 years of programming experience in intermediate level
Details to know

Add to your LinkedIn profile
See how employees at top companies are mastering in-demand skills

There are 6 modules in this course
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.
What's included
12 videos5 readings1 assignment
12 videos•Total 135 minutes
- Course Overview•7 minutes
- Introduction, W3C and Looking at Web Page HTML•10 minutes
- Basic HTML Structure•10 minutes
- Hyperlinks and Text•17 minutes
- Lists, Tables, Special Characters and Images•17 minutes
- W3C Validator•7 minutes
- Images in Browsers•10 minutes
- Introduction•8 minutes
- Style Rules and Style Sheets•14 minutes
- CSS Font and Colour Properties•13 minutes
- CSS Paragraph, Box and Border Properties•12 minutes
- Using the Id Attribute and the Class Attribute•11 minutes
5 readings•Total 89 minutes
- Notes - HTML•35 minutes
- Lesson Examples - HTML•2 minutes
- Notes - Images in Browsers•15 minutes
- Notes - CSS•35 minutes
- Lesson Examples - CSS•2 minutes
1 assignment•Total 20 minutes
- End of Module Quiz 1•20 minutes
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.
What's included
9 videos9 readings1 assignment1 peer review
9 videos•Total 108 minutes
- CSS Animations•13 minutes
- Using JavaScript in HTML and Variables•17 minutes
- Basic Events and Random Numbers•18 minutes
- What is the DOM?•10 minutes
- DOM Nodes•12 minutes
- Finding and Changing an Element in the DOM•9 minutes
- Traversing the DOM and Getting Elements Using Tag Name•15 minutes
- Setting and Clearing Timers•8 minutes
- Making a Countdown Timer•7 minutes
9 readings•Total 203 minutes
- Notes - CSS Animations•10 minutes
- Lesson Examples - CSS Animations•2 minutes
- Notes - Introduction to JavaScript•25 minutes
- Lesson Examples - Introduction to JavaScript•2 minutes
- Notes - Handling the DOM•30 minutes
- Lesson Examples - Handling the DOM•2 minutes
- Notes - Using Timers•10 minutes
- Lesson Examples - Using Timers•2 minutes
- Instructions - Guessing Game•120 minutes
1 assignment•Total 20 minutes
- End of Module Quiz 2•20 minutes
1 peer review•Total 120 minutes
- Submission - Guessing Game•120 minutes
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.
What's included
11 videos7 readings1 assignment1 peer review
11 videos•Total 109 minutes
- Using jQuery•9 minutes
- The Example HTML and Using '$'•6 minutes
- Selecting Elements in jQuery•8 minutes
- Reading and Changing Attributes and CSS Properties•11 minutes
- Reading and Changing Element Content•7 minutes
- Using Multiple CSS Selectors•7 minutes
- Selecting Things Under an Ancestor and Selecting Immediate Children•16 minutes
- Using Structural Pseudo Classes•17 minutes
- Programming Using CSS Selectors•7 minutes
- The Ready Event and the Click Event•10 minutes
- Showing and Hiding Things Using jQuery•11 minutes
7 readings•Total 196 minutes
- Notes - jQuery•30 minutes
- Lesson Examples - jQuery•2 minutes
- Notes - More on CSS•25 minutes
- Lesson Examples - More on CSS•2 minutes
- Notes - jQuery Events•15 minutes
- Lesson Examples - jQuery Events•2 minutes
- Instructions - Hammer Game•120 minutes
1 assignment•Total 20 minutes
- End of Module Quiz 3•20 minutes
1 peer review•Total 120 minutes
- Submission - Hammer Game•120 minutes
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.
What's included
13 videos9 readings1 assignment1 peer review
13 videos•Total 143 minutes
- Starting to Use SVG•16 minutes
- Drawing Lines•8 minutes
- Drawing Rectangles•9 minutes
- Drawing Circles and Creating Paths•11 minutes
- Drawing Text and Using Other Editors•11 minutes
- Animating SVG•10 minutes
- Using Percentage in Keyframes•8 minutes
- Controlling CSS Animations•10 minutes
- Using Animation Events•16 minutes
- Grouping Things Together•12 minutes
- Defining Things in the SVG <def>...</def> Area•8 minutes
- Using Linear Gradients•12 minutes
- Using Radial Gradients•12 minutes
9 readings•Total 213 minutes
- Notes - Introduction to SVG•30 minutes
- Lesson Examples - Introduction to SVG•2 minutes
- Notes - SVG and CSS Animations•15 minutes
- Lesson Examples - SVG and CSS Animations•2 minutes
- Notes - Controlling CSS Animations•15 minutes
- Lesson Examples - Controlling CSS Animations•2 minutes
- Notes - More on SVG•25 minutes
- Lesson Examples - More on SVG•2 minutes
- Instructions - Jumping Game•120 minutes
1 assignment•Total 20 minutes
- End of Module Quiz 4•20 minutes
1 peer review•Total 120 minutes
- Submission - Jumping Game•120 minutes
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.
What's included
12 videos6 readings1 assignment
12 videos•Total 147 minutes
- Declaring Variables•16 minutes
- Using JavaScript Arrays•17 minutes
- Using JavaScript Objects•8 minutes
- The Spread Operator•12 minutes
- Destructuring Objects and Arrays•9 minutes
- Functions as Variables and Arrow Functions•14 minutes
- JavaScript Closure•16 minutes
- A Simple Closure Example•7 minutes
- Functions with States and Function Factory Examples•12 minutes
- Working With JavaScript Files•9 minutes
- Building a GameScore Module•15 minutes
- Using the GameScore Module and IIFE•12 minutes
6 readings•Total 91 minutes
- Notes - JavaScript Arrays and Objects•35 minutes
- Lesson Examples - JavaScript Arrays and Objects•2 minutes
- Notes - More on JavaScript Functions•25 minutes
- Lesson Examples - More on JavaScript Functions•2 minutes
- Notes - Basic Module Pattern•25 minutes
- Lesson Examples - Basic Module Pattern•2 minutes
1 assignment•Total 20 minutes
- End of Module Quiz 5•20 minutes
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.
What's included
12 videos9 readings1 assignment1 peer review
12 videos•Total 138 minutes
- Introduction to HTML Canvas•15 minutes
- Drawing Rectangles and, Using Fill and Stroke Styles•14 minutes
- Drawing Paths with Lines and Circles•15 minutes
- Adding Interactivity•10 minutes
- Drawing Text and Images•13 minutes
- Drawing the Robot Head•4 minutes
- What is a Sprite Sheet?•7 minutes
- Drawing Sprites on Canvas•15 minutes
- Working With Animations•8 minutes
- Making Sprite Animations•17 minutes
- Animation Timing•14 minutes
- Using Audio on Web Pages•8 minutes
9 readings•Total 218 minutes
- Notes - Introduction to HTML Canvas•10 minutes
- Lesson Examples - Introduction to HTML Canvas•2 minutes
- Notes - Using HTML Canvas•30 minutes
- Lesson Examples - Using HTML Canvas•2 minutes
- Notes - Making Canvas Games - Drawing Sprites•20 minutes
- Lesson Examples - Making Canvas Games - Drawing Sprites•2 minutes
- Notes - Making Canvas Games - Animating Sprites•30 minutes
- Lesson Examples - Making Canvas Games - Animating Sprites•2 minutes
- Instructions - Gem Rush!•120 minutes
1 assignment•Total 20 minutes
- End of Module Quiz 6•20 minutes
1 peer review•Total 120 minutes
- Submission - Gem Rush!•120 minutes
Instructor

Offered by

Offered by

HKUST is a world-class research-intensive university that focuses on science, technology, and business as well as humanities and social science. HKUST offers an international campus, and a holistic and interdisciplinary pedagogy to nurture well-rounded graduates with a global vision, a strong entrepreneurial spirit, and innovative thinking.
Why people choose Coursera for their career

Felipe M.

Jennifer J.

Larry W.

Chaitanya A.
Âą Some assignments in this course are AI-graded. For these assignments, your data will be used in accordance with Coursera's Privacy Notice.