DEV Community

loading...
Cover image for {FREE} Ultimate Resources for Front-End Development in 2021 + Giveaway⚡

{FREE} Ultimate Resources for Front-End Development in 2021 + Giveaway⚡

rahxuls profile image Rahul Updated on ・12 min read

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.


Blog your Journey

  • Hashnode - 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 - DEV is a community of software developers getting together to help one another out.
  • Hackernoon - An Independent Tech Media Site

Must have Chrome extensions

  • DailyDev - Get the latest new about the Dev community in your chrome default tab.
  • WhatFont - Get to know which font is the website using.
  • ColorPick Eyedropper - Get to know which color is the website using by just dropping the pen.
  • Wappalyzer - Get to know the tech stack of any website
  • Web Developer - Amazing amount of tools this extensions has.
  • React developer tools - 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 - Open source browser design tools Open source web design debug tools built with JavaScript: a FireBug for designers.

VS Code Must have extensions

  • NPM - 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 - 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 - Find that missing tag with ease by color-coding every bracket set in your environment.
  • VS Code Great Icons - Organize your environment by applying an appropriate icon set to visually identify files by type.
  • 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 - The official VueJS extension
  • ESLint - The extension uses the ESLint library installed in the opened workspace folder.
  • Live Server - Launch a development local Server with live reload feature for static & dynamic pages.
  • Visual Studio IntelliCode - This extension will move the most relevant completion suggestions to the top.
  • 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 - Debug your JavaScript code in the Microsoft Edge browser
  • Debugger for Firefox - Debug your web application or browser extension in Firefox
  • Bracket Pair Colorizer 2 - A customizable extension for colorizing matching brackets

VS Code themes

  • One Dark Pro - Atom's iconic One Dark theme for Visual Studio Code
  • Material Theme - The most epic theme now for Visual Studio Code
  • Horizon Theme - A beautifully warm dual theme for Visual Studio Code
  • Mayukai Theme - Dark theme based on mixing swatch of Ayu Theme, Andromeda Theme, Monokai, Material Colors, Original Gruvbox Darktooth Colors, and Dracula Colors.

General Resources

image.png

Learning Resources 📘

DOCS and Cheat sheets 😁

  • MDN Web Docs - 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 - Fast, offline, and free documentation browser for developers. Search 100+ docs in one web app.
  • DEVHINTS - A modest collection of cheatsheets.
  • FLEX - Malven - A visual cheatsheet for CSS flex layout.
  • GRID - Malven - A visual cheatsheet for CSS grid layout.

🌐 HOW DOES IT WORKS?

For HTML and CSS

  • freeCodeCamp - Free course to learn Web Development.
  • Flexbox Froggy - A game that helps you to learn CSS Flex.
  • CSS TRICKS - Flexbox - A Complete Guide to Flexbox.
  • Grid Garden - A game for learning CSS Grid.
  • CSS TRICKS - A Complete Guide to 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 - A comprehensive guide to help you understand and learn CSS Grid Layout, by Jonathan Suh.
  • Can I Use - Up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers.
  • HTML Dog - Simple and to the point explanations.
  • Marksheet - Unlimited amount of tutorials
  • The ODIN Project - Amazing way of learning.
  • CSS Effects - CSS Animations.
  • Keyframes - Create basic or complex CSS @keyframe animations with a visual timeline editor.
  • Animista - Play with a collection of ready to use CSS animations.
  • Interneting Is Hard - Friendly web development tutorials for complete beginners.
  • BEM - BEM naming cheat sheet.
  • Autoprefixer - Autoprefixer is a PostCSS plugin which parses your CSS and adds vendor prefixes.
  • CSS Formatter - Online CSS Formatter, CSS Beautifier.
  • Placeholder - How To Use Our Placeholders. Just specify the image size after our URL and you'll get a placeholder image.

📝 ONLINE IDE, EDITOR

📷 IMAGE RESOURCES

  • Unsplash - Free images and photos.
  • Pexels - Free stock photos.
  • Remove Photo Data - Remove personal data from photos before sharing them on the internet.
  • LottieFiles - LottieFiles is a collection of animations designed for - Lottie - gone are the days of bugging your developer.
  • removebg - Remove Image Background.
  • Pixabay - Free image or video.

👓 ACCESSIBILITY

📄 TERMINALS FOR WINDOWS

📺 YOUTUBE CHANNELS

