Вёрстка проекта выполнена по макету (макет) с применением desktop-first подхода и адаптацией для планшета и мобильных устройств. В ветках bootstrap и tailwind верстка выполнена с применением соответствующих ui-библиотек. Сборка проекта выполняется сборщиком Webpack. Описание скриптов в разделе "Скрипты для сборки проекта". Деплой выполняется с помощью npm пакета gh-pages
Запуск продакшн сборки webpack и запуск локального http-server:
npm start
Запуск dev-сборки webpack:
npm run build
Запуск продакшн сборки webpack:
npm run prod
Запуск dev-сервера webpack на продакшн-сборке:
npm run server
Деплой продакшн-сборки на github-pages: otus-css-novitskiy:
npm run deploy
Основная проблема в Cumulative Layout shift.
- организационные вопросы
- история WWW. зачем изобрели Web.
- изучаемые на курсе технологии
- инструменты
- фигма
- редактор кода на примере VSCode
- онлайн-редактор кода
- инспектор кода в браузере
Научиться работать с системой контроля версий Git. Работа в GitHub
Что такое и на чем основано версионирование?
Как установить и настроить гит на разные ОС
Терминал в VSCode
Локальная работа с изменениями через терминал (git add, git status, git commit, git branch, git checkout)
Использование встроенных возможностей редактора для работы с гит вместо терминала
Регистрация и создание репозитория на GitHub
Работа с удаленным и локальным репозиториями
Плагины и клиенты (GitHub desktop) для помощи в работе
- Установить git, произвести базовую настройку.
- Зарегистрироваться на GitHub. Создать репозиторий c названием по шаблону otus-css-surname. Именно так!
- Клонировать репозиторий, добавить пустой файл index.html, а так же создать README.md и научиться его редактировать.
- Сделать commit в ветку master (может называться main).
- Сделать push.
- Убедиться, что изменения успешно перенесены на удаленный репозиторий.
- В качестве выполненного ДЗ прикрепить ссылку на репозиторий.
- Изучить дополнительные материалы
создать первую html страницу
- HTML - всего лишь формат текстового файла.
- способы создания HTML страниц
- инструменты работы
- текстовый редактор VSCode
- CodeSandbox, CodePen
- как форматировать текст для веб страницы
- почему lorem ipsun - не всегда хорошая идея;
- введение в семантическую разметку, MDN
-особенности SEO оптимизации- особенности a11y
- особенности разметки с дизайном
- упражнение на разметку
- нюансы разметки
- Создайте новую ветку от основной (main или master), например, semantics
- Перейдите по ссылке https://www.figma.com/file/WZBpyrcVpI1edxPzIHCg1E/Otus-mocks
- Изучите макет.
- Определите, какие по вашему, изученные ранее структурные теги (header, nav, section, main, aside article, footer) надо использовать. Добавьте семантические теги для элементов страницы и текста. Стилизовать, позиционировать и т.д. элементы не нужно. Исключительно семантика. Только HTML.
- Перенесите текст, заголовки, списки, цитаты и т.п. с макета в код. Используйте соответствующие теги.
- Добавьте картинки в код используя тег img. Можно экспортировать из макета и положить в папку img. Фото - форматом jpg, иконки - svg.
- Будет здорово, если каждый блок вы сможете отделить соответствующими комментариями, для удобства чтения.
- Делаем тематические коммит-сообщения, например, git commit -m “Added html semantic structure”. Пушим.
- Создайте pull request текущей ветки в основную (main или master).
- Скиньте ссылку на данный pull request. Ссылка должна быть вида: что-то/pulls/число
- три вида написания CSS
- Inline
- Style tag
- CSS file
- User Agent CSS
- как происходит рендеринг HTML страницы
- Render Tree
узнать что такое типографика
научиться подключать шрифты по ссылке и локально
базовая работа со шрифтами:
- стилевые приемы
- единицы измерения (px, em, rem, vh, vw, %, функция calc)
- оптимизация шрифтов
- Создайте новую ветку от основной (main или master), например, typography
- Перейти по ссылке на Figma макет - https://www.figma.com/file/WZBpyrcVpI1edxPzIHCg1E/Otus-mocks.
- Изучаем макет. Какие шрифты и их варианты используются? Можно использовать плагин Font Master или Font Fascia к Figma.
- Подключить необходимые шрифты. Через сервис fonts Google и локально.
- Задать странице основной шрифт, базовый размер и высоту строки.
- Для каждого текстового элемента задать текстовые свойства по макету.
- Коммитим, пушим.
- Делаем pull request. Присылаем ссылку на него.
box model в деталях, display, box sizing, универсальный селектор *,
Свойство background
- Создайте новую ветку от основной (main или master), например, hero-section
- Перейти по ссылке на Figma макет - https://www.figma.com/file/WZBpyrcVpI1edxPzIHCg1E/Otus-mocks.
- Изучаем макет, стараемся его «прочитать». Какой сайт будет в ширину? Как будет тянуться или сжиматься? Что из себя представляют секции? Цель не фиксированный, а «резиновый» сайт. Подумайте, какие ширины можно задать в процентах, а какие останутся фиксированными. Отступы на данный момент лучше задать фиксированными.
- Необходимо сверстать меню и первую секцию. Для фона секции используйте фоновую картинку, она должна быть от края до края барузера.
- Сделать коммиты, пуш. Делаем тематические коммит-сообщения, например, git commit -m “style: add styling for hero section”
- Делаем pull request. Присылаем ссылку на него.
свойство position: relative, absolute, fixed, sticky и координатные свойства,
как центрировать элемент с помощью position и transform,
зачем нужны CSS resets,
как добавлять фоновое изображение
- специфичность и приоритеты правил
- ключевое слово !important
- значение inherit
как исторически менялись подходы: таблицы, инлайн-блоки, флоаты и современные технологии. Модульная сетка,
основные виды layouts в дизайне, как понимать что имел в виду дизайнер,
как один и тот же layout можно сделать многими способами,
верстка PixelPerfect - за и против
все о flexbox layout.
Использование flex для оформления секции Biography
- Создайте новую ветку от основной (main или master), например biography-section
- В соответствии с макетом: https://www.figma.com/file/WZBpyrcVpI1edxPzIHCg1E/Otus-mocks верстаем следующую секцию Biography, используя flex для расположения элементов.
- Проверить расположение элементов по PixelPerfect. Проверяем как ведёт себя контент при разных размерах окна браузера - нет горизонтального скролла, колонки резиновые и тянутся при уменьшении ширины страницы.
- Делаем коммиты и пуш. Создаём pull request и присылаем ссылку на него
все о grid layout.
Применение grid для оформления секции Testimonials
- Создайте новую ветку от основной (main или master), например, testimonials-section
- В соответствии с макетом: https://www.figma.com/file/WZBpyrcVpI1edxPzIHCg1E/Otus-mocks верстаем следующую секцию Testimonials
- Проверить расположение элементов по PixelPerfect. Проверяем как ведёт себя контент при разных размерах окна браузера - нет горизонтального скролла, колонки резиновые и тянутся при уменьшении ширины страницы.
- Сама секция является grid-контейнером сетки. При необходимости добавляем div'ы для организации ячеек, оформляем контент в ячейках
- Делаем коммиты и пуш. Создаём pull request и присылаем ссылку на него
на этом исключительно практическом занятии вам предстоит решить несколько задач по расположению элементов, научиться применять и выбирать подходящие для этого технологии (флексы или гриды)
- Создайте новую ветку от основной (main или master), например designers-section
- В соответствии с макетом: https://www.figma.com/file/WZBpyrcVpI1edxPzIHCg1E/Otus-mocks верстаем секцию Designers.
- Проверить расположение элементов по PixelPerfect. Проверяем как ведёт себя контент при разных размерах окна браузера - нет горизонтального скролла, колонки резиновые и тянутся при уменьшении ширины страницы.
- Исходим из того, что у нас множество из любого количества дизайнеров. И дизайнер с крупной картинкой может находится на любом месте. При этом предусмотреть поведение, если дизайнеров будет больше.
- Делаем коммиты и пуш. Создаём pull request и присылаем ссылку на него. В комментарии к заданию обоснуйте выбранный вами подход к расположению элементов
что такое и зачем нужны fallbacks:
- совместимость браузеров с современными CSS технологиями. Сервис caniuse
- новые технологии, к которым уже пора присмотреться
@supports
вендорные префиксы и автопрефиксер
- Создайте новую ветку от основной (main или master), например, strong-points-section
- В соответствии с макетом: https://www.figma.com/file/WZBpyrcVpI1edxPzIHCg1E/Otus-mocks верстаем следующую секцию Strong points с учетом поддержки браузеров
- Проверить расположение элементов по PixelPerfect. Проверяем как ведёт себя контент при разных размерах окна браузера - нет горизонтального скролла, колонки резиновые и тянутся при уменьшении ширины страницы.
- Делаем коммиты и пуш. Создаём pull request и присылаем ссылку на него. В комментарии к заданию обоснуйте выбранный вами подход к расположению элементов.
1. Media queries
- как правильно писать media-rules
- как применять media-feature
- как правильно тестировать media queries с browserstack, xcode, android studio.
2. единицы размера вьюпорта
3. классические breakpoints
4. резиновая, адаптивная и отзывчивая верстка
подходы mobile-first vs desktop-first,
организация css-кода,
тестирование верстки
Адаптивная верстка макета
- Работу ведем в соответствующей ветке. Например, mobile-development.
- Необходимо адаптировать макет для планшетного и мобильного вида. Выбрать либо mobile-first, либо desktop-first подход и обосновать выбор в сообщении к работе. Убедитесь в том, что на всем сайте не появляется горизонтальной прокрутки, только на отдельных секциях, где это было задумано дизайнером. Скрывать прокрутку свойствами css нельзя.
- Сделать коммит, пуш. Прислать ссылку на ПР.
1. Render tree, отличие компоновки от отрисовки, какие свойства к ним относятся
2. как создавать анимации, как их оптимизировать
- Работу ведем в соответствующей ветке. Например, animation.
- Необходимо добавить интерактивным элементам (ссылкам) простые плавные анимации по наведению и фокусу.
Дополнительно: сделать анимацию по наведению на изображения в одной из секций, на ваш выбор. - Сделать коммит, пуш. Прислать ссылку на ПР.
CSS для мобильных браузеров
1. верстка мобильного меню
2. Нюансы мобильного css
3. Оптимизация
- Шрифтов (вариативные, display: swap)
- Графики (picture)
что такое CSSOM;
методологии BEM, Atomic CSS и другие.
- Работу ведем в соответствующей ветке. Например, bem.
- Провести рефакторинг кода: используя BEM номенклатуру, разделить CSS-код на правильно названные субмодули;
- Сделать коммит, пуш. Прислать ссылку на репозиторий.
Bootstrap.
Описание/Пошаговая инструкция выполнения домашнего задания:
- Работу ведем в соответствующей ветке. Например, bootstrap.
- Необходимо переделать макет на Bootstrap.
- Сделать коммит, пуш. Прислать ссылку на ПР. Мержить изменения в основную ветку не обязательно, укажите о Bootstrap-версии в файле readme.md
Tailwind.
Tailwind
Цель:
В этом ДЗ вы разработаете макет.
Описание/Пошаговая инструкция выполнения домашнего задания:
- Работу ведем в соответствующей ветке. Например, tailwind.
- Необходимо подключить Tailwind и сделать макет с его использованием, заменив БЭМ-классы на tailwind-классы.
- Сделать коммит, пуш. Прислать ссылку на ПР. Мержить изменения в основную ветку не обязательно, укажите о Tailwind-версии в файле readme.md
как называть переменные и функции
что такое объекты
как работать с DOM
решение простых задач
изучить основные принципы работы с терминалом:
1. терминал в VS Code
- навигация внутри терминала
- установка npm и node
2. как использовать npm
3. как заменить плагины на пакеты (на примере сервера)
Настройка окружения
Цель:
Установить Node JS, научится устанавливать пакеты для проекта
Описание/Пошаговая инструкция выполнения домашнего задания:
- Работу ведем в соответствующей ветке. Например, packages
- Установить npm-пакеты http-server, prettier, lodash, убедиться в изменении файла package.json
- Сделать коммит, пуш. Прислать ссылку на ПР.
Создать минимальную конфигурацию Webpack 5
настройка Webpack для работы с HTML/CSS, регулярные выражения, работа с картинками и шрифтами
настроить автоматизацию сборки,
познакомиться с препроцессором SASS
Webpack
Цель:
Научиться автоматизировать процессы с помощью Webpack
Описание/Пошаговая инструкция выполнения домашнего задания:
- Работу ведем в соответствующей ветке. Например, automatization.
- Настроить файлы конфигурации Webpack для разработки (дополнительно: и продакшена) проекта
- Проверить корректность файла .gitignore
- Сделать коммит, пуш. Прислать ссылку на ПР.
минификация CSS, JS файлов для проекта;
хеширование файлов;
оптимизация изображений, шрифтов.
Оптимизация ассетов
Цель:
Научиться оптимизировать графику, шрифты, минимизировать стили и js-код
- Работу ведем в соответствующей ветке. Например, optimization.
- Настроить минификацию CSS/JS на проекте, оптимизировать изображения, шрифты
- Сделать коммит, пуш. Прислать ссылку на ПР.
деплой веб-сайта с помощью GitHub Pages
Деплой проекта Описание/Пошаговая инструкция выполнения домашнего задания:
- Смержить все итоговые изменения в master/main репозитория на GitHub
- Опубликовать проект на GitHub Pages
- Прислать ссылки на репозиторий и опубликованную версию проекта
как проверить производительность сайта;
как узнать статистику сайта;
как использовать Lighthouse для аналитики страницы
Аналитика и поддержка
Цель: В этом ДЗ вы разместите счетчик статистики вашей работы и проверите показатели качества вашего сайта
- Работу ведем в соответствующей ветке. Например, support.
- Добавить счетчик от Google Analytics/Я.Метрика для страницы
- Проверить страницу с помощью Google Lighthouse, добавить данные о качестве в Readme.md
- Сделать коммит, пуш. Прислать ссылки на репозиторий и опубликованную версию проекта
правила работы над проектом и специфика проведения итоговой защиты;
требования к результату проекта и итоговой документации.
Проектная работа
Цель:
В этом ДЗ необходимо утвердить в чате по ДЗ тему проекта (для всех - Mod studio), разработать презентацию о личных итогах курса, презентовать проект и прислать ссылку на задеплоенную итоговую версию. В файле readme.md должна быть вся информация о проекте: как запустить сборку, есть ли ветки с отдельными фичами, что не задеплоены в мастер.
Описание/Пошаговая инструкция выполнения домашнего задания:
- Отправить тему Mod studio
- Прислать презентацию личных итогов курса
- Прислать ссылку на задеплоенную итоговую версию