Discover how the web is built. Students learn how web pages are designed, structured, and presented with HTML mark-up and CSS exercises. They add tags, images, and links to bring their web pages to life.
Introducing HTML
Access HTML Coding from the top navigation bar or through the Learn, Create, Glossary buttons on the Coding homepage.
Learn
Select Learn for an overview of the scope and sequence of Levels around specific topics. Each Level is comprised of a series of Lessons.
Navigate these Levels and Lessons through the left-hand menu or scroll through the list of lessons.
HTML Lessons
Each lesson in HTML creates a self-guided experience for students through a series of scaffolded tasks. Lessons always begin with an Introduction to the concept as the first step.
Solve: In Solve steps, students are introduced to coding concepts and vocabulary as they progress through each Lesson. These tasks are hands-on and allow students to practice using text to code and support the development of computational thinking skills such as logic and sequencing.
Each Lesson step includes the following three sections:
- Instructions: Written explanation of the task(s) with the accompanying video for the Lesson. Specific vocabulary may include a link to pop-up definitions.
- Code: Space where students add and manipulate coding elements. When students have finished a task or created their own code, they select Check my code to test.
- Output: Code that is correct displays the output in this panel.
- Console: Errors in coding appear in this panel.
Note the bottom action bar where the user toggles between Code and Output.
Sometimes, a Lesson has a final Build step. This step offers a creative opportunity for students to apply everything learned in the lesson. Students make decisions about how to use the coding elements provided.
Debugging and Test Your Skills
Locate Debugging and Test Your Skills Lessons at the end of most Levels. These lessons allow students additional practice in applying what they learn.
Debugging Lessons give students the opportunity to practice using their coding knowledge to fix errors.
Test Your Skills Lessons allow students to apply their learning through a series of steps that include specific coding challenges.
HTML Lesson Supports
Most HTML Lessons include the following supports.
- Help Videos provide a tutorial to support students as they progress through each step. Access these videos from each step of the Lesson. Note that Help Videos are not included in Debugging and Test Your Skills Lessons.
- Lesson Plans are downloadable, printable PDFs that include learning objectives, success criteria, key vocabulary, key questions, and strategies to support students as they move through the steps of the Lesson. Note that Lesson Plans are not included in Debugging and Test Your Skills Lessons.
Create
With Create, students have the opportunity to free code and develop an app. Select Create from the HTML homepage to allow students to develop an app outside of any restrictions or structure provided in the Learn lessons.
In New App, students are directed to a Free Code space that allows them to practice using all they have learned through the HTML Lessons.
Run code validates the code that students have entered. Code that is correct displays in the Code panel. Errors in coding appear in the Console panel.
Glossary
Select Glossary from the HTML dropdown menu or homepage to access an interactive menu of vocabulary terms specific to the coding language.
Glossary terms are presented in a scrollable alphabetical list that provides each term and its meaning.
A navigable grid of letters allows you to jump to any section of the list by selecting a letter. Only letters that have associated Glossary terms can be selected.
Additionally, interactive Glossary terms are included in Lessons.
Select a Glossary term within a Lesson to generate a pop-up definition at point-of-use.
Help
The Help tab provides definitions for the various blocks and actions available within the Learn and Create sections of Coding.