Frontend Верстка (β)

Что такое HTML. Как он устроен. Материалы

• https://developer.mozilla.org/ru/docs/Learn/HTML/Introduction_to_HTML/Getting_started (Novice)
• https://web.dev/learn/html/overview?hl=ru (Novice)

Базовый синтаксис CSS Материалы

• https://developer.mozilla.org/ru/docs/Web/CSS/Syntax (Novice)
• https://developer.mozilla.org/ru/docs/Web/CSS/At-rule (Novice)
• https://developer.mozilla.org/ru/docs/Web/CSS/Shorthand_properties (Novice)

Как работает CSS? Материалы

• https://developer.mozilla.org/ru/docs/Learn/CSS/First_steps/How_CSS_works (Novice)

CSS-Селекторы Материалы

• https://web.dev/learn/css/selectors/ (Novice)
• https://developer.mozilla.org/ru/docs/Web/CSS/CSS_selectors (Novice)

Псевдоклассы и псевдоэлементы Материалы

• https://web.dev/learn/css/pseudo-classes/ (Intermediate)
• https://developer.mozilla.org/ru/docs/Web/CSS/Pseudo-classes (Intermediate)
• https://web.dev/learn/css/pseudo-elements/ (Intermediate)
• https://developer.mozilla.org/ru/docs/Web/CSS/Pseudo-elements (Intermediate)

data-аттрибуты Материалы

• https://developer.mozilla.org/ru/docs/Learn/HTML/Howto/Use_data_attributes (Advanced)

CSS: Каскадирование, Специфичность, Наследование Материалы

• https://web.dev/learn/css/the-cascade/ (Intermediate)
• https://developer.mozilla.org/en-US/docs/Web/CSS/Cascade (Intermediate)
• https://web.dev/learn/css/specificity/ (Intermediate)
• https://developer.mozilla.org/ru/docs/Web/CSS/Specificity (Intermediate)
• https://web.dev/learn/css/inheritance/ (Intermediate)
• https://developer.mozilla.org/ru/docs/Web/CSS/Inheritance (Intermediate)

CSS: Значения стилевых свойств Материалы

• https://web.dev/learn/css/color/ (Novice)
• https://web.dev/learn/css/sizing/ (Novice)
• https://web-standards.ru/articles/inherit-initial-unset-revert/ (Intermediate)
• https://developer.mozilla.org/ru/docs/Web/CSS/inherit (Intermediate)
• https://developer.mozilla.org/ru/docs/Web/CSS/Using_CSS_custom_properties (Intermediate)
• https://developer.mozilla.org/ru/docs/Web/CSS/var (Intermediate)
• https://lisilinhart.info/posts/css-variables-performance/ (Intermediate)
• https://developer.mozilla.org/en-US/docs/Web/CSS/env (Intermediate)
• https://developer.mozilla.org/en-US/docs/Web/CSS/length (Novice, Intermediate, Advanced)
• https://web.dev/blog/viewport-units (Advanced)

CSS: Функции Материалы

• https://web.dev/learn/css/functions/ (Intermediate)
• https://web.dev/learn/css/gradients/ (Intermediate)

Адаптивная вёрстка Материалы

• https://habr.com/ru/post/148224/ (Intermediate)
• https://developer.mozilla.org/ru/docs/Web/CSS/@media (Intermediate)
• https://habr.com/ru/post/243247/ (Intermediate)

CSS-шлюзы Материалы

• https://habr.com/ru/company/mailru/blog/315196/ (Advanced)

Типы носителей Материалы

• https://www.w3.org/TR/CSS22/media (Intermediate)
• https://drafts.csswg.org/mediaqueries/#media-types (Intermediate)

Поинтер Материалы

• https://developer.mozilla.org/ru/docs/Web/CSS/pointer-events (Intermediate)
• https://habr.com/ru/post/204238/ (Intermediate)

Box Model Материалы

• https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_box_model (Novice)
• https://web.dev/learn/css/box-model/ (Novice)
• https://web.dev/learn/css/layout/ (Novice)
• https://web.dev/learn/css/borders/ (Novice)
• https://web.dev/learn/css/shadows/ (Novice)
• https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_writing_modes (Intermediate)
• https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical_properties_and_values (Intermediate)

Position, Z-Index Материалы

• https://developer.mozilla.org/ru/docs/Learn/CSS/CSS_layout/Positioning (Novice)
• https://web.dev/learn/css/z-index/ (Novice)
• https://developer.mozilla.org/ru/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context (Intermediate)
• https://philipwalton.com/articles/what-no-one-told-you-about-z-index/ (Intermediate)

Flexbox Материалы

