Comparisons and Metaphors in Web Development

When I started studying Web-Development in late 2019, I was overwhelmed by so much information, and without a technical background it is easy to get discouraged or confused, today I want to give my personal opinions with some examples that will be useful to people without a CS degree or other background in the IT field.

If you have knowledge of the subject and you find my examples misleading please let me know.

So let's get started.

First the structure

Think of the structure of your page or web app as you are building or renovate your apartment;

This is your HTML

Imagine you have this big open space, and you want to divide it into rooms; You decide which room you will need, a bathroom, a kitchen, a bedroom, to start;

These can be compared to various element in your HTML file, as <div> for general purpose rooms, or more specific ones like <nav> , <section> , <article> , and <aside>. These are called semantic HTML tags because they deliver a specific meaning to the part they are applied to.

Look at this great explanation from http://html5doctor.com/lets-talk-about-semantics/

Then you may want some windows to look out in the outer world, tag like <a> do this job giving you the capability to link other sites or file in your living room for example.

Or maybe you want some paintings hanging in your bedroom?

The <picture> or <img> tags will do for you.

Thinking in this term you can look at the furniture in your house in the same way. Placing a sofa or a table using <div> for example, inside your main structure tags.

Even if HTML deals only with the structure there are so many attributes and properties you can give to each element.

And remember to plan in advance your structure, so

"Measure twice, cut once".

Then the look and feel

Here's where things get interesting (and complicated). Now that you have your new apartment split in rooms, and you have decided which piece of modern art you want on your wall, it' time to decide where and how to put them.

This is your CSS

In terms of building think of your CSS file as a blueprint for your inner interior designer, and this is where the magic of the new web begins.

You want our living room bigger? You can do it!

Change your wall's color? Here's to you!

Do you want to move that bathroom near your balcony? That's the way to go!

There are infinite possibility to explore and if you are interested to become a master in designing web stuff CSS is your new gospel.

You can modify the width: , height: , color: , background-color: , position: , font: and many more properties of every single element in your page by using selectors in your CSS file.

Selector use mainly IDs and Classes to get the job done;

Classes are used to select more elements at once, that shares a common style and can be used in many elements;They are referred in your CSS file as a . preceding the actual class name ;

Think of a class of 

class="wall-color"

 in your HTML as the color of your walls, if you want all your walls painted in a light-blue, it will select all the wall for you;

In your CSS file it will be:

.wall-color {

background-color: lightblue;

}   

IDs are used to style a specific element and can be used on unique elements in your HTML;

Maybe you want your left wall of the kitchen, in more dark nuances, try with 

id="left-kitchen-wall"

 and to refer to it in your CSS file you will need to add a # before the name like this:

#left-kitchen-wall {

background-color: darkblue;

}

On this, I recommend an article that has helped me better understand their differences and usefulness;

"Reasons not to use IDs in CSS" by @ClaireParkerPen #DEVcommunity https://dev.to/clairecodes/reasons-not-to-use-ids-in-css-4ni4

Hope this short article will give you a brief idea.

There are so many other properties that is impossible to try to explain them all in my very first article, for this I always recommend to look at some documentation like:

MDN (https://developer.mozilla.org/en-US/)Freecodecamp (https://www.freecodecamp.org/)CSS-Tricks(https://css-tricks.com/)

These are incredibly useful, especially for beginners.

Turn on the light

Now that you have your new home with the rooms you wanted set up to your liking, with your furniture and ornaments inside, you got that emptiness feeling.

Have you ever relocated to an empty apartment?

You first bring inside your bed, table, chair, you populate your closet and kitchen with clothing and tools and after a long day you still miss something and you got that feeling when you have to sleep without electricity and only with a candle.

Your house needs life.

The hum of the fridge or fan, the flow of water, the warmth of a lamp.

This is where your handyman friend Javascript gets into the game.

It can turn on and off the light move your table or just send a message to your friends while you are sitting on your sofa, and even change the color of your wall!!

If CSS brings the magic and the joy of the color and appearance to your house, Javascript will give it SUPERPOWERS.

Here things get more complex because JS is now used not only in the client-side of the web but also in the back-end. With runtime like Node.js for server-side coding, or framework like Angular, React, Vue to make routines and common jobs more simple and easy, or even Database based on Javascript like MongoDB, the "JS universe" is expanding at the speed of light, with new frameworks and libraries that come out almost every week, is very difficult and demanding to stay up-to-dated on everything the Javascript world has to offer.

My personal advice is to stick with a technology and master it, first to move to another one.

To summarize, Web development is a very broad topic nowadays and if you want to get into is better to start yesterday, not tomorrow.

This is also my very first technical(not-so-technical), English written article.

So please let me know what you think about it here on Hackernoon or on my Twitter @ioilmio.

Thanks for your time.

Happy coding!