Discover how the web is built. Students will learn how web pages are designed, structured, and presented with HTML mark-up and CSS exercises. They’ll add tags, images, and links to bring their web pages to life.
Introducing HTML
HTML can be accessed through the dropdown menu of the navigation bar or through the Learn, Create, Glossary links on the Coding Home page.
The Learn Home page provides an overview of the scope and sequence of Levels around specific topics. Each Level is comprised of a series of Lessons. These Levels and Lessons can be navigated through the left-hand menu or by scrolling 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.
As students progress through each Lesson, they are introduced to coding concepts and vocabulary in the Solve steps. Hands-on tasks are provided to allow students to practice using text to code. These tasks support the development of computational thinking skills such as logic and sequencing. Each Lesson's step includes three sections:
- Instructions: Written explanation of the task(s) with the accompanying video for this Lesson step that appear in the top half of the screen. Specific vocabulary may include a link to pop-up definitions.
- Code: Space where students will 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 will display the output in this panel.
- Console: Errors in coding will appear in this panel.
A final step for a lesson might be Build. 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 Lessons are provided at the end of most Levels to allow students additional practice in applying what they have learned in previous Lessons.
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
Supports are provided for most HTML Lessons. Each Lesson includes multiple Help Videos. These videos provide a tutorial to support students as they progress through each step. The Help Videos can be accessed from each step of the Lesson. *Note: Help Videos are not included in Debugging and Test Your Skills Lessons.
Teachers can access a Lesson Plan that is connected to each Lesson. Lesson Plans can be found on the Introduction step of each Lesson or from the list of all Lessons on the HTML Home page. *Note: Lesson Plans 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.
HTML Create
The opportunity to free code and develop an app is provided through Create. Selecting Create from the HTML Home page allows students to develop an app outside of any restrictions or structure provided in the Learn lessons.
By selecting 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 will display the results in this panel. Errors in coding will appear in the Console panel.
HTML Glossary
Selecting the Glossary from the HTML dropdown menu or Home page provides access to an interactive menu of vocabulary terms specific to that 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, Glossary terms are included in Lessons and are identified as interactive through their color and underlining.
Selecting a Glossary term within a Lesson generates a pop-up definition at point-of-use.
