DEV Community: ShahiLalit

Console methods that you might not know but can change how you debug your code

ShahiLalit — Wed, 29 Sep 2021 17:24:04 +0000

“A problem well stated is a problem half solved.” --John Dewey

Howdy JavaScript Developers 👋

We all love to write code, right? Most of us just follow 👇

Until we get some bugs in our code and we have to break our routine and most of it changes like this 👇

I am going to help you here write the magical code which will never have any 🐞.

Hehe! ok, I am kidding there is no one in this heavenly earth who can teach you to code without bugs.
But there are some ways we can reduce our time to debug and help us understand the 🐞 and source of it.

I hope you are guys are still with me, if you are good, let's get started -

As JavaScript Developer we all have used the console inside the dev tool way often.
Our first approach to test or debug our code is to log it to the console.

But do you know there are different console methods that we can use to differentiate between our logs?

console.log("hello world!")

🔸 The most commonly used console method is console.log() which prints anything passed to it as arguments on the console

🔸 Multiple arguments can be passed.

🔸 It can be strings, variables, objects, functions, or HTML elements.

console.assert(expression, message);

🔸 It is used to make conditional log statements on the console.

🔸 It prints the message (passed as the second argument) if the expression (passed as the first argument) is false.

🔸 If the assertion is true nothing is printed on the console.

console.warn()

🔸 It prints a warning message onto the console.

🔸 The message would be highlighted with yellow color.

🔸 It gives us the call stack for the warning log as well which helps to trace the warning in the call stack.

console.error()

🔸 Just like the console.warn() it prints the error message on the console.

🔸 The message is highlighted with red color.

🔸 We get the error call stack for easy debugging.

console.count(label);

🔸 It prints the number of times the count method has been called for the argument passed to it.

🔸 If no argument is passed to it, it counts for the default label.

🔸 Argument can only be a string.

console.table(data)

🔸 It prints arrays and objects into tabular form.

🔸 It needs to have an array or an object as the mandatory argument.

🔸 First column is labeled as index.

🔸 For arrays, the first column is the indices of the elements

& for objects, its keys.

console.time(label) & console.timeEnd(label)

🔸 console.time(label) starts the timer to track the time taken by a task.

🔸 console.timeEnd(label) stops the timer for that label and prints the total time taken since it started.

🔸 label argument has to be the same and once we call console.timeEnd(label) the timer is removed from the stack.

console.timeLog(label)

🔸 It logs the time elapsed since the timer had started after running the console.time(label) method.

🔸 Needs to have the same label argument as the console.time(label) method.

🔸 If called after console.timeEnd(label) it gives the warning message stating Timer Label does not exist because timer gets popped out of the stack.

console.group() & console.groupEnd()

🔸 console.group() groups the logs with an indentation

🔸 console.groupEnd() closes the group started before.

🔸 can be used to batch errors and warnings together or print similar information together.

console.trace()

🔸 It shows a complete call stack when debugging from the point it is called.

🔸 It can very handy when debugging a complex code with multiple files and modules.

console.clear()

🔸 When the console gets too cluttered, you can use console.clear() method to clear the console.

Bonus Tip

You can print log statements with your own custom styles. There are a bunch of string substitutions that you can use to manipulate the log statement.
But it does work only with console methods that accept strings as arguments.

Check how using %c with our string in console.log() changes the output of the log statements.

Wrapping up

Alright! that's the end of today's post. I hope you guys liked it and maybe you would start using the above console methods in proper use-cases instead of using just console.log() for all your debugging.

“If your only tool is a hammer then every problem looks like a nail.”
-- Abraham Maslow

If you are someone who is interested in Frontend development and wants to know more about it, consider following me 👇

Feedbacks, good or bad are appreciated 🧡

Until next time, keep coding, keep learning and KEEP DEBUGGING. 😁

Cheers!

Lalit

Write faster HTML with these quick web tips

