Bulletproof-Front-End-Resource-List

All the resources you will need to learn and become a professional Front-End Developer!

Bulletproof-Front-End-Resource-List

(No affiliate links)

>> Developer Environment <<

TEXT-EDITOR (IDE)

Visual Studio Code: Most popular code editor. Free. Built on open source. Runs everywhere.

~VSCode Extentions

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.

VERSION CONTROL

~Tools

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.

~Learning

Learn Git Branching: The most visual and interactive way to learn Git on the web.

BROWSER

Google Chrome: The browser built by Google.

~Google Chrome Extensions

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.

DEPLOYMENT

>> Languages <<

HTML

~Tools

~Information

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.

CSS

~Preprocessors

Sass: CSS with superpowers.
PostCSS: Transforming styles with JS plugins.

~Generators

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.

~Frameworks

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.

~Animations

~Games

Flexbox Froggy: Game where you help Froggy and friends by writing CSS code!
CSS Grid Garden: Write CSS code to grow your carrot garden!

~Information

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.

JAVASCRIPT

~API's

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.

~Regular Expressions

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.

~Compilers

Babel: Compiler for writing next generation JavaScript.

~Alternatives

Typescript: Strongly typed programming language that builds on JavaScript.

~Mental Models

Just JavaScript: Explore the JavaScript Universe. Rebuild your mental model from the inside out.

~Games

JavaScript Robot: Control a robot using JavaScript

~Information

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.

>> Design <<

DESIGN TOOLS

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.

WIREFRAMING

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.

COLORS

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.

IMAGES

~Stock Photos

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 Placeholder

Lorem Picsum: Image placeholder service

~Image Altering

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.

~Illustrations

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.

TYPOGRAPHY

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.

ICONS

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

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.

THEORY

Laws of UX: Collection of best practices that designers can consider when building user interfaces.

INSPIRATION

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.

>> Optimizations <<

SEO

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.

ACCESSIBILITY

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.

PERFORMANCE

Google Lighthouse: Open-source, automated tool for improving the quality of web pages.
PageSpeed Insights: Make your web pages fast on all devices.

TESTING

Intern.: Write tests in JavaScript and TypeScript using any style you like (TDD, BDD, whatever!).

>> Career <<

Tech Interview Handbook: Free curated interview preparation materials for busy engineers.
Getting a Gig: Guide for getting a gig as a tech student.

RESUME

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.

APPLICATIONS

INTERVIEWS

~Behavioral

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.

~Technical

~Other

HashNode: Everything you need to start blogging as a developer!

WilderDev/Bulletproof-Front-End-Resource-List

ErrorLooks like something went wrong!

About

Topics

Resources

Uh oh!

Stars

Watchers

Forks

Error
Looks like something went wrong!