Creating Websites with HTML/CSS

In the first lesson on Creating Websites with HTML/CSS, the students create a web comic book. They also get introduced to the interaction between HTML, browsers, and web servers. This hands-on session involves updating existing HTML code by changing images and dialogues of comic characters, providing a solid foundation for exploring more advanced concepts in HTML and CSS in future lessons.

In this lesson, students engage in creating a storybook on a silly case of missing socks. Students will create their first webpage from scratch and learn about the basic structure of HTML pages, and how HTML uses tags to display things on the web. They will use the basic tags to write their creative and silly story using headings and paragraphs. This lesson provides an exciting opportunity for the students to learn and apply their HTML skills.

In this lesson, students get introduced to the stylesheet of the web, CSS. Throughout this lesson, they create a fun Wizard Newsletter. They learn to select and style everything showing on the boring wizard newspaper using their CSS wand, add unique fonts, play around with headings, change the alignment, text size, and add decorative borders all using CSS. This lesson shows the real-time usage and power of CSS to the students.

In this lesson, students create a Movie Quiz that shows a movie scene and the player has to guess the movie. The primary emphasis of this class is to use attributes in HTML tags. They also learn to switch between pages in their quiz and style every element uniquely. They learn to change the size of images.

In this lesson, students learn to position images in specific locations using the Wizard Scavenger Hunt game. They also master showing or hiding elements with CSS when hovering over them. Additionally, they learn to integrate background audio into HTML pages, enhancing the user experience. This session focuses on practical skills in web design, such as image manipulation, interactive hover effects, and audio incorporation, providing hands-on experience in creating more dynamic and engaging web content.

In this lesson, students apply the concepts they have learned so far and begin working on their mid-term project: an escape room where players must find and click on hidden objects to escape. In the initial phase of the project, they use CSS to add a background image and position objects in the room. They also display the riddle that players need to solve to escape, integrating both design and interactive elements into their web development skills. This session focuses on practical application, blending creativity with technical know-how to create an engaging escape room experience.

In this lesson, students add the final touches to their escape room project. They apply CSS opacity to conceal and reveal objects on hover, and link the correct object to a second room using an anchor tag. They also add a new riddle, guiding players to the final room’s escape object and the win page. This session focuses on enhancing interactivity and user engagement in web development.

In this class, students create a “choose your character” screen. They learn to use containers for better organization and apply CSS to design elements like background colors and borders on character cards. Additionally, they focus on aligning HTML elements and adjusting margins for a more refined interface. This session is about applying CSS and HTML skills to enhance visual layout and user interaction in web design.

In this class, students create a tourism webpage. They acquire the skill to include input fields, like a search bar, and integrate buttons into their websites. They also develop an image gallery featuring popular tourist destinations, designed to attract users’ attention. The lesson focuses on teaching students how to create and style input elements using classes and create professional looking webpages.

In this class, students work on a project to create a platform called “Tiny Tunes,” a replication of YouTube. They learn to construct a navigation bar and integrate videos with playback controls like play, pause, and volume adjustment. This project enhances their ability to build functional and interactive websites, focusing on video integration and advanced web design techniques.

In this class, students begin their final project: designing a website for a professional gaming studio. They apply their skills to create a site with navigation, an engaging hero section, game showcases, information about the company’s approach, a portfolio, a contact form, and a footer. This project focuses on combining various web design elements to create a comprehensive and professional online presence for a gaming studio.

In this class, students wrap up their final project by expanding the gaming studio website with new pages. They add an About page featuring a company video and team introductions, and a Contact page outlining the studio’s pricing plans along with a contact form. This session focuses on reinforcing fundamental HTML/CSS concepts such as using classes, container elements, and implementing effective website navigation, enhancing their comprehensive web development skills.