All the resources you will need to learn and become a professional Front-End Developer!
All the resources you will need to learn and become a professional Front-End Developer!
(No affiliate links)
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.
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.
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.
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.
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.
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.