You've made a decision to learn programming and want to get into a web development, but you're not sure where to begin. Fortunately, I've been there before and now I can help to guide you the path of web developer. In this post, I'm going to discuss a brief information of what HTML, CSS, and JavaScript is and what they do along with some examples and the resources where you can learn them.

With no further ado, let's get down to it:

HTML

The first thing I want to introduce you is HTML. HTML (HyperText Markup Language) is the standard markup language for creating web pages and the most basic building block of the web. It is what allow us to create the contents of the website. The text, images, buttons, videos, inputs, and the post you see right now is all done by HTML.

Here's an example of how HTML can create the title and paragraph:

Learning HTML is quite straightforward and the least difficult of the three. One important thing to keep in mind is to know some common element tags that are constantly being used and understand how tags should be closed properly. That's because if you close the tags incorrectly, it won't work. In the example below, we have two HTML codes showing the right way to close the tags and the wrong way.

This is a wrong way to close tags:

<p>Yo, I'm Goku!<p>

<p>Yo, I'm Goku!<p/>

This is a correct way to close tags:

<p>Yo, I'm Goku!</p>

See how the closing tag uses slash / before the element name? That's how you close the element tag in the right way.

CSS

The next thing that comes after HTML is CSS. CSS (Cascading Style Sheets) is a language that describes the style of an HTML document. It brings styling to the website and this is what we use to make the website unique and beautiful. The colors, font style, size, layouts, animations, and effects is what CSS can do. When you learn basic CSS, designing the website will become more fun. It's like back in the childhood days when we all used to draw on a sketch books.

Here's an example of how CSS can change the color of the text to red:

While learning CSS itself is not difficult, the tricky part is to know how to make the changes work the way you want. Basically, when you want CSS to do something like changing the color of a navigation bar into red, it may not work properly. Either nothing will change, half of the things will change, or the entire page will turn into red! You won't know why this happens until you inspect it or asked someone for help. And even if that happens, fear not - even experienced developers struggle this too, so don't worry! It's matter of practice and experience and you'd eventually improve it.

JavaScript

The last thing to learn after HTML and CSS is JavaScript. JavaScript (Not to be confused with Java) is a lightweight, interpreted, or just-in-time compiled programming language. It is what brings all the actions onto your website and can do so many things. On the front screen, It can change the looks, elements, and contents based on the user's actions or events. On the behind the scenes where users don't normally see, it can send user's data to the server to store it and recall them when made a request.

In other words, it can make the website more interactive with the users.

Here is an example of how JavaScript can make the text to display when clicked the button. Noticed how we don't have to refresh the page or anything. This is a very basic example of JavaScript.

Learning JavaScript is probably one of the most difficult language to learn, because it has a lot of logic on it and not very initiative compared to HTML and CSS. One way that helped me to learn JavaScript is to focus one thing at a time. So for example, I spend 3 days or more to learn and practice Variables - which is one of the features of JavaScript. I took the time to get know how the logic works such as why it can and cannot do that. Once I understand the strength and limits of Variable, I moved on to the next one.

Where Can I learn?

You can start learning today by signing up freeCodeCamp. freeCodeCamp is an interactive platform where people of all regions and ages learn programming from zero and earn certificates after completing the curriculum. As the name implies, it's totally free! It also has an active community where you can ask questions related to programming or help when you got stuck.

YouTube also have a great sources for programming tutorials and it's an ideal for people who learn best by showing and not telling. Some channels to check out includes Traversy Media, The Net Ninja, Programming with Mosh, Dev Ed, Fun Fun Functions, and of course freeCodeCamp has a channel too. For the full list of amazing programming channels, check out this repo.

If you prefer to learn by reading, Flavio Copes has a free handbooks on HTML, CSS, JavaScript, and other tools as well. You Don't Know JavaScript and JavaScript.info are a great resources for learning extensively about JavaScript.

What to Do After Learning These 3 Languages?

When you finished learning them and can build websites, then congratulations! You now possess the basic foundations of web development. With HTML, you can make your own website. With CSS, you can customize your website however you like and make it look awesome. And JavaScript will bring life to your website and make it more fun and do complex things.

From here on, you can think about the specialization. Do you enjoy working on the data and security? Then Back-end development is for you. Love designing the look of the website and how the people will interact with? Then Front-end development is for you. Want to do both? Then go to Full-stack development.

For now though, if this is your first time learning to code, I suggest you to only focus on these three programming languages and then you can come back to think about what type of web developer you want to specialize in.

Conclusion

Before wrapping up, I have one last advice for you. Programming is a craft. Meaning you don't learn them by just watching tutorials or reading books; you learn them by doing. You'll start to understand how the programming works after making countless mistakes, researches, and experiments. As time the goes on, you'll start getting better and better in programming and it won't be long before you become a fine developer.

I hope you find this guide helpful and thank you for reading.

Photo by Christopher Gower on Unsplash