HTML/CSS

Тематики для изучения

• Cпецификации html5, css3 https://www.w3schools.com/cssref/default.asp

• Блочные и строчные элементы (div/span/etc разница между ними)

• Селекторы и свойства (properties)

• CSS функции (calc)

• Хитрости HTML/CSS (негативные margins, auto, etc)

• Выравнивание элементов (relative, absolute, floar, auto margins, negative margins, calc)

• Сокрытие элементов (display, visibility)

• Семантические теги HTML5 https://codeguida.com/post/1770

• CSS Reset

• Грид система (bootstrap)

  • https://www.youtube.com/watch?v=m16v1KkZoi8

• Адаптивная верстка (media теги)

• Flexbox

  • https://www.youtube.com/watch?v=hrFPD0nkRVA

  • Flex тренажер https://www.outpan.com/app/1b970b008f/flexbox-playground

• БЕМ и SCSS https://www.youtube.com/watch?v=Mz4aRb4Oyd4

• Анимации (Animations, Transitions, Ease Functions)

• Pixel Perfect

• Кастомные фонты

• CSS variables

• SVG иконки , многоиконочные images

• Virtual(Hidden) DOM

• Адаптивные изображения (@x2, desktop, retina, etc)

• Переключаемые темы/скины для сайтов (eg темная тема)

• Event Loop https://m.habr.com/ru/post/461401/

• Заглушки для картинок http://via.placeholder.com/200x200

• Float labels

• Параллакс, управление скроллированием, анимация на скролле

• CSS in JS https://github.com/emotion-js/emotion

• XPath

• Canvas, WebGL

• Конфигурация Nginx (втч Reverse Proxy, X-Accel-Redirect header) https://nginxconfig.io/

• WebPack - сборка проекта

• Babel - полифилы/обратная совместимость

• Autoprefixer - простановка css тегов специфичных для различных браузеров

• Firefox Development Tool

• Chrome Development Tool

• Charts: D3, Apexcharts

• Accelerated Mobile Pages (AMP)

Accessibility

• Web Content Accessibility Guidelines (WCAD)

• Voluntary Product Accessibility Template (VPAT)

Каналы для изучения

• Дмитрий Лаврик https://www.youtube.com/user/dmitrylavr

Дополнительные ресурсы

• Проверка поддержки функции в различных браузерах https://caniuse.com/