HTML CSS & JavaScript: I’ve learned them but where do I code in them? (Part 2)


However you started, if you’re reading this chances are pretty good you can code. 
If you’ve not yet written even one line of code all OK! – maybe go have a quick read of Part 1 then come back – while we wait for those readers catching up let’s get a coding joke on the books;

I. How do you tell an introverted computer scientist from an extroverted computer scientist?

A: An extroverted computer scientist looks at your shoes when he talks to you.

There we go, Da boom chi, and after that B+ zinger the other readers should be just about back. Let’s proceed on: so you’ve learned HTML, CSS, and Javascript – aka the ‘holy trinity’ and the ‘front end fundamentals’ of web design.

You know you need a DOCTYPE at the start of every HTML doc, you know how to link a CSS style sheet to that doc and add in cool colors, fonts, and other design cues to a website. You even know how to write up some cool javascript code to get some pops up and nifty animations going. This is solid knowledge, is great to have learned – but you may now wonder: what to do with it?

Well, oftentimes it is said ‘once you know these three languages you can do some front end web design and seek out work – whether in a temporary capacity or full time – as a front end designer. The variety of these roles, the requirements of your bosses/clients and other factors vary in each job.

At its core though, whatever work you do the infrastructure you use to do it shall be important. This is especially so as you seek to keep your knowledge and skills sharp throughout, and avoid a Brando-esque On The Waterfront lament ‘I coulda been a contender’ #CodeDontRegret

Just as many employers may bring you into an agency and say ‘OK we use this software to code our sites’ so too shall many more (especially if you are freelancing) be fine with you using what software you like to use – so you need to know what code editors work best for you.

Just the same as it’s very fortunate you will not be in short supply when it comes to the variety of coding editors available, so too can the sheer range and differences between all the programmes that you write code in quickly feel overwhelming to a new programmer. So, let’s look at a couple of good options for you and the merits they have for a new beginner.

JSBin

A familar logo to many coders who first began coding in a browser. Image: jsbin.com

A familar logo to many coders who first began coding in a browser. Image: jsbin.com

This website is good but also best understood as the equivalent of an arcade video game. You pop in and out, and generally don’t get deeply engaged with the content here. This said, while JSBIN is simple it also does link easily HTML, CSS and Javascript into a file.

Further, it is handy on mobile – for while you may not be set to code up a whole new and full design via smartphone – if meeting a client for a coffee and trying to provide a quick explainer of the different elements of a front end design, a 2 minute write up in JSBin can be your essential tool for to assit in the ‘ah, now I get it!’ moment.

Brackets

Brackets is a great starter program for a coder who seeks to start working on their desktop. Free to download, and easy to use – with a helpful explainer even included ‘inside the box’ to get you rolling if coding for a first time on a desktop editor – a chief draw in particular for brackets is the virtue of its live preview feature.

Brackets Coding Editor

The live preview feature of Brackets is a big draw for new coders. Image: blog.brackets.io

Similar to JS bin but somewhat unique among the free and easy to use desktop code editors, live preview allows the aspirational HTML, CSS, and Javascript programmer to see a live preview of their front end program as they edit. Not only is this great for giving a coder and clear and easy way to see what they are doing as they do it, but also can provide clues when something goes wrong – for rather than perhaps just staring at lines of code saying ‘why god why?’ – as a look over to live preview to note your text is simply the wrong colour can be a great help in getting back on track.

Atom

Atom Coding Program

The ability to customise Atom heavily holds big appeal to professional programmers. Image: /discuss.atom.io/

Atom is the heavy-level programming. It is desktop-based, and the sort of software you use when really getting deep into a project that requires extensive writing of code. While Brackets is a solid and serviceable program – and very good and intuitive one at that – it is by and large the domain of front end web design. Nonetheless, even back end languages like PHP find some use on the front end via their deployment for coding WordPress websites – so having an editor on hand that can serve you well when writing backend code is essential.

As you begin to move beyond HTML, CSS and Javascript, Atom is often your next port of call. This is especially so as given its highly customizable interface and easy installation of plugins it is at once a great starting point for professional web developers and also one that can serve a developer capably for a long time during their progression and broader development career.

Practice before the curtain goes up (and then after)

The great thing about learning to code and a career in the field is with the immense diversity of methods for learning, practising, and ‘selling’ your craft (getting hired, doing jobs for clients, and so on) provides you the opportunity to by and large often use the software and setup that suits you.  Just the same, it is also a field with perpetual and ongoing innovations, changes, and updates.

While these changes are not exclusive to programming – we are in the era of disruption and startup after all – the speed and 24 hour operation of online shall always outpace the rapidity of change seen by an otherwise agile and dynamic local or regional brick and mortar business. Accordingly, seeking to stay atop so you don’t get shocked by something new and uncertain is sage.

'Boss?...I...I'm going to take my lunch break now'.

‘This…was not in the brochure.’

Accordingly, just as the above represent a strong starting point, as your skills, understanding, and particular preferences for a code editor grow, so too can you easily find a editor and setup for coding that feels to like a custom fit should these 3 here not hit the mark for you in the first.

Once this is done the next step is taking the show ‘on the road’ and beginning to showcase your portfolio online. See how in Part 3.

Good luck and happy coding!

Ed Kennedy is a journalist and web designer proudly from Melbourne, Australia. Say hi to Ed via enquiries@edkennedy.co and on Twitter@Edkennedy01

Ed Kennedy is a journalist and web designer proudly from Melbourne, Australia. Say hi to Ed via enquiries@edkennedy.co or on Twitter @Edkennedy01

#Tech and Online