The Programming Virgin’s Intro to Front-end Development

The ‘Programming Virgin’s Intro to’ series is for those who are very new to the world of coding, and are deciding on exactly what kind of technology they want to begin with. Think of it as guidance counselling for the young and innocent, if you may.

Every programmer is an artist.

But this fact hits you the most when you watch a ‘Front End Developer’ at work.

Have you watched the movie ‘Loving Vincent’? It is a movie about the artist Vincent Van Gogh, a tribute to him and his life through his own art.

The browser is like an artist’s canvas. The front-end programmer renders her art on it. Artists sketch, developers write HTML. Artists bring their sketches to life with paint, developers write CSS.

Now why did I mention the movie? The brilliant people who made this movie decided that as beautiful as Van Gogh’s stand alone paintings were, what would make them more awe-inspiring was making them come alive for the audience. The result was the first fully painted feature film, made by piecing together paintings by hundreds of painters.

They took Van Gogh’s paintings to the next level by making them interactive.

That is where javascript comes in for the Front-end developer — she uses js to bring her art to life. When you swipe right on Tinder? Javascript. When you click on that little like button on Facebook and it turns blue? Javascript.

So, if you have a keen eye for colors and style, and aren’t usually satisfied with just working behind the scenes, chances are you will enjoy coding for the front-end.

HTML

HTML is HyperText Markup Language.

HyperText because it isn’t just ordinary, boring text on a single plane. It can be linked to other texts, which can, in turn, be linked to other text and so on. You get it, right?

Markup Language because it isn’t really a programming language.

A Markup language is a language that helps structure content — more like adding emotion to voice. It doesn’t just convey the text to the computer — it tells the computer how to read it and feel about it. It doesn’t just say ‘What do you mean you ate the last piece of the cheesecake?’, it screams ‘WHAT do you mean?! You ate the last piece of the cheesecake?’

HTML is the basic skeleton that tells the browser what to display — it controls the presentation. When you write HTML, you tell the browser to show the title before the image, and the text after the image.

It isn’t a programming language because it doesn’t use your CPU’s power to transform data (ie it isn’t compiled).

A line of plain HTML looks like this -

<p>Scientists spot <em><strong>flying pig!</strong></em></p> *

CSS

Cascading Style Sheets — these are the ones that add color to your expression.

Imagine three people giving you makeup tips — you tend to take the best of each person’s advice and decide which shade of lipstick you want to wear based on various reasons — each person’s style quotient, their experience etc.

Essentially, their tips cascade down to the final look you decide on — the one everyone sees.

That is what the Cascading in CSS stands for — you can specify multiple styles in different places for the same HTML, and the final, resolved styling is what you see on the browser.

Style sheets — this is obvious. The HTML tells the browser to show a title, the CSS says ‘I want this title to be red, in a sleek and trendy font, bold enough to capture you her attention.’

Typical raw CSS looks like this -

<h1 style=”color:brown;font-style:italic;”>Evolutionary Changes Have Experts Baffled</h1> *

Javascript

Javascript is a scripting language.

Scripting languages are mediators — they tell the computer what needs to be processed; they don’t do the actual processing themselves. Python is another example of a scripting language. Scripting languages are mostly subsets of programming languages, and a scripting language sometimes takes up the roles of a programming language too (but that is a whole other article, which I will write, soon!).

In the case of javascript, the browser says ‘I know how my content needs to be shown, thanks to HTML and CSS, but I do not know the exact text/image that should show up’ — and javascript saves the day by talking to other programs and bringing it back from them.

HTML says show a button, CSS says make the button green, but what happens when someone clicks on that button? Javascript takes care of that.

Javascript has recently started taking it’s part-time role as a programming language seriously, making it the real deal. Armed with HTML, CSS and JS knowledge, a developer can build an application from back to front— from rendering it on the browser, to saving and manipulating data in the database.

These are the most basic things that make up the work of a Front-end programmer. As with everything in life, it is not as simple as it seems. There are multiple things built on top of each of these, leveraging their capabilities to create some of the mind-boggling websites you see today. If what you’ve read so far interests you, go ahead — make a basic web page with a basic tutorial. See how it feels. If you pass that too, it’s time to bury yourself deep into this wonderful world and create art.

Here are some online courses to get you started —

*The example lines of code are to just give an idea of what each language looks like.