🖋 FONTS AND TYPOGRAPHY

  • Google Fonts - The #1 resource for free and easy-to-use webfonts.
  • FontPair - Font Pair helps designers pair Google Fonts together. Beautiful Google Font combinations and pairs.
  • Fontjoy - Fontjoy helps designers choose the best font combinations. Mix and match different fonts for the perfect pairing.
  • Fonts Arena - Free fonts, free alternatives to premium fonts, done-for-you-research articles.

🎨 ILLUSTRATIONS

  • unDraw - Browse to find the illustrations that fit your needs and click to download.
  • freepik - Free graphic resources.
  • DrawKit - Hand-drawn vector illustration and icon resources, perfect for your next project.

💧 ICONS

  • Font Awesome - Vector icons and social logos.
  • Ionicons - Open-Sourced and MIT licensed icon pack.
  • icons8 - Download free icons in PNG and SVG.
  • flaticon - Free vector icons in SVG, PSD, PNG, EPS format or as ICON FONT.
  • Simple Icons - 1463 Free SVG icons for popular brands.

Front-end Framework Learning Resources

⚡ JAVASCRIPT


⚡ REACT

Why React?

ES2015+

Routing

State Management

Redux

Bundlers

Webpack

Build Stuff

Want to goo deep in React? Visit React-Learning


🎮 APIs

  • Quotes REST API - 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 - Simple and fast and free weather API from OpenWeatherMap you have access to current weather data, hourly, 5- and 16-day forecasts.
  • Public APIs - A collective list of more than 1000 Free Public and Open REST APIs for developers.
  • SWAPI - The Star Wars API.
  • JSONPlaceholder - Free to use fake Online REST API for testing and prototyping.

⚡ NODEJS

  • Node.js Tutorial - Node.js Crash Course Tutorial by Net Ninja.
  • You Don't Know Node.js

  • The Art of Node - Introductory tutorial covering the basics.

  • NodeSchool - Interactive self guided workshops you can also do on your own.

  • Node Patterns - Short books about code and networking patterns related to Node.js.

  • Learn Node - A premium training course to learn to build apps with Node.js, Express, MongoDB.

  • The Node Way - 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 - How You Can Save and Secure Your App.

  • Awesome Nodejs - Delightful Node.js packages and resources.

  • nodebestpractices - Huge list of best practices for building node apps. Important for big projects.

😐 Learn GIT

  • Git Handbook Git, GitHub, DVCS, oh my! Learn all the lingo and the basics of Git.
  • Cheat Sheets
    Keep these handy! Reference sheets covering Git commands, features, SVN migrations, and bash. Available in a multiple languages.

  • Learn Git branching
    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
    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
    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!?! - The amazing way to learn Git.


Prepare for Interview (Questions)


Misc (Resources by people who have commented below)


Monetization for small creator

Read here to find out.
You can join the amazing website Buy Me A Coffee and get support and also start a membership if you're a content writer.


⚡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 Loading…

Or use this Link to fill the form.

Winner will be announced after a Week



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

Thanks For Seeing this post.

If you didn't liked this post let me know in the comments

Help Me

Get weekly newsletter of amazing articles i posted this week and some offers or announcement. Subscribe from Here


Discussion (105)

pic
Editor guide
Collapse
majorkid profile image
Yasir Shariff

That's really comprehensive list

Collapse
rahxuls profile image
Rahul Author

Thank You so Much

Collapse
majorkid profile image
Yasir Shariff

Kudos on compiling it, helping me already.

Thread Thread
rahxuls profile image
Rahul Author

pdf version coming soon. If you participate in the giveaway then you will get it. An interactive way.

Thread Thread
majorkid profile image
Yasir Shariff

Already did

Collapse
alexbrasileiro profile image
Alex Brasileiro

Awesome list Rahul. I like to use OneTab Extension to save my history like some kind of "context", so I saved your entirely list and put in one link, if someone want the save your list ;)

one-tab.com/page/UEQrt698RUWue4ynD...

Collapse
gulajavaministudio profile image
Gulajava Ministudio

Thank you for nice article and great list.

And for vs code theme, i have some theme that interesting to try about, called Mayukai Theme.
You can try it in VS Code Marketplace

Collapse
ridhikgovind profile image
Ridhik Govind

This theme looks amazing !

Collapse
rahxuls profile image
Collapse
debvortex profile image
Max Brauer

The daily.dev plugin is awesome. Thanks a lot!

