Nowadays, the word "Roadmap" has been heard every now and then. But, do people know what a roadmap actually is? The roadmap is planned to reach a goal that includes all major steps and answers to how, what, when has to be done to achieve the desired outcome. To be honest, there's no particular roadmap to learn coding or Web Dev, everyone has their own different path. In this article, I will try to break down every step I followed to learn (or say, still learning) FrontEnd Web Development.
I will be dividing the steps into three major parts; First, we will see some essential tools you should know, which will make your life easier once you're into FrontEnd. Then, the programming languages you need to learn and then I will walk you through some libraries and Frameworks (you will have some choices to make here) you can work on. Let's get started!
Tools you need to know
There are a few basic tools you must know before getting into development, making your life a lot easier.
VS Code
Visual studio code is one of the best code editors for web development. Very easy to use and yet a powerful tool. There are different extensions you can install, which will come in pretty handy. In addition, it also has built-in Git commands (don't worry, we will discuss it later in the article). I'd suggest you look at how VS code works and learn a few basic shortcuts.
Command Line
The Command-line is a text interface for your computer. It's a program that takes in commands, which it passes on to the computer's operating system to run. Through CL, you can navigate from one directory to another and create new files as you would in File Explorer or Finder on Windows and IOS. It would be best to learn how to create new files or directories and navigate through them.
Git and GitHub
The most useful and important tool in a developer's life is Git! It is a version control system used to manage and track the source code history of your projects. Github is a platform that lets you manage Git repositories, track, manage your code and also collaborate with other developers. Remember, Git and GitHub are not the same.
Git and Github might look overwhelming at first, but don't go too deep into it. Just learn how to create repositories, make a new branch, make pull requests, merge pull requests. That would be enough at the start.
Programming Languages
The three things that are the heart and soul of Web Development are HTML, CSS and Javascript. I'm sure, if you've decided to learn Web Dev, you must already know something about them. So let's see how to get started with the most important step of your Frontend Developer journey.
HTML and CSS
HTML stands for Hyper Text Markup Language, it is the skeleton of a website. It is the main file which is loaded on a Web browser. First, get into the syntax and basics of it like tags, elements, attributes, forms. Generally, people find HTML pretty easy.
CSS stands for Cascading Styling Sheet, it is the layout and structure of a website. CSS provides styling to the content like colours, fonts, the layout of elements and more. But before getting more into it, I want to tell you one thing, you can never master CSS there will always be something new, something extra which you weren't aware of before. But again, you dont need to master it; You can learn a few things like:
Box model- You will understand how margins, padding, border works.
Flexbox, CSS Grids- It is used for Responsive layouts, which means how the layout of a website will change if the size of the screen changes.
Website deployment: Once you get a little hold on HTML and CSS, immediately start building mini projects like a portfolio website or Wikipedia page. This is the best way to learn Web Development. Build! Build! Build!
Now, you've built some sort of website with HTML and CSS, it's time to deploy it and show it to the world. As you already know about Github, you can deploy your website using it, or there are many other platforms like Netlify, Heroku you can use.
JavaScript
Here comes the part where most people back off because things can get a bit overwhelming from here, but you just need a few constant efforts to get a hold of Javascript.
Javascript is a programming language that runs a website on a browser like any other language. If you give some input, it will provide you with output.
For example, if you click on a "like" button on YouTube, it automatically increases the no. of likes, and you might also notice some changes in button style. Here, the user gave input by clicking on the button and Javascript provided output by changing the button and increasing the no. of likes.
Here are a few topics which must be clear to you before moving ahead:
1. Fundamentals
Basic syntax, data types, loops are the most important and inevitable parts. You can't ignore it. Then you can learn about objects, arrays, array methods, functions, and the Oops concept, which includes classes.
2. JS Async
Without Asynchronous programming, it would take quite a long time to load and run websites. For example, once you fill up your details in a form and right after clicking on the Submit button, you start doing something else on the website or move to another site while the data is still loading in the database.
In this step, you need to learn about things like Promises, callback, Async/Await.
3. DOM
Document Object Model is a programming interface for web documents. It represents the page so that programs can change the document structure, style, and content. Here you will learn about DOM methods, events, DOM CSS, etc.
Now you've quite a good grasp of everything to build projects, it doesn't matter how big or small they are. So build projects, I'll say it again and again in this blog. It's everything that can make you better at development.
4. Fetch APIs
The Fetch API is a modern interface that allows you to make HTTP requests to servers from web browsers. There are other APIs also like form API, storage APIs. You can look into it according to your need.
Javascript FrameWorks
A framework is a collection of JavaScript code libraries that provide developers with pre-written code for routine programming tasks. Of course, you can absolutely make any web app without using frameworks, but frameworks make the process a lot easier. Moreover, most companies and startups use Frameworks, so you have to know the framework to work with them.
Below I will list down some popular frameworks from which you can choose one for you.
React
React.js is technically a library used for building user interfaces created by Facebook. React has been designed from the start for gradual adoption, and you can use as little or as much React as you need, whether you want to add some interactivity to a simple HTML page or start a complex React-powered app. Everything is possible with it. React is the most popular and my personal favourite framework. If you're a beginner, I'd suggest you go with React.js. Facebook, Atlassian, Netflix, Codecademy use React.
You can also go ahead and learn Next.js also as it is a React framework that enables several extra features, including server-side rendering and generating static websites.
Vue
Vue.js is an open-source progressive JavaScript framework for building user interfaces (UIs) and single-page applications. The core library is focused on the view layer only and is easy to pick up and integrate with other libraries or existing projects. Some of the most important companies using Vue are Xiaomi, Alibaba, Grammarly and Gitlab. But still, the job market for Vue is comparatively low.
Angular
Angular is one of the oldest and the largest JavaScript frameworks. It is an application design framework and development platform for creating efficient and sophisticated single-page apps. Angular relies heavily on real DOM for its performance, while Vue.js and React function using virtual DOM. Having said that, Angular is still a preferred choice of many professional developers to create large-scale applications. It is used in Gmail, Microsoft Office, Upwork, Paypal and many more. As a beginner, you might find Angular a bit more overwhelming than React and Vue, but it is worth all your efforts and time.
CSS Frameworks
CSS Frameworks are a bonus when you're building a Web app. CSS framework is a library allowing for easier, more standards-compliant web design using CSS. So, knowing CSS frameworks will save a lot more time for you. Below I've mentioned a few CSS frameworks, you can choose any of them depending on the need.
Tailwind
A utility-first CSS framework packed with classes and tools that can be composed to build any design directly in your markup. Tailwind CSS is not opinionated and lets you create your own unique design.
Material UI
Material-UI is an open-source, lightweight CSS framework specially designed for newcomers. You can start with the essential building blocks because it has split into modules. It aims to provide a strong foundation for building dynamic UIs .
Bootstrap
Bootstrap is world’s most popular front-end open-source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.
Others
There are a few more Frameworks you can look into like Bulma, Materialize CSS, Pure CSS.
That's it for the blog! Remember, you will never get the feeling of knowing it all; keep learning while building projects and watch yourself grow. As I've said before, building projects is the only way to get better in this field. Just google 'Javascript project', and you will find a plethora of ideas. The best thing you can do is, try making a clone of existing platforms like Facebook, Instagram, Microsoft Teams. If you can do something like that, congratulations, you're way ahead of many people.
Till then, Happy learning! Happy coding!
Top comments (1)
Thank you