Web Development: The Journey & The Backpack

Resources you need to carry in your backpack while planing a journey through the world of Web Development.

Photo by Josiah Weiss on Unsplash

1. THE FOUNDATION

“When The Roots Are Deep There Is No Reason To Fear The Wind.”

— African Proverb

HTML (Structure)

• W3Schools for newbies.
• Switch to MDN Web Docs once familiar.
• A concise Video Tutorial.
• For interactive tutorial jump to Scrimba.
• Web Design in 4 minutes.
• HTML cheatsheet.
• HTML semantics cheatsheet.
• HTML Minifier.

CSS (Presentation)

• W3Schools for newbies.
• Check out this awesome guide at CSS-Tricks.
• For interactive tutorial jump to Scrimba.
• Improve your code quality with CSSlint.
• CSS cheatsheet.

JavaScript (Behaviour)

• Introduction to JavaScript.
• Learn Modern JavaScript.
• Go through MDN Web Docs.
• Book — JavaScript: The Good Parts.
• JavaScript in 14 minutes.
• Practical JavaScript.
• Refer to Google JS Style Guide.
• Improve your code quality with JSlint.
• JS cheatsheet.

Go through Google HTML/CSS Style Guide.

2. THE FRONTEND

“Design isn’t finished until somebody is using it.”
— Brenda Laurel

• Roadmap to becoming a Frontend Developer.
• CSS framework — Bootstrap 4.
• A Material Design + Bootstrap UI kit MDB.
• Top frontend JS frameworks — Vue.js, React.js, Angular.js
• Confused over which framework to choose? Don’t worry just click me!

3. THE BACKEND

“A good programmer is someone who always looks both ways before crossing a one-way street.”

— Doug Linder

• Roadmap to becoming a Backend Developer.
• Check out this blog to learn more about the backend.
• Laracasts is one of the best places for learning Laravel.
• Check out this blog on Django.
• A crash course on Node.js.
• How to choose the right Database.
• PostgreSQL vs MongoDB vs MySQL.

4. THE NEWCOMERS

“Two roads diverged in a wood, and I … I took the one less traveled by, and that has made all the difference.”

— Robert Frost

• Progressive Web Apps
• AI in the browser.

5. USEFUL REFERENCES

“I don’t care if it works on your machine! We are not shipping your machine!”

— Vidiu Platon

• Review your webpage with Google PageSpeed Insights.
• Improve your page quality with Google Lighthouse.
• Top tips to improve Web performance.
• Supercharging Page Load.
• Compress your images here.
• Add custom shadows with this.
• Get free vector icons from Flaticon or Font Awesome.
• Learn about web-safe fonts here.
• 10 Things All Developers Should Learn.

“Always code as if the guy who ends up maintaining your code will be a violent psychopath who knows where you live.” — Martin Golding

Learn the Art of Commenting Code & maintain Documentation.

“Writing the first 90 percent of a computer program takes 90 percent of the time. The remaining ten percent also takes 90 percent of the time and the final touches also take 90 percent of the time.” — N.J. Rubenking

These were the useful resources that I have gathered so far in my journey of Web Development. Always remember: It’s the Journey, not the Destination that matters…
I hope this post was helpful to you.
If you liked it, let me know with some claps (pro tip: you can leave up to 50!)