Web Development is a very vast field, beginners may have confusion about choosing the right path to learn web development. This article is all about the roadmap for getting started with web development with ease.
Before getting started I want you to have some knowledge of computer science if you are from a non-tech background. I always suggest everyone interested in the computer science field take CS50's Introduction to Computer Science. If you are familiar with computer science you can skip this part.
Getting Started
Getting started with web development is a little confusing there are many paths to follow. The following path is the easiest I found, after learning from my mistakes. It's always a good idea to use industry-standard tools to learn something so that you sill get used to it for the future. I recommend you to download Visual Studio Code as it provides a better environment with its IntelliSense code completion.
Learning HTML
HTML stands for HyperText Markup Language, as the name suggests it gives structure to the content on the webpage. If you have watched CS50's Introduction to Computer Science by now there is no way you are having confusion in HTML. But if you haven't watched it pick any short and sweet tutorial. After you learn HTML, you need to create a project only with HTML. Let it be your portfolio page. HTML basics are too easy so don't waste your time on it. Let's go to the next step.
Learning CSS
After you are done with HTML you can create a skeleton page. Now you need to style the webpage here CSS comes. CSS stands for Cascading Style Sheet. CSS is very deep if you think of mastering it in one go you cannot. In the beginning, you just need to learn some basics of it. Here are some CSS topics you need to learn.
- Colour
- Background
- Font
- Layout
- Positioning
The best resource to learn CSS is this google web.dev site by google.
After you learn CSS, use your knowledge to style the website you made with the only HTML, with CSS.
Now you are good to go to the next step but keep practising and policing your skills. It is always good to build projects.
CSS Frameworks
CSS Frameworks like Bootstrap,Materialize CSS,Tailwind CSS, etc. are libraries allowing easier, more standard-compliant web design with pre-written CSS. Bootstrap and Materialize CSS also have pre-built components but TaliwindCSS do not have them. You just have to apply classes to the HTML tags and the pre-written CSS will do its job.
Why should we use CSS Frameworks?
- Speeds Up your development with less code
- Gives you a clean design and layout
- Support over cross-browsers
- Automatic responsiveness
Learning Javascript
JavaScript is a programming language used to add functionalities to a webpage. The user interaction with the webpage is possible due to it. For example, if you are reading this post which is long, you see an arrow on the bottom-right side, when you click it, it will take you to the top. That is possible due to javascript. There are tons of courses for learning Javascript. I will suggest Codecademy Javascript course. It's not a compulsion you can choose any good course to get started. Just make sure that there are quizzes and projects inside the course and they cover every topic of modern javascript.
Javascript can be used in almost everything, you can make games, build web apps, etc. There are so many javascript frameworks used in different fields. Some popular javascript frameworks are ReactJS, VueJS, AngularJS, ExpressJS , threeJS, etc.
Conclusion
These things will be enough for you to get started with web development. But, once you are okay with HTML, CSS and Javascript you can start learning JavaScript frameworks to get more powerful.
