Web Programming III: Deep Dive into CSS and JS (Age 12-14)


Language: English


This unit continues to extend from the foundation of Web Programming built in the preceding courses. With a solid understanding of basic HTML, CSS and JavaScript, students progress to tackle some fundamental challenges inherent in web programming - layouts and animations.


Much of the web we see today was carefully designed by a UX designer and laid out by a web developer. How we place things in a page and have it be readable, attractive, and easy to navigate for users on desktops, laptops, tablets and phones, is very important in the modern age.


On top of that, the vast majority of modern web pages feature some form of animation. It may be a status bar, a drop down menu or an image carousel. The possibilities are endless. Understanding how to create these effects with JavaScript and careful DOM manipulation is an important skill to possess.





Let us know and we shall offer tailored recommendations!

Talk to Us


Session 1 - 2 : Introduction to CSS Layouts and Responsive Design

  • Review of CSS Basics, Margins and Positions

  • Learning and applying different display modes, including Flex, a powerful way to design pages

  • What is responsive web design and why we need it

  • Hands-on: creating web pages using CSS to design and layout pages

Session 3 - 5 : Interactive CSS Animations

  • Learning @keyframe animations and CSS pseudo-selectors

  • Learning the transform CSS property

  • Learning transition, perspective, overflow and z-index CSS properties

  • Hands-on: Building animated web pages

Session 6 - 8 : Advanced Front-end Javascript Logic

  • Reviewing and applying fundamental JavaScript methods, including string manipulation, loops, conditionals and logical operators

  • Reviewing DOM traversal, and learning targeting methods on HTML elements

  • Manipulating HTML and CSS properties with JavaScript, including creating, appending and destroying HTML elements

  • Hands-on: Creating interactive, front-end web pages

Session 9 - 10: Programming an interactive webpage

  • Refresher on user design principles 

  • Creating individual projects and performing continuous testing

  • Presenting the project to the rest of class


8:1 Ratio Guarantee

We believe in developing a personal relationship with the student. Our instructors are as much teachers as we are facilitators, and coach for our students' learning. By ensuring a small class, each student benefits from maximum attention from instructor and teaching assistant, and at the same time, learns from peers.

Personalized Learning

Our courses are designed for students to run at their own pace. Our curriculum is level-based for each module, meaning that each student can learn at their own appropriate, customized pace.

Hands-on Project-based Learning

First Code classrooms are messy, chaotic and we love it! We believe in hands-on creation, experimental learning and lots of discussion.

Follow on Curriculum for Immersed Learning

What happens after this holiday? Like learning any other language, learning to code is best done through an immersive, continual commitment. We offer a multi-year curriculum that allows students to deepen and broaden their interests in computer science and software development.


View Schedule for Location

There is no more camp or workshop available in this holiday season, check out Core Programs or other Holiday Camps for continuous learning.


Introduce a friend to First Code Academy and they’ll get $380 HKD towards their first enrollment. You’ll get $380 HKD in credit once they enroll. Only for first time First Code Academy parents!

See Step by Step Guide

Friends in Shanghai & Shenzhen?

Introduce them to First Code Academy and they’ll get $300 RMB off their summer enrollment. You’ll get $380 HKD in credit once they enroll.

Read More