Coding is popular but complex, explain it to me: HTML, CSS, and JavaScript (Part 1)

From slick Shopify websites to fun iOS and Android apps, to websites that have a gorgeous visual flair and design you’d love your businesses online brand to have – you know coding is how to get it done. Yet, by very virtue of the term ‘coding’ learning to code sounds pretty daunting.

Rather than presenting itself as a straightforward and transactional process just like a college degree where you’ll learn first year subjects, second year subjects, and then go on to learn the harder content in your third (and fourth) years, coding can conjure up mental images of those World War 2 spying, tech gurus sitting in dark basements, and NASA launching rockets into orbit.

Spy ingenuity, workaholic technicians, and space exploration may provide remarkable showings of human ability, but this image of coding can be confronting for a blogger or eCommerce store owner sitting at home and thinking about how they can better build their enterprise.

Accordingly, this often leads to varied answers when asking ‘where do I start coding?’ – And this can be made all the harder by tricky terminology. Let’s point you in the right direction with plain language then.

HTML, CSS, and JavaScript

These three programming languages are the ‘holy trinity’ of entry level coding and web design. Accordingly, they are an excellent starting point for a new coder – and by virtue of all having a relationship with each other in how they are used and operate – learning all 3 means just like someone who has learned Spanish is often able to communicate in Italian, all 3 gives you a fundamental grounding in coding and ability to use each language by itself or together as a whole.

Hyper Text Markup Language (HTML) 

For many websites this is step 1. If you imagine a theatre set up for a performance, HTML is the walls and the doors and windows. It sets the stage, and dictates what content shall feature. This means how many pages your website will have, what the design structure of the website shall look like, like will you have your name and logo at the top of the website is just your name?

 

Cascading Style Sheets (CSS)

Cascading Style Sheets is step 2. It is the content that instructs the website to show certain colours, fonts, and other elements of design that together make up a stylish and attractive website. You use CSS once you’ve setup your HTML.

Remember the decision you made about putting your name or logo at the top of the website? CSS shall let you select what color you want your name to appear in, and also what colours the overall website shall have (like how famed English football team Manchester United shall always appear in Red and White).

JavaScript

JavaScript is step 3 and where things start to get really interesting. Once again, just like a theatre setup for a play, JavaScript is like the technicians and sound guys who flick the lights, produce the effects for the ‘wow’ moments, and even play a role in audience interaction aka ‘breaking the fourth wall’.

Essentially, though you can do a serviceable static website with just HTML and CSS it would be like a pretty painting in the art gallery – attractive certainly, but not ideal if you wish to see a play.

So, JavaScript allows you to take content you build with your HTML and CSS website and then make it interactive in a variety of ways. From asking survey questions, to directing you to certain pages of the website depending on what question you answer, to even allow a web designer to create some basic games and other content in the website that make the website feel less like you’re just ‘reading’ a website (like you would a newspaper) and instead are actively ‘talking’ and ‘experiencing’ what it offers.

The Unique Aspect to JavaScript

HTML/CSS is static, whereas JavaScript makes things move and is interactive. The trade off to this is JavaScript does generally require a longer learning curve than HTML and CSS to start. This is because HTML and CSS are not coding languages in the traditional sense.

Make no mistake, they are referred to as such – if you apply for a job in coding you’d certainly want to list those two under coding languages – but in terms of what they actually do, HTML and CSS is in the age of interactive websites and smartphone apps closer to design language than code.

Finally, a word on Java and JavaScript: they are separate languages! Obviously given the similarities of their name it may be held they are similar – but just how Paris, France and Paris, Texas have much distance between them – there is much to make each language distinct and seperate. So, by all means pencil in a plan to learn Java in time ahead; but start with JavaScript for now.

The Bottom Line

One of the problems with coding is when learning it anew it can fast becoming overwhelming. This is especially you’ve come across an idea for an app and have the summer free to learn coding. It is tremendous you have that aspiration, and learning to code is surely worthwhile. Yet, it is also easy to fast become overwhelmed. So, if you are just starting out, HTML, CSS, and JavaScript make an ideal set of first targets, and provide a solid foundation to build on thereafter.

From here you can learn jQuery, Python, PHP,  Ruby & co – and then progress onto some really complex languages. Yet, while its tempting to start with a language from this list if you are new to coding and have a specific use – such as PHP to design your WordPress site or ruby to design a smartphone app – as so many coding languages beyond HTML, CSS and JavaScript require at least a prior understanding of elements from these three languages (if not a need to use aspects from them in your code writing directly) then learning these three to start is wise.

How long this shall take varies – for like playing basketball it takes just a few tries to get a shot in, many many more to get into the NBA:) – but maintain momentum, be OK when you make mistakes, and keep pushing forward. Before too long you’ll be writing code like Shakespeare did sonnets. Good luck!

Know how to code now ready to put your knowledge into practice? Read Part 2 to learn how!

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

#Art and Design#Tech and Online