What makes good front-end code?

Recently I started teaching the Front-end Web Development course at General Assembly. It’s the first time I’ve turned my hand to teaching, and it’s hugely challenging and great fun.

Even though I’ve been making websites for 17 years, the students often ask me things that I’ve never thought about, or things which I take for granted. For example “Can the head tag be placed after the body tag?”.

Another great question was “what makes good front-end code?”. I think this question is critical for newcomers, especially those on a course as they want to know what I’m looking for when they hand in their homework.

Whilst the following criteria can be extended on, there’s certainly nothing less than these points to hit. If you remove one or two you can still make a website, but are you really making it as good as it could be?

• Is the code validated?
• Does it fulfil the design?
• Does it look good in different browsers?
• Is the HTML semantic?
• Is the page accessible?
• Will the design remain consistent if I move parts of the HTML to other parts of the page?
• Does it work with many different inputs?
• Does it work on many different screen sizes?
• Is the code easily read by others?
• Are you proud of what you’ve created?

(BTW I should say that I don’t always hit all these criteria myself, but don’t tell anyone).