Item Number: INT-HTML

HTML CODING FOR BEGINNERS: Designed especially for middle and high school, lessons explain how to build a web page using HTML and CSS. Students style text, images, and links to construct a page on a topic of their choice. Integrate technology using project-based instruction.

SPARK AN INTEREST IN STEM AND CTE: This fun and motivating first programming project can hook student interest in powerful skills for the workplace of tomorrow. Prepare your students for career skills. Incite curiosity in computer science and coding.

IDEAL FOR DESKTOP OR CHROMEBOOK USERS: This technology project includes multiple versions. There is a version for desktop HTML text editors such as Notepad or Code Writer. There is also a version for Chromebook users that use a web-based text editor such as Caret or Editey.

ALL RESOURCES INCLUDED: Digital Teacher Guide and Student Workbook with step-by-step instructions may be printed or used in PDF format. Sample web pages, templates, and HTML and CSS reference sheets support learning. Assessment tools include a marking sheet and skill summary checklist.

OPTIONAL CHALLENGES: Extension activities show students how to format lists, add a background image, change the appearance of links, create a class, add animated text and gifs, code a table, and more!

PAY ONE LOW PRICE PER SCHOOL: No per student fee. Not a subscription. Use on an unlimited number of devices within your school. See Terms of Use below to find out more.

Technology Integration: Computer Science, Language Arts

Technology Skill: Internet, Programming, Web Design

Version: Google, Windows

Program: Text Editor

Note: This project is for kids. The activities introduce basic tags and attributes only. We want your students to like writing code. For this reason, we have kept things simple. By the end of this project, your students should feel confident in their ability to add HTML elements and set CSS attributes – not frustrated. The HTML lessons for beginners are designed to spark an interest in programming.

Assignment 1: Internet Basics

Learn basic terminology. Consider Internet use in daily life.

Assignment 2: History of the Internet

Raise awareness of inventions that shaped the Internet.

Assignment 3: About the World Wide Web

Investigate parts of a web browser. Learn why the World Wide Web was invented.

Assignment 4: What is HTML?

Gain a basic understanding of HTML and its importance in the world today.

Assignment 5: Seeking the Source

Inspect the source code of a web page. Decode the meaning of tags.

Assignment 6: Edit an HTML Document

Analyze a sample web page using an HTML Text Editor. Modify the tags.

Assignment 7: Edit the Style of an HTML Document

Modify the attributes of a web page to discover how CSS creates a consistent design.

Assignment 8: Plan a Web Page

Complete an organizer to plan a web page. Gather information, pictures, and websites.

Assignment 9: Start Building a Web Page

Code using HTML tags to add a title, heading, body, and horizontal rule.

Assignment 10: Format the Web Page Using CSS

Assign attributes to each element of the web page to set the style.

Assignment 11: Prepare Your Images

Adjust the file name, file type, and size of images. (Optional)

Assignment 12: Add Images and Format the Style

Add images to the web page. Format picture style, float, and margins using CSS.

Assignment 13: Create Hyperlinks

Link to additional information using text and image hyperlinks.

Assignment 14: Explore Meta Tags

Scan search engine results using keywords. View meta tags in source code.

Assignment 15: Add Meta Tags to a Web Page

Code meta tags to describe the web page.

Assignment 16: Are You Ready to Upload?

Review the web page using a checklist. Revise the code.

Assignment 17: Upload Your Web Page

Publish web page onto the Internet. (Optional)

Assignment 18: HTML Developers Conference

View web pages. Offer positive feedback to peers.

Optional Coding for Beginners Activities for Middle and High School Students

  • Analyzing Websites: View three sample web pages and answer questions.
  • Format Lists: Use tag pairs and CSS to make bulleted and numbered lists.
  • Add a Background Image: Use a picture as a background for the web page.
  • Format Hyperlink Style: Set CSS attributes. Change the appearance of links.
  • Create a Class: Set unique style attributes for pictures and text.
  • Add Animated Text and Images: Create animated text. Add an animated gif.
  • Create a Table: Organize information using HTML to make rows and columns.
  • Submit Your Site to a Search Engine: Increase the chances of search engines finding the web page.

