Skeleton of HTML, CSS, and JAVASCRIPT
Published: 2021-07-20 05:32:31

Hello there 👋, my gorgeous friends on the internet 🤗, how have you been doing? 

Together in this article, we will look at the reasons every developer will tell you to learn **HTML**, **CSS**, and **JAVASCRIPT** for a start.

Yes! I was told the same too.


> 
But before we proceed, you might want to check out  [The Developer Typing Game](https://www.youtube.com/watch?v=25E6FPy9SPc) demo on YouTube.


## PREREQUISITES:

You really do not need anything apart from this article, but you might want to grab a coffee 😍


Without any further ado let's get down to today's business

![mulan.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1626756745568/bwMnkft_R.gif)

<hr />

### 1. What is actually HTML?

According to everyone on the internet, HTML is an acronym for **Hyper-Text Markup** Language, even I was confused with the full meaning, now let's take a look at my own derived definition, maybe it will help you understand what everyone is actually trying to say.


**Hyper-Text** are texts, images, tables, and other representative formats that are been displayed on a computer, this includes what we see on our browsers.

While **Markup Language** in computer science refers to languages that are human-readable and are written within tags.

This implies that **HTML** are ways of writing human-readable contents within tags which allows us to preview designed document *(.html)* on the browser.

Web projects written in HTML alone looks like a skeleton, very scary and unattractive because it has no flesh, which in reality means it will be difficult to get a job as an **HTML Developer** 😲.

**Html only project**

<center>

![purepng.com-skeleton-skullskeletonstructureexoskeletonskeletonsskullsclipart-1421526967818zh0sl.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1626449392484/d-nLZ9EBE.png)

</center>


- Below is how the Facebook homepage looks like with just HTML

![facebook without css.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1626447395279/J0p9ndtw5.png)



> 
Will you still use Facebook with that look? No one will 😭.


Now let's check out what we can combine with **HTML** in order to be more skillful and employable.

<hr />

You guess right!!! it's CSS 💃💃💃

### 2. What is actually CSS?

CSS stands for Cascading Style Sheet, it is a design language used to describe how documents **(.html)** written in markup language will be presented on the browser.

This design and the description include **colors**, **layouts**, **background-colors**, and much more to mention a few, remember I said HTML are skeletons without a flesh? 

Now CSS is the missing flesh.

And when we add flesh to a skeleton it becomes less scary and more attractive, like the image below 👇

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1626232803279/doLM5J0QP.png)

<hr />

Now that we have a good-looking figure, which is a **website or webpage**, now let's see how the super Facebook homepage looks again with the CSS style rules included.

![frame_generic_light.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1626461739694/3a0ZEsFQq.png)


Super friendly and attractive right? 😊 

<hr />

The good news now is that you can earn an income from mastering just **HTML** and **CSS** fundamentals to build friendly and attractive webpages, a company can likewise hire you to help build their website or rebuild their portfolios.

Below are 3 samples of achievable **HTML and CSS** projects ideas that can earn you an income.


**1. Small Business Portfolios**

Do you see that small shops down your street? you can approach the owner and offer to build them a portfolio (free or with a discount) and get a chance to be referred or recommended to their colleagues/networks.


**2. Company Landing Page**
  

Every large and small business need and want an online presence to showcase their work, and a website is on their list, **which you're good at building**, reach out to the company showing them what you can build, why they should consider having one and asking them if they want something similar or better than your sample.  

**3. Individual Portfolios**

Every profession, from engineering, modeling, photography, to farming needs a place online to showcase their talent and work experience, you can approach them with reasons to have a portfolio that can make them stand out among others, which in turn makes them your next client and a plus 1 project for your portfolio.

<hr />

These are just a few of many opportunities available for mastering **HTML and CSS**

<hr />

Check out useful articles from great writers on @[Hashnode](@hashnode)

1.  [A list of CSS resources for beginners](https://blog.devinford.dev/a-list-of-css-resources-for-beginners) by @[Devin Ford](@DevinDFord)

2.  [6 amazing HTML project ideas for beginners](https://codingnuts.tech/6-amazing-html-project-ideas-for-beginners) by @[Nishant Gour](@nishant007)

3.  [Over 10 Frontend Challenges](https://unclebigbay.com/series/challenge) by @[Ayodele Samuel Adebayo](@unclebigbay)


Now that we have **HTML and CSS** skills at hand, we should also note that projects built with only **HTML and CSS** are static, it doesn't communicate with the users and visitors likewise cannot interact with it either.

For this reason, we can say any website built with just **HTML and CSS** is a dead body.

<center>

![giphy (8).gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1626463360234/O5odpeH4L.gif)

</center>

**Kick it, touch it, shout at it**, it will still remain on the same spot without any sign of movement, as time goes on, it becomes boring even though it looks attractive and friendly, so we need to skill up.

<hr />

Now is the need for **JavaScript**

<hr />

### 3. What is actually JavaScript?

Now that we can build attractive and friendly web pages, we need to bring them to life, which is why we will be needing JavaScript as the next skill to learn.

<hr />
JavaScript is a text-based programming language used both on the client-side and on the server-side that allows you to make web pages interactive. Where HTML and CSS are languages that give structure and style to web pages, JavaScript gives web pages interactive elements that engage a user. - [Google Search](https://www.google.com/search?q=javascript).

<hr />

If **HTML and CSS** projects are lifeless body, then **JavaScript** is the life element that is missing, **JavaScript** brings every webpages to life, from **handling of data, toggling of elements, automation, and animations**.

Every living human can perform actions such as **eating, walking, jogging and to say the least action, we can stand up**
<center>
![giphy (9).gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1626465397213/FzdSQhb8T.gif)
</center>
Likewise, **JavaScript** allows us to add actions to our webpages, such as **handling of data when a form is been submitted** and **changing of background image on Facebook posts**

![frame_generic_light (1).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1626467210598/FuYOzxHZy.png)

We can actually do more than standing up, we might want to perform more actions like say **Hello, world.**

![giphy.webp](https://cdn.hashnode.com/res/hashnode/image/upload/v1626465407036/Yqsq3DpqA.webp)

We can make use of JavaScript to power up let's say a static e-Commerce website that has been built previously with **HTML and CSS** to calculate the total price of selected products before the user checks out, we can also make use of **JavaScript** to add a payment option to our website.

So what else does a website requires?.

<center>
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1626468028761/K3TuExJmn.png)
</center>


## Final Thoughts

Don't rush!!!, take your time to learn these technologies, especially the basics, the combination of in-depth understanding of **HTML, CSS, and JavaScript** can earn you the income you want. A deep understanding of these 3 languages will make life easier when transitioning into any of their frameworks.

And with that, you can have a cute looking web project to be proud of 👏

<center>

![b2951169978c36ecc4c6d21f553b872f.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1626465409500/QLaL6Gx1l.gif)

</center>


<hr />

Wow, what a journey, I am glad you made it to the end of this article, if you enjoyed and learned something new from this article, I will like to connect with you.

Let's connect on

-  [Twitter @unclebigbay143](https://twitter.com/intent/follow?screen_name=unclebigbay143) 
-  [LinkedIn @unclebigbay](https://www.linkedin.com/in/unclebigbay/)