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 for general purpose rooms, or more specific ones like , , , and . These are called because they deliver a specific meaning to the part they are applied to. <div> <nav> <section> <article> <aside> semantic HTML tags 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 do this job giving you the capability to link other sites or file in your living room for example. <a> Or maybe you want some paintings hanging in your bedroom? The or tags will do for you. <picture> <img> Thinking in this term you can look at the furniture in your house in the same way. Placing a sofa or a table using for example, inside your main structure tags. <div> 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 , , , , , and many more properties of every single element in your page by using selectors in your CSS file. width: height: color: background-color: position: font: Selector use mainly s and es to get the job done; ID Class es 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 ; Class . 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; } s are used to style a specific element and can be used on unique elements in your HTML; ID 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 gets into the game. Javascript 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 brings the magic and the joy of the color and appearance to your house, will give it CSS Javascript 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 for server-side coding, or framework to make routines and common jobs more simple and easy, or even Database based on like 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 world has to offer. Node.js like Angular, React, Vue Javascript MongoDB, Javascript 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 or on my . Hackernoon Twitter @ioilmio Thanks for your time. Happy coding!

Flow

Mozilla

Comparisons and Metaphors in Web Development

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

How to Deploy a Ruby on Rails App on Heroku

10 VSCode Extensions To Make Your Life Easier

10 Ways Stand Out as a Java Developer and Land that Dream Job

10 Tips For Junior Developers To Succeed in Code

10 Things Every Beginner Should Know When Learning Javascript And React

10 Reasons Why Front End Development Is a Great Career Choice

How to Deploy a Ruby on Rails App on Heroku

10 VSCode Extensions To Make Your Life Easier

10 Ways Stand Out as a Java Developer and Land that Dream Job

10 Tips For Junior Developers To Succeed in Code

10 Things Every Beginner Should Know When Learning Javascript And React

10 Reasons Why Front End Development Is a Great Career Choice

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps