How to get started with Web Development in 2022?

Web Development is one of the most famous career options that a lot of people are interested in today. It involves, as the name suggests, creation of websites mainly using HTML, CSS, and JS. These websites can be of different genres such as:

Informative
Utility
E-commerce
Portfolio
Business
Blogging
Educational
Charity, etc.

Now what if I tell you that you can make your first website under 48 hours? That sounds crazy, I know. But it's possible with enough dedication. Most of the people don't know how to start when they wish to learning something new. They don't know about the high quality courses available online, be it free or paid, and end up getting incomplete knowledge from unprofessional YouTube videos and websites. But guess what? You're not gonna face that fate after reading this article!

First steps...

HTML

To get stared with Web Dev, firstly you'll need to learn HTML, which stands for Hypertext Markup Language. HTML allows you to write out of the basic layout of a website. Here is a sample HTML file just so you know how does Web Development look and feel like:

<!DOCTYPE html>

<html lang="en">

<head>

    <title>Sample Site</title>

</head>

<body>

    <h2>Hey there!</h2>

<p>

        This is a simple site made with HTML.

    </p>

</html>

Output:

This is just a simple website made using HTML. The possibilities are endless.

CSS

The above website we just created looks very plain and is not appealing to the eye. You may want to change the font, add some formatting, or do some other things like adding a border to the page. You can do all of this using CSS. CSS stands for Cascading Style Sheet. It is used to format the HTML code.

So if we use some basic CSS to modify the above website we just made:

<!DOCTYPE html>

<html lang="en">

<head>

    <title>Sample Site</title>

    <style>

        body {

            font-family: Arial;

}

        h2 {

            border: 1px solid green;

            border-radius: 10px;

            padding: 10px;

            background-color: rgb(245, 245, 245);

}

    </style>

</head>

<body>

    <h2>Hey there!</h2>

    <p>
        This is a simple site made with <kbd>HTML</kbd> & <kbd>CSS</kbd>.
    </p>

</html>

Output:

You can clearly see that CSS can enhance the look of any website. Don't worry if you don't understand any of this, this was just for demonstration purposes. The main goal of this article is to tell you how to learn Web Development.

JS

The last component of Web Development is JavaScript, often abbreviated as JS. Now let's add some JS to the mix:

<!DOCTYPE html>

<html lang="en">

<head>

    <title>Sample Site</title>

    <style>

        body {

            font-family: Arial;

}

        h2 {

            border: 1px solid green;

            border-radius: 10px;

            padding: 10px;

            background-color: rgb(245, 245, 245);

}

    </style>

</head>

<body>

    <h2>Hey there!</h2>

    <p id="para1">

        This is a simple site made with <kbd>HTML</kbd> & <kbd>CSS</kbd>.

    </p>

    <button onclick="changePara1()">Next</button>

    <script>

        function changePara1() {

            document.getElementById("para1").innerHTML = "<kbd>JS</kbd> is used to 

                give extraordinary behaviours to your site!";

}

    </script>

</html>

Output:

After clicking the button:

You can see that JS can give extraordinary behaviors to your website. Again, don't worry if the code is confusing, trust me I was never more confused than at the time I first got into programming!

Where do I learn HTML, CSS and JS from?

From the above examples, it is clear how much can be done with HTML, CSS, and JS if used properly. To get started, you can refer to the following tutorials that have been verified by freecodecamp.org:

And that's it! Next is your determination, handwork and practice and no one would be able stop you from becoming a world-class web developer!

Hope you found this helpful. Thank you for reading!

Search This Blog

Minisoft Blogs