Do you want to learn web development? If yes you just hit the jackpot! Why? Because we have gathered up the best resources available on the internet and made a study plan for you to learn the most in fewer days! Join our discord server and post your daily learning achievements with the #30DayChallenge channel/hashtag. (Join us on discord here: https://discord.com/invite/Qwv3Eyw)
If you ever get stuck on these tutorials and guides that I am going to share below, which I’m pretty sure will happen quite a few times since these resources are from different people, here’s what to do:
- I’m stuck!: The first thing you can try is Googling: Just search on google. There’s a very likely chance that the problem you have faced have been faced by someone else and has been answered on the internet.
- “I don’t remember how you do this?”: For this problem too you can try google. But if it’s something you don’t remember about HTML, CSS, JS just look it up on w3schools. These guys got one of the best free documentation for you to look up anything when you forget it. Don’t worry you don’t need to memorize anything because even professional Programmers do these things every day: looking upon w3schools and other similar websites. This is one of my favorite things about programming. They don’t want you to remember stuff since you are always just a click away from an answer while working on a computer 🙂
- Still, stuck? Ask us on Discord (Join here: https://discord.com/invite/Qwv3Eyw) Or you can ask on other popular forums like https://stackoverflow.com/, which is the most used forum made especially for Programmers like you and me.
Let’s start by preparing your plan. For this, I highly encourage you to read this article https://developer.mozilla.org/en-US/docs/Learn/Common_questions/Thinking_before_coding
Also, go watch this interesting video on how to learn efficiently.
Now let’s start by knowing what we are getting ourselves into a bit more: This article here explains how the internet works in a brief and easy to understand language. By the way, take note of this website MDN Web Docs. They discuss a lot of web development topics that every web developer should know. They also have guides and tutorials on many programming stuff.
Now let’s find a bit more about web development. Rest easy. No articles to read today. I know reading is kinda boring, so I’ll try my best to share videos more. But one thing to note is that, you will have to read a lot when you become a web developer. Documentations, guides, articles to keep you updated and much more.
While watching this 2 part video series, be sure to take notes. It’s really worth and you will find out a lot about how the web development industry works.
Day 03 & 04
FreeCodeCamp.org is one of the best websites to learn Programming from. They got 100s of hours of video tutorials on their YouTube channel as well as countless tutorials and articles on their websites. So do add them to your bookmarks :D.
Day 05, 06 & 07
One thing I forgot to speak about was Code Editors. Choosing a good code editor can help you a lot in your coming web development days. So choose a good one that fits your likes and needs.
My favorites are:
- VS Code (Really powerful)
- Sublime (Very lightweight)
- Atom (Like a combination of the previous ones + Beautiful UI!)
Let’s make you familiar with one another cool website: https://www.w3schools.com/css/. This is one of the websites you will find quite a lot useful in the early stages of web development. This is like a reference book that you will use whenever you don’t remember something.
Day 08 & 09
Time to learn bit more about CSS: Flexbox and Grids. Check out this awesome visual blog post on FlexBox https://css-tricks.com/snippets/css/a-guide-to-flexbox/
For Grids watch this video below:
Putting Everything Together
Make Netflix Landing Page Clone – Day 15, 16
Making projects can help you persist the knowledge you gained in your memory. And doing Projects can open you to new ways of thinking and seeing how others approach a certain Programming Problem can help you see things in a new set of eyes.
While doing this problem you might find things you don’t understand or don’t make sense. If you do, don’t be shy to search on google. No ones gonna pity you for that. Instead I would encourage you to google things. But never, ever copy paste code. And even if you do, do at this one condition: Make sure you understand it from A-Z of that code.
After completing this Project you can upload this onto your GitHub account. But what’s that? Let’s find out tomorrow 🙂
Day 17, 18 – Git and GitHub
After this watching this short introduction I’m pretty sure that you are excited to learn more about Git and GitHub!
Now watch this video series on Git and GitHub: https://www.youtube.com/playlist?list=PL4cUxeGkcC9goXbgTDQ0n_4TBzOO0ocPR.
After this be sure to upload your NetFlix onto GitHub.
Day 19 – Node
Now, this video would be more than enough to get you started on Node. Try to spend 3 hours on programming today 🙂
DAY 20 – NPM
If you have used Linux or Mac before you might be familiar with package manages like apt, dnf or brew. Well, npm is something similar.
Day 22, 23, 24 – React
Day 25, 26, 27 – Express & MongoDB
After finishing this section you can call yourself a MERN Stack developer. MongoDB, Express, React, and NodeJS. Congrats! If you have made it till here you are truly awesome and that’s something to be truly proud of 🙂