Fundamentals of Web Development

In the first lesson of Web Development with HTML & CSS, students begin by creating their own profile webpage, learning to structure content with headings, paragraphs, and images. They also use a provided CSS file to style their pages, bringing them to life with colors and layout. Along the way, students explore core HTML tags and get a first look at how styling works on the web. This foundational lesson sets the stage for a creative and engaging journey into front-end development.

In this lesson of Web Development with HTML & CSS, students discovered the power of CSS to transform plain webpages into visually engaging designs. By creating the Wizardry Newspaper, they explored creative font styling, text alignment, sizing, and decoration. They enhanced their layouts with borders and spacing, and added magical finishing touches using image filters—building a strong foundation in modern web styling.

In this lesson of Web Development with JavaScript, students brought their projects to life by building a basic Alexa-style talk bot—their first interactive JavaScript project. Along the way, they explored essential programming concepts like syntax, variables, if-else statements, and functions. To make their bot responsive, they learned how to dynamically update HTML content through button clicks, laying the groundwork for interactive web experiences.

In this lesson, students kicked off their mid-term project by building a virtual music band, starting with a playable drum set triggered by mouse clicks. As they brought the instruments to life, they explored the use of the CSS `position` property to accurately arrange each component and learned how to organize and insert images from different folders—strengthening both their visual layout skills and project organization techniques.

In this lesson, students continued their Music Band project by adding sound to their virtual instruments. They learned how to embed audio into a webpage and reviewed creating JavaScript functions, including passing data through parameters. To boost interactivity, they explored how to play and pause audio with JavaScript, and as a bonus, used CSS selectors to change how elements look when hovered over or clicked.

In this lesson, students created a “My Canvas” app by using HTML containers to structure their layout and JavaScript to bring it to life. They explored how to apply custom colors using hex codes and RGB values, and learned to change styles like background color and shape dynamically. As a result, they built a fully customizable digital canvas—combining creativity with hands-on coding practice.

In this lesson, students created a project called Superhero Cards, starting with a single interactive card. They were introduced to the Document Object Model (DOM) and learned how to use DOM manipulation to change content and appearance based on user interactions. To make their code more efficient, they also explored the jQuery library—learning how to simplify complex JavaScript tasks with shorter, cleaner syntax.

In this lesson, students focused on building their jQuery skills by creating an animated image slider featuring their favorite scientists. They implemented smooth fade transitions between images and learned how to modify CSS properties through jQuery to animate elements dynamically. As a bonus, they explored using the `transform` property to flip HTML elements horizontally—adding a fun and visually engaging twist to their project.

In this lesson, students learned how to add videos to their webpages by working on their class project: Arcade Gameplay. They practiced positioning a video inside a styled game box and added a custom progress bar using the HTML5 `progress` tag. To take it a step further, they also explored how to embed YouTube videos—bringing dynamic multimedia content into their projects.

In this lesson, students began their final project of the course: a Quick Notes app. This project served as a fun recap of key concepts learned throughout the course, combining HTML, CSS, and JavaScript. Students implemented functionality that allowed users to add notes with a single click and styled the app for a clean, user-friendly experience. They will continue building on this project in the next lesson.

In this concluding lesson, students wrapped up their Quick Notes app by learning how to store small amounts of data directly in the browser. This allowed them to complete their project and create a fully functional note-taking tool. It marked the perfect end to an amazing course, where they explored and applied key concepts in web development from start to finish.