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.
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分钟
CSS Animations and JavaScript
第 2 单元•小时 后完成
单元详情
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分钟
jQuery and CSS Selectors
第 3 单元•小时 后完成
单元详情
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分钟
SVG with CSS Animations
第 4 单元•小时 后完成
单元详情
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分钟
More JavaScript Features
第 5 单元•小时 后完成
单元详情
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分钟
Using HTML Canvas
第 6 单元•小时 后完成
单元详情
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分钟
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.
确定
从 Mobile and Web Development 浏览更多内容
T
The Hong Kong University of Science and Technology
When will I have access to the lectures and assignments?
To access the course materials, assignments and to earn a Certificate, you will need to purchase the Certificate experience when you enroll in a course. You can try a Free Trial instead, or apply for Financial Aid. The course may offer 'Full Course, No Certificate' instead. This option lets you see all course materials, submit required assessments, and get a final grade. This also means that you will not be able to purchase a Certificate experience.
What will I get if I purchase the Certificate?
When you purchase a Certificate you get access to all course materials, including graded assignments. Upon completing the course, your electronic Certificate will be added to your Accomplishments page - from there, you can print your Certificate or add it to your LinkedIn profile.
Is financial aid available?
Yes. In select learning programs, you can apply for financial aid or a scholarship if you can’t afford the enrollment fee. If fin aid or scholarship is available for your learning program selection, you’ll find a link to apply on the description page.