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

位教师:Gibson Lam
访问权限由 Coursera Learning Team 提供
您将获得的技能
您将学习的工具
要了解的详细信息
了解顶级公司的员工如何掌握热门技能

该课程共有6个模块
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.
涵盖的内容
12个视频5篇阅读材料1个作业
12个视频• 总计135分钟
- Course Overview• 7分钟
- Introduction, W3C and Looking at Web Page HTML• 10分钟
- Basic HTML Structure• 10分钟
- Hyperlinks and Text• 17分钟
- Lists, Tables, Special Characters and Images• 17分钟
- W3C Validator• 7分钟
- Images in Browsers• 10分钟
- Introduction• 8分钟
- Style Rules and Style Sheets• 14分钟
- CSS Font and Colour Properties• 13分钟
- CSS Paragraph, Box and Border Properties• 12分钟
- Using the Id Attribute and the Class Attribute• 11分钟
5篇阅读材料• 总计89分钟
- Notes - HTML• 35分钟
- Lesson Examples - HTML• 2分钟
- Notes - Images in Browsers• 15分钟
- Notes - CSS• 35分钟
- Lesson Examples - CSS• 2分钟
1个作业• 总计20分钟
- End of Module Quiz 1• 20分钟
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.
涵盖的内容
9个视频9篇阅读材料1个作业1次同伴评审
9个视频• 总计108分钟
- CSS Animations• 13分钟
- Using JavaScript in HTML and Variables• 17分钟
- Basic Events and Random Numbers• 18分钟
- What is the DOM?• 10分钟
- DOM Nodes• 12分钟
- Finding and Changing an Element in the DOM• 9分钟
- Traversing the DOM and Getting Elements Using Tag Name• 15分钟
- Setting and Clearing Timers• 8分钟
- Making a Countdown Timer• 7分钟
9篇阅读材料• 总计203分钟
- Notes - CSS Animations• 10分钟
- Lesson Examples - CSS Animations• 2分钟
- Notes - Introduction to JavaScript• 25分钟
- Lesson Examples - Introduction to JavaScript• 2分钟
- Notes - Handling the DOM• 30分钟
- Lesson Examples - Handling the DOM• 2分钟
- Notes - Using Timers• 10分钟
- Lesson Examples - Using Timers• 2分钟
- Instructions - Guessing Game• 120分钟
1个作业• 总计20分钟
- End of Module Quiz 2• 20分钟
1次同伴评审• 总计120分钟
- Submission - Guessing Game• 120分钟
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.
涵盖的内容
11个视频7篇阅读材料1个作业1次同伴评审
11个视频• 总计109分钟
- Using jQuery• 9分钟
- The Example HTML and Using '$'• 6分钟
- Selecting Elements in jQuery• 8分钟
- Reading and Changing Attributes and CSS Properties• 11分钟
- Reading and Changing Element Content• 7分钟
- Using Multiple CSS Selectors• 7分钟
- Selecting Things Under an Ancestor and Selecting Immediate Children• 16分钟
- Using Structural Pseudo Classes• 17分钟
- Programming Using CSS Selectors• 7分钟
- The Ready Event and the Click Event• 10分钟
- Showing and Hiding Things Using jQuery• 11分钟
7篇阅读材料• 总计196分钟
- Notes - jQuery• 30分钟
- Lesson Examples - jQuery• 2分钟
- Notes - More on CSS• 25分钟
- Lesson Examples - More on CSS• 2分钟
- Notes - jQuery Events• 15分钟
- Lesson Examples - jQuery Events• 2分钟
- Instructions - Hammer Game• 120分钟
1个作业• 总计20分钟
- End of Module Quiz 3• 20分钟
1次同伴评审• 总计120分钟
- Submission - Hammer Game• 120分钟
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.
涵盖的内容
13个视频9篇阅读材料1个作业1次同伴评审
13个视频• 总计143分钟
- Starting to Use SVG• 16分钟
- Drawing Lines• 8分钟
- Drawing Rectangles• 9分钟
- Drawing Circles and Creating Paths• 11分钟
- Drawing Text and Using Other Editors• 11分钟
- Animating SVG• 10分钟
- Using Percentage in Keyframes• 8分钟
- Controlling CSS Animations• 10分钟
- Using Animation Events• 16分钟
- Grouping Things Together• 12分钟
- Defining Things in the SVG <def>...</def> Area• 8分钟
- Using Linear Gradients• 12分钟
- Using Radial Gradients• 12分钟
9篇阅读材料• 总计213分钟
- Notes - Introduction to SVG• 30分钟
- Lesson Examples - Introduction to SVG• 2分钟
- Notes - SVG and CSS Animations• 15分钟
- Lesson Examples - SVG and CSS Animations• 2分钟
- Notes - Controlling CSS Animations• 15分钟
- Lesson Examples - Controlling CSS Animations• 2分钟
- Notes - More on SVG• 25分钟
- Lesson Examples - More on SVG• 2分钟
- Instructions - Jumping Game• 120分钟
1个作业• 总计20分钟
- End of Module Quiz 4• 20分钟
1次同伴评审• 总计120分钟
- Submission - Jumping Game• 120分钟
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.
涵盖的内容
12个视频6篇阅读材料1个作业
12个视频• 总计147分钟
- Declaring Variables• 16分钟
- Using JavaScript Arrays• 17分钟
- Using JavaScript Objects• 8分钟
- The Spread Operator• 12分钟
- Destructuring Objects and Arrays• 9分钟
- Functions as Variables and Arrow Functions• 14分钟
- JavaScript Closure• 16分钟
- A Simple Closure Example• 7分钟
- Functions with States and Function Factory Examples• 12分钟
- Working With JavaScript Files• 9分钟
- Building a GameScore Module• 15分钟
- Using the GameScore Module and IIFE• 12分钟
6篇阅读材料• 总计91分钟
- Notes - JavaScript Arrays and Objects• 35分钟
- Lesson Examples - JavaScript Arrays and Objects• 2分钟
- Notes - More on JavaScript Functions• 25分钟
- Lesson Examples - More on JavaScript Functions• 2分钟
- Notes - Basic Module Pattern• 25分钟
- Lesson Examples - Basic Module Pattern• 2分钟
1个作业• 总计20分钟
- End of Module Quiz 5• 20分钟
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.
涵盖的内容
12个视频9篇阅读材料1个作业1次同伴评审
12个视频• 总计138分钟
- Introduction to HTML Canvas• 15分钟
- Drawing Rectangles and, Using Fill and Stroke Styles• 14分钟
- Drawing Paths with Lines and Circles• 15分钟
- Adding Interactivity• 10分钟
- Drawing Text and Images• 13分钟
- Drawing the Robot Head• 4分钟
- What is a Sprite Sheet?• 7分钟
- Drawing Sprites on Canvas• 15分钟
- Working With Animations• 8分钟
- Making Sprite Animations• 17分钟
- Animation Timing• 14分钟
- Using Audio on Web Pages• 8分钟
9篇阅读材料• 总计218分钟
- Notes - Introduction to HTML Canvas• 10分钟
- Lesson Examples - Introduction to HTML Canvas• 2分钟
- Notes - Using HTML Canvas• 30分钟
- Lesson Examples - Using HTML Canvas• 2分钟
- Notes - Making Canvas Games - Drawing Sprites• 20分钟
- Lesson Examples - Making Canvas Games - Drawing Sprites• 2分钟
- Notes - Making Canvas Games - Animating Sprites• 30分钟
- Lesson Examples - Making Canvas Games - Animating Sprites• 2分钟
- Instructions - Gem Rush!• 120分钟
1个作业• 总计20分钟
- End of Module Quiz 6• 20分钟
1次同伴评审• 总计120分钟
- Submission - Gem Rush!• 120分钟
位教师

提供方

提供方

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.
人们为什么选择 Coursera 来帮助自己实现职业发展

Felipe M.

Jennifer J.

Larry W.

Chaitanya A.
从 Computer Science 浏览更多内容
TThe Hong Kong University of Science and Technology
课程
DDuke University
课程
¹ 本课程的部分作业采用 AI 评分。对于这些作业,将根据 Coursera 隐私声明使用您的数据。



