Not just coding: Web design is all about creative communication

Grok Learning has been running Web.Comp since 2015. We’ve discovered over the last few years that it has broader appeal, successfully engaging students who are typically less interested in learning to code. This is because web design isn’t just about learning to code, but about creative and effective communication — presenting information in a functional, usable, accessible and aesthetic way (Australian Curriculum link: ACTDIP039). Students can also clearly see the relevance of web design since the internet is a big part of their daily lives.

Over the first four weeks of Web.Comp, students who start with no prior coding experience learn to code in HTML and CSS. However, it’s a lot more than a walkthrough that gets them to memorise some HTML tags and CSS selectors. Right from the beginning, there’s a focus on design skills.

Notes from Week 1 of Web.Comp teaching the concept of warm and cool colours.

As well as explicitly teaching design skills, Web.Comp contains formative assessment in the form of 8 practice websites per week. Students are given instructions to code up these websites using only what they’ve learned so far.

Some of them look like websites that students are familiar with, such as Google, Twitter, Wikipedia, or Facebook. Students are creating something real and immediately see the relevance of the skills they’re learning.

Students practise skills coding up sites that they’re familiar with. Example problems from Week 2 and Week 3.

Other practice problems use only the skills learned so far to build up a web pages that actually look really good (if we do say so ourselves) and are accompanied by “design highlights” that explain the design choices that we’ve made. After all, good design is often simple, and there’s no reason students shouldn’t feel empowered to communicate aesthetically from the get go.

Problem from Week 2 of Web.Comp 2017, and accompanying Design Highlights.

After four weeks of learning HTML and CSS and seeing lots of example websites which we’ve designed, students are challenged to unleash their creativity and style up their own webpage. Web.Comp offers two streams, Beginners and Intermediate, but the websites shown below were all styled by students competing in the Beginners stream — all of these students have developed their skills from scratch in five short weeks.

Student designs from Web.Comp 2017 Design Tournament.

Students were given the HTML (the text and structure) for ‘Party Planet’, a party website, and asked to use only CSS to control the style and layout of the website and realise their own unique designs! This final-week project is inspired by CSS Zen Garden:

CSS allows complete and total control over the style of a hypertext document. The only way this can be illustrated in a way that gets people excited is by demonstrating what it can truly be, once the reins are placed in the hands of those able to create beauty from structure.

Students who complete Web.Comp learn to create beauty from structure. Student designs are submitted into a public Design Tournament, where everyone is invited to vote on random pairs of designs “head to head”.

Students can share their designs and get friends and family to vote in the Design Tournament.

Web.Comp 2018 is running from Feb 26 — Apr 1 and is a great way to engage students in coding — even those students who don’t think coding is ‘for them’. They may even discover their inner designer! Students will compete in a fun and friendly environment alongside thousands of students from around the world, and are supported by online tutors.

For more information visit: https://groklearning.com/webcomp/

Do you teach web design in your classroom? We’d love to hear about your experiences and whether it was an engaging way to introduce coding.