If you are a total beginner to web development and thinking to dive deep into web development then you are at the right place. I am damn sure at the end of this article you will be having a clear picture of Where to Start, What to study, and How to study.
⚠ If you already have some exposure to web development then I will recommend you to visit roadmap.sh. It contains a detailed analysis of stacks to become a web developer. Also, you can read about my Story of Transition to the Senior SE role
Before diving into where and how let’s understand WHAT?
What is Frontend? What is Backend? What is Full-stack? How these are co-related? Find answers to all your questions here.
Hope now, you understand What is web development. Let’s understand from where we can get started with these.
step 1: learn HTML
step 2: learn CSS
step 3: learn CSS Frameworks (e.g.: Bootstrap, Tailwind etc.)
step 5: learn nodejs / expressjs (or, Hapi, KoaJs, fastify, NestJs etc.)
step 6: learn sql / nosql (mongodb, PostgreSQL etc.)
step 7: learn react / vue / angular
step 8: go back to step 4
🏆 congratulations, you are now a full-stack developer.
Now, let me start to discuss one at a time, what and from where you need to learn to get started in these tech domains. Some may argue, why not React/Vue/Angular first and then Node/Express. My take on this: You are free to do so but since all these front-end frameworks/libraries are dependent on package manager so why not learn Node first.
HTML -> CSS -> CSS FRAMEWORK (e.g.: Bootstrap, Tailwind)
HTML: Hypertext Markup Language is the standard mark-up language for documents designed to be displayed in a web browser.
Must know topics: What is HTML? Anatomy of HTML Tag, HTML Document Structure, Essential HTML Tags, HTML form.
CSS: Cascading Style Sheets is a style sheet language that explains the presentation of a document written in a mark-up language like HTML.
Must-know topics: What is CSS? Anatomy of CSS, CSS Selectors (Element, Class and ID), Combining selectors, Pseudo selectors, CSS Specificity (Conflict Resolution), Box Model and Layout, CSS Grid, CSS Flexbox, Relative vs Absolute element positioning, Box Model, Media Queries (Responsive design using CSS).
It is often abbreviated as JS, is a programming language that conforms to the ECMAScript specification. It is high-level, often just in time compiled, and multi-paradigm. It has curly-bracket syntax, dynamic typing, prototype-based object orientation, and first-class functions.
Courses you can follow for getting started with HTML, CSS & JS.
Over here, I will suggest you complete until SECTION 20 (To DO Lists Project).
you can refer to this video and playlist for getting started with JS. [FREE]
Optional: (Now is the good time to revise whatever you have learned.) I will recommend you to visit freecodecamp and complete the projects of Responsive web design certification to get the certificate; if you feel stuck, you can definitely go through the tutorial provided there.
Once you are done with these above, now is a good time to dive into the framework/library.
For Backend, I will recommend a single course. Also, you can study each topic in detail by following a separate tutorial for each.
This course is a top-rated course on Udemy. This course has beautifully covered all the essentials of the Backend covering NodeJS, Express JS, Mongo, and Mongoose along with Unit Testing.
you can refer to these videos and playlists for getting started with Node.JS [FREE]
FRONTEND LIBRARY/FRAMEWORK (e.g.: React, Vue, Angular):
I will provide the links of course which I found amusing. I, being a MEAN stack developer, have experienced Angular & React courses myself and for Vue, I have taken opinions from my friends working with Vue.
Note: Which frontend framework/lib to choose?
Seeing the current market scenario, React is the first choice but at the same time, Vue JS is rising slowly and is expected to surpass React totally. Earlier Angular was at the top, not anymore. However, it does not matter which framework you know, once you are comfortable with any library or framework then you can easily pick others too. For more analysis on what to choose, you can search and find many helpful articles. The major difference between the different stacks can be found here. And if you just want to know individually what they are, that you can see here.
It is one of the most comprehensive courses on angular. It is actually a bit too many details sometimes but better be safe than sorry.
you can follow this to quickly get started with Angular. [FREE]
Being one of the highest-rated courses on Udemy taught by Maximilian Schwarzmüller, I can undoubtedly say, Go for it. He is one of the BEST instructors present in the tech industry.
you can refer to these videos and playlists for getting started with VueJs. [FREE]
IDE Suggestion: https://code.visualstudio.com/
If you wish to explore more and find some more relative tutorials. You can follow this link.
Want to know about my journey. Read that here:
You can find me on LinkedIn !!!
Feedback appreciated !!!