How to learn web development

First let me start with a disclaimer. I started my web development journey roughly 14 months ago as of writing this article. I am very much still learning every single day and feel like web development is a lifelong pursuit. In this article I will give my thoughts on what courses to take, what I wish knew and what mistakes I made.

p.s - I am not affiliated with any of the following.

What is Web Development

Web development as a basic explanation is creating things people look at on the web. Websites, apps etc. Also known as Frontend Development. Web Development involves making things look nice and displaying information for people.

Part One: Web basics and Learning How to Learn

For the first month learn more about the web, computers and just as important, how to learn efficiently. After this make websites and make them look snazzy.

• Learn about the 80/20 rule and watch this video on active recall or even better take this course How to Study for Exams - An Evidence-Based Masterclass - get this for free by looking for code on youtube. In fact anything from Ali Abdaal about learning is usually top notch.
• Watch CS50 don't get attached to the computer languages used it's the principles you want to become familiar with. The guy does a great job at engaging you. I was amazed how I would watch Computer Science lectures from Harvard university whilst living on a Navy base in Scotland. For free!
• This payed monthly course path from Scrimba is incredible. I wish this existed when I started. If you can, do this course path whilst also looking at the other courses in this article. Not affiliated in anyway just a high recommendation.
• This free bootcamp by Colt is great for getting your feet wet
• Another great intro to HTML and CSS by Netninja. You'll get familiar with this guy.
• Important - Using what you have learned from the last course go and build something yourself. This is important as it uses active recall for solidifying the knowledge in your mind. It doesn't matter what you make. Just pick a business or famous person and make a website. Use other website designs as inspiration.
• Learn modern responsive CSS with another course from the Netninja's Mobile first responsive build course.
• Play these games - Flexbox froggy and Grid garden. These may seem daft however they give you a perfect opportunity to actively recall what you have learned.
• Build another project with skills in the courses above. If you don't remember everything it's ok nobody does. Part of web development is referring to google, courses and docs etc to solve problems.
• Use Tailwindcss for styling websites quickly. I like TailwindCSS as you use the same principles as in CSS. You just use pre defined classes rather than thinking of your own. In fact my CSS actually improved once I started using Tailwind.
• Sign up for Stackoverflow it's a place where you can ask questions your'e stuck on and search for other asked questions.
• Learn Git. This way you can upload your projects.

The main thing to take from this section is, you need to learn effectively. The way you do this is watching/reading something then actively recalling that information yourself in your own projects. No matter how many tutorials you watch you will not retain that information. You can't be an artist by watching Bob Ross. This section could take 1-2 months. Take your time.

Part Two: JavaScript

Add some interactivity to your websites with JavaScript. This part is a little trickier but you'll get the hang of it with discipline. JavaScript allows you to add interactivity to websites. For example the like button on social media or opening sidebar menus on clicking.

• Free tutorial by Colt Steele
• Heres a payed course by Netninja on udemy. Wait for it to be discounted cheap. Udemy discounts all courses every week to around £10.00/$10.00.
• Dabble online for free youtube videos or head to Free Code Camp. Get programming muscles going. It's a different way to think.
• Heres a great expensive but worth it course by Wes Bos
• If you want to delve deeper into JavaScript and understand it more in theory try this course JavaScript the Hard Parts. Yes a months membership is expensive. For this course alone it was worth it. Will is very engaging and likeable. After this course everything seemed to click.

Once again I encourage you to build little websites and projects yourself. Use active recall by building from what you're taught in tutorials or write articles from your notes using the Feynman technique and post them on Dev. Have fun. Take breaks. Take your time on this one.

Part Three: Learn React

React is a front end framework which allows you to write your code in a more efficient way. React is popular and there is lot's of resources out there. There is other front end frameworks like Vue, however I can only recommend what I have experience with.

• First make sure you understand these. I didn't and moved to fast and wasted a lot of time and ended up going back to fundamental JavaScript.
• Another crash course from Colt Steele
• Another belting course from the Netninja
• Read the React docs they are actually good.
• This free massive tutorial by Karl. Still can't believe he made this for free. Take your time with it and build your own projects along side.
• Explore Nextjs. I love nextjs and wish I used it earlier. You just use React as normal but nextjs super powers your apps by making them fast, does routing for you and even improves SEO. Theres no reason I can see for not using nextjs when you've got the basics down.

Part 4: Build Things and Learn Yourself

This is the most important part. Build things. Lot's of things and learn how to do stuff yourself.

• Copy websites
• Create silly apps
• Ask questions

Other Great Resources

Theres plenty of other people not mentioned above but provide a great top notch content

• James Q Quick for JavaScript, React and Server-less
• Ania Kubów for cool JavaScript games
• Kevin Powell for CSS wizardry
• Florin Pop for CSS and JavaScript and who's content creation endurance is out of this world
• Syntax FM - Podcast with Scott and Wes is great. They are entertaining and educational.

Theres many more and the web development community is great.

Don't Make The Same Mistakes I Did

I made a tonne of mistakes on my journey. I want to be open so others don't fall into the same traps I did. Don't think watching a million tutorials will make you learn. Heres rules I should of followed.

• Tutorial hell - No matter how many tutorials you watch. It won't make you learn. Watch a tutorial then build something using the tutorial knowledge.
• Cramming hours of study doesn't work - It's bette to learn in smaller groups of focussed effort than a long slog of study. You learn better by breaking things. I would spend hours and hours watching tutorials. Yet the information doesn't sink in.
• Use the Pomodoro Technique - Start a timer for 25 minutes and study. After 25 minutes take a 5 minute break. Rinse and repeat.
• Go outside - Take a walk in the morning or night and get outside.
• Sleep - Important. Get 8 hours sleep a night. Don't set your alarm for 5am to study like I did with only 4-5 hours sleep. It doesn't work. Theres an overwhelming amount science that supports this.
• Exercise - Yes exercise. I'm not saying you have to start being a gym bro or chick who loves to talk about protein and biceps. Just exercise for 30 minutes 3-5 times a week. It's good for your back if anything.
• Learn the basics of design - I wish I learned a bit more about design principles. Or learn a tool like Figma so I would have an idea of what I was going to make before I began to code.

Conclusion

Enjoy the process! This is an interesting skill to learn.

Add resources in the comments

If you know any other useful resources I have not included, please put them in the comments.