К содержимому
learnspaceYOUR NEXT CHAPTER
ПРОСТРАНСТВО ОБУЧЕНИЯ
ГлавнаяКаталог курсовМоё обучениеCoursera

Знания без границ

Учитесь у лучших университетов и компаний мира.

Открыть Coursera
Интеграция
Пространство университета
Моё пространствоСтраница курса
↵
ЯЛичный кабинетСтудент
© 2026 LearnSpaceКаждый день — возможность узнать больше.Помощь
Learning HTML, CSS and JavaScript through Game Development · LearnSpace
Назад в каталог
courseraПрограммирование

Learning HTML, CSS and JavaScript through Game Development

Курс от The Hong Kong University of Science and Technology
Средний≈ 39.9 чАнглийский
О курсеНавыкиПрограммаПреподаватели

О курсе

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.

Навыки, которые вы освоите

JavascriptCascading Style Sheets (CSS)Hypertext Markup Language (HTML)AnimationsAnimation and Game DesignjQueryWeb DevelopmentHTML and CSSSoftware Design PatternsWeb Design and DevelopmentWeb ApplicationsEvent-Driven ProgrammingJavascript and jQueryFront-End Web Development

Программа курса

6 модулей · 124 учебных материалов

01HTML and CSS18 материалов

Course Overview

Course OverviewВидео

1.1 HTML

Notes - HTMLЧтениеLesson Examples - HTMLЧтениеIntroduction, W3C and Looking at Web Page HTMLВидео

Учитесь у экспертов

Gibson Lam

Assistant Professor of Engineering Education

Learning HTML, CSS and JavaScript through Game Development
В каталоге вашей программы

Инвестируйте в себя

Новые знания — в удобное для вас время.

Начать на Coursera

Обучение откроется на Coursera
в новой вкладке

Обучение на Coursera

≈ 39.9 ч

6 модулей

Язык: Английский

Субтитры: Арабский, Французский, Узбекский, Итальянский, Корейский, Немецкий, Индонезийский, Испанский, Японский, Казахский

Часть программы вашего университета
Basic HTML StructureВидео
Hyperlinks and TextВидео
Lists, Tables, Special Characters and ImagesВидео
W3C ValidatorВидео

1.2 Images in Browsers

Notes - Images in BrowsersЧтениеImages in BrowsersВидео

1.3 CSS

Notes - CSSЧтениеLesson Examples - CSSЧтениеIntroductionВидеоStyle Rules and Style SheetsВидеоCSS Font and Colour PropertiesВидеоCSS Paragraph, Box and Border PropertiesВидеоUsing the Id Attribute and the Class AttributeВидео

End of Module Quiz

End of Module Quiz 1Задание
02CSS Animations and JavaScript20 материалов

2.1 CSS Animations

Notes - CSS AnimationsЧтениеLesson Examples - CSS AnimationsЧтениеCSS AnimationsВидео

2.2 Introduction to JavaScript

Notes - Introduction to JavaScriptЧтениеLesson Examples - Introduction to JavaScriptЧтениеUsing JavaScript in HTML and VariablesВидеоBasic Events and Random NumbersВидео

2.3 Handling the DOM

Notes - Handling the DOMЧтениеLesson Examples - Handling the DOMЧтениеWhat is the DOM?ВидеоDOM NodesВидеоFinding and Changing an Element in the DOMВидеоTraversing the DOM and Getting Elements Using Tag NameВидео

2.4 Using Timers

Notes - Using TimersЧтениеLesson Examples - Using TimersЧтениеSetting and Clearing TimersВидеоMaking a Countdown TimerВидео

Programming Assignment 1 - Guessing Game

Instructions - Guessing GameЧтениеSubmission - Guessing GameВзаимная проверка

End of Module Quiz

End of Module Quiz 2Задание
03jQuery and CSS Selectors20 материалов

3.1 jQuery

Notes - jQueryЧтениеLesson Examples - jQueryЧтениеUsing jQueryВидеоThe Example HTML and Using '$'ВидеоSelecting Elements in jQueryВидеоReading and Changing Attributes and CSS PropertiesВидеоReading and Changing Element ContentВидео

3.2 More on CSS

