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
- 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.
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 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.
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.
📄 TERMINALS FOR WINDOWS
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.
- 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.
- 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
Want to goo deep in React? Visit React-Learning
- 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.
- 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.
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
Get weekly newsletter of amazing articles i posted this week and some offers or announcement. Subscribe from Here
Join Hacker Noon
Create your free account to unlock your custom reading experience.