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 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 , and many more. Vs Code HTML CSS , JavaScript ,C++, python 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 , of projects and has various shortcuts which help you write code faster. Extension Git integration The Extension feature allows you to download various packages and tools which helps while writing code. Some of these extension are like which provides suggestion while writing code and also its autocomplete feature is super. “Tab nine” The other one is 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. “Prettier” 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. is not just about creating a project and uploading to Github but the main purpose is to spread awareness about contribution to * and also there are various open source organization in which you can contribute. Github “Open Source Code” * 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, 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. JavaScript ES6+ 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 Frameworks which helps them to create beautiful UI(user interface) without writing a lot of code. CSS The two most popular CSS frameworks which are on fire 🔥🔥 these days are and the other is , but I will recommend learning . “Tailwind CSS” “Material UI” “Tailwind CSS” These two 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 . CSS “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 by others so that they can understand what the user is trying to say through their code. clean and understandable 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 in which you can write code, then , which should you choose, and and the two most important ones and Vs Code Editor Basic Linux Commands CSS Framework Refactoring of Code Git & GitHub, JavaScript ES6+ 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

Fetch

Super

YouTube

12 Best Vscode Extensions to Boost Your Productivity in 2022

Create a Gradient Border With TailwindCSS and React

Portfolio

Visit Nextjs Dev

Book a Call

Nominated for 2022 - HackerNoon Contributor of the Year - Css

Nominated for 2022 - HackerNoon Contributor of the Year - Productivity

Nominated for 2022 - HackerNoon Contributor of the Year - Authentication

Too Long; Didn't Read

Make resilience your competitive advantage

7 Must Use Tools For Newbie Web Developers 

7 Must Use Tools For Newbie Web Developers

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

12 Best Vscode Extensions to Boost Your Productivity in 2022

10 Useful Tips & Tricks That Will Help You Make the Most of Chrome Devtools

A Beginner's Guide to Debugging With Google Chrome Dev Tools

A Simple Guide to Log JavaScript Events to the Console for Debugging

Animating particles using React Motion

12 Best Vscode Extensions to Boost Your Productivity in 2022

10 Useful Tips & Tricks That Will Help You Make the Most of Chrome Devtools

A Beginner's Guide to Debugging With Google Chrome Dev Tools

A Simple Guide to Log JavaScript Events to the Console for Debugging

Animating particles using React Motion

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps