HTML, CSS, Done!. What Next?

Why are you about to read this article? Because you probably didn't see a road map of coding or guide before starting. Which is fine? Trust me, have been there.

But let's not talk about your past, let's talk about where you are now, and where you wanna be in the future. Have in mind that you are where you are as a result of your yesterday, so what you do now, the actions you take, the next steps you make will determine where you would be tomorrow.

HTML & CSS are both languages used for making websites, in other words, with your knowledge of HTML & CSS you can actually build a basic website. Though it will be a static website without some fun functionalities.

Ok great, you should be a bit excited about the fact that you can make a website. But there are a few things that this website lacks, one of them is behavior and for this, you need a programming language.

What is a Programming Language?

A programming language is a language (computer language) used to tell a computer to execute a set of instructions. I.e, it is a language used to tell a computer what to do. So you need a programming language like JavaScript to add some functionalities to the website. For example, a popup when a button is clicked, a functional calendar, a digital clock (to maybe show an interval for an offer), a customed music player, an image slider, a very cool side-navigation, etc. Now, these are some cool behaviors a website can have (there are more though).

HTML & CSS are not Programming Languages.

If you are very familiar with HTML and the Web developer's community on Facebook, you must have probably seen this a million times (especially as memes most times). But it's funny that not too many people that say these things actually know why HTML is not a programming language.

HTML is a markup language used to structure web pages, so that means it is used to create web pages. It is a language web browsers understand and can interpret properly if written correctly.

For example, in Microsoft Word, you can decide to have a paragraph. Microsoft Word in a way recognizes it as a paragraph and puts all the whitespaces around it, right?

Now, if a web browser like Chrome should interpret that paragraph as you copied from Microsoft Word, Chrome will not consider/regard it as a paragraph.

This is where HTML comes in, to tell the browser that the text is a paragraph; only then will the browser understand and regard it as a paragraph and then put all the whitespaces around it.

CSS on the other hand is a style sheet, used to style web pages. Now take our text for example;
In Microsoft Word, at the top, you will find some buttons to change the color of the paragraph, the font size of the paragraph. Say we changed the font size to 32 pixels(px), and color to red.

If that same paragraph that is red in color and is very huge is copied to a web browser, the color will no longer be red neither will the paragraph be that huge.

This is where CSS comes in, to make it red and huge.

Now you see why HTML & CSS are not programming languages, they don't tell a computer what to do, they only tell a web browser how a web page should look like.

So with HTML & CSS, you can make a very beautiful website, but if you want to add some functionalities and features; you are going to need a programming language.

Which Programming Language should I step into?

Let's analyze something;

Say you want to build a website, and this website you want it to be maybe a business website, or a personal website, a portfolio where internet users can come, see and know some things about your brand and contact you or leave; what you need is a Static Website.

But if you want the website to be in form of a blog, whereby it is frequently updated manually by someone; what you need is a Dynamic Website.

Static Websites:

Static websites are websites that are static in nature, changes are not been made manually. It remains as it is. With such a website if you want to change to your new location, you may need to edit the website again and publish again.

Now understand that there can be frequent updating in a static website, but it will not be manually. For example, I can make a static website that tells the condition of the weather, so when there is a climate change, it will change automatically; now how it changes automatically is because it has been programmed to change automatically when there is a climate change.

With that, you can see that you will need a programming language to make a fantastic static website.

After HTML & CSS, I'd say you learn JavaScript. With these three languages, you can build a completely static website. With these three languages, you automatically become a Front-End Web Developer

Dynamic Websites:

Dynamic websites are dynamic, any changes can be made manually without having to edit and re-publish the website, just like dev.to is a dynamic website, this article was posted by me and updated dynamically to the website without the developers at dev.to editing and re-publishing the website. I bet they are asleep when I made this post.

To make a dynamic website, you need to know more than HTML, CSS & JavaScript, you need to be more than a Front-End Web Developer. You simply need some additional language(s) or framework(s) to make a website dynamic.

I am assuming now that you already know HTML, CSS & JavaScript, what I'd recommend you to learn to add to these three languages and make a dynamic website are React, NodeJs, ExpressJs, MongoDb or Firebase. With these, you are automatically a Full-Stack Web Developer. Now, this seems a lot, but trust me, in less than three weeks you would know the basics of them all. Let's explain their functions:

React:

React is a JavaScript front-end framework built by Facebook for building front-end websites. With your knowledge of HTML, CSS, and JavaScript, learning, understanding, and using React will not be stressful for you at all.

NodeJs:

NodeJs is a JavaScript runtime environment just like web browsers are. So it executes JavaScript code outside of web browsers. It is the environment upon which we will build the website, both the front-end and the back-end (server-side). With your basic understanding of JavaScript, NodeJs will be easy for you to learn and make use of.

ExpressJs:

ExpressJs is a JavaScript back-end framework for building servers easily. With a basic and proper understanding of JavaScript and NodeJs, ExpressJs will be easy for you to learn and make use of.

MongoDb:

MongoDB is cross-platform document-oriented database program. It is where and how you store your documents in the cloud. Again with a basic and proper understanding of JavaScript and NodeJs, MongoDB will be easy for you to learn and make use of.
An alternative to MongoDb is Firebase

Let's build a Blog:

I want to build a simple blog, in this blog, I will have:

1. A page to view all my posts.
2. A page to make a post (containing a form).

Let's get into this blog with these steps:

• I will create the UI of the website with React: That means the page where all the posts will be made and the page to make a post will be created with React. Simply, the client-side (front-end) will be created with React. Also, I need NodeJs to serve as the environment to build this UI upon.
• I will create the server with ExpressJs: The server, i.e the back end will be created upon the NodeJs environment with ExpressJs. And it is in this server we will make a function to upload posts to the database and read posts in the database as well. Database can be MongoDB or Firebase

So whenever we make a post on the client-side, the server-side will receive it and upload it to the cloud.

Same way when we want to view all our posts, the server will collect all posts from the cloud and send them to the client-side.

That's it. Easy right? there is more to it though, but this is basic.

So you can see that with your HTML, CSS, and JavaScript knowledge you can become a full-stack developer (one that knows both front end and back end), you just need to know some other things.

Conclusion

Apart from MongoDb, ExpressJs, React, NodeJs (MERN), you can also use some other frameworks or programming languages like Python, PHP, etc along with HTML, CSS & JavaScript to make a dynamic website. I will update or probably make a new post on that soon.

One thing I'd recommend you do is practice with all of the listed frameworks i.e MERN. After studying the documentation or taking a course on them, you can go to YouTube to get some project ideas to practice them with. This article lists 10 YouTube Channels you should give a try for this purpose.

Alright, that's it. Thank you for reading. I hope you enjoyed and learned from it as I did; if you did, leave a comment and share.