First Steps with HTML, CSS and JS
Many people wish to start learning web development but they keep on procrastinating. However, if you truly are interested in this field, it can be both fun and rewarding. So don’t delay anymore, spare some minutes reading this article and get a clear picture about these things in brief and plan your learning journey ahead with tips and resources shared here.
People who want to become a front-end or backend or full-stack developer must learn three building blocks first which are HTML, CSS and JS. Though there is an ocean of things to learn in web development these three things will build your base.
HTML stands for HyperText Markup Language and makes the main part of a website. Whatever content you see on your website is written in HTML whereas CSS and JS (JavaScript) are just helping to make your website look more beautiful and become interactive respectively.
If you are an absolute beginner make sure you are ready to persist because people who are new to any programming or markup language might get confused and it will definitely take time to understand the rules and syntax of writing the code. But learning web development is not at all tough but rather an interesting, rewarding and fun process. So, let’s begin!
HTML
HTML is a language that you can use to write documents/webpage that needs to be displayed on the web browser. Note that HTML is a markup language so don’t think that it is a programming language. Its full form is HyperText Markup Language. Consider the following example to understand the purpose of HTML.
Assume if you want a French-speaking person to bring coffee for you then you need to use the French language to communicate to tell him/her what to do, similarly, if you want to tell a web browser to display a web page then you need to use the HyperText Mark-up Language.
Using HTML, you can tell your web browser how and what to display on a webpage/website.
A simple example of HTML looks like below. This code is an example of what you will be learning in HTML.
<html>
<head>
<title> First Web Page </title>
</head>
<body>
<h1> HELLO WORLD! </h1>
<p> Hey, this is my first website </p>
</body>
</html>
So, in the above code whatever is written inside < > (known as angular brackets) are the words whose meaning your web browser already knows and you need to learn too. These are known as tags. <html>, <body>, <head> are all tags which have special meaning and your browser already knows what to do when it sees them.
When a browser needs to display an HTML document it starts reading the HTML code from top to bottom and while reading every tag it encounters are written in proper format and carry some meaning that tells the browser how to display the webpage. So, let me also tell you what meaning some of the above tags have.
<html> tag means that from now on whatever is written is a part of HTML document until </html> word is encountered. Now understand that tags often come in pair (but not always). If you have written a tag e.g. <html> then you must close it with a closing tag i.e. </html>.
<body> tag means that whatever is written from now onwards will be the part of the body of the webpage until </body> tag is encountered.
<p> is paragraph tag used for writing paragraphs on a webpage. If you want to display a paragraph on a webpage then write that paragraph in between <p> and </p> tags and browser will consider the text as a paragraph and display it accordingly. As you can see in above code the <p>…</p> is written inside <body> …</body> tag then it means that paragraph will be displayed in the body of the webpage.
<h1> is a heading tag used for displaying a heading on a webpage. The text written in between the opening and closing tag of h1 is displayed as a heading on webpage.
In short, these tags tell the browser how to interpret the content/ text written in HTML document. There are many types of tags that you must know about. Check out a list of tags here.
CSS
If you want to make your website look beautiful then you should use CSS. It stands for cascading stylesheet. It provides styles to your webpage and makes it look more appealing to users. Styles can be anything like fonts, background colour, etc.
There are many ways you can add CSS to the HTML document. However, we will only discuss how to add CSS using inline style method to HTML code. Let’s say you want to add a background colour like pink. Then you need to write, style = “background-color : pink” inside body tag as follows:
<body style = “background-color : pink” >
<h1> HELLO WORLD! </h1>
<p> Hey, this is my first website </p>
</body>
As you start to learn more about CSS you will learn other ways of writing CSS codes for HTML document more efficiently.
JS
To add interactivity to your website use JS i.e. JavaScript. Let’s say you want to display a dialog box when you click a button, or you want to change the colour of a button when your mouse hovers it then you can use JavaScript for this purpose. There are many amazing things that you can achieve while applying JS to your HTML document but before mastering JS or even CSS make sure your basics of HTML is clear.
Let’s see a small example of adding JS to your webpage. Consider you want to greet your user whenever he/she visits your website then write the following inside your body tag at last.
<script>
alert(“hello”);
</script>
Please note like CSS there are many ways you can include JS to your HTML document, the above method explained is just one way. Code of JS can also be written in a separate file and then linked to HTML document.
TASK FOR YOU:
Open a plain text editor like Notepad on your PC and write following code as it is and save it with any name but make sure file type is “all type” and file extension is .html or .htm
<html>
<head>
<title> First Web Page </title>
</head>
<body style = “background-color : pink” >
<h1> HELLO WORLD! </h1>
<p> Hey, this is my first website </p>
<script>
alert(“hello”);
</script>
</body>
</html>
Now let’s say you saved it on desktop you will see that file is saved with the icon same as your default browser. Now when you will open it you will see as follows:
WHERE TO WRITE HTML, CSS, JAVASCRIPT?
You don’t need to use any special IDE or code editor for getting started but as you progress in web development you will feel the need of using a more convenient interface than a simple notepad that can help you along the way while writing large projects in HTML, CSS and JS. So, some of the following are very popular choices that people use:
HOW TO LEARN HTML, CSS AND JS?
In order to learn these things, you have to make an organised plan and you must set a self-deadline. Say for the next three months or one month you will have to seriously commit yourself learning the basics of these and get your self comfortable with syntax rules and writing them and making projects. To be honest learning speed depends on person to person so don’t force yourself to learn very fast. Be free to take as much time you need. Just be sure that you are consistent and learning daily even if it is for ten minutes a day. Learn something new about this topic every day.
To be consistent you can enrol yourself in a course of web development or make a time table yourself.
MAKE PROJECTS
Make sure as you start to learn syntax and rules of HTML, CSS AND JS you are building some small projects along the way. The projects should not be very complex but very basic and simple. The aim of projects should be learning how to convert your theoretical knowledge into a practical one.
For example, you can make a simple portfolio like this or can make a webpage that changes background colour on a click of a button or even something simpler. What matters is that you are building something to test your knowledge.
You can even share your project on this GitHub Repository by making a pull request to showcase your learning to the world. The aim of this repo is to become a collection of simple web development projects to help everyone learn from existing codes and give them some inspiration.
START USING codepen
You can learn more by looking at the work of others and it also gives you inspiration. “Codepen” is the best site for this purpose. This site is great to check out the best creative projects done in web development by people around the world. You can directly study the code and view the output of that web development project right there. You can also create your own account and showcase your own projects to the world. This website has a lot to offer to beginners. So, what are you waiting for? Just click the link and start making something cool today.
GOOD RESOURCES TO LEARN WEB DEVELOPMENT
There is a lot of material available on the web in all formats including books, courses, YouTube videos, etc. So choose whatever you like the most. I have listed out some below.
YouTube Videos
Below are some good videos created on this topic you can explore there channel more to see similar videos.
What is HTML, CSS and JS by Danielle Thé
40 Amazing web developers to follow by Adrian Twarog
Book
Check out the quora answers to see the list of books recommended. Though there are many books to choose from but pick the one that can improve your basics of web development. Since everything is changing rapidly these days content on the web is more updated than in books but the basics never change so consider a book that has got basics covered in detail and with clarity.
Courses
FreeCodeCamp is a good website that provides free courses on these topics. Following are two courses provided by it that you can enrol in.
Others
Thank you for your time and patience! If you liked this article, I will be happy to receive a clap. If you want to give feedback, feel free to connect with me on Twitter.
