Welcome to my list of useful links for self-education in front-end development!

I will be glad to accept your PRs with must-see, must-read and must-know resources!

Table of contents

• In English
  • GitHub
  • Programming
  • CSS
  • SCSS/SASS
  • SVG
  • Canvas
  • JS
  • React.js
  • Angular
  • GraphQL
  • Testing
  • Webpack
  • Tips & Tricks
  • Design
  • Dictionaries
  • Schools
  • Interview Qs
• In Russian

In English

GitHub

• Git tutorial: a guided tour that walks through the fundamentals of Git, inspired by the premise that to know a thing is to do it.
• Learn Git Branching: visual and interactive way to learn Git on the web.
• Github branches Management: a short list of useful git commands.

Programming

• Patterns
  • JS patterns

CSS

• Selectors

  • Pseudo Class Selectors: a descriptive article about existing pseudo-selectors.
  • The 30 CSS Selectors You Must Memorize
  • CSS Selector Game

• Layout

  • Floats: an article about floats.

  • Float labels in inputs

  • FlexboxFroggy: a game that helps to learn flex-box.

  • FlexboxDefense: a game that helps to learn flex-box.

  • Everything about Grid: a collection of examples, video and other information that helps to learn CSS Grid Layout.

• Animation

  • CSS Animation Libraries: a list of libraries that help to animate things.
  • Cubic-bezier for CSS transitions: a tool which visualizes the work of Cubic-bezier property.

• Tools

  • CSS tools for devs

SCSS/SASS

• SASS Guid-lines
• SCSS/SASS guide
• How to Use Sass Mixins

SVG

• Coloring SVGs
• SVG icons
• SVG sprites
• SVG optimizer
• How to Scale SVG

Canvas

• Canvas - dive into HTML 5
• Improving HTML5 Canvas Performance
• Request Animation Frame
• HTML Game Development

JS

• Spec Updates

  • JS features 2020
  • JS features 2020-2
  • JS features 2021

• JS Console

  • Mastering JS Console

• Functions

  • Function secrets
  • Scope, closure, hoisting
  • Closures with examples
  • Execution context, lexical env ad closures
  • Guide to execution contexts, hoisting, scopes, closures
  • What is a closure

• Objects

  • Things you should know about objects
  • Ways to duplicate objects
  • Object.freeze vs Object.seal

• Spread & Rest

  • Ways to use spread

• Promises

  • Promises in JS

• ES Modules

  • ES modules: A cartoon deep-dive
  • Files with .mjs extension for JS modules

• Books

  • Exploring ES6 - book

• Style-guides

  • Airbnb JS Style Guide

• Regex

  • Regex tutorial
  • Regex tutorial 2

• jsPerf

  • Type coercion positive numbers (unary plus vs Number vs parseInt)
  • Unary plus vs parseInt

• Tips & Tricks

  • Guide to Tips & tricks
  • JS tricks
  • 10 JS one-liners
  • Shorthand coding techniques
  • 30 Awesome JavaScript Shorthand Techniques That You Should Know

React.js

• Tutorials

  • ReactJS For Beginners

• Routing

  • React-router Spec

• Hooks

  • useEffect
  • Common mistakes with useEffect
  • React hooks vs HOCs

• Fast refresh

  • Fast refresh

• Components

  • 5 useful React components

• Tips & tricks

  • 6 easy React tricks

• Virtual DOM

  • React Virtual DOM Explained in Simple English - a general description of how the Virtual DOM works in React.

• Interview questions

  • React interview questions to expect in 2022 (with answers)

Angular

• NgModule
  • Understanding Angular modules (NgModule)

GraphQL

• GraphQL playground

• GraphQL Cheat Sheet

• GraphQL Appolo-React integration

• GraphQL React Tutorial

• Apollo-client

  • refetchQueries
  • refetchQueries stackoverflow
  • refetchQueries - Apollo docs

Testing

• Jest

  • Jest docs
  • Check that object has valid prop type
  • Test for object, array, string types
  • Test for array of objects

• WebDriver

  • Selenium-webdriver doc

Webpack

• Multiple html pages using Webpack

Tips & Tricks

• Guide to Non-Rectangular Headers (Part 1)
• Non-Rectangular Headers
• Best Practices for Sliding Hamburger Menus
• Three Line Menu
• JS DROPDOWN MENU
• Custom Drop-Down List Styling
• CSS triangle
• Heading with horizontal lines
• How to make one circle inside another one
• Tasty burger
• CSS Placeholder Color
• Modal Image Gallery
• Breadcrumb Example

Design

• Color Gradients and Palettes
• Online Photoshop
• Free patterns
• Patterns

Dictionaries

• Analogy Dictionary

Schools

• HTML Dog
• CodeAcademy
• Dev hints

Interview Qs

• How to pay devs less
• How to pay devs less 2
• JS Quiz

In Russian

• Школы

  • HTMLAcademy - бесплатные интерактивные курсы по HTML и CSS
  • Подборка онлайн-школ

• CSS

  • Что такое Flexbox? Описание всех css свойств, основные принципы, преимущества и недостатки
  • CSS Animation

• JS

  • Современный учебник Javascript
  • Как работает JS: цикл событий, асинхронность

• Node.js

  • npm-скрипты
  • Начало работы с Node.js

• TypeScript

  • Основы TypeScript

• SASS

  • SASS Guidlines - стайлгайд для SASS (перевод)

• Git

  • ЧаВо по Git

• SVG

  • SVG в вебе. Практическое руководство
  • Размеры в SVG

• Photoshop

  • Как создать направляющие линии в макете
  • Цветовые палитры

• Программирование

  • Жаргон функционального программирования

• БЭМ

  • БЭМ методология

• Реализация

  • Пример верстки поисковой формы для сайта на HTML5 и CSS3

• Полезности

  • 25 полезных Chrome-расширений для веб-разработчиков
  • Полезные книги - подборка хороших книг для программистов
  • Список CSS фреймворков