What this lesson teaches
HTML basics come alive as children create their own garden webpage, learning how tags structure content. This tangible project allows them to visualize web design while developing coding literacy.
Digital Literacy
Can you finish html garden builder in about 30 min?
HTML Garden Builder
You will hTML basics come alive as children create their own garden webpage, learning how tags structure content.
Duration30 min
Age GroupAges 11–12
DifficultyBeginner
SubjectDigital Literacy
See how this hands-on lesson works
Sign in to start the full activity flow, save this lesson, print a learner version, and track XP. The preview below is public so parents and educators can evaluate the activity before joining.
What you need
How the activity runs
The learning connection
By embedding the coding process in a creative context, children engage with syntax and structure through embodied cognition. Building a 'garden' provides a vivid picture of how HTML elements work together, reinforcing learning through visual representation.
Try it with your learner
1. Open a text editor (like Notepad or any HTML editor). 2. Type '<html>' to start your document. 3. Add '<head>' and '<title>Your Garden</title>' tags. 4. Create a '<body>' section and use '<h1>' for the garden title. 5. Insert '<p>' tags for plant descriptions and '<img>' tags for pictures of flowers. 6. Save your file as 'garden.html' and open it in a browser to see your creation!