So you decided to be a Web Developer

18.04.2020 - Written by Matey

This it not another article about webdesign from some marketing writer wierdo. No No. Luckily for you, author is experienced programmer and web designer. And he will show you what does it take to be a web designer. Fasten your seatbelts and lets go.

During my life, I met a lot of people who were thinking to get into programming, web design, frontend development, machine learning… name the rest. At that is a legitimate if you ask me… you should pursue what you think, you would like to do. But often times, you don’t really know what exactly to do, what exactly to look on, and what is worthy to learn and what is not.

The Theory

Okay, so let’s say in other words – what your ambition really is? You want to write a code, which will be displayed by Internet Browsers in certain way and then website visitor will interact with it. Cool! But what now? So lets go piece by piece.

Before proceeding, it is good to mention one difference between common software and websites – every software, including your website usually runs on some machine. While common software usually runs some computations to generate some data, your web application usually does that too, and moreover, output is sent by network to internet browser of the website visitor. Can you see the potential problem now? Imagine your visitors have Opera, old Internet Explorer, Firefox, Chrome or some kind of new exotic browser you never heard about. Some browsers have different rules how to display a website than the others. To make a website which can be displayed correctly on every single browser correctly may be a challenge.

That being said… lets go to the first step. We all know all websites have some visual look, right?

HTML & CSS

In order to make website look somehow, you must definitely learn some basics of HTML and CSS.

HTML – Specifies elements which are on a website (for example a menu bar)
CSS – Specifies how HTML elements will be visually looking (for example specifies that menu bar should be red)

That being said, let’s have small experiment. Create a new file on your desktop, and name it something.html. Now, open that file in your internet browser. You should see a blank, white only page. See? Your browser is reading your document.

Lesson learned:
Internet browser is basically just reader of documents.

Now let’s get more into depth. Save following code into your something.html file:

<!DOCTYPE html>
<html>
<body>

<h1>The Page Heading</h1>
<p>The page paragraph.</p>
<button>Click me</button>

</body>
</html>

Done? Great… now open our file with your favourite internet browser again. See the changes? And also, by this point, you produced fully valid website. Congratulations! Please, for a moment take a look on our HTML code… no mathematics, or heavily non-understandable logic happens.

Lesson learned:
HTML is not a programming language, but rather, a markup language.

By now, the website looks cool, however it is just black-on-white ugly text. so let’s make ait a little more pleasant to look at. Let’s change background to pleasant light-gray and make text more nice. Modify our code so it looks like this:

<!DOCTYPE html>
<html>
<body>

<style>
body{background-color: silver; font-family: Arial;}
</style>

<h1>The Page Heading</h1>
<p>The page paragraph.</p>
<button>Click me</button>

</body>
</html>

Now, display our HTML document into the browser once again. Can you see the changes? Great!

So what we did now? We added <style> tag within our code. And everything what is inside this tag is CSS. As you can see, again CSS is not any hardly understandable logic. It just simply defines certain properties like color, background etc for certain elements in your website. In our case, we defined background color and font for <body> tag.

Lesson learned:
CSS is not a programming language, but instead a style sheet language.

Isn’t this amazing? We did the very basic website, by not even programming, as HTML and CSS are not a programming languages. This makes them very easy to learn.

You may be telling to yourself okay, but what if we would like our website to behave in a certain way? And this is where programming languages may be handy! In web development, we can make browser of website visitor to make some visual effects. Say welcome to Javascript

Javascript

Javascript is very widely-used language, and almost every programmer knows it. Thanks to Javascript, you can modify your HTML and CSS in a more sophisticated way… let’s say website visitor will be warned about something if he clicks on the button or something similar… you got the point.

So let’s implement some javascript into our code like this:

<!DOCTYPE html>
<html>
<body>

<style>
body{background-color: silver; font-family: Arial;}
</style>

<h1>The Page Heading</h1>
<p>The page paragraph.</p>
<button onclick="alert('You clicked the button')">Click me</button>

</body>
</html>

Now refresh the page inside your browser and click the button. A warning should be displayed. If you inspect carfefully, <button> element got a new attribute called onclick. That basically says, that clicking the button will call javascript’s alert function. Simple isn’t it?

By any means, if you want to be a web developer, HTML, CSS and Javascript should be your focus as they are implemented in every modern web browser. Ofcourse there is much more to learn, but for now, just stick with the basics and add slowly. Later you can learn new things and build upon your strong understanding of the basics – HTML, CSS and Javascript.