Use this format to add your own Web Dev resources (those that were personally used by you) in this README
## YOUR_NAME
<a href="YOUR_LINKEDIN_PROFILE_LINK">
<img align="left" width="82px" src="https://img.shields.io/badge/LinkedIn-0077B5?style=for-the-badge&logo=linkedin&logoColor=white" />
</a>
[](https://shields.io/)
```
YOUR_ANSWER
```
Suggested steps-
1. Learn HTML, CSS, JavaScript from any resource available.
2. Build some simple static website for practice.
3. Learn any frontend framework. If not sure which one, React might be a good option. Other options - Angular, Vue, EmberJS. Understand why such frameworks are needed, what are dynamic websites, etc.
4. Learn any backend framework with database. My suggestion - NodeJS/Express. Understand why backend and frontend need to be separate, authentication (cookies, sessions, tokens), etc.
5. Build a full stack project.
The most useful youtube channel I found (almost all of the above topics can be found on this channel.)- The Net Ninja - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg - Follow along the tutorials. Project based learning is the best.
Other useful links-
Web dev simplified - For specific topics like CSS grids - https://www.youtube.com/channel/UCFbNIlppjAuEX4znoulh0Cw
For getting better at any framework, read its documentation. For instance, react has a beautifully written and organized documentation - https://reactjs.org/docs/getting-started.html
For development, I have personally felt that most of the udemy's bestseller courses can provide you a good kickstart. This is a brief description about the path followed by me:
HTML & CSS: -
1. "HTML and CSS: Design and Build Websites" - by "John Duckett" is an amazing book. It makes you understand things with real world examples and graphical illustrations. It will also cover all fundamental concepts.
2. w3schools worked like a quick go-to guide for me.
3. 'Build Responsive Real-World Websites with HTML and CSS' course on Udemy by Jonas Schmedtmann helped me to know practical application of concepts.
JavaScript:
1. "JavaScript and JQuery: Interactive Front-End Web Development", another excellent book written by John Duckett, which provides you with sufficient knowledge.
2. Javascript documentation by MDN is one of the best written documentations, which will solve most of your queries. Link: - https://developer.mozilla.org/en-US/docs/Web/JavaScript
3. For studying how javascript works and similar stuff follow "Namaste JavaScript" course by Akshay Saini. (A little bit more advanced stuff. Firstly clear the basics, then move to this.) It is one of the most entertaining course, with plethora of knowledge. - Link: - https://www.youtube.com/playlist?list=PLlasXeu85E9cQ32gLCvAvr9vNaUccPVNP
Bootstrap/SASS:
Now you can start learning bootstrap. It will make your life much more easier. Just browse through bootstrap documentation, you can learn it very quickly.
SASS is a kind of extension of css, which will help you to write reusable css code.
For MERN stack - I just used udemy bestsellers and official documentation.
One can easily find web dev videos on youtube depending on the tech stack(MERN,Django etc) that they are interested in. I followed this https://youtube.com/c/TechWithTim
Udemy - Python and Django Full Stack Web Developer Bootcamp by Jose Portilla
W3schools, YouTube, mini projects
- See to develop stronger skills one need to have good grasp over basics so, I learnt the basics like HTML, CSS, Javascript and DOM from W3scools website, but important
thing here is to not just read the docs but also start implementing it on your own by making basic projects like portfolio.
- Then to enhance my Web Dev skils i opted for Full Stack Web Development with React Specialization (MERN stack) on Coursera.
- It taught me the responsive design and boostrap.
- Also make me comfortable in React for building scalable frontend.
- One Important thing i want to mention is choosing react as frontend framework also helps you to write mobile apps frontend using its extension React-Native framework and i used the same for two of my projects.
- Then it also covered tha backend building using nodejs and expressjs with MongoDB as database.
- I was applying the skills learnt side by side on course's dev assignments.
- After specialization i picked up an idea and made a full stack application to hone the skills.
- See concepts remain same once you are comfortable with a stack let's say MERN you can integrate several different techs like from CodeWithHarry you-tube channel i learnt django framework to integrate it with React Native frontend so like this you can experiment multiple techs to best suite your needs.
If you are new to web development then 1 week you should devote to learn basic html css and javasrcipt. Also learn about what development is all about and why we need it like what are servers, clients, API, databases etc.
-After getting comfortable with javascript, I would advice to learn bootstrap 4 or 5. Best resource would be w3 schools or course by honkong university on coursera.
-Then learn javascript thourougly.
-Make some small project using html css and javascript, and bootstrap.
-Then if you are comfortable in making a webpage, you can shift to some library or framework such as react, angular, or vue.js.
-I personally learned about node and server side in the first place from coursera(by same university)
-Then I learned react.js from coursera itself, There is a set of 4 courses(as mentioned above).
-Courses by maximilian on udemy are also very good for learning javascript, react amd react native.
-Documentation is goooood for getting basics of react.
-Then find a good project to work upon and learn side by side
I have done front-end so I will share step by step process for that only.
Firstly you should have a strong command at HTML, CSS .
https://www.w3schools.com/ is a great source for step by step learning and practicing these skills. If you wan't video tutorials there are many famous channels for them, you can refer any. FreeCodeCamp is one of them and really good one.
HTML: https://www.youtube.com/watch?v=pQN-pnXPaVg
CSS: https://www.youtube.com/watch?v=ieTHC78giGQ
JavaScript demands more time as many concepts can be confusing. So give it more time and practice as much as you can.
JavaScript: https://www.youtube.com/watch?v=PkZNo7MFNFg
After having the basic knowledge of these concepts, try to build some basic projects using HTML, CSS and JS. Project based learning is way more effective.
You Can take basic projects ideas from here but feel free to explore: https://www.youtube.com/watch?v=3PHXvlpOkf4&t=514s
After having good command in this, you can move forward by learning frameworks, they are very useful for designing websites and used in real world. You can more forward with any one of React, Angular and VueJs. All of these have industrial applications. For learning them, there is a youtube Channel Codeevolution, https://www.youtube.com/channel/UC80PWRj_ZU8Zu0HSMNVwKWw is a good one. You can also take Udemy/ Coursera courses for learning.
I did MERN stack .
Firstly For Frontend :
1)Learn HTML, CSS, JavaScript from any any site. I did it from www.freecodecamp.org
2)Try to make some simple static web pages using basics of HTML,CSS And Js. Along with this simple static web pages take the references of bootstrap library . (Refer documentation: https://getbootstrap.com/docs/5.0/getting-started/introduction/...) .
4)Learn any frontend framework ...be it angularjs ,reactjs ,vuejs ,etc..I personally did Reactjs from www.codingninjas.com. In reactjs try to practice over redux store concepts .
for backend:
1)for whole backend in nodejs and mongodb coursera course : https://www.coursera.org/learn/server-side-nodejs/home/welcome
2)Along with the course read medium articles on specific topics throughout the course to get better clearity about concepts.
Project based learning is best . While learning implementation makes concepts more clear.
Initially you can try out small projects like resume making, blog websites ,etc.
1) freecodecamp YouTube channel
2) Courses on Frontend Masters (free 6 months for GitHub student pack holders) are organized into playlists of various levels. It's best to start with simple html,css and javascript , figure out how servers work and then tie it all together to make a functioning application. Then you can learn how to deploy them to the internet.
3) My GitHub profile contains multiple repositories thag contain small to large projects for both machine learning and web development where the comments in the code act like notes for understanding the project better. (GitHub.com/ryzbaka)
https://docs.google.com/spreadsheets/d/12W1I0LUGc2P3UOgSNNTTvF1tY0njTbh4fy_ZLV3h3xs/edit#gid=1172747422
w3schools.com
https://developer.mozilla.org/en-US/
Web Dev Simplified - https://www.youtube.com/channel/UCFbNIlppjAuEX4znoulh0Cw
Codevolution - https://www.youtube.com/channel/UC80PWRj_ZU8Zu0HSMNVwKWw
https://css-tricks.com/
https://www.smashingmagazine.com/
I followed three courses:
1. For vanilla web development: Colt Steele
https://www.udemy.com/course/the-web-developer-bootcamp/
2. For React: Maximilian Schwarzmüller
https://www.udemy.com/course/react-the-complete-guide-incl-redux/
3. For Node: Mosh Hamedani
https://codewithmosh.com/p/the-complete-node-js-course
Obviously you don't need to buy anyone, all can be downloaded from websites.
HTML:
- https://www.youtube.com/watch?v=pQN-pnXPaVg&ab_channel=freeCodeCamp.org
- use proper dedicated tags for SEO.
CSS:
- https://www.youtube.com/watch?v=1Rs2ND1ryYc&ab_channel=freeCodeCamp.org
- after doing this try: https://flexboxfroggy.com/ to master flexbox(this is the main one)
JavaScript:
- Basics: https://www.youtube.com/watch?v=W6NZfCO5SIk&ab_channel=ProgrammingwithMosh
- Advance
- Book(recommended route): https://eloquentjavascript.net/
- Course: https://www.udemy.com/course/modern-javascript-from-the-beginning/
- Under the Hood JS - Namaste Javascript (course) : https://www.youtube.com/watch?v=pN6jk0uUrD8&ab_channel=AkshaySaini
- Rely on official documentation if you struggle with any concept: https://developer.mozilla.org/en-US/docs/Web/JavaScript
Typescript:
- https://react-typescript-cheatsheet.netlify.app/docs/basic/setup/
- TS is fairly new, better to also rely on official documentation: https://www.typescriptlang.org/docs/
React:
- Course: https://www.udemy.com/course/react-redux/
- And officail documentation: https://reactjs.org/docs/getting-started.html
For MERN Stack: https://fullstackopen.com/
For DSA : G4G Course or Udemy courses are the best.
Best resources for Web Development:
freeCodeCamp(https://www.freecodecamp.org/learn) - Free course to learn Web Development.
HTML Elements(https://developer.mozilla.org/en-US/docs/Web/HTML/Element) - HTML elements reference by MDN.
HTML Entity(https://css-tricks.com/snippets/html/glyphs/) - HTML Entity Reference by CSS-Tricks.
CSS3 Properties(https://developer.mozilla.org/en-US/docs/Web/CSS/Reference) - CSS reference by MDN.
CSS Reference(https://cssreference.io/) - A free visual guide to CSS.
Flexbox Froggy(https://flexboxfroggy.com/) - A game that helps you to learn CSS Flex.
CSS-TRICKS Flexbox(https://css-tricks.com/snippets/css/a-guide-to-flexbox/) - A Complete Guide to Flexbox.
## Sahil Kumar
Follow a particular roadmap when starting with Web dev
-You can follow w3schools for roadmaps (https://www.w3schools.com/whatis/)
For HTML, CSS, BOOTSTRAP - Udemy courses for basics , I prefer one provided by Angela yu which is one among the best course
For more learning read documentations from w3schools and mdn texts.
For back end - Go with same Udemy course or if you are into reading, W3schools is a good site for you
4 steps to become a web devloper from scratch:
1)Learn to code
-freecodecamp.org
-codecademy.com
2)Practice problem solving
-leetcode.com
-edabit.com
3)Build a real app
-vuejs.org
-reactjs.org
4)Host it
-vercel.com
-netlify.com
Repeat......!
- If you want to learn Django-Rest-API and facing difficulty in userstanding token authentication from documentation.
- Then you can easily learn that from https://www.youtube.com/playlist?list=PLbGui_ZYuhijTKyrlu-0g5GcP9nUp_HlN
- Pre-requisute: Basics of Django.
I preferred to do some courses from Udemy.
HTML:- https://www.udemy.com/course/html-basic-to-advanced/
CSS:- https://www.udemy.com/course/css-basics-to-advanced/
JS:- https://www.udemy.com/course/javascript-basics-to-advanced/
ReactJS:- https://www.udemy.com/course/react-js-basics-to-advanced/