And you also might want to add xstate to the "state" section: xstate.js.org/
It allows to write state machines to mange the app flow in addition to work as a state holder (in the context). At work we started using it a lot lately and have greatly reduced the size of our react components. The business logic moved into xstate and with the visualizer, it's always all clear how the app came to its current state and how it can go from there.

Collapse
_echoar_ profile image
echoAR

For AR/VR/3D development - check out the echoAR documentation at docs.echoar.xyz to learn how to easily create AR/VR applications. Unity, which is a great game engine used for AR/VR, also has great learning tools at learn.unity.com/.

Collapse
rahxuls profile image
Rahul Author

Amazing.

Collapse
shaijut profile image
Shaiju T

Also squoosh from Google Chrome team, also helps to optimize image for web.

squoosh.app

Collapse
shaijut profile image
Shaiju T

Nice list 😄, you have given multiple options for each topic, so now the reader is confused to choose the best website for each topic. For example Reading all the sites to know just HTML and CSS is waste of time. I think we should just learn basics from one website and start building things.

Collapse
rahxuls profile image
Rahul Author

Agreed. But giving more time html and css is just waste. Giving more time to JS and other is awesome and helpful.

Collapse
imsalehmuhammad profile image
Saleh Muhammad

Thanks for sharing the list. I think you can also add the links below
Self-host google fonts:
google-webfonts-helper.herokuapp.c...
Check security headers for your website
securityheaders.com/
Test website performance:
web.dev/measure/
Free Icons
reactsvgicons.com/react-svg-iconsets
Color Contrast Analyzer
dequeuniversity.com/rules/axe/3.0/...

Collapse
rahxuls profile image
Collapse
dominikgorczyca profile image
Dominik Gorczyca

Found a goldmine!

Hey, can I ask you where do you get those cool cover images from? I checked your other posts and they are have a great cover images with text, do you make them yourself or do you have some source? I didn't find it here :(

Collapse
rahxuls profile image
Rahul Author

You can use Canva premium.

Collapse
kondrei profile image
kondrei

Nice list, thanks!

Collapse
rahxuls profile image
Rahul Author

Hope you liked it.

Collapse
codedspartant profile image
Coded Studio

Thanks alot
Good 👍 content.

But nothing related to Angular or Vue.

The community is always on one thing only, reactjs. Which I think is not a good thing

Collapse
rahxuls profile image
Rahul Author

Sorry brother give me some time. I will surely add for you. I'm sorry.

Collapse
rahulmaurya profile image
Raynax9

So concise and soo usefull thanks man to post these

Collapse
rahxuls profile image
Rahul Author

Hope you loved them all.

Collapse
munime profile image
Andrew AJ

Bless You Rahul!!!!

Collapse
felixasante profile image
felix asante

Thank you this great work ❤️😊

Collapse
bevilaquabruno profile image
Bruno Fernando Bevilaqua

A lot of content !! And we like it!

Collapse
joaodarocha profile image
João da Rocha

This is such a great list.
Thank you so much!

Collapse
rfinkley profile image
rfinkley

Great resources. Thanks for spending the time putting it together.

Collapse
muskansalampuria profile image
Collapse
kikekeys profile image
Enrique Tecayehuatl

"Front-end basics"

Collapse
nickster13x profile image
Nick Paul

Incredible list Rahul, thanks!

Collapse
chaitanyavsh profile image
Chaitu Maverick

You are a life saver Rahul. Good health and luck for you and your family. Thanks a lot for all the content.

Collapse
rahxuls profile image
Rahul Author

Yayay. Welcome brother. More on the way.

Collapse
dikshashukla455 profile image
dikshashukla455

Thank you so much

Collapse
adekola profile image
Adekola Olawale

Thank you for this exhaustive list of resources

Collapse
rahxuls profile image
Collapse
xavin616 profile image
Xavin616

This is hugely useful for me. Thank you.

Collapse
ndomalau profile image
Collapse
erileff profile image
Erica L. (she/they)

This is awesome, thanks!

Collapse
bobbyiliev profile image
Bobby Iliev

Great list! Thanks for sharing 🙌

I would also add Tails in there for everyone who likes TailwindCSS.

Collapse
abdullah_sajjad profile image
Abdullah Sajjad

You are surely gonna bookmark it.
resourcesmark.vercel.app/

Collapse
decereemyla profile image
md5

This is awesome. Thanks

Collapse
lexausart profile image
lexausart

Thanks!