/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

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

(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

BROWSER

~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

  • Netlify: Build, deploy, & scale modern web projects.

  • Vercel: Combines the best developer experience with an obsessive focus on end-user performance.

>> Languages <<

HTML

~Tools

~Information

CSS

~Preprocessors

  • Sass: CSS with superpowers.

  • PostCSS: Transforming styles with JS plugins.

~Generators

~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

~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

~Information

>> 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

~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

ACCESSIBILITY

PERFORMANCE

TESTING

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

>> Career <<

RESUME

APPLICATIONS

INTERVIEWS

~Behavioral

~Technical

  • 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.

~Other

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