Skip to content

Latest commit

 

History

History
110 lines (76 loc) · 5.79 KB

README.md

File metadata and controls

110 lines (76 loc) · 5.79 KB
Raw

Web Studio Logo

Gif

My first project (Web Studio)

My first student project Web Studio as part of the Full Stack Developer course GO IT. Final homework assignment №8. Used Technologies (HTML, CSS, JAWASCRIPT, SASS, BEM).

goit-markup-hw-08 (домашнее задание)

  • Создай репозиторий goit-markup-hw-08.
  • Склонируй созданный репозиторий и скопируй в него файлы предыдущей работы.
  • Выполни вёрстку адаптивной версии всех страниц и элементов макета домашнего задания #8.
  • Настрой GitHub Pages и добавь ссылку на живую страницу в шапку GitHub-репозитория.

Критерии приёма работы наставником

Проект

«A1» Используется методология BEM.

«A2» Ипользуется препроцессор SASS.

«A3» В файлах index.html и portfolio.html подключен минифицированный файл стилей main.min.css из папки css.

«A4» При просмотре страницы на любом устройстве шириной от 320px, не появляется горизонтальная полоса прокрутки.

«A5» Скрипт мобильного меню подключен в HTML отдельным файлом mobile-menu.js.

Разметка

«B1» У всех страниц в блоке <head> есть метатег viewport.

«B2» Все фоновые и контентные растровые изображения - отзывчивые, и поддерживают экраны с плотностью x1 и x2.

«B3» Для отзывчивых контентных изображений использован элемент <img> с атрибутом srcset и дескриптором x.

«B3» Для отзывчивых фоновых изображений использованы медиа-фукцнии min-device-pixel-ratio и min-resolution.

«B4» Выполнена разметка мобильного меню.

Оформление

«C1» При написании стилей использован Mobile First подход и медиа-функция (min-width: ).

«C2» Стили необходимые только в определённом промежутке, закрыты в медиа-запросы (min-width: ) and (max-width: ) или только (max-width: ).

«C3» В медиа-запросах отсутствует лишнее дублирование стилей.

«C4» Вёрстка выполнена относительно трёх точек перелома: 480px, 768px и 1200px.

«C5» Выполнено оформление мобильного меню.

План занятия Александра Репеты

Часть 1 - Меню

Формула расчёта ширины flex-элемента в сетке .element { flex-basis: calc((100% - кол-во маржинов в строке * значение маржина) / кол-во элементов в строке); }

Часть 2 - Меню

  • Модальное окно на телефоне

  • Разметка и стили кнопки-переключателя

  • Скрипт

  • Рарметка бургер-меню

  • Стили бургер-меню

    • Переключение иконки по .menu-button.is-open

  • Медиа-выражения

  • Как определить когда убирать бургер не привязываясь жёстко к макету

  • Отзывчивые изображения

  • Отзывчивый элемент <img>

    • Имитация плотности пикселей в devtools
    • Атрибут srcset
    • Дексриптор x
    • Дексриптор w
    • Атрибут sizes
    • Отзывчивая галерея (порядок медиа-запросов)

  • Фоновые изображения по конспекту

    • Пару слов про image-set()

  • Элемент <picture>

    • Различные форматы изображений
    • Кадрирование

Допмат