HTML Projects for Complete Beginners

I’ll be teaching HTML & CSS to a young teenager who is a complete beginner. Please help me think of fun projects/exercises for her. Nothing too complicated, just something interesting that will help her understand basic HTML and CSS. Thanks.

Creating a Welcome Page would be a great start.
This would include basic layouts with HTML and then the teen can learn to stylize the page with CSS.
It should include a main title feature, this could be “blocked” into the middle.
This would teach Headers and alignment as well as containing in Divs
Make sure to include some images, these could be side by side for referencing.
this would help teach sourcing images with url.
On the bottom have the teen reference 3 other social sites.
This would teach redirection and can be utilized to teach them about iFrames and having them hide/show depending on if the button was clicked.
The feature above could lead into basic javascript as well.

1 Like

Yep - pretty much what @alex1ptb said :+1: Good luck!

when I was a teenager I was in love with surfing. I surfed everyday. If I would have had a teach involve surfing in my learning process somehow, I’m sure I would have loved that. I’d say a great place to start with is figure out what this kid is passionate about (other than coding) and have them develop their coding skills around other passions, maybe? Like if this kid loves monster trucks, build monster truck pages, or apps, or if they love fried chicken, build pages about fried chicken.

1 Like

Is Neopets still a thing? That got tonnes of young’uns hooked on HTML and CSS in the early days, and many of them grew up to be productive programmers!

Something that really caught my imagination was browser based interactive fiction…little bit of story telling with links to different pages that take the story in different directions.

If they really get into it, Inform7 is a whole other programming language designed solely for interactive fiction!

1 Like

Code Academy is very good for kids to learn bases.

For teenagers and adults, the most fun and relevant (imho) to progress fast is codingame (but only for real languages, no html/css). Anyway, it is a nice challenge for any front end student to learn Javascript whenever they feel they master html/css.