Hackernoon logoFree Tools That Will Help You Grow As A Front-End Developer In 2021 by@RAHULISM

Free Tools That Will Help You Grow As A Front-End Developer In 2021

Rahul Hacker Noon profile picture

@RAHULISMRahul

Developer and Blogger

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

  • Tabnine - The ultimate extension to Code faster with AI completions.
  • 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 bracketsVS 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

First of all you will need a check list for marking what all you have done in your projects or have learned.

You can see the below image for how the checklist will look like.

Link -> The Front-End Checklist

Frontend Development Roadmap

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.
  • LottieFiles - LottieFiles is a collection of animations designed for - Lottie - gone are the days of bugging your developer.
  • RemovalAI - Removal.AI is an emerging online image background remover online tool that uses AI and is better than any other Background remover in the market.
  • 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

Bundlers

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)

Monetization for small creator

You can join the amazing website Buy Me A Coffee and get support and also start a membership if you're a content writer

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

Support Me

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

Tags

Join Hacker Noon

Create your free account to unlock your custom reading experience.