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.
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 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> *
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> *
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!).
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 —
- HTML and CSS for Beginners – Build a Website & Launch ONLINE
- Front End Web Development: Get Started
- Make a Website
*The example lines of code are to just give an idea of what each language looks like.