Web Development Roadmap Part-1 (2021)
Any web-page in your browser is a combination of three base pillars, irrespective of the technology that was used to build them. All the work that browser does is to display thier combination on window.
These three pillars are:
- HTML
- CSS
- Javascript(JS)
Start from HTML
HTML is the bare-bones of a web page, it is used to dump text, add links, images and videos on a web page using "HTML tags". Although there are close to 100 types of tags, but in practice you can get almost 99% of your work done with just a handful of them. Learning HTML is kinda fun if this is the first time you are trying it. Let me share some resources that helped me.
Resources:
- W3 Schools - Learn basic HTML tags
- HTML crash course - Recommended
- Freecodecamp - Great for practice
- HTML & CSS crash course - A brief version
- Web Dev Bootcamp - Complete course for beginners
<!-- Basic HTML template -->
<html>
<head>
<title>Start learning HTML</title>
</head>
<body>
HTML is easy
</body>
</html>Moving on to CSS
The image on right is the one after adding CSS to HTML and the one on left is just HTML
Learning CSS is a stage where things start getting more fun, it helps you add styles to web-page and gives you complete freedom in styling your page how ever you wish to. Although CSS is powerful in terms of its output, but it can get tiresome at times when doing a very basic task, for e.g. centring an image or a block gets tricky. CSS is kind of bushy, it keeps getting challenging the more try to dig in. No one expects you to know CSS or any technology inside-out, as a beginner you are expected to know how to do some basic styling like adding colours, fonts, dimensions, layouts, positioning.
Resources
- CSS Tutorial by FreeCodeCamp - Great for absolute beginners
- W3 Schools CSS - Great as reference for certain topics
- CSS Blog - Refer this for FlexBox and Grids
- CSS Grids Course - CSS Grids are used to make layouts
- CSS Flexbox Course - CSS Flexbox are also used to make layouts
Once you are good with HTML & CSS
PRACTICE PRACTICE PRACTICE
Start building static web sites, take inspirations form websites you visit day-to-day, try to build a website for a some idea that you had, explore UI/UX design websites to get web-site ideas another way that helped me is Frontend Mentor, this allows you choose a design depending on your level and provides you with static assets shown in design images, it has also got a really helpful community to help you with problems that you may face.
Javascript(JS)
So far we can make static web-pages using HTML and CSS, but theres no way we can add some functionality, like handling a button click, changing certain parameters depending on some conditions, this is where Javascript hops in. It helps you make your website interactive, by handling user actions, fetching data, manipulating DOM(document object model) and a lot more. But javascript is not only restricted to front-end it is currently being adopted by a lot of startups to build their web-site/apps backend server.
Resources
- JS Crash Course - Great for absolute beginners
- ES6 Course - to be followed after basics of JS
- Async and Await - getting advanced
- Complete JS Course(2021) - covers all the above and more