Welcome to the Roadmap! 📜
- 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;
- BEM Cheatsheet - simple BEM cheat sheet;
- HTML DOM - how to manage HTML DOM;
- 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
- 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;
- Photopea - free online editor supporting PSD, XCF, Sketch, XD and CDR formats;
- Figma - cloud-based design tool;
- Sizzy - the browser for developers;
- 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;
- Animockup - Create animated mockups in your browser and export it;
- CSS Reference #1 - list of all CSS properties;
- CSS Reference #2 - extensive CSS reference with all the important properties;
- 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;
- 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;
- pattern.css - CSS only library to fill your empty background;
- 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.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;
- Apex charts - modern & interactive open-source charts;
- Chart JS - simple yet flexible JavaScript charting;
- 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;
- React Cheatsheet #1 - simple react cheat sheet;
- React Cheatsheet #2 - the React Cheatsheet for 2020;
- 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;
- React auth - building basic react authentication;
- Awesome React - collection of awesome things regarding the React ecosystem;
Offical Site - offical documentation with system;
- Git - git cheat sheet;
- Github Tutorial - github Tutorial;
- Git Hint - not just another git cheat sheet;
- 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;
- FrontendProject - By Javascript Mastery ;
- Frontend 5 Projects - By Javascript Mastery ;