What this lesson teaches
Creating an HTML garden helps children grasp the basics of coding structure and syntax. This activity turns coding into a visual experience, making abstract concepts tangible through creativity and design.
Digital Literacy
Can you finish html garden creation in about 25 min?
HTML Garden Creation
You will creating an HTML garden helps children grasp the basics of coding structure and syntax.
Duration25 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
Embodied cognition suggests that when learners engage in creative coding, they form connections between code and visual outcomes. Building a garden allows children to experiment with syntax while actively seeing their work come to life, enhancing memory retention through visual stimuli.
Try it with your learner
1. Open a text editor like Notepad or a coding platform. 2. Type basic HTML structure: '<!DOCTYPE html><html><body>' 3. Add a title using '<h1>' tags like 'My Flower Garden'. 4. Insert colorful flowers using '<img>' tags and URLs for flower images. 5. Save your file as 'garden.html' and open it in a web browser. 6. Show your family your digital garden — what flowers did you choose?