Главная
/

Roadmap

Roadmap по вёрстке

Разметка

  1. Что такое язык HTML и зачем он нужен? 
     Что такое DOCTYPE? 
      Что размещается в <head>, а что в <body>?
  2. Что такое тег? Категории тегов. Чем отличается <div> от <span>?
    Доп. вопросы
    Какие теги нельзя вложить друг в друга? Что произойдёт при незакрытом теге или неправильной вложенности?
  3. Что такое семантическая разметка. Какие теги семантические и как их применять?
    HTML5 тегиheader, main, footer, section, article, aside, nav; blockqoute, address, time, em, strong, sup, sub; table, details, dialog, search; picture, figure, audio, video
  4. Как делать разметку форм? Рассказать про input и его варианты type
    Варианты type:
    Наиболее применяемые: text, tel, email, password, number, checkbox, radio, file Все
    Теги формы<form> и его атрибуты: method, action, enctype, autocomplete, novalidate; <output>, <fieldset>, <legend>, <label>, <textarea>, <select> + <option>;
    О form
    Об атрибутах form
    Общие Атрибуты и атрибуты input:
    name, value, required, disabled, checked, autocomplete, inputmode, pattern, minlenght, maxlenght;
    Интересные атрибуты элементов: hidden, lang data-, inert
  5. Дилемма <button> или <a>. Атрибуты <a>
  6. Как именовать сущности? Расскажите по БЭМ, Atomic CSS, OOCSS, SMACSS, ITCSS.
  7. Задание:
    • сделать разметку страницы;
    • сделать разметку формы;
    • сделать разметку с использованием БЭМ

Мультмедиа

  1. Расскажите про тег <video> и <audio>. Что такое autoplay и как он работает? Можно ли autoplay сделать со звуком?
  2. Расскажите про работу с изображениями: <img> srcset, loading, <picture>, <source, <figure>, <figcaption>
  3. Что такое ретиновые изображения? Как их вставить черeз html и css? (image-set)
  4. Что такое фоновые избражения? Как создать градиентное изобаржения?
  5. Какие есть способы скрытия элементы со страницы?
  6. Стили для работы с изображением: aspect-ratio, object-position, object-fit, background-size

SVG

  1. Что такое SVG?
  2. Какие есть способы подключения SVG на страницу?
  3. Как сделать и использовать SVG спрайт?
  4. В чём отличие <g> от <symbol> и от <defs>? Что такое path? В чём отличие fill от stroke?
  5. Как реализуются градиенты в SVG?

Стилизация часть 1

  1. Что такое блочная модель? 
    Что делает свойство box-sizing? 
    Разница между margin и padding. 
    Какая особенности у отступов margin?
  2. Что такое селекторы? Виды селекторов. Что такое универсальный селектор?
  3. Что такое каскадность, наследование и специфичность в css? В чём они отличаются?
    Доп. вопросы:
    Как изменить специфичность? :where
    Что специфичнее:
    • .class vs header
    • .class.class vs header header
    • #id vs header
    • #id vs header !important
    • style='background: red' vs #id { background: blue;}
    • style='background: red' vs #id { background: blue; !important}
  4. Что такое псевдоклассы и псевдоэлементы? Привести примеры. Что делают :has(), :not(), :is()
  5. Виды позиционивания. 
    Особенности position и z-index
  6. Что такое состояния элементов и как ими можно управлять? 
    Составные селекторы. Что такое: сестринский, дочерний селектор? Какие существуют селекторы по атрибуту?

Стилизация часть 2

  1. Какие есть единицы измерения css и типы значений в css? 
    Что делают директивы в css? @supports @media @font-face
  2. Как можно выровнить элементы? 
    Отличие Flex от Grid. В каких ситуациях лучше Flex, а в каких Grid?
    ЗаданиеСтилизовать карточки товаров на flex и на grid
  3. Что такое Container Queries?
  4. Какие есть способы стилизации текста? 
    Как использовать text-decoration, text-shadow, text-transform? 
    Что такое неразрывный пробел и когда и где его нужно ставить?
    Доп. вопрос про шрифты
    Как подключать, стилизовать, форматировать шрифты?
  5. Какие языки имеют написание справа налево? 
    Как изменить направление текcта? 
    (lang + text-direction + dir) (margin-inline-start / end, margin-block)

Стилизация часть 3

  1. Какие функции в css есть и что они делают? filter, color-mix, color-contrast; 
    Как работает backdrop-filter?
  2. css layers, css nesting
  3. Рамки, тени. Реализовать треугольник, многоугольник, сердце. (Css графика)
  4. Как можно управлять скроллом? 
     custom scrollbars: scroll-snap, scroll-behaviour, scroll-padding, scroll-color, scrollbar-gutter
  5. Как в css создать анимацию?
  6. Как улучшить перфоманс? will-change, content-visibility, translateZ(0)
    Доп. вопросы
    1. Виды минификации и пост процессинга css.
    2. Является ли css render blocking и в каких случая?
    3. Как оптимизировать загрузку css, rel=preload

Доступность

  1. Что такое Доступность?
  2. Как обеспечить доступность интерактивных элементов и контента?
  3. передвигаться с клавиатуры клавишей Tab при нажатии или фокусе с клавиатуры
  4. Допускается делать недоступные для скринридеров элементы, если равносильная функциональность или контент уже доступны 
  5. Как могут пригодится эти атрибуты для доступности: aria-label, label, alt, width, height, aria-hidden, focusable