Students will learn how to use HTML to create and format headers on a web page. They will understand the different header tags and how they help organize content.
HTML Basics
Heading
This lesson focuses on changing text colors and fonts in HTML. Students will learn how to style text to make it more visually appealing.
Text Colors
Fonts
Students will explore HTML as a language and learn about its basic structure. They'll understand how HTML elements are organized to build web pages.
HTML as a Language
HTML Structure
This lesson teaches students how to set background colors and add titles to their HTML pages. They will learn how to enhance the visual design of their web pages.
Background Color
HTML Title
Students will practice basic web design techniques by working with paragraphs in HTML. They'll learn how to format and organize text effectively.
Basic Web Practice
Paragraphs
Students will learn to use breaks and dividers in HTML to separate content. They will apply these techniques to create a simple history-themed website.
Breaks & Dividers
History Website
This lesson covers creating ordered and unordered lists in HTML. Students will understand how to organize and present information in a list format.
Ordered Lists
Unordered Lists
Students will create a book report web page and learn how to align text. They will practice text alignment to improve the layout of their content.
Book Report
Text Align
This lesson teaches students how to add links and images to their web pages. They will learn how to make their pages interactive and visually engaging.
Links
Images
Students will review color choices and their impact on website identity. They will learn how to use color to represent the theme and mood of a website.
Color Check In
Identity
This lesson focuses on creating calming web pages and adding buttons with event listeners. Students will learn how to make interactive elements on their sites.
A Calming Place
Buttons/Event Listeners
Students will learn how to set background images for their web pages. They will use these skills to enhance the visual appeal of their designs.
Success Skills
Background Images
This lesson involves creating a goal-setting or gratitude journal web page. Students will practice structuring and designing pages for personal or reflective content.
Goal Setting
Gratitude Journal
Students will incorporate videos into their web pages, focusing on creating content related to the Zones of Regulation. They will learn to embed and control video playback.
Zones of Regulation
Videos
This lesson guides students in creating themed web pages about their favorite movie or cereal. They will apply their HTML skills to build engaging, themed websites.
Favorite Movie
Cereal Website
Students will learn to embed audio files and create image links in HTML. They will practice making their web pages multimedia-rich and interactive.
Audio
Image Link
This lesson involves building an Olympic-themed website and using marquees. Students will add scrolling text to their sites for dynamic content presentation.
Olympic Website
Marquees
Students will be introduced to CSS by creating a web page about their favorite holiday. They will learn how CSS can enhance the styling of HTML elements.
Introduction to CSS
Favorite Holiday
This lesson teaches students how to link a CSS file to an HTML document. They will apply this knowledge to style a historical figure report.
Connecting CSS files to HTML files
Historical Figure Report
Students will learn to apply text shadows and rounded corners to HTML elements. They will use these techniques to add visual effects and improve design.
Text Shadow
Rounded Corners
This lesson focuses on using box shadows in CSS while creating a music history-themed web page. Students will enhance their designs with shadow effects.
Box Shadow
Music History
Students will learn to create color gradients and add comments to their HTML and CSS code. They will use gradients to improve visual appeal and comments for better code organization.
Color Gradient
Comments in HTML/CSS
This lesson covers using classes in CSS and choosing colors with a color picker tool. Students will learn to apply consistent styles and select colors effectively.
Classes
Color Picker
Students will review their web design themes and learn about margin and padding in CSS. They will practice spacing elements to improve layout and design.
Margin & Padding
Theme Checkpoint
This lesson introduces pseudo selectors in CSS and teaches how to adjust opacity. Students will use these techniques to create stylish and interactive web pages.
Pseudo Selectors
Opacity
Students will learn to use div tags to structure web pages about different cultures. They will practice organizing content using these HTML elements.
Div Tags
Culture Websites
This lesson focuses on designing buttons and creating a web page with a "Let It Grow" theme. Students will learn to style buttons for better user interaction.
Button Design
Let It Grow
Students will explore list styles and use CSS to add icons to their lists. They will enhance the appearance of lists on their web pages with visual elements.
List Styles
CSS Icons
This lesson covers adding borders and positioning elements in CSS. Students will practice defining borders and placing elements precisely on their web pages.
Borders
Positioning
Students will be introduced to media queries and apply them to create a web page about awesome pets. They will learn to make their designs responsive to different screen sizes.
Media Queries Intro
Awesome Pets
This lesson covers using CSS Grid and Flexbox for layout design. Students will learn to create complex, flexible layouts with these powerful CSS tools.
CSS Grid
CSS Flexbox
Students will apply background image styles to a web page about space exploration. They will learn to use images effectively to enhance their content.
Background Image Style
Space Exploration
This lesson focuses on linking an external style sheet to an HTML file and choosing a professional color scheme. Students will learn to manage styles across multiple pages.
External Style Sheet
Professional Color Scheme
Students will be introduced to Bootstrap by designing a web page about their dream car. They will use Bootstrap's framework to simplify their design process.
Bootstrap Intro
Dream Car
This lesson covers using Bootstrap classes to design a page about an all-time best brand. Students will practice applying pre-designed classes for efficient styling.
Bootstrap Classes
All Time Best Brand
Students will learn about the Bootstrap grid system and the twelve-column layout. They will use this system to create responsive and well-organized web pages.
Bootstrap Grid
Twelve Column Grid.
This lesson reviews the grid system and applies it to a school mascot-themed web page. Students will reinforce their grid layout skills with a practical project.
Grid Review
School Mascot
Students will use Bootstrap's Jumbotron component to create a restaurant-themed web page. They will learn to highlight key content using this prominent feature.
Bootstrap Jumbotron
Restaurant
This lesson explores using Bootstrap cards and carousels for dynamic content display. Students will enhance their web pages with these interactive elements.
Bootstrap Cards
Bootstrap Carousels
Students will learn to create navigation bars and dropdown menus using Bootstrap. They will develop user-friendly site navigation with these components.
Bootstrap Dropdown
Bootstrap Nav Bar
This lesson reviews various Bootstrap components by designing a game-themed web page. Students will apply their knowledge of Bootstrap elements to build a fun, interactive site.
Components Review
Game On
Students will learn to apply CSS transforms and transitions to their web pages. They will use these techniques to create animated and visually appealing effects.
Transform
Transition
This lesson reviews CSS transitions and introduces animations. Students will learn to create engaging animations to enhance user experience on their sites.
Transitions Review
Animations
Students will get an introduction to HTML tables and continue exploring their features. They will learn to organize data effectively using tables.
Tables Introduction
Tables Continued
This lesson focuses on styling tables and reviewing table design techniques. Students will enhance the appearance and functionality of their data tables.
Table Styles
Table Review
Students will learn to create forms and use text input fields in HTML. They will practice designing forms to collect user information effectively.
Forms
Text Input
This lesson covers using radio input fields and integrating Facebook plugins. Students will learn to add interactive elements and social media features to their pages.
Radio Input
Facebook Plugins
Students will explore creating custom HTML elements and using the Shadow DOM. They will learn to encapsulate and manage web components for more modular designs.
Custom HTML Elements
Shadow DOM
In this course, students will complete challenges that help solidify concepts as they use skills in a variety of ways. In order to complete tasks, students will creatively apply what they've learned by using different approaches to reach a goal. This experience closely follows challenges they would face in a technical interview, allowing them to practice. Students will create a variety of more advanced websites using different web development skills.