Frontend Roadmap

Welcome to the Roadmap! 📜

HTML

• HTML Reference - list of all HTML tags;
• HTML Base - the most modern reference for HTML and CSS;
• BEM - documentation of BEM methodology;
• W3C Validator - markup validation service;
• MarkSheet - free HTML and CSS tutorials;
• Codecademy - HTML concepts;

Cheatsheet

• BEM Cheatsheet - simple BEM cheat sheet;
• HTML DOM - how to manage HTML DOM;

Examples

• HTML Tips and Tricks - "bad practies" of HTML;
• HTML Rules - simple markup rules;
• HTML Template - basic SEO HTML Template;
• HTML Academy Style - HTML Academy Code Style;
• Email Framework - build responsive HTML email templates;
• CSS

Design

Design systems

• Mockplus - all-in-one product design platform for prototyping, collaboration, and design systems;
• Media Queries - examples of media queries;
• Call To Idea - light up your imagination;
• Daily Design - daily UI design components and pages;

IDE

• Photopea - free online editor supporting PSD, XCF, Sketch, XD and CDR formats;
• Figma - cloud-based design tool;
• Sizzy - the browser for developers;

Services

• Design Converter - convert PSD designs to Sketch;
• Font Size Conversion - font size conversion: pixel-point-em-rem-percent;
• PNG to ICO Converter - free online PNG to ICO file converter;
• TinyPNG - smart PNG and JPEG compression;
• Optimizilla - online image optimizer uses a smart combination of the best optimization;
• Favicon - favicon generators;
• Type Scale - visual type scale calculator;

Github repositories

• Animockup - Create animated mockups in your browser and export it;

CSS

• CSS Reference #1 - list of all CSS properties;
• CSS Reference #2 - extensive CSS reference with all the important properties;

Examples

• Flexbox Froggy - game for learning CSS flexbox;
• Grid Garden - game for learning CSS grid;
• CSS Diner - game for learning CSS;
• Flexbox Examples - cheatsheet for flexbox;
• Flexbox Guide EN - comprehensive guide to CSS flexbox layout;
• Grid Guide EN - comprehensive guide to CSS Grid layout;
• Flexbox Guide RU - guide to CSS flexbox;
• CSS Animation - animation principles for the Web;
• Animation Exmaples - tips for writing animation code efficiently;
• Codecademy - CSS concepts;

Services

• SassMeister - Sass playground;
• CSS Grid - interactive CSS Grid code tool and generator;
• Pure CSS Loaders - open source CSS loading animations;
• Clippy - CSS clip-path maker;
• Fancy Border Radius - create very cool effects with CSS;
• Animista - create CSS animation;
• Animate - choose CSS animation (library);
• Triangle Generator - CSS triangle generator;
• Autoprefixer CSS - autoprefixer CSS online;
• PX to REM - convertor px to rem;
• Hot To Center In CSS - service for centering data in the div block;
• Specificity Calculator - visual way to understand CSS specificity;
• CSS Layout - ollection of popular layouts and patterns;

Github repositories

• pattern.css - CSS only library to fill your empty background;

JavaScript

• Learn JS - modern JavaScript tutorial;
• JS Loupe - how to work event loupe;
• You Dont Know JS - series of books about JavaScript;
• Javascript Dev Bookmarks - collection of articles;
• Fetch - JavaScript fetch API and using async / await;
• Axios - promise based HTTP client for browser and node.js;
• Exercism - programming exercises and challenges to help developers improve JavaScript skills;
• The Odin Project - learn how to manipulate the DOM, use object-oriented programming principles, and build single page applications with React;
• Codecademy - JavaScript concepts;

Node & NPM

• Node.js - JavaScript runtime built on Chrome's V8 JavaScript engine;
• NPM - build amazing things;
• Webpack - module bundler;
• Bundlephobia - find the cost of adding a npm package to your bundle;
• Babel - JavaScript compiler;
• ESLint - find and fix problems in your JavaScript code;
• Editorconfig - helps maintain consistent coding styles;
• Bower - package manager for the web;
• Gulp - automate and enhance your workflow;

Charts

• Apex charts - modern & interactive open-source charts;
• Chart JS - simple yet flexible JavaScript charting;

Services

• Can I Use - provides up-to-date browser support tables;
• JSON Placeholder - fake online REST API for testing and prototyping;
• JSON Editor - json online editor;
• JSON Utils - json generate classes service;
• Pythontutor - visualize code and get live help;
• Regex - online tool to learn, build, & test regular expressions;
• CDN JS - the best front-end resource CDN for free;
• HTML DOM - manage HTML DOM with vanilla JavaScript;
• FormValidation - best validation library for JavaScript;
• JS Snippets - 212 favorite JavaScript utilities;
• JavaScript Replacement - you might not need jQuery;
• Keycodes - keyboard codes;

JWT

• JWT - JSON web tokens;
• Parse JWT - parse JWT;

React.js

Cheatsheet

• React Cheatsheet #1 - simple react cheat sheet;
• React Cheatsheet #2 - the React Cheatsheet for 2020;

Examples

• useHooks - easy to understand React Hook;
• Create React App - create React apps with no build configuration;
• React Bits - compilation of React Patterns, techniques, tips and tricks;
• React Sight - live view of the component hierarchy tree;
• Why Did You Render - notify you about avoidable re-renders;
• Storybook - open source tool for developing UI components in isolation;

Misc

• React auth - building basic react authentication;
• Awesome React - collection of awesome things regarding the React ecosystem;

Tools

Git

Offical Site - offical documentation with system;

Cheatsheet

• Git - git cheat sheet;
• Github Tutorial - github Tutorial;
• Git Hint - not just another git cheat sheet;

Services

• Git How To - guided tour that walks through the fundamentals of Git;
• Git Command Explorer - list of git commands;
• Learn Git Branching - git online tutorial;
• Git Attributes - create .gitattributes file for your project;
• Visualize Git - visualizations git powered by D3;

Extras

• FrontendProject - By Javascript Mastery ;
• Frontend 5 Projects - By Javascript Mastery ;

If you like this cheatsheet , give a star to this repo. That would mean a lot