HTML & CSS

Please be aware that students must bring their own personal laptops to class for each session. Code World does not provide laptops for students use.

January 24, 2023

3:30 PM - 5:00 PM

Ages 9-12

Beginners Coding Course

This class meets once per week:

Class Time: Tuesday from 3:30 PM to 5:00 PM

These two foundational coding languages, HTML (the Hypertext Markup Language) and CSS (Cascading Style Sheets) are two of the core technologies for building on the web. HTML is responsible for the structure of a the web page and CSS provides the visual layout and styling. Learning these two languages is the first step to becoming a digital wizard and is where all Code World newcomers should probably start out. Learning these two beginner friendly coding languages will allow for entire static webpages and websites to be built which paves the way for the dynamic programming language known as JavaScript!

In this course students will cover the following:

1) How websites work
2) Visual Studio Code Setup, Shortcuts, Live Server, Emmet and many other useful extensions
3) HTML5 Semantic Layout
4) CSS3 Fundamentals
5) Modern responsive design: fluid grids, layout types, flexible images, using media queries to test for different screen widths, pixel densities, and touch capabilities
6) CSS Units - rem, em, vh, vw, etc.
7) Flexbox layouts: main concepts, introduction to both flex container and flex item-specific properties, advanced positioning techniques applied to a real-world project
8) CSS Grid layouts: main concepts, CSS grid vs flexbox, and layout techniques applied to a real-world project
9) Advanced CSS selectors, pseudo-classes, and pseudo-elements required for modern CSS development
10) How CSS works behind the scenes: the cascade, specificity, inheritance, value processing, the visual formatting model, the box model, box types, positioning schemes, and stacking contexts
11) Component-based design, writing reusable, maintainable, and scalable code
12) Advanced responsive design workflows: mobile-first vs desktop-first strategies, selecting breakpoints, em vs rem units and feature queries to test for browser support
13) SVG images in HTML and CSS: how and why to use SVG, generating SVG sprites, changing SVG colors in CSS and best practices
14) Videos in HTML and CSS: building a background video effect
15) Advanced CSS animations with @keyframes, animation, and transition

In this course students will do the following:

1) Build Multiple High Quality Website & UI Projects
2) Learn the HTML5 Semantic Layout & CSS3 Fundamentals
3) Build numerous Flexbox & CSS Grid Projects
4) Learn how to use CSS Variables, Transitions, Dropdowns, Overlays & More
5) Learn about Website Hosting & Deployment with Git and Netlify