ShahiLalit — Tue, 21 Sep 2021 04:42:52 +0000

Hello 🙋‍♂️,

As web developers, we have to write quite a good amount of HTML code. Sometimes, it can get repetitive and can be time-consuming as well. If you also agree to it, this post will definitely help you create HTML elements faster and save a lot of your time.

The tricks mentioned in this article are helpful because of an amazing plugin called Emmet, which now is supported by mostly all code editors out there.

Let's get to it then.

👉 Boilerplate HTML code ( ! )

Type ! at the beginning and hit enter or tab when helper dropdown appears. You will see a short boilerplate code for your HTML ready to use.

! -> hit Enter/tab

This give you the following result:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

</body>
</html>

👉 Create Child Elements using ">"

In most scenarios, you would create a wrapper container div and then would create an inner container div and inside that create a paragraph tag.

Now, while I was explaining the scenario, it was kind of long and took a lot of time. What if we use this simple ">" to create the elements.

div>div>p

This would give you the following code:

<div>
    <div>
        <p></p>
    </div>
</div>

Isn't this cool?

Now, we also want to add classes and ids to these elements, for styling them in our CSS. Let's see how we do it with our next trick.

👉 Add classes ( . ) and ids ( # )

We need classes and ids to style our elements, and 98% of elements have either classes or ids or a combination of both. Writing class="your-class" or id="your-id", can take some time when you have to write it to all elements.

We can use . to create a new class and # to add new ids to elements.

div.your-class
div#your-id
p.your-class#your-id

This would turn out to be

<div class="your-class"></div>
<div id="your-id"></div>
<p class="your-class" id="your-id"></p>

👉 Create Sibling elements using +

We can create adjacent elements at one go using the plus(+) symbol.

div.parent-container>p#sibling1+p#sibling2

This will return

<div class="parent-container">
 <p id="sibling1"></p>
 <p id="sibling2"></p>
</div>

👉 Grouping elements using ()

Now, what would you do if you want to create a <div> and few child elements inside it and then a sibling of that parent container <div>? We need a grouping syntax that will help us just do that.

(div.parent>p.siblings+p.siblings)+div.parent-sibling>p

This would give you the following code

<div class="parent">
 <p class="siblings"></p>
 <p class="siblings"></p>
</div>
<div class="parent-sibling">
 <p></p>
</div>

👉 Climb up the elements tree using ^

If you use these short tricks to create your element, then you can use ^ to climb up and out of the parent element and create other elements.

div>p+p^div>p>span

This would return the following code

<div>
  <p></p>
  <p></p>
</div>
<div> // Came out of parent div
  <p>
   <span></span>
  </p>
</div>

As the number of ^ increases, it will come out of its next parent containers/elements, like the following code:

div>div>p>span^^^p.climbed-out

will return this:

<div>
 <div>
   <p>
     <span></span>
   </p>
 </div>
</div>
<p class="climbed-out"></p>

A good amount of code is written very easily if you plan your project before starting. It is recommended to give some time to planning before starting your project.

Setting a goal is not the main thing. It is deciding how you will go about achieving it and staying with that plan. ― Tom Landry, Hall of Fame football coach

👉 Create multiple similar elements using *

If you want to create similar elements like list-items <li> inside <ul>, you can use this asterisk (*). Or if you want to create the same styled two wrappers with similar kinds of structure, you can use it to do that.

ul>li.your-class*5

This will return this:

<ul>
    <li class="your-class"></li>
    <li class="your-class"></li>
    <li class="your-class"></li>
    <li class="your-class"></li>
    <li class="your-class"></li>
</ul>

so, basically, it just multiplies the left part of this asterisk (*) by the number on the right side of it.

You could also multiply a complete wrapped container using this and another trick learned before. Could you guess what that would be?

Yes, group and multiply together will help you achieve that.

div.wrapper>(div.inner-container>p+p)*2

This will give you this:

<div class="wrapper">
    <div class="inner-container">
        <p></p>
        <p></p>
    </div>
    <div class="inner-container">
        <p></p>
        <p></p>
    </div>
</div>

👉 Adding content inside the element { }

It is obvious that when you create an element like a paragraph or span, we would most probably write something inside it. Now, let's see how can we do just that with this short trick.

div>p{Hello World!}

It creates in return this code:

<div>
    <p>Hello World!</p>
</div>

Just a note, in HTML, a simple text is also considered an element, it is a Text element.

so, the following code can work perfectly:

div>p>{To learn HTML}+a{click here}+{and practice regularly.}

and this will give you:

<div>
    <p>To learn HTML <a href="">click here</a> and practice regularly.</p>
</div>

👉 Create placeholder Lorem ipsum dummy text

Most of the time when we are building our project, we don't have all the content ready for our sections and paragraphs. In that case, we could use Lorem Ipsum as the dummy text but going to Lorem Ipsum's webpage and then copying, pasting is a time taking process.

Instead, just type lorem and hit enter or tab and you will get the dummy text from Lorem Ipsum.

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum consectetur commodi ullam doloremque ex, tenetur illo. Unde minus possimus quaerat omnis ea eius similique, dolorem odio earum ullam inventore nostrum.

Now, sometimes we have some character limit for the element and in that case, we just write the number of words we want from Lorem and hit enter like the code below:

lorem20

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Facere qui beatae, vero dolore numquam soluta aut. Dolorem nostrum sapiente quibusdam.

👉 Adding Attributes to elements using [ ]

We can use square brackets to add attributes to our HTML elements. Check the code below:

div>p>{To learn HTML} + a[href="https://html.com/"]{click here} + {and practice regularly.}

this will give you the following code, in which a tag has href attribute with the value.

<div>
    <p>To learn HTML <a href="https://html.com/">click here</a> and practice regularly.</p>
</div>

👉 Adding numbers to elements

Ok, we have learned a lot of tricks now, but what if we want to add numbering to our elements, what if we want to create <li> elements inside <ul> but want to have different classes that are numbered.

Check the code for better understanding:

ul>li.list-item-$*5

this will give you 5 list items <li> inside <ul> because of the multiplication trick but along with that, it will add classes with numbering from 1-5.

<ul>
    <li class="list-item-1"></li>
    <li class="list-item-2"></li>
    <li class="list-item-3"></li>
    <li class="list-item-4"></li>
    <li class="list-item-5"></li>
</ul>

Note: The numbering trick will only work with the multiplication trick because without multiplication it will always print 1 where we add the $ sign.

And if you want to create a double-digit numbering system that starts from 01, just add two $ signs and if you want three-digit numbering like 001 then three $ signs and so on.

ul>li.list-item-$$*5

will return

<ul>
    <li class="list-item-01"></li>
    <li class="list-item-02"></li>
    <li class="list-item-03"></li>
    <li class="list-item-04"></li>
    <li class="list-item-05"></li>
</ul>

If you want to create a reverse numbering then, we need to add @- just after the $ sign and it will add numbers in reverse. And it will start from the number, which we multiply with.

ul>li.list-item-$$@-*5

<ul>
    <li class="list-item-05"></li>
    <li class="list-item-04"></li>
    <li class="list-item-03"></li>
    <li class="list-item-02"></li>
    <li class="list-item-01"></li>
</ul>

Note: These shortcodes work without space, so if there is any space in between the codes it won't work.

Wrapping Up 👋

Woah! too many tricks to learn and practice from this article. This might seem a little bit of hassle at the beginning but when you use these short tricks often and plan your structure properly, these shortcodes will help you write HTML way faster.

If you liked the article, please give your reaction. It really means a lot. I have more amazing articles like this lined up in the coming days.
You can follow me here or on Twitter if you want to get updated when I post new articles.

Till then be safe.
Keep Learning, Keep coding... 👩‍💻 🧑‍💻

Cheers!✌️

Lalit

Complete roadmap: How to get started with Frontend Development?

ShahiLalit — Tue, 14 Sep 2021 05:18:52 +0000

Hello World!

Today we will look into the complete roadmap for becoming a frontend developer step by step.

In the previous blog, we talked about if getting into a web development career in 2021 is still a good option. We discussed why it can be a good option for people who are interested in it. We also discussed that web development consists of Frontend Development and Backend Development. And what quick steps one can take to get into any of these fields as an absolute beginner.

Now, in this article, we will dive deep into the complete guide on how one can plan his/her career in front-end development.

What is Frontend Development?

As an absolute beginner, I am sure you must be asking a question to yourself, what is front-end development? What does a front-end developer do?

You see as the name suggests, a front-end developer creates everything a user sees on any website or application.

To make it easier for you to understand and remember, let's make a list of tasks that a frontend developer handles.

A front-end developer:

Creates the static User Interfaces (UIs) for the website/application.
Responsible for adding and handling the user interactions, e.g. click of a button, filling out a form, etc.
Integrates the Application Programming Interfaces (APIs) shared by the backend team with the UI.
Linking pages together on a website/application for users to move back and forth.

Apart from these, there will be other tasks that you will have to do as a developer in a small team but those tasks can be handled by or delegated to anyone. So, let's not talk about what you don't do and talk about as a front-end developer what you do.

As a beginner, it is very helpful when you have a clear idea about the processes and paths you need to know to achieve anything in your career.

Roadmap.sh has done a wonderful job of doing extensive research and created this complete frontend developer roadmap for us and for every beginner who is planning to build a career as a frontend developer.

Skills that you need to learn to be a frontend developer

Now, that we have some idea about what you will do as a front-end developer, let's find out the skills that are needed to do all that.

There are three technologies that you need to start with:-

HTML - HyperText Markup Language

HTML is the basic foundation of web development. HTML is not a programming language, it's a markup language but it does not mean that it is any less than any programming language like Python or JavaScript.

Almost all web pages that you see on the web are written in HTML. We can confidently state that HTML is the A B C of web development.

HTML consists of elements also called tags. Each tag has its meaning and purpose. With the help of HTML, you would create the basic structure of your website and element should be written in the order they are going to be shown on the website.
Some of the best resources to learn HTML:

CSS - Cascading Style Sheets:

CSS helps to style the webpage when you are done writing your HTML elements. You can target your HTML elements in a CSS file using various selectors, but mostly you would use classes, ids, and tag names.

In the CSS file, you would define properties like the color, size of the text and background, how big you want your image to be and which font style to use and so many other properties.

This is where you get to show your creativity and make the website as beautiful you can make, but keeping in mind the performance of the webpage.

Some of the best resources to learn CSS:

JS - JavaScript:

JS is the most popular language out there. According to the StackOverflow survey, also discussed in our previous blog, A career in web development in 2021, JavaScript has been winning this race for 9 years in a row.

And this is because JavaScript can be used in frontend and backend development.

But as a beginner, you just have to focus on the fundamental concepts of programming that apply to JavaScript and that would be the stepping stone for you to learn any other language later if you choose to.

Some of the best resources to learn JavaScript online:

To understand the use of these three, as an absolute beginner, let's take an example.

Our body is the website or the application that we have to build.

For creating our body we need to have the elements like bones, skin, all kinds of body organs.

Now, same as our body organs, we use HTML to create elements for our website. We create them in order we will be using them on our website. As the header of the website will be on top and footer of the website would be at the bottom, and so on.

We have created elements that are needed now, we need to define how they should look as per the design and where they should be placed.

Just like our bodies look different and beautiful in their way with all the hairstyle, clothes, etc. To do all that for our website, CSS comes into the picture.

CSS (Cascading Style Sheets) defines how a user sees our website. We use CSS, to define what size of the image to put, what color of the text and background should be on our website. CSS also helps us define how our website should look when viewed on different screen sizes.

Till now, we have created our body with all the structure, bones, muscles, and skin, and everything. But we do want a working body, we want to use our feet to work for walking and hands to help us type this blog, that you can see and read with your eyes.

So, for this interaction, we have our brain and the nervous system to help us understand the world around us and interact with it.

Likewise, we have JavaScript that does the work of our brain on our website. It tells the website what to open when a user clicks on a login button and what to do when the user clicks on the logout button.

JavaScript also helps us get the feedback of our users after they read this blog, and post it down below in the comments section.

If this analogy helped you understand even a bit about HTML, CSS, and JavaScript please drop a comment down below and see the JavaScript in action.

After you have done a basic course on the above three, you will have some idea of how these technologies are used in front-end development.

It's time to move ahead and learn some of the following technologies which a frontend developer should be aware of, and will have to use in his/her day-to-day work.

Understand how the web works?

How the internet works?

The basic idea is browser sends a request, the server returns a response, that's how we see a webpage on browsers.

How do you get the data on hitting a URL in your browser and What is DNS?

our browsers and servers talk to each other using numbers and they are called IP Addresses e.g. 255.0.23.3 but we as users can't remember all these IP addresses for all the websites we need, this is where DNS (Domain Name System) comes into the picture and maps our domain names like yourdomain.com to its IP address.

Understand the difference between client-side and server-side programming.

DOM - Document Object Model:

This represents the page that contains the webpage and all the elements that we created using HTML. Let's understand it this way, DOM is the document that consists of elements as objects which has their properties and methods.

Why do you need to learn DOM? you may ask!

so, DOM helps you target and grab any element on your website, and use it or its properties to change it or use it in any way you want in your project. e.g. you want to show a modal that pops up on the screen when you hit a button, so we can use DOM to achieve that.

CSS Pre-processors like LESS, SCSS:

Pro-processors like LESS and SCSS help in creating better organized and re-usable CSS snippets.

The pre-processors contain features like mixins, functions, variables, and the ability to use multiple files and import those into one main file.

Basic idea is, it helps you write extensible, re-usable, and less code.

Version Control System:

When you start working on a project, you would need to have a way to control the different versions of your project, and have a clear idea about the code changes done by you or any other developer working with you on the same project.

So, Version Control System helps in handling this by maintaining a history of what changes have happened and who has done it. GIT, CVS, & SVN are few popular open-source version control systems, which you can use to track your changes.

Most of the companies use GitHub, GitLab, or BitBucket as their version control systems which are based on GIT. Learning GIT can be a bit difficult for a beginner, but when you are working alone on your first few projects, you would only need to remember these commands and you will be good to go.

git init- it adds git to your new project and creates a master branch to your repository.
git status - it checks the new changes to your project
git add -p - it shows you changes in small chunks so that you can check and confirm those changes one by one. There is another command (git add .) which adds all changes to git without confirmation and I would not suggest doing it.
git commit -m "write your commit-change msg here" - commits changes to git with the message written inside quotes about the changes after -m
git push origin remote-branch-name - it pushes your code to the remote branch which you have mentioned in the command.
git checkout branch-name - it takes you to the branch you checkout to.
git checkout -b new-branch-name - it creates a new branch for you with the name provided by you and checks out to that branch.
git pull - this will pull all the changes from the remote branch to your remote branch.

Ability to use libraries in the project:

As a developer, you would have to do some development in your project which could require a lot of time and effort but you can also use libraries created by other developers and graciously open-sourced for other developers to use and take benefit from it.

You must gain some experience in integrating and using open-sourced libraries. They can be for any use cases, could be for creating UIs, like using a bootstrap library or using an image slider library.

Understand the difference between Static, Dynamic Websites and SPAs:

Static Websites

Static websites are the website in which the content of the website does not change very often or does not change at all.

And it is the same for every user, for the time of the day, and the time zone.

Static websites don't usually need any database design and are good for cases when there are fewer pages and very few update cycles. To build a static website you just need to have HTML, CSS, and JavaScript knowledge.

Dynamic Websites

On other hand, dynamic websites content can change very often, based on its users, timezone, etc. To develop a dynamic website, you necessarily need to have a backend and a database design, because Dynamic websites are mostly database-driven.

To build a dynamic website you would need to have a fair amount of backend knowledge as well along with HTML, CSS, and JS because mostly all the content is server-rendered and you have to use some server scripting language like node.js, PHP, .Net, or Python to develop and fill the webpage with the content. It is not very much popular and in use nowadays because of SPAs.

Single Page Applications

SPAs or Single Page Applications are the modern ways of developing a web application that gives users the app ecosystem kind of feel and it does not load content from the server on each page load.

SPAs are popular and in high demand, because they have the ability of dynamic websites and are easy to build like static websites. Popular frameworks that help you develop SPAs are React.js, Angular,.js, Vue.js, and Svelte, etc.

But it should also be noted that static websites are cheaper to build and faster in performance than dynamic websites or SPAs, that's why it is very important to understand the requirement of the project and then decide what kind of approach we should have for our next project.

As a beginner it can be confusing for you to decide what to choose for your next project, should it be a static website or a dynamic one.

Now, you can decide it better when you have a clear idea about the requirement of the project. Try to find out the answers to the following questions:

Do you need to have login functionality? If Yes: Choose SPA
Is the data going to change more often? If Yes: Choose SPA.
Are there chances of adding more pages and functionalities in near future? If Yes: Choose SPA.
It's going to be just a simple landing page of the company or a portfolio - Choose Static Website.
You need an e-commerce kind of feature: Choose SPA. These are some of the scenarios but do give some time before starting your project, and very clearly understand the project requirements.

Popular JavaScript Frameworks and Libraries:

So, you have taken all the requirements and you came to the conclusion that you would have to develop a Single Page Application for your next project then it's time to learn some popular JavaScript frameworks and libraries.

My personal preference is React.js and of course, you should try and test yourself all the options available and choose the one which you like the most.

If you want to learn React.js, it's good to have a look at the React.js official documentation once.

Application Programming Interface (API) Integrations:

As a frontend developer, you will have to connect with the backend team and get the APIs for your SPA. An API connects your frontend with the backend and the database for the data that the user needs to see and interact with.

It would be your job role as a frontend developer to integrate different types of APIs to your frontend, e.g. if the user wants to send some details about something maybe his/her profile info, then you need to connect a proper API to do that, and then to show the same data back to the user on the profile page, you would need to connect another API.

In the same way, you will have to link all the pages and actions of your application with the backend with the help of APIs.

NPM and Yarn:

When you start working on SPAs, there will be a lot of dependencies that your frontend code will require, and to manage all that, you have npm and yarn.

NPM is short for Node Package Manager, it helps you manage packages used in your project.

It keeps an eye on the version number of the packages in use and even the dependencies of the packages that you use in your project.

Both NPM and Yarn have the same purpose, it is debatable which one is better than the other, but basic idea is, you should use only one of the two and you should have a basic understanding of the two.

To find out which packages are being used by your project, open package.json inside your project and you will see the list of package dependencies and the versions of those packages used in your project.

Learn how to use browser dev tools:

As a frontend developer, regardless of your experience level, you will need to use your browser dev tools, for inspecting your website elements, debugging issues, and fixing UI-related problems.

Browser dev tools would be your friend in all scenarios. It would be a plus point for you if you learn to use dev tools efficiently.

Wrapping Up

As a final note, frontend development is a very promising career for a developer and opportunities are endless. Once you get a good hold of the web frontend technologies and have created a couple of projects using JavaScript Frameworks, try learning technologies that help you build the frontend for the mobile applications.

The web keeps changing with new technologies so, it is essential to keep yourself up-to-date with the latest trends and technologies, and never stop learning.

It's good to have your fundamentals clear, even when you have gained a bit of experience so that you can grasp any new technology that comes in your way easily.

That is it for now, until next time.

Keep learning, keep coding...

Cheers!

Lalit

A career in web development in 2021

ShahiLalit — Tue, 14 Sep 2021 05:11:20 +0000

Should I choose Web Development as my career in 2021? I bet most of the college students must be asking this question to themselves and to their seniors who are working at some company.

I won't waste your much time and tell it straight away -

"Yes! you should choose web development as your career in 2021".

If you want a job that gives you a decent salary and a skill that you can use to create other income sources, then

"Yes! you should choose web development as your career in 2021".

You only need 3 things, to begin with, web development:

1. Laptop
2. Internet
3. Will to learn

That is all anyone needs to start learning web development. You have to give 1 month to it.

And I guarantee you that, after one month, you would be able to understand how you create a website from scratch.

Web development is divided into two parts-

- Frontend Development
- Backend Development

Frontend Development

In front-end development, you would work on the visible part of any website or application.
It means as a front-end developer, you would work on creating the User Interface (UI).
And integrate the Application Programming Interfaces (a.k.a APIs) to complete the user interaction.

Backend Development

In backend development, you would work on creating APIs, which help users to see the data or the content displayed on the frontend UI.
In the backend development, your code adds utility to everything the front-end developer develops.
You would also be responsible for managing the databases for saving the data needed for the website to run and display content.

What Interests you more?

So, before starting your web development course you can think of your interest, what would interests you more -

Is it working on the design stuff and developing the UI components for the websites and applications?

Or is it working on the data part, creating the APIs, working with databases & servers?

Now, that you have decided to do learn web development, and decided to give your 1 month.

and you want to go into the frontend development path, I would suggest you divide your 1 month into 1-1-2 weeks.

- 1 week to learn HTML. 
- 1 week to learn CSS, & 
- 2 weeks to learn JavaScript.

That is all you need to start.

Now, once you get comfortable with the above three, you should start looking into popular JavaScript frameworks and libraries.

Here is a survey by StackOverflow for the popular web frameworks and libraries. According to it, React.js is the most popular one, so you could try learning it.

But if you prefer backend development, then you have a long list of languages that you could learn to start your backend development journey.

Some of the popular languages out there for backend development are Python, Node.js, Java, .Net, PHP, Ruby, etc.

If we look at another survey by StackOverflow for the popular languages used by developers, JavaScript is selected as the most popular language out of all.

Now, the main reason for JavaScript being the most popular language is -
Once you learn JavaScript fundamentals, you would be able to work on the frontend as well as on the backend development.

So, that being said, you are still free to use any programming language to learn backend development. And even once you learn JavaScript ( JS ) it is not set in stone that you have to use JS only for the backend development.
When you learn a programming language and the basic fundamental concepts of programming, you would be able to pick up any language out there if you are interested.

For starting a career as a backend developer you must learn:

Data structure and algorithm basics.
Any programming language of your choice, be it Python, Java, or JavaScript.
A framework suitable to the programming language of your choice, to make your life easier in developing the APIs.
Basics of databases.
Hosting your application and handling servers.

As a final takeaway, I’d just like to say that in addition to inculcating the required skills, to be successful as a frontend or a backend developer, you need to be dedicated, patient, and hard-working.

In the end, I would like to emphasize that "Web Development in 2021 is still a good choice to choose as a career", but to grow with the world, you will have to learn and evolve yourself with new technologies in trend and high demand.

Later, we will discuss more deeply what to learn specifically in frontend and backend development and how to grow as a Full Stack Developer from a Frontend or a Backend Developer.

Till then be safe & keep coding...

Cheers!

Lalit