All the resources you will need to learn and become a professional Front-End Developer!
- Bulletproof-Front-End-Resource-List
(No affiliate links)
- Visual Studio Code: Most popular code editor. Free. Built on open source. Runs everywhere.
-
LiveServer: Launch a development local Server with live reload feature for static & dynamic pages.
-
Prettier: 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.
-
Live Share: Collaboratively edit and debug with others in real time, regardless what programming languages you're using or app types you're building.
-
VSCode Icons: Bring icons to your Visual Studio Code.
-
Auto Rename Tag: Automatically rename paired HTML/XML tag, same as Visual Studio IDE does.
-
Better Comments: Help you create more human-friendly comments in your code.
-
JavaScript ES6 Snippets: Code snippets for JavaScript in ES6 syntax.
-
GitLens: Supercharge the Git capabilities built into Visual Studio Code — Visualize code authorship at a glance via Git blame annotations and code lens, seamlessly navigate and explore Git repositories, gain valuable insights via powerful comparison commands, and so much more.
-
Path Intellisense: Visual Studio Code plugin that autocompletes filenames.
-
Git: Free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency.
-
GitHub: Where the world builds software.
-
GitHub Desktop: GitHub Desktop simplifies your development workflow.
-
README Generator: The easiest way to create a README.
- Learn Git Branching: The most visual and interactive way to learn Git on the web.
- Google Chrome: The browser built by Google.
-
Wappalyzer: Technology profiler that shows you what websites are built with.
-
CSS Peeper: Extract CSS and build beautiful styleguides.
-
JSON Viewer Pro: Visualise JSON response in awesome Tree and Chart views.
-
Octotree: Enhances GitHub code review and exploration.
-
Web Maker: Offline playground for your web experiments.
-
Go Full Page: Simplest way to take a full page screenshot of your current browser window.
-
ColorPicker Eyedropper: Zoomed eyedropper & color chooser tool that allows you to select color values from webpages and more.
-
Web Developer Checklist: Analyses any web page for violations of best practices.
-
Netlify: Build, deploy, & scale modern web projects.
-
Vercel: Combines the best developer experience with an obsessive focus on end-user performance.
-
What the tag?!: Quickly find out which HTML tag to use when.
-
HTML Table Generator: Use this HTML Table Generator to create tables on the fly.
-
Browser Default Styles: Search elements, filter engines, find browser default styles.
-
Lori Ipsum: The "lorem ipsum" generator that doesn't suck.
-
HTML Best Practices: For writing maintainable and scalable HTML documents.
-
Idiomatic HTML: Principles of writing consistent, idiomatic HTML.
-
7 useful HTML attributes you may not know: List of HTML attributes that many beginners don't know, but that can be helpful.
-
Box-Shadow Generator: Create customized CSS box-shadows.
-
Gradient Generator: Happy little website and free tool that lets you create a gradient background for websites.
-
Neumorphism Generator: Generate Soft-UI CSS code.
-
TailwindCSS: Rapidly build modern websites without ever leaving your HTML.
-
Bootstrap: Build fast, responsive sites with Bootstrap.
-
Materialize: Modern responsive front-end framework based on Material Design.
-
Animista: CSS Animations on demand.
-
Animate.css: Just-add-water CSS animations.
-
Flexbox Froggy: Game where you help Froggy and friends by writing CSS code!
-
CSS Grid Garden: Write CSS code to grow your carrot garden!
-
Well Documented CSS Project: Experience and expectations the author has towards their vision of well-documented stylesheets.
-
Complete Guide to Grid: Comprehensive guide to CSS grid, focusing on all the settings both for the grid parent container and the grid child elements.
-
Relearn CSS Layouts: Teach you how to better harness the built-in algorithms that power browsers and CSS.
-
CSS Guides: Curated guides on major topics covered by Smashing articles, conference talks and others.
-
10 modern layouts in 1 line of CSS: Highlights a few key terms and how much detail can be described in a single line of code.
-
Rapid API: Great place to start exploring APIs that are free to test, specifically updated for 2021.
-
Programmable Web: Largest API Directory on the Web.
-
JSON Placeholder: Free fake API for testing and prototyping.
-
Postman: API platform for building and using APIs. Postman simplifies each step of the API lifecycle and streamlines collaboration so you can create better APIs—faster.
-
RegExr: Online tool to learn, build, & test Regular Expressions (RegEx / RegExp).
-
RegEx Crossword: Crossword puzzle game, where the crossword clues are defined using regular expressions.
- Babel: Compiler for writing next generation JavaScript.
- Typescript: Strongly typed programming language that builds on JavaScript.
- Just JavaScript: Explore the JavaScript Universe. Rebuild your mental model from the inside out.
- JavaScript Robot: Control a robot using JavaScript
-
JavaScript: The Good Parts: Exposes the goodness in JavaScript, an outstanding dynamic programming language.
-
17 JavaScript One-Liners: Part 1 of a series on life-saving JavaScript one-liners.
-
What the heck is the event loop anyway?: With some handy visualisations, and fun hacks, let’s get an intuitive understanding of what happens when JavaScript runs.
-
Figma: Connects everyone in the design process so teams can deliver better products, faster.
-
Sketch: Gives you all the tools you need for a truly collaborative design process.
-
Whimsical: Unified workspace for thinking and collaboration.
-
Flowkit: User flows right inside your favorite design tool.
-
WireframeCC: Create better wireframes with an app fine-tuned for wireframing.
-
Coolors: Generate and collect beautiful color palettes on the go.
-
Palettable: Generate beautiful color palettes using the knowledge of millions of designers.
-
Happy Hues: Color palette inspiration site that acts as a real world example as to how the colors could be used in your design projects.
-
Khroma: Khroma uses AI to learn which colors you like and creates limitless palettes for you to discover, search, and save.
-
Color Hunt: Color Palettes for Designers and Artists.
-
Unsplash: The internet’s source of freely-usable images. Powered by creators everywhere.
-
Pexels: The best free stock photos, royalty free images & videos shared by creators.
-
Pixbay: Stunning free images & royalty free stock.
-
Burst: Download free, high-resolution images.
- Lorem Picsum: Image placeholder service
-
Image Compression: TinyPNG uses smart lossy compression techniques to reduce the file size of your WEBP, JPEG and PNG files.
-
Remove BG: Remove Image Background 100% Automatically and Free.
-
humaaans: Mix-&-match illustrations of people with a design library.
-
blush: Easily create and customize stunning illustrations with collections made by artists across the globe. Try it, it’s kind of fun.
-
unDraw: Create better designed websites, products and applications. Browse to find the images that fit your messaging, automagically customise the color to match your brand and use it as a normal image, embedded code or directly in your design workflow.
-
Control.: Combo set of 108 customizable illustrations.
-
Google Fonts: Making the web more beautiful, fast, and open through great typography & icons.
-
Typewolf: What’s Trending in Type.
-
BEfonts: Free Fonts for Designers.
-
Fonts in the Wild: View font used in real applications.
-
Hero Icons: MIT-licensed icons.
-
Bootstrap Icons: Free, high quality, open source icon library with over 1,500 icons.
-
Noun Project: Icons and Photos For Everything.
-
Font Awesome: Get vector icons and social logos on your website with Font Awesome, the web's most popular icon set and toolkit.
-
Flat Icon: Download free icons and stickers for your projects. Resources made by and for designers. PNG, SVG, EPS, PSD and BASE 64 formats.
-
Google Font Icons: Material Icons are available in five styles and a range of downloadable sizes and densities. The icons are based on the core Material Design principles and metrics.
-
Favicon Generator: Provides an easy way to convert any GIF, PNG or JPEG to ICO which is supported by all modern web browsers.
-
Maskable: Generate maskable PWA icons before adding them to your web app manifest.
-
Real Favicon Generator: Favicon Generator. For real.
-
Favicon Converter: Quickly generate your favicon from an image by uploading your image below. Download your favicon in the most up to date formats.
- Laws of UX: Collection of best practices that designers can consider when building user interfaces.
-
Awwwards: The awards of design, creativity and innovation on the internet.
-
Dribbble: Community where designers gain inspiration, community, and jobs and is your best resource to discover and connect with designers worldwide.
-
Panda: The homepage for your favorite websites.
-
Codepen: The best place to build, test, and discover front-end code.
-
Godly: Astronomically good web design inspiration every single day.
-
Behance: Leading online platform to showcase & discover creative work.
-
CheckBot: Finds critical SEO, speed & security problems before your website visitors do.
-
Search Engine Optimization (SEO) Starter Guide: Complete overview of the basics of SEO according to Google's best practices.
-
Ubersuggest: How to win the game of SEO.
-
Can I Use: Provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers.
-
A11y Project Checklist: Strives to be a living example of how to create beautiful, accessible, and inclusive digital experiences.
-
Colorable: Color combination contrast tester.
-
The Importance Of Manual Accessibility Testing: Learn how to test your websites and web apps to ensure they’re accessible.
-
A Complete Guide To Accessible Front-End Components: Look into reliable accessible components: from tabs and tables to toggles and tooltips.
-
Google Lighthouse: Open-source, automated tool for improving the quality of web pages.
-
PageSpeed Insights: Make your web pages fast on all devices.
- Intern.: Write tests in JavaScript and TypeScript using any style you like (TDD, BDD, whatever!).
-
Tech Interview Handbook: Free curated interview preparation materials for busy engineers.
-
Getting a Gig: Guide for getting a gig as a tech student.
-
Front End Developer Resume Example & Guide: 20+ tips on building your Front-End Developer resume.
-
Front End Developer Resume Examples & Guide for 2021: Customize this resume with ease using our seamless online resume builder.
-
Here are 4 best ways to apply for software engineer jobs: Four ways to apply for jobs that are particularly effective.
-
8 steps to finding the perfect software engineering job: Eight steps you can take to find and ride that rare unicorn down your chosen career path.
-
10 Behavioral Interview Questions for Software Engineers: 10 common software engineer behavioral interview questions with sample answers for you to review.
-
45 software developer behavioral questions for non-technical interviews: 45 behavioral interview question examples.
-
AlgoExpert: The ultimate resource to prepare for coding interviews. Everything you need, in one streamlined platform.
-
LeetCode: Best platform to help you enhance your skills, expand your knowledge and prepare for technical interviews.
-
CodeWars: Improve your development skills by training with your peers using coding challenges.
-
Front-end-Developer-Interview-Questions: List of helpful front-end related questions you can use to interview potential candidates, test yourself or completely ignore.
-
Coding Interview University: Complete computer science study plan to become a software engineer.
-
123 Essential JavaScript Questions: 123 JavaScript interview Questions.
- HashNode: Everything you need to start blogging as a developer!