Best Tools and Resources Best Tools and Resources For Self-Taught Developers
Tags: webdev, learningresources, devtools, programming
Published: 2023-02-27 16:08:00

Selecting the right tools and resources from the myriad of available resources can be challenging for self-learners 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. 


## Learning Resources

### 1. [FreeCodeCamp](https://freecodecamp.org)

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 includes an interactive learning web platform, a community forum, chat rooms, and online publications.


![Learn_to_Code_—_For_Free_—_Coding_Courses_for_Busy_People.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1661539353642/HPl0s3u2Q.png?auto=compress,format&format=webp align="left")

### 2.  [W3Schools](https://www.w3schools.com)

It’s one of the oldest online learning platforms that create simplified and interactive learning experiences. If you are looking to learn basic frontend development technologies - HTML, CSS, and Javascript, this is definitely a great website.

![W3Schools_Online_Web_Tutorials.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1661539369168/tGdmcrtAo.png?auto=compress,format&format=webp align="left")


### 3. [Javascript.info](https://javascript.info)

Javascript.info created in 2007 by Ilya Kantor covers modern javaScript tutorials from the basics to advanced topics with simple, but detailed explanations.


![The_Modern_JavaScript_Tutorial.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1661539326364/_uOOIDUda.png?auto=compress,format&format=webp align="left")