Terms of Use
Use TechnoHTML with unlimited users at your site. A site is a physical location such as classroom, school, learning center, daycare, library, or home. If you teach at multiple sites, you will need to purchase one set for each location. Access everything you need from TechnoHub, and transfer the files to all devices at your site. View the PDF teacher guides and workbooks digitally or print as many as you need. Files CANNOT be posted in public domain.

STEM Activities for Kids
Coding for Beginners
Instructions for Windows and Chromebook Users
Design a Web Page

Design Web Pages using HTML and CSS Activities - Programming for Kids

Coding for beginners is fun. Use the HTML lessons plans to build a simple web page. Support STEM learning objectives in elementary and middle school. Develop an interest in computer science and programming in your students.

  • Identify topic, purpose, and audience for a web page
  • View the source code of a web page
  • Decode the meaning of HTML and CSS tags
  • Plan and organize web page ideas
  • Create a web page using HTML and style it with CSS
  • Set attributes for the body, text, and graphics
  • Insert an image and position it using CSS
  • Add a hyperlink to text or a picture using HTML
  • Add meta tags for keywords and description
  • Create lists, picture background, classes, or tables

Customer Reviews

Construct a simple web page using HTML and CSS. Throughout the design process, instructions explain how to style text, graphics, and hyperlinks to produce an informative web page. For those in need of an extra challenge, extension activities encourage students to create a list, apply a picture background, customize hyperlinks, employ CSS classes, insert animated text or images, and build tables. HTML lesson plans make coding for beginners fun.

Write a Review


I have been using your HTML5 for several years to teach students how to write code. It has been a staple of my 7th grade curriculum and I and the students love it.

Linda P., Orlando, FL, USA, Arbor Ridge School


I love this product. Because of the detailed instructions, all my students had great success at building a webpage. They were all engaged and tried every activity that was available. I was amazed at some of their pages.

Linda, Orlando, Florida, Odyssey Middle


The HTML class is clear and we are having fun working on the website project. Thanks for a great product.

TammyS, Cary, NC, Homeschool Group


My favorite of all the TechnoKids projects! Students at all skill levels love the challenges of this project. They are so proud of themselves when they realize just what they have accomplished. Thanks!

K. Wyatt, Tonganoxie KS, USA, Tonganoxie Middle School


Love your materials. The lesson structure of TechnoHTML has enabled me to teach HTML while I am learning it with my students.

S. Wright, Rock Springs, WY, USA, Rock Springs Junior High


I love these lessons. I purchased TechnoHTML last year. There are a few more I am hoping are the special of the month sometime soon! Thanks again!

M. Schneidereit, NJ, USA, Maple Shade High School


loved the program!

R. Murnane, NY, USA, Centereach High School


TechnoHTML5 has been working out well. Students are grasping the idea of how to make a webpage. I really like the step by step directions as well as the given assessments.

N. Mulligans, NY, USA, IS 318


I just started using it this semester and am very pleased with it. I would like to purchase other projects in the future. You have a very good product.

M. Turchi , IL, USA, Ottawa Twp. High School

TechnoHTML5 has been working out well. Students are grasping the idea of how to make a webpage. I really like the step by step directions as well as the given assessments.

html lessons reviewer

N. Mulligan,
IS 318,

Other TechnoKids Intermediate Projects

Photo of INT-COLL - Intermediate Curriculum Collection

Intermediate Curriculum Collection

Project-based lessons blend technology into curriculum. Teach essential skills with meaningful activities.

View Details


Spark an interest in computer science. Become a web designer. Optional challenges include lists, custom background, classes, animated images, and tables.

View Details

Photo of INT-RESTAURATEUR - TechnoRestaurateur


Be a youth entrepreneur. Plan a franchise. Propose a unique restaurant concept using entrepreneurship lesson plans. Develop financial literacy.

View Details

Photo of INT-CODE - TechnoCode


Spark an interest in computer science with STEM lessons. Coders create an activity studio for their friends.

View Details

Intermediate Projects