FrontendCheatsheet

KO | EN

gitlite — search

#python #hacktoberfest #typescript #llm #go #golang #docker #nodejs #macos #java #awesome-list #mcp #openai #open-source

FrontendCheatsheet

(★ 14)

A cheatsheet for learning frontend development quickest and easiest way possible

FrontendCheatsheet Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

<h1 align="center">Frontend Roadmap</h1>
<p align="center">Welcome to the Roadmap! 📜</p>

#  HTML
- [HTML Reference](https://htmlreference.io/) - list of all HTML tags;
- [HTML Base](https://htmlbase.ru/) - the most modern reference for HTML and CSS;
- [BEM](https://en.bem.info/methodology/) - documentation of BEM methodology;
- [W3C Validator](https://validator.w3.org/) - markup validation service;
- [MarkSheet](https://marksheet.io/) - free HTML and CSS tutorials;
- [Codecademy](https://www.codecademy.com/resources/docs/html) - HTML concepts;

## Cheatsheet

- [BEM Cheatsheet](https://9elements.com/bem-cheat-sheet/) - simple BEM cheat sheet;
- [HTML DOM](https://htmldom.dev/) - how to manage HTML DOM;

## Examples

- [HTML Tips and Tricks](https://yoksel.github.io/bad-practices/) - "bad practies" of HTML;
- [HTML Rules](http://yoksel.github.io/easy-markup/) - simple markup rules;
- [HTML Template](https://tpverstak.ru/seo-html-template/) - basic SEO HTML Template;
- [HTML Academy Style](http://codeguide.academy/html-css.html) - HTML Academy Code Style;
- [Email Framework](https://emailframe.work/) - build responsive HTML email templates;
- [CSS](https://github.com/mrshuhrat/frontend-roadmap/blob/main/docs/CSS.md)

# Design

## Design systems

- [Mockplus](https://www.mockplus.com/) - all-in-one product design platform for prototyping, collaboration, and design systems;
- [Media Queries](https://mediaqueri.es/) - examples of media queries;
- [Call To Idea](http://www.calltoidea.com/) - light up your imagination;
- [Daily Design](https://uidesigndaily.com/) - daily UI design components and pages;

## IDE

- [Photopea](https://www.photopea.com/) - free online editor supporting PSD, XCF, Sketch, XD and CDR formats;
- [Figma](https://www.figma.com/) - cloud-based design tool;
- [Sizzy](https://sizzy.co/) - the browser for developers;

## Services

- [Design Converter](https://avocode.com/convert-psd-to-sketch) - convert PSD designs to Sketch;
- [Font Size Conversion](https://websemantics.uk/tools/font-size-conversion-pixel-point-em-rem-percent/) - font size conversion: pixel-point-em-rem-percent;
- [PNG to ICO Converter](https://convertico.com/) - free online PNG to ICO file converter;
- [TinyPNG](https://tinypng.com/) - smart PNG and JPEG compression;
- [Optimizilla](https://imagecompressor.com/) - online image optimizer uses a smart combination of the best optimization;
- [Favicon](https://favicon.io/) - favicon generators;
- [Type Scale](https://type-scale.com/) - visual type scale calculator;

## Github repositories

- [Animockup](https://github.com/alyssaxuu/animockup) - Create animated mockups in your browser and export it;

# CSS

- [CSS Reference #1](https://cssreference.io/) - list of all CSS properties;
- [CSS Reference #2](http://tympanus.net/codrops/css_reference/) - extensive CSS reference with all the important properties;

## Examples

- [Flexbox Froggy](https://flexboxfroggy.com/) - game for learning CSS flexbox;
- [Grid Garden](http://cssgridgarden.com/) - game for learning CSS grid;
- [CSS Diner](https://flukeout.github.io/) - game for learning CSS;
- [Flexbox Examples](https://tpverstak.ru/flex-cheatsheet/) - cheatsheet for flexbox;
- [Flexbox Guide EN](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) - comprehensive guide to CSS flexbox layout;
- [Grid Guide EN](https://css-tricks.com/snippets/css/complete-guide-grid/) - comprehensive guide to CSS Grid layout;
- [Flexbox Guide RU](https://frontender.info/a-guide-to-flexbox/) - guide to CSS flexbox;
- [CSS Animation](https://cssanimation.rocks/principles/) - animation principles for the Web;
- [Animation Exmaples](https://css-tricks.com/tips-for-writing-animation-code-efficiently/) - tips for writing animation code efficiently;
- [Codecademy](https://www.codecademy.com/resources/docs/css) - CSS concepts;

## Services

- [SassMeister](https://www.sassmeister.com/) - Sass playground;
- [CSS Grid](https://cssgr.id/) - interactive CSS Grid code tool and generator;
- [Pure CSS Loaders](https://loading.io/css/) - open source CSS loading animations;
- [Clippy](https://bennettfeely.com/clippy/) - CSS clip-path maker;
- [Fancy Border Radius](https://9elements.github.io/fancy-border-radius/) - create very cool effects with CSS;
- [Animista](https://animista.net/) - create CSS animation;
- [Animate](https://daneden.github.io/animate.css/) - choose CSS animation (library);
- [Triangle Generator](http://apps.eky.hk/css-triangle-generator/) - CSS triangle generator;
- [Autoprefixer CSS](https://autoprefixer.github.io/) - autoprefixer CSS online;
- [PX to REM](https://nekocalc.com/px-to-rem-converter) - convertor px to rem;
- [Hot To Center In CSS](http://howtocenterincss.com/) - service for centering data in the div block;
- [Specificity Calculator](https://specificity.keegan.st/) - visual way to understand CSS specificity;
- [CSS Layout](https://csslayout.io/) - ollection of popular layouts and patterns;

## Github repositories

- [pattern.css](https://github.com/bansal-io/pattern.css) - CSS only library to fill your empty background;

# JavaScript

- [Learn JS](https://learn.javascript.ru/) - modern JavaScript tutorial;
- [JS Loupe](http://latentflip.com/loupe/) - how to work event loupe;
- [You Dont Know JS](https://github.com/getbodya/you-dont-know-js-ru) - series of books about JavaScript;
- [Javascript Dev Bookmarks](https://github.com/didicodes/javascript-dev-bookmarks) - collection of articles;
- [Fetch](https://dev.to/connoro7/the-fetch-api-e12) - JavaScript fetch API and using async / await;
- [Axios](https://github.com/axios/axios) - promise based HTTP client for browser and node.js;
- [Exercism](https://exercism.org/tracks/javascript) - programming exercises and challenges to help developers improve JavaScript skills;
- [The Odin Project](https://www.theodinproject.com/paths/full-stack-javascript/courses/javascript) - learn how to manipulate the DOM, use object-oriented programming principles, and build single page applications with React;
- [Codecademy](https://www.codecademy.com/resources/docs/javascript) - JavaScript concepts;

## Node & NPM

- [Node.js](https://nodejs.org/en/) - JavaScript runtime built on Chrome's V8 JavaScript engine;
- [NPM](https://www.npmjs.com/) - build amazing things;
- [Webpack](https://webpack.js.org/) - module bundler;
- [Bundlephobia](https://bundlephobia.com/) - find the cost of adding a npm package to your bundle;
- [Babel](https://babeljs.io/) - JavaScript compiler;
- [ESLint](https://eslint.org/) - find and fix problems in your JavaScript code;
- [Editorconfig](https://editorconfig.org/) - helps maintain consistent coding styles;
- [Bower](https://bower.io/) - package manager for the web;
- [Gulp](https://gulpjs.com/) - automate and enhance your workflow;

## Charts

- [Apex charts](https://apexcharts.com/) - modern & interactive open-source charts;
- [Chart JS](https://www.chartjs.org/) - simple yet flexible JavaScript charting;

## Services

- [Can I Use](https://caniuse.com/) - provides up-to-date browser support tables;
- [JSON Placeholder](http://jsonplaceholder.typicode.com/) - fake online REST API for testing and prototyping;
- [JSON Editor](https://jsoneditoronline.org/) - json online editor;
- [JSON Utils](https://jsonutils.com/) - json generate classes service;
- [Pythontutor](http://www.pythontutor.com/) - visualize code and get live help;
- [Regex](https://regexr.com/) - online tool to learn, build, & test regular expressions;
- [CDN JS](https://cdnjs.com/) - the best front-end resource CDN for free;
- [HTML DOM](https://htmldom.dev/) - manage HTML DOM with vanilla JavaScript;
- [FormValidation](https://formvalidation.io/) - best validation library for JavaScript;
- [JS Snippets](https://1loc.dev/) - 212 favorite JavaScript utilities;
- [JavaScript Replacement](http://youmightnotneedjquery.com/) - you might not need jQuery;
- [Keycodes](http://keycodes.atjayjo.com/) - keyboard codes;

## JWT

- [JWT](https://jwt.io/) - JSON web tokens;
- [Parse JWT](https://jwt.ms/) - parse JWT;

# React.js

## Cheatsheet

- [React Cheatsheet #1](https://reactcheatsheet.com/) - simple react cheat sheet;
- [React Cheatsheet #2](https://www.freecodecamp.org/news/the-react-cheatsheet-for-2020/) - the React Cheatsheet for 2020;

## Examples

- [useHooks](https://usehooks.com/) - easy to understand React Hook;
- [Create React App](https://github.com/facebook/create-react-app/) - create React apps with no build configuration;
- [React Bits](https://vasanthk.gitbooks.io/react-bits/content/) - compilation of React Patterns, techniques, tips and tricks;
- [React Sight](https://github.com/React-Sight/React-Sight) - live view of the component hierarchy tree;
- [Why Did You Render](https://github.com/welldone-software/why-did-you-render/) - notify you about avoidable re-renders;
- [Storybook](https://storybook.js.org/) - open source tool for developing UI components in isolation;

## Misc

- [React auth](https://medium.com/better-programming/building-basic-react-authentication-e20a574d5e71) - building basic react authentication;
- [Awesome React](https://github.com/enaqx/awesome-react) - collection of awesome things regarding the React ecosystem;

# Tools

## Git

[Offical Site](https://git-scm.com/) - offical documentation with system;

## Cheatsheet

- [Git](https://education.github.com/git-cheat-sheet-education.pdf) - git cheat sheet;
- [Github Tutorial](https://youtu.be/apGV9Kg7ics) - github Tutorial;
- [Git Hint](https://git-hint.netlify.app/) - not just another git cheat sheet;

## Services

- [Git How To](https://githowto.com/) - guided tour that walks through the fundamentals of Git;
- [Git Command Explorer](https://gitexplorer.com/) - list of git commands;
- [Learn Git Branching](https://learngitbranching.js.org/) - git online tutorial;
- [Git Attributes](https://gitattributes.io/) - create .gitattributes file for your project;
- [Visualize Git](http://git-school.github.io/visualizing-git/) - visualizations git powered by D3;

# Extras

- [FrontendProject](https://youtu.be/LMagNcngvcU) - By Javascript Mastery ;
- [Frontend 5 Projects](https://youtu.be/GDa8kZLNhJ4) - By Javascript Mastery ;

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

FrontendCheatsheet

FrontendCheatsheet Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

FrontendCheatsheet

FrontendCheatsheet Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README