### 4. [CSSreference.io](https://cssreference.io)
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](https://htmlreference.io) - if you are interested in learning HyperText Markup Language(HTML) indepth.


![CSS_Reference_A_free_visual_guide_to_CSS.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1661539519722/zNXx9DXsK.png?auto=compress,format&format=webp align="left")

### 5. [DevDocs](https://devdocs.io)

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.

![DevDocs_API_Documentation.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1662388293409/kYMr1y49n.png?auto=compress,format&format=webp align="left")


### 6. [MDN Web Docs](https://developer.mozilla.org)

MDN (formerly Mozilla Developer Network) is a free resource for in-depth and well-explained documentation on web standards such as HTML, CSS, JavaScript, Web APIs, and much more. 


![MDN_Web_Docs.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1661539263802/kFjbphNJX.png?auto=compress,format&format=webp align="left")
 
### 7. [Frontend Mentor](https://frontendmentor.io)

Frontend Mentor is a collaborative learning platform that provides designs so that you can practice your front-end skills using a real-life workflow. 

It helps you improve your front-end skills and knowledge of HTML, CSS, and JavaScript by building real projects.


![Frontend_Mentor_Front_end_coding_challenges_using_a_real_life_workflow.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1661539621980/f-mSoW2mH.png?auto=compress,format&format=webp align="left")

### 8. [Scrimba](https://scrimba.com)

Scrimba is a code-learning platform that helps motivated newbies become professional web developers without spending a fortune. Its mission is to give students the quality of a coding Bootcamp with interactive courses and tutorials on React, Vue, Angular, JavaScript, HTML, CSS, and more.


![Learn_to_Code_with_Interactive_Tutorials_Scrimba_com(1).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1661539028887/EPT84tuJi.png?auto=compress,format&format=webp align="left")

### 9. [CSS In Real Life](https://css-irl.info)

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.


![CSS_In_Real_Life_.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1661538998539/Ah5GIbleC.png?auto=compress,format&format=webp align="left")

### 10. [Learn X in Y minutes](https://learnxinyminutes.com)

It’s one of the most popular tutorial websites that provides a concise and introductory guide on any programming language and technologies including Solidity, Python, JavaScript, C, C++, etc.

![Learn_X_in_Y_Minutes_Scenic_Programming_Language_Tours.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1661538820237/cc9UJfqwK.png?auto=compress,format&format=webp align="left")

## Youtube Channels

### 11. [Traversy Media](https://www.youtube.com/c/TraversyMedia)  
Traversy Media features the best online web development and programming tutorials for all of the latest web technologies from the building blocks of HTML, CSS & JavaScript to frontend frameworks like React and Vue to backend technologies like Node.js, Python, and PHP.
           
### 12. [FreeCodeCamp.org](https://www.youtube.com/c/FreeCodeCamp) 
Learn how to code for free from computer programming, game development, web development, artificial intelligence, machine learning, data science, and more.
 
### 13. [ProgrammingWithMosh](https://www.youtube.com/c/programmingwithmosh) 
Learn how to code Javascript, Python, and C# as a professional software engineer. 
  
     
### 14. [The Net Ninja](https://youtube.com/c/TheNetNinja)
Black-belt your web development skills with free programming tutorials about Modern JavaScript (beginner to advanced), Node.js, React, Vue.js, Firebase, MongoDB, HTML & CSS, PHP & MySQL, Laravel, React Native, Flutter, and many more topics.

### 15. [Kevin Powell](https://youtube.com/kepowob) 
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.  

### 16. [Web Dev Simplified](https://www.youtube.com/c/WebDevSimplified/)
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](https://www.youtube.com/c/DevEd/) 
Learn web development, web design, 3d modeling, tools like Figma, and more without getting bored.    

### 18. [Clever programmer](https://www.youtube.com/channel/UCqrILQNl5Ed9Dz6CGMyvMTQ)  
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](https://www.youtube.com/channel/UCvM5YYWwfLwpcQgbRr68JLQ)    
Adrian is a designer and developer who makes websites and apps using platforms like React Native. 
This channel covers topics like web development for React, React Native, Javascript, HTML, CSS, UI & UX, techniques for creating style guides, reviews of existing businesses' online presence, and tips on improving them.


### 20. [Academind](https://www.youtube.com/c/Academind)   
This channel creates courses and tutorials that teach you everything related to web development like JavaScript, runtimes like NodeJS, popular frameworks like ReactJS, Angular, or VueJS, and much more. 

### 21. [CodeSTACKr](https://youtube.com/c/codeSTACKr) 
The tutorials are generally about web development and include coding languages such as HTML, CSS, Sass, JavaScript, and TypeScript. 
 

### 22. [Eddie Jaounde](https://www.youtube.com/c/eddiejaoude)
Eddie Jaounde is a GitHub Star and Open Source Advocate that teaches you coding, community building, DevOps, and open source.


### 23. [Code with Ania Kubów](https://youtube.com/c/AniaKub%C3%B3w)  
Ania Kubow is a Software Developer (ex-Eurostar) who teaches how to code by building retro Games and awesome projects using JavaScript, React, React-Native, Next.js, Node.js, Express, GraphQL, Serverless Functions, DataBase work and so much more. 

         
### 24.  [DesignCourse](https://www.youtube.com/c/DesignCourse)   
Gary Simon creates courses from graphic design and UI/UX design to advanced front-end development.           
                                

## Browser Extensions and Tools

### 25. [Daily.dev](https://daily.dev)

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.


![daily_dev_Where_developers_grow_together.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1661620730255/dp_ePRS0H.png?auto=compress,format&format=webp align="left")

### 26. [Pesticide](https://chrome.google.com/webstore/detail/pesticide-for-chrome/bakpbgckdnepkmkeaiomhmfcnejndkbi)

Until recently, margins and paddings around any website can be inspected using:

```css
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.


![pesticide.JPG](https://cdn.hashnode.com/res/hashnode/image/upload/v1661538606961/AeFa1bqQ4.JPG?auto=compress,format&format=webp align="left")

### 27. [Wappalyzer](https://chrome.google.com/webstore/detail/wappalyzer-technology-pro/gppongmhjkpfnbhagpmjfkannfbllamg)

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.


![Wappalyzer.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1661620712171/41y4CHxRX.png?auto=compress,format&format=webp align="left")


### 28. [Responsively App](https://chrome.google.com/webstore/detail/responsively-helper/jhphiidjkooiaollfiknkokgodbaddcj?hl=en)

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.


![responsively-app.JPG](https://cdn.hashnode.com/res/hashnode/image/upload/v1661869460452/asToBkA2B.JPG?auto=compress,format&format=webp align="left")

### 29. [CSS Viewer](https://chrome.google.com/webstore/detail/cssviewer/ggfgijbpiheegefliciemofobhmofgce?hl=en)

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.

![css viewer.JPG](https://cdn.hashnode.com/res/hashnode/image/upload/v1661621180108/36f1fWmMP.JPG?auto=compress,format&format=webp align="left")


### 30. [WCAG Color Contrast Checker](https://chrome.google.com/webstore/detail/wcag-color-contrast-check/plnahcmalebffmaghcpcmpaciebdhgdf?hl=en)

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 you to select a color from any document.

![wcag.JPG](https://cdn.hashnode.com/res/hashnode/image/upload/v1661621242078/kcz51sjM2.JPG?auto=compress,format&format=webp align="left")

## Wrapping Up

It is pertinent to understand this list isn't exclusive, and these are my personal recommendations.

Thank you very much for reading! Follow me on my blog for more resources and tips. 
You can also find me on [Twitter](https://twitter.com/frankiefab100).