Front End Insights: A starter guide to writing better front end code

jackLyons Free Code Camp, Web Development Tags:
Front End Enlightenment

It’s been just over 12 months since I started my Free Code Camp Front End Certificate. In those past twelve months I have taken on a lot of new information and have thoroughly enjoyed learning to code. Now that I have recently finished the Front End Certificate, I thought it would be a good time to reflect and share some insights.

A BIG thank you to the incredible FCC community for always being so supportive and considerate. I seriously could not have done this without everyone in Free Code Camp!

The FCC community is great because it allows you to get some serious critical feedback from other devs. The most important thing us junior dev’s require is critical feedback that will help us to improve, understand and master the art of web development. On top of that, it’s vital to learn just how important it is to give a shit and take pride in your craft. 

Yeah your code might pass all the tests, and do what it’s meant to do, but what if someone else were to look at it and try extending it to add a new feature? In the real world you’ll be digging into other people’s code on a very regular basis. Trust me, it will happen to you and then you will quickly realise just how important it is to have well structured, and documented code.

In order to be taken seriously in a commercial environment, you have to be able to write semantically correct code. It needs to have structure, obvious purpose and follow the principle of least astonishment. 

Below I have put together a little guide to help increase awareness and give you the stepping stones required to make better front end web development decisions. I have focused quite a lot on HTML and CSS lately because it’s probably the most forgiving of the web languages. Translation: it let’s you get away with writing bad code, all the time. Secondly, my interest in CSS has grown out of pure necessity simply because this is where most projects can get very ugly, very quickly! Thirdly, it is where the bulk of your front end work will be. Designers will hand you a mockup and it’s your job to bring it to life.

I hope you find this useful, and if so please share it with your friends! If you have any questions, suggestions or comments please leave me a message in the comments box below.

The unofficial guide to writing better front end code:

 SMACSS – Add structure to your CSS

  1. Organizing CSS with OOCSS, SMACSS, and BEM – 40 min video
  2. CSS Architecture with SMACSS (feat. Caleb Meredith) – 30 min video
  3. The Official SMACSS book  – print and eBook

Sass – Build Syntactically Awesome Style Sheets

  1. Learn Sass for Real World Websites – Udemy Course
  2. Sass in the Real World – eBook

Adaptive Web Design – Craft accessible code for everyone!

  1. The official Adaptive Web Design Book – print and eBook
  2. Web Accessibility in Mind – Official website
  3. Atomic Design eBook – eBook
  4. Don’t Make me Think – A commonsense approach to web usability
  5. Responsinator – View your work on a variety of devices and screen sizes.
  6. Type Scale – Create modular font sizes to enhance conformity across devices.

HTML 5 – Master the fundamentals of HTML

  1. HTML 5 Cheat Sheet – printable PNG / PDF
  2. Clean up your code with DirtyMarkup – website
  3. HTML Best Practices – blog article

CSS theory and practice – Have some fun with CSS!

  1. The Magic of CSS – eBook
  2. CSS Secrets by Lea Verou – book
  3. A Hands On Guide to Mobile First Design – blog post

Modern JavaScript – Become a JS ninja!

  1. JavaScript 30 by Wes Bos – a free 30 day JS course
  2. Secrets of a JavaScript Ninja 2nd Edition – book
  3. CodeWars – Online code challenges for all abilities

Closing thoughts:

I love the following quote – it basically validates everything in those dot points above. Fundamentally speaking, this is why us developers need to give a shit: 

Disruption will only accelerate. The quantity and diversity of connected devices — many of which we haven’t imagined yet — will explode, as will the quantity and diversity of the people around the world who use them. Our existing standards, workflows, and infrastructure won’t hold up. Today’s onslaught of devices is already pushing them to the breaking point. They can’t withstand what’s ahead.
The Future-Friendly manifesto


Sign up to receive up-to-date web tips, tricks and code hacks!