Selecting the right tools and resources from the myriad of available resources can be challenging for Self-learner and anyone looking to make a transition to web development.
Below are some of my favorite free learning resources and tools that helped me in my journey as a self-taught web developer.
It is a non-profit organization with the mission to help people learn to code for free by creating thousands of videos, articles, and interactive coding lessons.
It has the most comprehensive lessons and an up-to-date curriculum. It also, consists of an interactive learning web platform, an online community forum, chat rooms, as well as online publications.
Cssreference is a free visual guide to CSS. It features the most popular properties and explains them with illustrated and animated examples.
It gives illustrated and animated examples to improve understanding of the cascading style sheet (CSS) covering topics like flexbox, grid, box model, positioning, transitions, animations, and typography.
The sister website is HTMLreference.io - if you are interested in learning HyperText Markup Language(HTML) indepth.
DevDocs is a web app aimed at providing you with quick access to the reference manual of just about every front-end language and library. It combines multiple documentation of over 100+ for lots of developer tools into a single searchable interface.
6. MDN Web Docs
Frontend Mentor is a collaborative learning platform that provides designs so that you can practice your front-end skills using a real-life workflow.
CSS-irl is designed, written, and developed by Michelle Barker covering tips, tricks, and tutorials on the web's most beautiful language known as CSS.
11. Traversy Media
Learn how to code for free from computer programming, game development, web development, artificial intelligence, machine learning, data science, and more.
14. The Net Ninja
15. Kevin Powell
This youtube channel helps you learn CSS with confidence using simple tips and tricks. Helping you learn how to make the web, and make it look good while you're at it.
If you are just getting started in web development Web Dev Simplified has all the tools you need to learn the newest and most popular technologies to convert you from a no-stack to a full-stack developer. It also deep dives into advanced topics using the latest best practices for you seasoned web developers.
17. Dev Ed
Learn web development, web design, 3d modeling, tools like Figma, and more without getting bored.
Learn how to clone popular websites like Netflix, Amazon, and Spotify, including programming tips and tricks that will take your coding skills to the next level.
19. Adrian Twarog
22. Eddie Jaounde
Eddie Jaounde is a GitHub Star and Open Source Advocate that teaches you coding, community building, DevOps, and open source.
Gary Simon creates courses from graphic design and UI/UX design to advanced front-end development.
Browser Extensions and Tools
Daily.dev is the fastest growing online community for developers to stay updated on the best developer news. It shortlists trending and high-quality articles collected from 400+ sources like medium, hashnode, dev.to, hackernoon, hackernews, etc.
Until recently, margins and paddings around any website can be inspected using:
border: 1px solid red;
Pesticide extension makes this easier by inserting the Pesticide CSS into the current page, outlining each element to better see the placement on the page.
Wappalyzer is a technology profiler and browser extension that shows you what websites are built at glance. It helps you find out the content management systems, eCommerce platforms, web servers, frameworks, analytics tools, and many other technologies used on websites.
28. Responsively App
This extension makes it easier to build responsive websites and web applications on various screen sizes. It gives a handy way to send the current page URL to the Responsively App desktop application.
29. CSS Viewer
CSSViewer is a simple CSS properties viewer originally made by Nicolas Huon as a Firefox add-on. It is used to inspect web pages to identify properties.
This extension checks the color contrast between the foreground and background of the elements that are on the page according to the WCAG accessibility requirements.
It evaluates the contrast on all elements of the page considering their computed style for the color and background-color CSS properties. It can also simulate color blindness and evaluate the contrast for the simulations. In this way, developers can see how the pages look for colorblind users. It also allows picking the color directly from any document.
It is pertinent to understand this list isn't exclusive and they are my personal recommendation.
Thank you very much for reading! Follow me on my blog for more resources and tips. You can also find me on Twitter.