5 students per class

WEB DEVELOPMENT LEVEL 2

Course Description

This course extends on the Web Development Level 1 course and is intended for students who would like to delve deeper into web development. This course is engaging and challenges students to build high-quality and responsive websites using HTML5, CSS3, SASS, and bootstrap.
Students will also implement javascript to build large-scale web applications easily.
Course Breakdown
Lessons 1 – 10:
● Review on HTML, CSS, and SASS Basics
● How the web works
● How to create a navigation bar
● “DJ” Project – working with audio
● Hotel Website Project
● Introduction to responsive websites
○ Getting started with media queries
○ Em and Rem units
○ Vh and Vw units
○ Making the hotel website fully responsive activity
● “My Favourite Hobby” Project – Working with links and creating a navigation bar
● “My Blog Project” – focusing on creating a navigation bar
Lessons 11 – 20:
● More CSS concepts
○ Targeted selectors
○ N-th child pseudo selectors
○ Before and after pseudo selectors
○ Box shadows
○ Text shadows
○ CSS variables
○ Keyframe animations

○ CSS transitions
○ Transform property
● 4 Mini projects with keyframes, transitions, and more advanced concepts.
● Intro to bootstrap
○ Quickly design and customize responsive mobile-first sites with Bootstrap, the
world’s most popular front-end open source toolkit, featuring Sass variables and
mixins, responsive grid system, extensive pre-built components, and powerful
JavaScript plugins.

Lessons 21 – 24:
● CSS grid
○ Grid basics and columns
○ Grid rows
○ Spanning columns and rows
○ Auto-fit and Minmax
○ Grid template areas
○ Media queries and the grid
● Begin final project
Lesson 25:
● Final Project Presentations

Materials & Resources
a. We will be using CodePen during classes. All students must have access to a computer.

Assessment
Students will be assessed through weekly quizzes, homework, and personal projects that will be
built throughout the term.