Notes - More on CSSЧтениеLesson Examples - More on CSSЧтениеUsing Multiple CSS SelectorsВидеоSelecting Things Under an Ancestor and Selecting Immediate ChildrenВидеоUsing Structural Pseudo ClassesВидеоProgramming Using CSS SelectorsВидео

3.3 jQuery Events

Notes - jQuery EventsЧтениеLesson Examples - jQuery EventsЧтениеThe Ready Event and the Click EventВидеоShowing and Hiding Things Using jQueryВидео

Programming Assignment 2 - Hammer Game

Instructions - Hammer GameЧтениеSubmission - Hammer GameВзаимная проверка

End of Module Quiz

End of Module Quiz 3Задание
04SVG with CSS Animations24 материалов

4.1 Introduction to SVG

Notes - Introduction to SVGЧтениеLesson Examples - Introduction to SVGЧтениеStarting to Use SVGВидеоDrawing LinesВидеоDrawing RectanglesВидеоDrawing Circles and Creating PathsВидеоDrawing Text and Using Other EditorsВидео

4.2 SVG and CSS Animations

Notes - SVG and CSS AnimationsЧтениеLesson Examples - SVG and CSS AnimationsЧтениеAnimating SVGВидеоUsing Percentage in KeyframesВидео

4.3 Controlling CSS Animations

Notes - Controlling CSS AnimationsЧтениеLesson Examples - Controlling CSS AnimationsЧтениеControlling CSS AnimationsВидеоUsing Animation EventsВидео

4.4 More on SVG

Notes - More on SVGЧтениеLesson Examples - More on SVGЧтениеGrouping Things TogetherВидеоDefining Things in the SVG <def>...</def> AreaВидеоUsing Linear GradientsВидеоUsing Radial GradientsВидео

Programming Assignment 3 - Jumping Game

Instructions - Jumping GameЧтениеSubmission - Jumping GameВзаимная проверка

End of Module Quiz

End of Module Quiz 4Задание
05More JavaScript Features19 материалов

5.1 JavaScript Arrays and Objects

Notes - JavaScript Arrays and ObjectsЧтениеLesson Examples - JavaScript Arrays and ObjectsЧтениеDeclaring VariablesВидеоUsing JavaScript ArraysВидеоUsing JavaScript ObjectsВидеоThe Spread OperatorВидеоDestructuring Objects and ArraysВидео

5.2 More on JavaScript Functions

Notes - More on JavaScript FunctionsЧтениеLesson Examples - More on JavaScript FunctionsЧтениеFunctions as Variables and Arrow FunctionsВидеоJavaScript ClosureВидеоA Simple Closure ExampleВидеоFunctions with States and Function Factory ExamplesВидео

5.3 Basic Module Pattern

Notes - Basic Module PatternЧтениеLesson Examples - Basic Module PatternЧтениеWorking With JavaScript FilesВидеоBuilding a GameScore ModuleВидеоUsing the GameScore Module and IIFEВидео

End of Module Quiz

End of Module Quiz 5Задание
06Using HTML Canvas23 материалов

6.1 Introduction to HTML Canvas

Notes - Introduction to HTML CanvasЧтениеLesson Examples - Introduction to HTML CanvasЧтениеIntroduction to HTML CanvasВидео

6.2 Using HTML Canvas

Notes - Using HTML CanvasЧтениеLesson Examples - Using HTML CanvasЧтениеDrawing Rectangles and, Using Fill and Stroke StylesВидеоDrawing Paths with Lines and CirclesВидеоAdding InteractivityВидеоDrawing Text and ImagesВидеоDrawing the Robot HeadВидео

6.3 Making Canvas Games - Drawing Sprites

Notes - Making Canvas Games - Drawing SpritesЧтениеLesson Examples - Making Canvas Games - Drawing SpritesЧтениеWhat is a Sprite Sheet?ВидеоDrawing Sprites on CanvasВидео

6.4 Making Canvas Games - Animating Sprites

Notes - Making Canvas Games - Animating SpritesЧтениеLesson Examples - Making Canvas Games - Animating SpritesЧтениеWorking With AnimationsВидеоMaking Sprite AnimationsВидеоAnimation TimingВидеоUsing Audio on Web PagesВидео

Programming Assignment 4 - Gem Rush!

Instructions - Gem Rush!ЧтениеSubmission - Gem Rush!Взаимная проверка

End of Module Quiz

End of Module Quiz 6Задание