7 Must Use Tools For Newbie Web Developers

Written by raivikas | Published 2021/12/04
Tech Story Tags: web-development | web-design | webdev | learning-to-code | codenewbie | chrome-dev-tools | vscode | css-framework | web-monetization

TLDRVikas Rai has given a detailed explanation about the technology, tool and resources a newbie web developer should know. In this article I have given a detail explanation of the technology and stuffs which are often used during web development or writing code. The first is the most useful and important which is the Code Editor. Git & GitHub is a well-known community for web developers,programmers and open source contributor. Till now over people have contributed to 200 million projects on Github. You can give them a star if you fork their projects and like it.via the TL;DR App

In this article I give a detailed explanation about the technology, tool and resources a newbie web developer should know.

During my journey of learning web development I came across this different technology and stuffs which are often used during web development or writing code and I am going to share this knowledge with you .

The first is the both most useful and important which is,

1.Vs Code Editor

Yes, my friend Vs Code editor this is a software or you can say a tool which is used to write code. This code editor offers you a large variety of programming languages , you can write code in HTML , CSS , JavaScript ,C++, python and many more.

I would like to tell you that this Code editor is used by almost more than 90% web developer and they are loving using it and also recommends others to use.

The best thing about this is that its comes with an integrated built in terminal which is very useful for you as a web developer and it also has some more astonishing features like Extension , Git integration of projects and has various shortcuts which help you write code faster.

The Extension feature allows you to download various packages and tools which helps while writing code. Some of these extension are like “Tab nine” which provides suggestion while writing code and also its autocomplete feature is super.

The other one is “Prettier” which helps to make your code formatted or basically you can say the alignment of the code, which looks very clean and there are many more like this. I don’t want to list all of them here and make you bore with that.

If you are using another code editor , I will highly recommend you to try this , I assure you will not regret about it.

2. Git & GitHub

This one is very important to know as a web developer because this helps you to manage your all code projects at one place basically its like storage for all your web dev projects and not only that but you can share your project with your friends or with your team member.

It allows you to see other web developer projects also and the best part is that you can fork their projects and use them. You can give them a star if you fork their project and like it.

Github is not just about creating a project and uploading to Github but the main purpose is to spread awareness about contribution to *“Open Source Code” * and also there are various open source organization in which you can contribute.

The other cool feature is that if your web project contains only ( HTML, CSS and JS ) or basically a frontend website then you can host your project on GitHub for free, but not a ReactJs frontend projects or not with any other Framework, for those projects created using ReactJs you can use Netlify or Vercel.

GitHub is a well-known community for web developers, programmers, and open source contributors. More than 65 million people use GitHub to discover and fork projects. Till now over people have contributed to 200 million projects on Github.

If you are not aware of it this then you should immediately visit the website and create your account for free. https://github.com .

3. JavaScript ES6+

As you know JavaScript is the brain of any website which makes a website functional and it is one of the most popular programming languages for web development. Most of the websites online are all powered and running on JavaScript.

As a web developer, whether you want to become a Frontend developer or a Backend developer you must know about JavaScript.

Now, JavaScript ES6+ also called high order JavaScript function is a very important part of JavaScript. It consists of many advanced features or you can say the upgraded version of previous features.

The ES6+ function includes (map() , reduce(), filter(), splice(), spread operator, forEach(), sort()) and more. All these are very helpful and you should be aware of them. These functions are basically performed over an array of objects or a simple array of items or an array of numbers.

These functions help you to deal with arrays and to manipulate them as per your requirement.

4. CSS Framework

This is not very important for backend developers but if you want to become a Frontend developer then it’s a must for you. Nowadays most web developers are shifting towards classy CSS Frameworks which helps them to create beautiful UI(user interface) without writing a lot of code.

The two most popular CSS frameworks which are on fire 🔥🔥 these days are “Tailwind CSS” and the other is “Material UI”, but I will recommend learning “Tailwind CSS”.

These two CSS Frameworks are very helpful and easy to use, if you want to include their CSS in your project then you can do this either by including their CDN in your project or you can install their packages via “npm or yarn”.

You don’t have to write large CSS code to make your website look good when you can do this just by adding a few words using these Frameworks.

5. Chrome Dev Tools

The biggest nightmare of every web developer is to debug their code. Sometimes there is a small bug or error in your code and you are not able to find it, so in that case, there comes the need of Chrome Dev Tools.

Simply open Chrome, right-click and choose the inspect option.

It helps you to debug your code and also to find errors in your code. It does not just help in debugging, it has its own features which every web developer should know.

Sometimes you have to console log some values in your code in order to check the output of the code and for that, you can use the console of Chrome dev tools where you can see the output of the console statement that you have written in your code.

6. Refactoring of Code

Refactoring of code is something that is not taught in every web dev course you take on YouTube or you buy from a website. This becomes very important when you work on team projects or on projects with your friends or when you work for a web dev organization.

Refactoring means shortening your code and avoiding unnecessary code which is not used in your project. It also helps to make your code clean and understandable by others so that they can understand what the user is trying to say through their code.

The most important thing is that:

It is very easy to write code which you can understand but it may be difficult for others to understand your code.

When you are working in teams you have to keep in mind that the code you are writing should be understandable by all and you can do so by refactoring it and using comments “//” to write clean and short code for your project.

Conclusion

In the above article, we discussed 7 things that every beginner web developer should know. I have discussed tools like Vs Code Editor in which you can write code, then Basic Linux Commands, which CSS Framework should you choose, Refactoring of Code and Git & GitHub, and the two most important ones JavaScript ES6+ and Chrome Dev Tools.

These are some tips that will help you throughout your developer journey.

I hope you enjoyed reading this article and if you have read till here then thank you so much for your patience reading.

First published here



Written by raivikas | College student at Maharaja Agrasen Institute of Technology||Web Developer || Next.js Lover || React.js || TailwindCSS
Published by HackerNoon on 2021/12/04