• https://web.dev/learn/css/flexbox/ (Intermediate)
• https://developer.mozilla.org/ru/docs/Learn/CSS/CSS_layout/Flexbox (Intermediate)

Grids Материалы

• https://web.dev/learn/css/grid/ (Advanced)
• https://developer.mozilla.org/ru/docs/Learn/CSS/CSS_layout/Grids (Advanced)
• https://developer.mozilla.org/ru/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout (Advanced)
• https://developer.mozilla.org/ru/docs/Web/CSS/CSS_grid_layout/Subgrid (Advanced)

Шрифты Материалы

• https://developer.mozilla.org/ru/docs/Web/CSS/CSS_Fonts (Intermediate)

Анимации и их производительность Материалы

• https://web.dev/learn/css/animations/ (Intermediate)
• https://developer.mozilla.org/ru/docs/Web/CSS/CSS_Animations/Using_CSS_animations (Intermediate)
• https://web.dev/learn/css/transitions (Intermediate)
• https://developer.mozilla.org/ru/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions (Intermediate)
• https://developer.mozilla.org/ru/docs/Web/CSS/will-change (Intermediate)
• https://frontender.info/css-will-change-property/ (Intermediate)
• https://fullystacked.net/offset-path/ (Advanced)

Эффекты Материалы

• https://web.dev/learn/css/filters/ (Advanced)
• https://developer.mozilla.org/en-US/docs/Web/SVG/Element/filter (Advanced)
• https://web.dev/learn/css/blend-modes/ (Advanced)

HTML: HEAD + BODY Материалы

• https://web.dev/learn/html/document-structure (Novice)
• https://web.dev/learn/html/metadata (Novice)
• https://developer.mozilla.org/ru/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML (Novice)

CSS+HTML: Способы добавления стилей на страницу Материалы

• https://developer.mozilla.org/ru/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML#подключение_css_и_javascript (Novice)

Порядок загрузки ресурсов Материалы

• https://web-standards.ru/articles/critical-and-progressive-css/ (Advanced)

Семантический HTML Материалы

• https://developer.mozilla.org/ru/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure (Novice)
• https://developer.mozilla.org/ru/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals (Novice)
• https://developer.mozilla.org/ru/docs/Learn/HTML/Tables (Novice)
• https://web.dev/learn/html/semantic-html (Novice)

Мета-данные: Микро и макро-разметка Материалы

• https://habr.com/ru/company/click/blog/492258/ (Intermediate)
• https://ogp.me/ (Intermediate)
• https://schema.org/ (Intermediate)
• https://yandex.ru/support/webmaster/schema-org/what-is-schema-org.html (Intermediate)

a11y Материалы

• https://medium.com/web-standards/pragmatic-a11y-rules-b16dd2f77685 (Advanced)
• https://www.a11yproject.com/ (Advanced)
• https://developer.mozilla.org/ru/docs/Learn/Accessibility (Advanced)
• https://web.dev/learn/css/focus/ (Advanced)
• https://developer.mozilla.org/ru/docs/Learn/HTML/Tables/Advanced (Advanced)
• https://habr.com/ru/company/ispring/blog/564446/ (Advanced)
• https://developer.mozilla.org/ru/docs/Web/Accessibility/ARIA (Advanced)
• https://ifap.ru/ictdis/wcag.htm (Advanced)
• https://www.wuhcag.com/wcag-checklist/ (Advanced)

HTML Формы Материалы

• https://developer.mozilla.org/ru/docs/Learn/Forms (Intermediate)
• https://developer.mozilla.org/ru/docs/Learn/Forms/Your_first_form (Intermediate)
• https://developer.mozilla.org/ru/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form (Intermediate)
• https://developer.mozilla.org/ru/docs/Learn/Forms/Basic_native_form_controls (Intermediate)
• https://developer.mozilla.org/ru/docs/Learn/Forms/Sending_and_retrieving_form_data (Intermediate)
• https://developer.mozilla.org/ru/docs/Learn/Forms/Form_validation (Intermediate)
• https://developer.mozilla.org/ru/docs/Learn/Forms#руководства_по_стилизации_форм (Advanced)

Мультимедиа и встраивание Материалы

• https://developer.mozilla.org/ru/docs/Learn/HTML/Multimedia_and_embedding (Advanced)
• https://habr.com/ru/company/vdsina/blog/555736/ (Advanced)
• https://developer.mozilla.org/ru/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content (Advanced)
• https://stackoverflow.com/questions/9260501/html5-video-background-on-ipad-iphone (Advanced)

Вёрстка писем Материалы

• https://habr.com/ru/post/252279/ (Advanced)
• https://habr.com/ru/company/mailru/blog/419591/ (Advanced)
• https://netology.ru/blog/verstka-mail (Advanced)