Web Design Formatives

Here are the links for Web Design formatives. Students have been gradually moving through aspects of coding and Web Design using HTML and CSS. The final push is learning to create Web Site structure using HTML5. The goal through these formatives have been for students to reverse engineer the pages they see and write the corresponding code. These have evolved into something much more developed by the last formative listed. I combine aspects of Google Drawings to create the layout and then students write the CSS then HTML code for the pages they see.
The formatives allow them the place to make a lot of mistakes and learn how to code for a Web pagee.

HTML Show what you know recap!
Clone Code: SEBSUR
https://goformative.com/clone/SEBSUR

HTML Correct the errors
Clone Code: QUPOME
https://goformative.com/clone/QUPOME

CSS Show What you Know
Clone Code: RUXTNL
https://goformative.com/clone/RUXTNL

html5 new tags part1
Clone Code: QBUHJW
https://goformative.com/clone/QBUHJW

9 Likes

Wow David! I just took a look at all your formatives and this is super cool! I am learning HTML, CSS, and Javascript for fun right now and I can tell these are great exercises that I want to give a try.

In particular, I like the idea of having them reverse engineer a webpage as this visual component has been super helpful in my own learning. I also think it works well with Formative since you can monitor their code, spot their mistakes, and intervene. I also like how you are embedding other resources like Quizlet and that interactive text editor!

Have you had them paste their code into text editor files so they can see what it looks like on a webpage? Also, we just added the ability to hyperlink text in case you want to do that for any of the links you included!

Great work David!

2 Likes

This is really interesting. I am going to use them for my computer/ programming club. Thanks.

2 Likes

@dplatt…Thank you so much for sharing these amazing formatives. I have added them to my personal Formative library. I am dabbing into a bit of coding myself these days :wink: I gave you a shout out on our Formative Facebook page just a few minutes ago too. Be sure to tag yourself on the post :smile:

Thanks again for sharing!!

3 Likes

Thanks David! I teach web design as well and these are great! I typically do very simple goformatives that just cover one standard or concept to get a quick gist of where each kid is at but I like this as an idea to get them diving deeper into the holistic creation of websites!

3 Likes

Thank you everyone for the replies. I am still refining the HTML formatives and working on new ideas! I’ll share more when I get them made.

3 Likes