Fun & Easy Introduction to Web Development

Learn to create a square div by setting height and width, apply a blue 2px solid border, round edges with border radius, and use a light gray background.

Learn to create space on a simple web page by using padding and margin, applying four pixels of top padding and twelve pixels of bottom margin, and targeting individual sides.

Move from inline styles to style tags and classes, applying a rounded border and blue text via a class and an id, and link an external stylesheet.

Explore how CSS frameworks like Materialize use a responsive grid system to adapt layouts across small, medium, and large screens, using containers, rows, and columns with s, m, l breakpoints.

Learn JavaScript basics by exploring variables, strings, numbers, and booleans, using let and const, and practice in the browser console to interact with web pages.

Learn to log values with console.log, display alerts, and update page content using innerHTML via getElementById to debug a group chat site.

Learn how the JavaScript if else statement evaluates boolean conditions to choose between code blocks, use else as a default, and combine tests with and/or operators.

Learn how to define reusable JavaScript functions, work with variables and template literals, and pass parameters to customize messages like automated email replies.

Learn how to retrieve user input from a web page into JavaScript, including text inputs, selects, and checkboxes, by using getElementById and reading value or checked properties.

Learn to iterate over objects with the for loop, accessing each key via a loop variable and bracket notation rather than dot notation, which is better suited for objects.