{FREE} Ultimate Resources for Front-End Development in 2023 + Giveaway⚡
Tags: resources, beginners, webdev, javascript
Published: 2020-12-17 05:41:45

You only need this post to become a Front-end Developer because this post has nearly unlimited amount of every type of resources covering everything you will need. 

---

# 600+ Free Design resources

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6q3qdida0rc6r3zpuua2.jpeg)

Resources. Freebies. Learn.
We're making things easier on Internet.

Visit - [600+ free design resources](https://www.producthunt.com/posts/600-free-design-resources/)

---


# Blog your Journey
-  [Hashnode](https://hashnode.com/@RAHULISM/joinme)  - Hashnode is the easiest way to start a developer blog on your personal domain 🌏 for free and connect with the readers through our global dev community! 👩‍💻👨‍💻
- [ Dev.to](https://dev.to/) - DEV is a community of software developers getting together to help one another out. 
-  [Hackernoon ](https://hackernoon.com/) - An Independent Tech Media Site

<hr>
# Must have Chrome extensions
-  [DailyDev](https://api.daily.dev/get?r=rahxul) - Get the latest new about the Dev community in your chrome default tab.
-  [WhatFont](https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm) - Get to know which font is the website using. 
-  [ColorPick Eyedropper](https://chrome.google.com/webstore/detail/colorpick-eyedropper/ohcpnigalekghcmgcdcenkpelffpdolg)  - Get to know which color is the website using by just dropping the pen.  
-  [Wappalyzer ](https://chrome.google.com/webstore/detail/wappalyzer/gppongmhjkpfnbhagpmjfkannfbllamg) - Get to know the tech stack of any website
-  [Web Developer](https://chrome.google.com/webstore/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm)  -  Amazing amount of tools this extensions has. 
-  [React developer tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en)  - React Developer Tools is a Chrome DevTools extension for the open-source React JavaScript library. It allows you to inspect the React component hierarchies in the Chrome Developer Tools.
- [Visbug](https://chrome.google.com/webstore/detail/visbug/cdockenadnadldjbbgcallicgledbeoc) - Open source browser design tools
Open source web design debug tools built with JavaScript: a FireBug for designers.

<hr>

# VS Code Must have extensions
-  [NPM ](https://marketplace.visualstudio.com/items?itemName=eg2.vscode-npm-script) -  This extension helps you to manage your Package.json and will provide warnings if dependencies are not installed also will help with the version control.
-  [Prettier ](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) - Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.
-  [Rainbow Brackets](
https://marketplace.visualstudio.com/items?itemName=2gua.rainbow-brackets)  - Find that missing tag with ease by color-coding every bracket set in your environment.
-  [VS Code Great Icons](https://marketplace.visualstudio.com/items?itemName=emmanuelbeziat.vscode-great-icons)  - Organize your environment by applying an appropriate icon set to visually identify files by type.
-  [Placeholder Images](https://marketplace.visualstudio.com/items?itemName=JakeWilson.vscode-placeholder-images)  - Services like unsplash.it and placehold.it are extremely useful. Now you can save time by adding placeholder images right from within VS Code
- [Vetur]( https://marketplace.visualstudio.com/items?itemName=octref.vetur) - The official VueJS extension
-  [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) - The extension uses the ESLint library installed in the opened workspace folder.
-  [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) - Launch a development local Server with live reload feature for static & dynamic pages. 
-  [Visual Studio IntelliCode](https://marketplace.visualstudio.com/items?itemName=VisualStudioExptTeam.vscodeintellicode) - This extension will move the most relevant completion suggestions to the top. 
-  [Debugger For Chrome](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome) - This extension allows you to debug your JavaScript code running in the Chrome browser, from inside of VS Code.
-  [Debugger for Microsoft Edge](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-edge)  - Debug your JavaScript code in the Microsoft Edge browser
-  [Debugger for Firefox](https://marketplace.visualstudio.com/items?itemName=firefox-devtools.vscode-firefox-debug)  - Debug your web application or browser extension in Firefox
- [ Bracket Pair Colorizer 2](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2)  - A customizable extension for colorizing matching brackets

### VS Code themes
-  [One Dark Pro](https://marketplace.visualstudio.com/items?itemName=zhuangtongfa.Material-theme) - Atom's iconic One Dark theme for Visual Studio Code
-  [Material Theme](https://marketplace.visualstudio.com/items?itemName=Equinusocio.vsc-material-theme) - The most epic theme now for Visual Studio Code
-  [Horizon Theme](https://marketplace.visualstudio.com/items?itemName=jolaleye.horizon-theme-vscode) - A beautifully warm dual theme for Visual Studio Code
- [Mayukai Theme](https://marketplace.visualstudio.com/items?itemName=GulajavaMinistudio.mayukaithemevsc) - Dark theme based on mixing swatch of Ayu Theme, Andromeda Theme, Monokai, Material Colors, Original Gruvbox Darktooth Colors, and Dracula Colors.

<hr>

# General Resources

-  First of all you will need a check list for marking what all you have learned. You can see the below image for how the checklist will look like.  <br>
Link ->  [The Front-End Checklist](https://frontendchecklist.io/) 
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1608173033183/RTWMoCY5a.png)

-  [Frontend Development Roadmap](https://roadmap.sh/frontend) 

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1608173416316/Z0Jacl94l.png)

## Learning Resources 📘

### DOCS and Cheat sheets 😁

-  [MDN Web Docs](https://developer.mozilla.org/en-US/)  - The MDN Web Docs site provides information about Open Web technologies including HTML, CSS, and APIs for both Web sites and progressive web apps.
-  [DevDocs](https://devdocs.io/)  - Fast, offline, and free documentation browser for developers. Search 100+ docs in one web app.
-  [DEVHINTS](https://devhints.io/)  - A modest collection of cheatsheets.
-  [FLEX - Malven](https://flexbox.malven.co/)  - A visual cheatsheet for CSS flex layout.
-  [GRID - Malven](https://grid.malven.co/)  - A visual cheatsheet for CSS grid layout.

### 🌐 HOW DOES IT WORKS?

- [How the Internet Works Video](https://www.youtube.com/watch?v=x3c1ih2NJEg) - How does the Internet Works?
- [How the Internet Works Brief Videos](https://www.youtube.com/playlist?list=PLzdnOPI1iJNfMRZm5DDxco3UdsFegvuB7) - A brief explanations on, how does the Internet works?
- [DNS](https://howdns.works) - How DNS works?
- [HTTPS](https://howhttps.works) - How HTTPS works?

### For HTML and CSS

-  [freeCodeCamp](https://www.freecodecamp.org/learn)  - Free course to learn Web Development.
- Flexbox Froggy - A game that helps you to learn CSS Flex.
-  [CSS TRICKS - Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)  - A Complete Guide to Flexbox.
- Grid Garden - A game for learning CSS Grid.
-  [CSS TRICKS - A Complete Guide to Grid](https://css-tricks.com/snippets/css/complete-guide-grid/)  - A comprehensive guide to CSS grid, focusing on all the settings both for the grid parent container and the grid child elements.
-  [Learn CSS Grid](https://learncssgrid.com/)  - A comprehensive guide to help you understand and learn CSS Grid Layout, by Jonathan Suh.
-  [Can I Use](https://caniuse.com/)  - Up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers.
-  [HTML Dog ](https://htmldog.com/) - Simple and to the point explanations. 
-  [Marksheet](https://marksheet.io/)  - Unlimited amount of tutorials
-  [The ODIN Project ](https://www.theodinproject.com/) - Amazing way of learning.
-  [CSS Effects](https://emilkowalski.github.io/css-effects-snippets/)  - CSS Animations.
-  [Keyframes](https://keyframes.app/)  - Create basic or complex CSS @keyframe animations with a visual timeline editor.
-  [Animista ](https://animista.net/) - Play with a collection of ready to use CSS animations.
-  [Interneting Is Hard](https://www.internetingishard.com/)  - Friendly web development tutorials for complete beginners.
-  [BEM](https://9elements.com/bem-cheat-sheet/)  - BEM naming cheat sheet.
-  [Autoprefixer](https://autoprefixer.github.io/)  - Autoprefixer is a PostCSS plugin which parses your CSS and adds vendor prefixes.
-  [CSS Formatter ](https://www.cleancss.com/css-beautify/) - Online CSS Formatter, CSS Beautifier.
- [ Placeholder](https://placeholder.com/)  - How To Use Our Placeholders. Just specify the image size after our URL and you'll get a placeholder image.

<hr>

# 📝 ONLINE IDE, EDITOR
-  [goormIDE](https://ide.goorm.io/) 
-  [CodeSandbox](https://codesandbox.io/) 
-  [CodePen](https://codepen.io/)
- [ Repl.it ](https://repl.it/) 
-  [JSFiddle](https://jsfiddle.net/) 


# 📷 IMAGE RESOURCES
- [Unsplash](https://unsplash.com/)  - Free images and photos.
-  [Pexels](https://www.pexels.com/)  - Free stock photos.
- Remove Photo Data - Remove personal data from photos before sharing them on the internet.
-  [LottieFiles](https://lottiefiles.com/)  - LottieFiles is a collection of animations designed for - Lottie - gone are the days of bugging your developer.
-  [Remove.bg](https://remove.bg/)  - Remove.bg is an emerging online image background remover online tool that uses AI and is better than any other Background remover in the market.
-  [Pixabay](https://pixabay.com/)  - Free image or video.

# 👓 ACCESSIBILITY

- [Accessibility Blog - Medium](https://uxdesign.cc/designing-for-accessibility-is-not-that-hard-c04cc4779d94)  - Seven easy-to-implement - guidelines to design a more accessible web.
-  [Accessibility Cheatsheet ](https://moritzgiessmann.de/accessibility-cheatsheet/) - Practical approaches to Universal Design for making your website/webapp accessible to everyone.

# 📄 TERMINALS FOR WINDOWS 

-  [Windows Terminal](https://www.microsoft.com/en-us/p/windows-terminal/9n0dx20hk701?activetab=pivot:overviewtab) 
-  [FluentTerminal](https://github.com/felixse/FluentTerminal) 
-  [Hyper](https://hyper.is/) 

### 📺 YOUTUBE CHANNELS

- [Traversy Media](https://www.youtube.com/user/TechGuyWeb)
- [freeCodeCamp.org](https://www.youtube.com/channel/UC8butISFwT-Wl7EV0hUK0BQ)
- [Codevolution](https://www.youtube.com/channel/UC80PWRj_ZU8Zu0HSMNVwKWw)
- [Fireship](https://www.youtube.com/channel/UCsBjURrPoezykLs9EqgamOA)
- [The Net Ninja](https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg)
- [Wes Bos](https://www.youtube.com/channel/UCoebwHSTvwalADTJhps0emA)

### 🖋 FONTS AND TYPOGRAPHY

- [Google Fonts](https://fonts.google.com) - The #1 resource for free and easy-to-use webfonts.
- [FontPair](https://fontpair.co) - Font Pair helps designers pair Google Fonts together. Beautiful Google Font combinations and pairs.
- [Fontjoy](https://fontjoy.com) - Fontjoy helps designers choose the best font combinations. Mix and match different fonts for the perfect pairing.
- [Fonts Arena](https://fontsarena.com) - Free fonts, free alternatives to premium fonts, done-for-you-research articles.

### 🎨 ILLUSTRATIONS

- [unDraw](https://undraw.co/illustrations) - Browse to find the illustrations that fit your needs and click to download.
- [freepik](https://www.freepik.com) - Free graphic resources.
- [DrawKit](https://www.drawkit.io) - Hand-drawn vector illustration and icon resources, perfect for your next project.

### 💧 ICONS

- [Font Awesome](https://fontawesome.com) - Vector icons and social logos.
- [Ionicons](https://ionicons.com) - Open-Sourced and MIT licensed icon pack.
- [icons8](https://icons8.com/icons) - Download free icons in PNG and SVG.
- [flaticon](https://www.flaticon.com) - Free vector icons in SVG, PSD, PNG, EPS format or as ICON FONT.
- [Simple Icons](https://simpleicons.org) - 1463 Free SVG icons for popular brands.

<hr>

# Front-end Framework Learning Resources

### ⚡ JAVASCRIPT

- [freeCodeCamp](https://www.freecodecamp.org/learn) - Best free resource to learn JavaScript interactively.
- [JavaScript.info](https://javascript.info) - Modern JavaScript Tutorial.
- [JavaScript Design Patterns](https://addyosmani.com/resources/essentialjsdesignpatterns/book/)
- [JavaScript Reference By MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference)
- [Eloquent JavaScript](https://eloquentjavascript.net) - This is a book about JavaScript, programming, and the wonders of the digital. You can read it online here.
- [JavaScript30](https://javascript30.com) - 30 days vanilla JS coding challenge. Build 30 things in 30 days with 30 tutorials.
- [DOM Manipulation Reference](http://youmightnotneedjquery.com)
- [How JavaScript works](https://blog.sessionstack.com/how-javascript-works-event-loop-and-the-rise-of-async-programming-5-ways-to-better-coding-with-2f077c4438b5)
- [JavaScript Event Reference](https://developer.mozilla.org/en-US/docs/Web/Events)
- [Mostly Adequate Guide to Functional Programming](https://mostly-adequate.gitbooks.io/mostly-adequate-guide/) - Excellent primer to functional programming using JavaScript.
- [Functional-Light JavaScript](https://github.com/getify/Functional-Light-JS) - This book explores the core principles of functional programming (FP) as they are applied to JavaScript.
- [Code School](https://www.codeschool.com/learn/javascript) - From Basics to Best Practices. Different courses related to JavaScript.
- [Functional programming](http://reactivex.io/learnrx/) - Learn basic principles of functional programming in an interactive way by using map, filter, concatAll, reduce and zip.
- [Learn JavaScript Online](https://learnjavascript.online) - Interactive JavaScript course with spaced repetiton flashcards app.
- [Exercism JavaScript Track](https://exercism.io/tracks/javascript) - Exercism provides individual practice and mentor-based learning for free.

<hr>

# ⚡ REACT

### Why React?
- [JS Apps at Facebook](https://www.youtube.com/watch?v=GW0rj4sNH2w)
- [React: Rethinking best practices](https://www.youtube.com/watch?v=x7cQ3mrcKaY)
- [React](https://facebook.github.io/react/)
- [React Docs - Quick Start section](https://facebook.github.io/react/docs/installation.html) `basic`
- [The Road to learn React](https://leanpub.com/the-road-to-learn-react) `basic`

### ES2015+
- [Learn ES6 (ECMAScript 2015)](https://egghead.io/courses/learn-es6-ecmascript-2015) `basic`
- [Exploring ES6](http://exploringjs.com/es6/) `advanced`
- [Exploring ES2016 and ES2017](https://leanpub.com/exploring-es2016-es2017/read) `advanced`

### Routing
- [React Router Docs](https://react-router.now.sh/) `basic`

### State Management
#### [Redux](http://redux.js.org/)
- [Getting Started with Redux](https://egghead.io/courses/getting-started-with-redux) `basic`
- [Building React Applications with Idiomatic Redux](https://egghead.io/courses/building-react-applications-with-idiomatic-redux) `advanced`

### Bundlers
#### [Webpack](https://webpack.js.org/)
- [Get Started with Webpack](https://webpack.js.org/get-started/)

### Build Stuff
- [Several project ideas](https://react.rocks/)
- [React - TodoMVC](http://todomvc.com/examples/react/#/)
- [Bootstrapping a React project](https://auth0.com/blog/bootstrapping-a-react-project/)
- [Build a Weather app](http://academy.plot.ly/react/1-introduction/)
- [The SoundCloud Client in React + Redux](http://www.robinwieruch.de/the-soundcloud-client-in-react-redux/)
- A Primer on the React Ecosystem: [1](http://patternhatch.com/2016/07/06/a-primer-on-the-react-ecosystem-part-1-of-3/), [2](http://patternhatch.com/2016/08/02/a-primer-on-the-react-ecosystem-part-2-of-3/) and 3.
- [Building a React/Redux App with JSON Web Token (JWT) Authentication](http://blog.slatepeak.com/build-a-react-redux-app-with-json-web-token-jwt-authentication/)

Want to goo deep in React? Visit  [React-Learning](https://github.com/ericdouglas/react-learning)
 
<hr>

### 🎮 APIs

- [Quotes REST API](http://quotes.rest) - They Said So has more than 1 million+ quotes in the database, the largest such database in the world. And Quotes API gives easy way to access the data.
- [OpenWeather](https://openweathermap.org/guide) - Simple and fast and free weather API from OpenWeatherMap you have access to current weather data, hourly, 5- and 16-day forecasts.
- [Public APIs](https://public-apis.io) - A collective list of more than 1000 Free Public and Open REST APIs for developers.
- [SWAPI](https://swapi.dev) - The Star Wars API.
- [JSONPlaceholder](https://jsonplaceholder.typicode.com) - Free to use fake Online REST API for testing and prototyping.

### ⚡ NODEJS

- [Node.js Tutorial](https://www.youtube.com/playlist?list=PL4cUxeGkcC9jsz4LDYc6kv3ymONOKxwBU) - Node.js Crash Course Tutorial by Net Ninja.
- [You Don't Know Node.js](https://github.com/azat-co/you-dont-know-node)

- [The Art of Node](https://github.com/maxogden/art-of-node#readme) - Introductory tutorial covering the basics. 
- [NodeSchool](https://nodeschool.io) - Interactive self guided workshops you can also do on your own.
- [Node Patterns](http://nodepatternsbooks.com) - Short books about code and networking patterns related to Node.js.
- [Learn Node](https://learnnode.com) - A premium training course to learn to build apps with Node.js, Express, MongoDB.
- [The Node Way](http://thenodeway.io) - An entire philosophy of Node.js best practices and guiding principles exists for writing maintainable modules, scalable applications, and code that is actually pleasant to read.
- [Express.js Security Tips](https://www.freecodecamp.org/news/express-js-security-tips/) - How You Can Save and Secure Your App.
- [Awesome Nodejs](https://github.com/sindresorhus/awesome-nodejs) - Delightful Node.js packages and resources.
- [nodebestpractices](https://github.com/goldbergyoni/nodebestpractices) - Huge list of best practices for building node apps. Important for big projects.

### 😐 Learn GIT 

- [ Git Handbook](https://guides.github.com/introduction/git-handbook/) 
Git, GitHub, DVCS, oh my! Learn all the lingo and the basics of Git.
-  [Cheat Sheets](https://training.github.com/) 
Keep these handy! Reference sheets covering Git commands, features, SVN migrations, and bash. Available in a multiple languages.

-  [Learn Git branching](https://learngitbranching.js.org/) 
Try Git commands right from your web browser. Featuring some of your soon-to-be favorites: branch, add, commit, merge, revert, cherry-pick, rebase!

-  [Visualizing Git](http://git-school.github.io/visualizing-git/) 
Look under the hood! Explore how Git commands affect the structure of a repository within your web browser with a free explore mode, and some constructed scenarios.

-  [Git-It](https://github.com/jlord/git-it-electron#what-to-install) 
You’ve downloaded Git, now what? Download Git-It to your machine and you’ll get a hands-on tutorial that teaches you to use Git right from your local environment, using commands on real repositories.

- [OH shit, Git!?!](https://ohshitgit.com/) - The amazing way to learn Git. 

<hr>

# Prepare for Interview (Questions)
-  [Front-end Developer Interview Questions](https://h5bp.org/Front-end-Developer-Interview-Questions/)  - A list of helpful front-end related questions you can use to interview potential candidates, test yourself or completely ignore.
-  [Front End Interview Handbook](https://yangshun.github.io/front-end-interview-handbook/en/html-questions/) - Go from zero to front end interview hero with this handbook. No prior interview experience needed.
-  [Front-end Developer Interview Questions](http://flowerszhong.github.io/) - A list of helpful front-end related questions you can use to interview potential candidates, test yourself or completely ignore. 

<hr>
## Misc (Resources by people who have commented below)

- [Self-host google fonts](https://google-webfonts-helper.herokuapp.com/fonts)
- [Check security headers for your website](https://securityheaders.com/)
- [Test website performance](https://web.dev/measure/)
- [Free Icons](https://reactsvgicons.com/react-svg-iconsets)
- [Color Contrast Analyzer](https://dequeuniversity.com/rules/axe/3.0/color-contrast)

<hr>

# Monetization for small creator
Read [here](https://blog.rahulism.co/monetization-for-small-creators) to find out. 
You can join the amazing website  [Buy Me A Coffee](buymeacoff.ee/?via=rahxuls) and get support and also start a membership if you're a content writer. 

<hr>
# ⚡Giveaway ⚡
I am giving away any course you need on Udemy. Any price any course. 
Steps to enter the giveaway
- React to this post
- Answer a simple question 
- And fill this **Giveaway Form**
<iframe src="https://docs.google.com/forms/d/e/1FAIpQLScpjGlKofKbKQhm6b1A_1qATxunIWApHrqv_hXb6wdlaHSklQ/viewform?embedded=true" width="650" height="755" frameborder="0" marginheight="0" marginwidth="0">Loading…</iframe>

Or use this [ Link ](https://forms.gle/1XvSyuBGRJq5Lekd9) to fill the form.  

**Winner will be announced after a Week**

<hr>
I usually make content related to Tech, Coding and Many More things. I give very amazing content to my supporters and many more features. You can support me here -> [Support Me](https://www.buymeacoffee.com/rahxuls)
<hr>

Thanks For Seeing this post. <br />
If you didn't liked this post let me know in the comments <br />

# Help Me

Get weekly newsletter of amazing articles i posted this week and some offers or announcement. Subscribe from <a href="https://mailchi.mp/9f73b65b9c38/rahulism" target="_blank">Here</a>


<a href="https://www.buymeacoffee.com/rahxuls" target="_blank"> 
<img src="https://res.cloudinary.com/rahulism1/image/upload/v1608182430/bmc_nbxakd.png"></a>