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

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 - Will help you create cool sh*t DevDojo - 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! 👩💻👨💻 Hashnode - DEV is a community of software developers getting together to help one another out. Dev.to - An Independent Tech Media Site Hackernoon Must have Chrome extensions - Get the latest new about the Dev community in your chrome default tab. DailyDev - Get to know which font is the website using. WhatFont - Get to know which color is the website using by just dropping the pen. ColorPick Eyedropper - Get to know the tech stack of any website Wappalyzer - Amazing amount of tools this extensions has. Web Developer - 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. React developer tools - Open source browser design tools Open source web design debug tools built with JavaScript: a FireBug for designers. Visbug VS Code Must have extensions - The ultimate extension to Code faster with AI completions. Tabnine - 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. NPM - 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. Prettier - Find that missing tag with ease by color-coding every bracket set in your environment. Rainbow Brackets - Organize your environment by applying an appropriate icon set to visually identify files by type. VS Code Great Icons - Services like unsplash.it and placehold.it are extremely useful. Now you can save time by adding placeholder images right from within VS Code Placeholder Images - The official VueJS extension Vetur - The extension uses the ESLint library installed in the opened workspace folder. ESLint - Launch a development local Server with live reload feature for static & dynamic pages. Live Server - This extension will move the most relevant completion suggestions to the top. Visual Studio IntelliCode - This extension allows you to debug your JavaScript code running in the Chrome browser, from inside of VS Code. Debugger For Chrome - Debug your JavaScript code in the Microsoft Edge browser Debugger for Microsoft Edge - Debug your web application or browser extension in Firefox Debugger for Firefox - A customizable extension for colorizing matching brackets VS Code themes Bracket Pair Colorizer 2 - Atom's iconic One Dark theme for Visual Studio Code One Dark Pro - The most epic theme now for Visual Studio Code Material Theme - A beautifully warm dual theme for Visual Studio Code Horizon Theme - Dark theme based on mixing swatch of Ayu Theme, Andromeda Theme, Monokai, Material Colors, Original Gruvbox Darktooth Colors, and Dracula Colors. Mayukai Theme 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 😁 - The MDN Web Docs site provides information about Open Web technologies including HTML, CSS, and APIs for both Web sites and progressive web apps. MDN Web Docs - Fast, offline, and free documentation browser for developers. Search 100+ docs in one web app. DevDocs - A modest collection of cheatsheets. DEVHINTS - A visual cheatsheet for CSS flex layout. FLEX - Malven - A visual cheatsheet for CSS grid layout. GRID - Malven 🌐 HOW DOES IT WORKS? - How does the Internet Works? How the Internet Works Video - A brief explanations on, how does the Internet works? How the Internet Works Brief Videos - How DNS works? DNS - How HTTPS works? HTTPS For HTML and CSS 🚀 - Free course to learn Web Development.Flexbox Froggy - A game that helps you to learn CSS Flex. freeCodeCamp - A Complete Guide to Flexbox.Grid Garden - A game for learning CSS Grid. CSS TRICKS - Flexbox - A comprehensive guide to CSS grid, focusing on all the settings both for the grid parent container and the grid child elements. CSS TRICKS - A Complete Guide to Grid - A comprehensive guide to help you understand and learn CSS Grid Layout, by Jonathan Suh. Learn CSS Grid - Up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers. Can I Use - Simple and to the point explanations. HTML Dog - Unlimited amount of tutorials Marksheet - Amazing way of learning. The ODIN Project - CSS Animations. CSS Effects - Create basic or complex CSS animations with a visual timeline editor. Keyframes @keyframe - Play with a collection of ready to use CSS animations. Animista - Friendly web development tutorials for complete beginners. Interneting Is Hard - BEM naming cheat sheet. BEM - Autoprefixer is a PostCSS plugin which parses your CSS and adds vendor prefixes. Autoprefixer - Online CSS Formatter, CSS Beautifier. CSS Formatter - How To Use Our Placeholders. Just specify the image size after our URL and you'll get a placeholder image. Placeholder 📝 ONLINE IDE, EDITOR goormIDE CodeSandbox CodePen Repl.it JSFiddle 📷 IMAGE RESOURCES - Free images and photos. Unsplash - Free stock photos. Pexels - LottieFiles is a collection of animations designed for - Lottie - gone are the days of bugging your developer. LottieFiles - 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. RemovalAI - Free image or video. Pixabay 👓 ACCESSIBILITY - Seven easy-to-implement - guidelines to design a more accessible web. Accessibility Blog - Medium - Practical approaches to Universal Design for making your website/webapp accessible to everyone. Accessibility Cheatsheet 📄 TERMINALS FOR WINDOWS Windows Terminal FluentTerminal 📺 Hyper YOUTUBE CHANNELS Traversy Media freeCodeCamp.org Codevolution Fireship The Net Ninja Wes Bos FONTS AND TYPOGRAPHY - The #1 resource for free and easy-to-use webfonts. Google Fonts - Font Pair helps designers pair Google Fonts together. Beautiful Google Font combinations and pairs. FontPair - Fontjoy helps designers choose the best font combinations. Mix and match different fonts for the perfect pairing. Fontjoy - Free fonts, free alternatives to premium fonts, done-for-you-research articles. Fonts Arena 🎨 ILLUSTRATIONS - Browse to find the illustrations that fit your needs and click to download. unDraw - Free graphic resources. freepik - Hand-drawn vector illustration and icon resources, perfect for your next project. DrawKit 💧 ICONS - Vector icons and social logos. Font Awesome - Open-Sourced and MIT licensed icon pack. Ionicons - Download free icons in PNG and SVG. icons8 - Free vector icons in SVG, PSD, PNG, EPS format or as ICON FONT. f laticon - 1463 Free SVG icons for popular brands. Simple Icons Front-end Framework Learning Resources ⚡ JAVASCRIPT - Best free resource to learn JavaScript interactively. freeCodeCamp - Modern JavaScript Tutorial. JavaScript.info JavaScript Design Patterns JavaScript Reference By MDN - This is a book about JavaScript, programming, and the wonders of the digital. You can read it online here. Eloquent JavaScript - 30 days vanilla JS coding challenge. Build 30 things in 30 days with 30 tutorials. JavaScript30 DOM Manipulation Reference How JavaScript works JavaScript Event Reference - Excellent primer to functional programming using JavaScript. Mostly Adequate Guide to Functional Programming - This book explores the core principles of functional programming (FP) as they are applied to JavaScript. Functional-Light JavaScript - From Basics to Best Practices. Different courses related to JavaScript. Code School - Learn basic principles of functional programming in an interactive way by using map, filter, concatAll, reduce and zip. Functional programming - Interactive JavaScript course with spaced repetiton flashcards app. Learn JavaScript Online - Exercism provides individual practice and mentor-based learning for free. Exercism JavaScript Track ⚡ REACT Why React? JS Apps at Facebook React: Rethinking best practices React React Docs - Quick Start section basic The Road to learn React basic ES2015+ Learn ES6 (ECMAScript 2015) basic Exploring ES6 advanced Exploring ES2016 and ES2017 advanced Routing React Router Docs basic State Management basic Redux Getting Started with Redux Building React Applications with Idiomatic Redux advanced Bundlers Webpack Get Started with Webpack Build Stuff Several project ideas React - TodoMVC Bootstrapping a React project Build a Weather app The SoundCloud Client in React + Redux A Primer on the React Ecosystem: , and 3. 1 2 Building a React/Redux App with JSON Web Token (JWT) Authentication Want to goo deep in React? Visit React-Learning 🎮 APIs - 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. Quotes REST API - Simple and fast and free weather API from OpenWeatherMap you have access to current weather data, hourly, 5- and 16-day forecasts. OpenWeather - A collective list of more than 1000 Free Public and Open REST APIs for developers. Public APIs - The Star Wars API. SWAPI - Free to use fake Online REST API for testing and prototyping. JSONPlaceholder - Auto-generate graphics with a single click with our API and integrations. Pixelixe - A full suite of image editing tools, with standalone solutions for the most common uses, tailored for businesses. You don’t need a designer. Pixelied ⚡ NODEJS - Node.js Crash Course Tutorial by Net Ninja. Node.js Tutorial You Don't Know Node.js - Introductory tutorial covering the basics. The Art of Node - Interactive self guided workshops you can also do on your own. NodeSchool - Short books about code and networking patterns related to Node.js. Node Patterns - A premium training course to learn to build apps with Node.js, Express, MongoDB. Learn Node - 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. The Node Way - How You Can Save and Secure Your App. Express.js Security Tips - Delightful Node.js packages and resources. Awesome Nodejs - Huge list of best practices for building node apps. Important for big projects. nodebestpractices 😐 Learn GIT Git, GitHub, DVCS, oh my! Learn all the lingo and the basics of Git. Git Handbook Keep these handy! Reference sheets covering Git commands, features, SVN migrations, and bash. Available in a multiple languages. Cheat Sheets Try Git commands right from your web browser. Featuring some of your soon-to-be favorites: branch, add, commit, merge, revert, cherry-pick, rebase! Learn Git branching 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. Visualizing Git 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. Git-It - The amazing way to learn Git. OH shit, Git!?! Prepare for Interview (Questions) - A list of helpful front-end related questions you can use to interview potential candidates, test yourself or completely ignore. Front-end Developer Interview Questions - Go from zero to front end interview hero with this handbook. No prior interview experience needed. Front End Interview Handbook - A list of helpful front-end related questions you can use to interview potential candidates, test yourself or completely ignore. Front-end Developer Interview Questions Monetization for small creator You can join the amazing website and get support and also start a membership if you're a content writer Buy Me A Coffee 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