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
  • >> Developer Environment <<
    • TEXT-EDITOR (IDE)
      • ~VSCode Extentions
    • VERSION CONTROL
      • ~Tools
      • ~Learning
    • BROWSER
      • ~Google Chrome Extensions
    • DEPLOYMENT
  • >> Languages <<
    • HTML
      • ~Tools
      • ~Information
    • CSS
      • ~Preprocessors
      • ~Generators
      • ~Frameworks
      • ~Animations
      • ~Games
      • ~Information
    • JAVASCRIPT
      • ~API's
      • ~Regular Expressions
      • ~Compilers
      • ~Alternatives
      • ~Mental Models
      • ~Games
      • ~Information
  • >> Design <<
    • DESIGN TOOLS
    • WIREFRAMING
    • COLORS
    • IMAGES
      • ~Stock Photos
      • ~Image Placeholder
      • ~Image Altering
      • ~Illustrations
    • TYPOGRAPHY
    • ICONS
    • FAVICON
    • THEORY
    • INSPIRATION
  • >> Optimizations <<
    • SEO
    • ACCESSIBILITY
    • PERFORMANCE
    • TESTING
  • >> Career <<
    • RESUME
    • APPLICATIONS
    • INTERVIEWS
      • ~Behavioral
      • ~Technical
      • ~Other
  • DOWNLOAD

(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

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

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

>> Languages <<

HTML

~Tools

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

~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

• Animista: CSS Animations on demand.

• Animate.css: Just-add-water CSS 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

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

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

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