Hello there!
If you're a beginner in web development OR someone who's looking to get into web development, well, the search is over. You found me!
In this article, I'll be writing and listing out the technologies, frameworks, and libraries which you will be needing, to call yourself a web developer in 2020. Most of these are the industry trends at the moment and learning them will only help you find a good job. Along with the different technologies, I'll also be listing out the links to the resources from where you can learn about them. Most of these would be freely available on the internet so I don't know what's stopping you!
Let's get started.
This will be a two-part article (Frontend and Backend). The one you're viewing right now is Part 1.
Before we get started with the technologies, you need to keep in mind that you don't need to learn all of the libraries, technologies, or tools which I'm going to write about below. Pick the ones which attract you. Research a bit about them and get going!
The Basics
HTML/CSS are the building blocks of web development. It's the first you want to learn. No matter which framework you use, you're gonna need HTML and CSS. So as your first step get started with these two. Once well versed, newer CSS tools like Flexbox and Grid are something you'd want to learn next.
Resources :
- W3Schools - This is the best site to learn HTML/CSS from. Beginner Friendly Content. Covers everything.
- HTML CSS Crash Course - If you're too lazy to go through above the link, this crash course by Dev Ed will solve your problems with HTML and CSS, for once and for all.
Responsive Web Design
Every project that one creates should look good and completely usable on all devices. Most people use their mobile phones to access a website so it's very important the layout is responsive.
CSS frameworks like Bootstrap and Materialize help in creating excellent responsive webpages. Bootstrap is definitely something I'd recommend to a beginner to style their websites and make it look sharp and clean.
Sass - Sass is a CSS pre-processor. CSS pre-processor? What does that even mean? Well, let's just say it helps you create custom reusable CSS components that you can keep using throughout your project. It's like creating your own mini-framework.
Resources :
- Bootstrap - This YouTube series by NetNinja will be more than sufficient for you to learn about Bootstrap 4.
- Sass - A quick crash course on Sass from Brad Traversy
JavaScript
Once you're done learning the HTML and CSS, next up is JavaScript or Vanilla Javascript, as some people like to call it. And NO, it's not related to Java in any way.
Javascript is, hands down, the most important thing to learn in web development. It is the language of the browser. It gives your webpage dynamic functionality. For example, altering your web-page after some button is clicked or popping up alert boxes, etc.
Apart from the fundamentals of JS, you must learn things like the DOM (Document Object Model), JSON (JavaScript Object Notation) and FETCH API.
Modern JS (ES6) knowledge is a must before you move on to frameworks like React, Angular or Vue, as they all are basically derivatives of JavaScript itself.
Resources :
- Modern Javascript from the Beginning - A Udemy course by Brad Traversy. Good course with multiple projects. Highly Recommended.
Essential Development Tools
Git (Version Control) / Github - Git is something every developer, no matter which domain, should know. Knowing how to create different branches, making pull requests and pushing your code is definitely something you should learn. Github is the most popular platform to do all of this. You can get familiar with Git/Github here.
VSCode Extensions - I use VSCode to code my applications and I cannot tell how much these VSCode extensions have made coding easy for me. So if you use VSCode too, I'd recommend extensions like Live Server, Prettier, Bracket colorizer and others ( Maybe another article on this? )
Emmet - Having Emmet will help you write HTML/CSS a lot faster. A MUST HAVE.
NPM/YARN - NPM (Node Package Manager) and YARN are package managers. There isn't too much to learn here but having some knowledge of these two will help you install packages quickly and speed up the development process.
Apart from all this, Axios is another tool you should take a look at. It is an HTTP library that will make your life easier while working with APIs.
Deployment
Deployment these days has been overcomplicated by people. It's not that difficult. We don't really need DevOps or AWS or any other complex platform when we start out.
For personal sites or sites for small businesses, etc. there are managed hosting companies that are easy and cheap.
Two tools that I use regularly are Netlify and Heroku.
Netlify - For static hosting. Basically, for web apps with static content where there is no backend involved.
Heroku - Being a MERN stack developer, I make use of Heroku to deploy my full-stack applications.
And Voila! You're a basic front-end developer
One might argue to be a Front-end Dev, you need to know a framework. Yup, agreed. But at this point, if you have covered most of the things listed above, believe it or not, you can call yourself a "Basic" Front-end Developer.
Front-End Frameworks
Frameworks allow us to build single-page applications with organized UIs and more page interactions. These are the 3 most popular front-end frameworks as of today :
- React - Maintained by Facebook. Most popular and easy to learn. I prefer React.
- Vue - Most recent you could say. Gaining traction. Easy to learn.
- Angular - Maintained by Google. Uses TypeScript.
React, Vue or Angular? This is a never-ending debate. You, ultimately, have to make a choice and choose one. I'd say try all three and then pick the one you like.
When it comes to these frameworks, there are also things like server-side rendering (Next.js/Nuxt.js) and static site generation (Gatsby). But they're optional, you don't need to know them right away. It's just a bonus if you know them.
Resources :
- React - 1. freeCodeCamp - Best way to learn by doing.
- NetNinja YouTube Course - React and Redux from Scratch.
- Vue - VueJs Youtube Tutorial by NetNinja.
- Angular - Angular Front to Back - Udemy course by Brad Traversy.
Conclusion
By this point, you should be able to build advance front-end apps, interact with APIs and data, manage app and component level states and have smooth front-end workflow.
Summing it up, if you know majority of the stuff I have talked about above, you can call yourself a front-end developer.
Unfortunately, this article only covers the Frontend part of being a full-stack web developer. I'm gonna be writing Part 2, i.e the backend part in another article very soon. Stay tuned !