Teaching Web Design with HTML and CSS
When teaching someone to code for the first time, it can be very easy to get bogged down in the details. After all, every platform has so many opportunities, so many neat tricks, so much potential!
When planning how to teach a new topic, I begin with a question:
What does the student need in order to create something they are proud of?
In other words, my question is not what we can add to the course to pack it out, but rather how much can we take away from what a course on that topic would traditionally cover, with minimal loss of conceptual understanding for the student.
The concepts are everything, after all. If you understand how it all fits together then you can fairly easily seek additional puzzle pieces to add in your own time. If you are given a pile of pieces and very little guidance with putting them together, however…
So if we want to put together the best possible course for our students, what are some things we could consider? I’d like to share a few of the things I would love to include if I had the opportunity to run a multi-day course, based on my experiences with running one-day workshops.
The rise of the self-guided online course
There are many of these sites available now, from CodeCademy and Code School to our very own Code Avengers, lovingly built here in New Zealand. Even Khan Academy, traditionally focused on maths and sciences, now offers courses on graphical programming using ProcessingJS.
These courses are fantastic. For a motivated student, they provide a way to work at their own pace and explore the content in whichever way suits them best. For more reluctant students, they are a way to practise difficult concepts over and over without feeling silly about asking for help.
Many of the sites also offer a “classroom” option, allowing a teacher to keep track of their students’ progress over time.
Each provider has its own approach. They are similar in structure, but they also have differences which can appeal more (or less) to some students over others.
Including self-guided content as part of a web development course is something that I would highly recommend. At the entry level in particular, there are many options out there and it should be fairly straightforward to select and recommend content which fits the course plan and experience range of any class.
Cover the “why” as well as the “how”
Something which is often missing from these online courses is discussion of why we do things a certain way. Most courses offer a series of challenges where your answer is either right or wrong, with little room for exploration.
Slightly more free-form practise of concepts is encouraged using “project courses” where the student builds a single product from start to finish, some of which are more guided than others. These are a step in the right direction, but are still not a replacement for guided in-class discussions between peers and a knowledgeable teacher.
Programming is more of an art than a science when considering the importance of “right” versus “wrong”. In maths and most parts of traditional science at the secondary school level, there is a single right answer for a given question. In art, design and language a “right” answer is more open to interpretation. Programming is much the same.
As a teacher of programming, one of the most helpful things you can do for your students is to question everything. What does this wording refer to? Why is this piece of logic here? Could this code be clearer? Which other approaches did you consider or test before deciding on this one?
Encourage good naming, tidy structure, and always expect code comments to describe the “why” of a piece of a code, not just the “what”.
Addressing the “hard stuff”
There are a few concepts in beginner web development which seem to trip up students at a significantly higher rate than other concepts. Here are a few that I have observed, and steps I’ve taken to hide the fact that they should be considered difficult at all.
Element Attributes
I rarely even refer to these as “attributes” to begin with. We look at this concept first in the context of links; we can put “a” tags around a word, but that doesn’t make it a link. What else does it need? A URL! We don’t want that part to actually show up on the page, but we want to code to know about it, so the information goes in the “code bit” between the angle brackets.
We then go on to images, and use the same concept again for setting the image “src” attribute. My challenge to the students is then “if you know that there is another setting called width, and it can be equal to a number which should be the width of the image, how might you do that?”
Many manage to achieve this challenge by themselves, some don’t, but pretty much all of them get the concept of attributes by the end.
I also usually ask “if width is an option, what might another matching one be?” This gets them thinking about assumptions we can make due to code being so structured, such as “height” probably being a valid option.
Stand-Alone or Self-Closing Elements
By this I basically just mean images, because nobody should be using line breaks (br), horizontal rules are ugly (hr), form elements can wait ‘til later (input) and nobody has heard of the other self-closing visual elements.
So really the question we are addressing is: why doesn’t “img” need a closing tag?
I’ll counter that question with another: how does an image know where to finish?
The purpose of a closing tag is to determine where the end of an element is. The end of an image is wherever it runs out of pixels to display. It also cannot contain any nested elements. So, why would it need a closing tag? It doesn’t, because the “end” of the element is predetermined.
There are always exceptions to the rules, and in HTML “img” is it.
Classes and IDs in CSS
The usual approach with CSS is to teach the broader element selectors first and then to teach classes and IDs afterwards.
The result is students saying “Whaaaat?! Classes are hard! And when do I use an ID instead of a class?”
Solution: teach classes as the default, and forget about IDs completely.
After we’ve covered how to do text and images in HTML, we have a go at styling it using CSS. There are two parts to CSS: giving an element a name, and saying how something should look if it has that name.
First step, walk them through creating a class called “pageTitle” and the code to make the page title a given colour. Second step, add an extra setting, or “attribute” to our h1 element to give it the class “pageTitle”. This links them up by matching the name.
Next we add some extra bits to the pageTitle class like font family and font size. After they’ve had a play with that, the challenge is to choose one paragraph and make it look different from the others.
By this point they get the idea: to make something look cool, I have to give it a name and then say what something with that name looks like.
Once we’ve done a bunch of classes as practice, we look at two examples of element selectors as a secondary option: how to make all images the same height, and how to make all paragraphs the same font.
This approach shifts classes to being the default approach, making them not seem difficult at all. It also minimises confusion for beginners by ignoring the existence of IDs, which are not really needed and not often used even by professionals any more.
You can use a class just once and that is valid, but using an ID more than once is incorrect. Using classes for everything is the logical solution!
Nesting Layout Elements
I generally encourage students not to do too much of this at the entry level, as it can get very messy very fast. The first site we make is a single column layout, with a header stacked on top of one or more sections. This way we can explore padding vs margin without making things too complex.
Some pro tips for working with nested layout containers:
- Create your closing tag at the same time as your opening tag, then go back and fill in between. This way you’re much less likely to forget to close an element. Many good code editors will even do this for you.
- Give each element a class as you create it, and add a comment after its closing tag which specifies its class. This will help you more easily know which tags match when they are far enough apart that you have to scroll to see them both.
- Always be simplifying. If you feel like you’re adding a lot of layout elements, especially if the nesting is more than 3 deep, you may be able to simplify it. Sketch your layout on paper and revise your element groupings. Keep a keen eye out for elements which contain only one other element — any of these you should be able to get rid of!
Adding in some “wow” factor
With entry-level web dev it can often feel as though everything you make is ugly and that there aren’t a lot of ways to really make a design unique.
Here are some of the tricks we teach students to help them create a design which is more modern looking and also quite personalised:
Full screen stretched or tiled background images.
This is one of the first things we do on a web page, as it really sets the tone for the rest of the design. We make an image fill the whole background, and also set its position to fixed so that the content scrolls above it while the background stays still. You can even use animated gifs as backgrounds!
Google Fonts
It’s super duper easy to include a custom Google font in your CSS, and this can also go a long way towards making your site design really unique.
We show students how to use a custom font for their headings, and some inevitably go on to use custom fonts for all the text on their site. This is a great opportunity to discuss contrast and readability!
A smattering of CSS3
Rounded corners are often a winner, as are semi-transparent backgrounds, text shadows and box shadows. These design elements are all over the modern web, so getting students using them right off the bat not only looks cool but also gives them a chance to play with the effects. Hopefully this will also give them a chance to start thinking about the importance of moderation when it comes to design flourishes. Maybe.
So what do we really need in an entry-level course?
We need less than we’re probably used to, but also more.
Take another look at the HTML elements you cover, and ask how many of them can be left out now, or at least given as a selection of “optional extras”.
Explore CSS3 and some of the neat effects that are on offer. Web browsers have excellent coverage of modern features now that IE has dragged itself out of the dark ages, so go wild and have some fun with them.
If students are finding a particular concept difficult, make note of it for next year and think about how you might rearrange your course to address it earlier and sneakily pass it off as a more simple concept.
Spend a little time reviewing the chapter overviews in self-paced courses and select some to match your own course. The content on these sites can complement in-class work really well.
Take the time to discuss some of the issues surrounding the use of the Internet and the human factors of programming. It can be so easy to miss these crucial concepts if the focus is entirely on the technical parts.
And finally, have fun with it! Web development can be whatever you’d like it to be. One of my favourite things about programming briefs is that the technical requirements can be really clearly defined, and yet the actual topic of the project can be left entirely up to the student. Let the creativity flow!
