Lesson 01

Этапы создания сайтов

Lesson 02

Обязательное

Спроектируйте прототип своего будущего сайта портфолио. На прототипе должны быть:

— Ваше имя и фамилия
— Блок с вашими работами
— Блок с контактными данными

Усложненное

Перед вами стоит задача: разработать сайт по продаже книг. Но перед тем, как написать код этого сайта, нужно создать его прототип.

1) Спроектируйте страницу сайта по продаже книг. На этой странице должны быть: — фильтр по цене, жанрам и авторам;
— карточка с книгой, ее описанием и ценой.
2) Делать прототип можно в любой программе или прямо на бумаге. Вы можете воспользоваться этим сервисом: https://wireframe.cc/
3) Прикрепите к ответу на задание файл, скриншот (фото) вашего прототипа и / или ссылку на него

24
/
01

2

Lesson 02

Работа с графикой

Lesson 01

Lesson 03

Обязательное

Спроектируйте прототип своего будущего сайта портфолио. На прототипе должны быть:

1. Вырезать из макета всю графику (картинки и иконки), которые встречаются в этом макете
2. Сохранить вырезанные изображения в папку “img”. В названии картинок можно использовать цифры и латинские буквы - Нельзя писать названия на кириллице (русском) - Нельзя писать на транслите (например, babushka, shapka и т.д.) - Пример названия картинки: icon-1.png или background.jpg
3. Загрузить архив с папкой img в формате .ZIP на облачный сервис

Усложненное

Задание с тем же макетом. Вырезать из макета всю графику (картинки и иконки), которые встречаются в этом макете

1. Сохранить все иконки в векторном формате SVG.
2. Следовать тем же правилам оформления папок, названий и т.д. как это сделано в простом задании
3. Загрузить архив с папкой img в формате .ZIP на облачный сервис

24
/
02

3

Lesson 03

Настройка рабочего проекта

Lesson 02

Lesson 04

Обязательное

Настройка проекта
GitHub Pages

1. Настроить свой рабочий проект и загрузить его на GitHub Pages
2. Загрузить папку со своим проектом на GitHub

Усложненное

Хостинг и домен.
Публикация сайта
GitHub Pages

1. Настроить свой рабочий проект
2. Загрузить его на хостинг
3. Привязать к домену

24
/
03

4

Lesson 04

Основы HTML

Lesson 03

Lesson 05

Обязательное

Посмотреть все HTML-теги
16 универсальных атрибутов для тегов

1) Создать HTML документ
2) Сверстать в нем данный отрывок из книги на ОДНОЙ странице, используя теги HTML
3) Проверить свой HTML код на правильность по этой шпаргалке
4) Загрузить папку с проектом на свой хостинг

Усложненное

Посмотреть все HTML-теги
16 универсальных атрибутов для тегов

1) Создать HTML документ
2) Сверстать в нем данный отрывок из книги на ОДНОЙ странице, используя теги HTML
3) Проверить свой HTML код на правильность по шпаргалке
4) Загрузить папку с проектом на свой хостинг

24
/
04

5

Lesson 05

Основы CSS

Lesson 04

Lesson 06

Обязательное

На прошлом уроке вы сверстали мини-книгу, используя HTML-теги. Создайте копию той книги и доделайте ее оформление, используя CSS-код.

1) Создать CSS документ
2) Оформить свою мини-книгу из УРОКА № 4
3) Проверить свой CSS код на правильность по шпаргалке
4) Загрузить папку с проектом на свой хостинг

Усложненное

На прошлом уроке вы сверстали мини-книгу, используя HTML-теги. Создайте копию той книги и доделайте ее оформление, используя CSS-код.

1) Создать CSS документ
2) Оформить свою мини-книгу из УРОКА № 4
3) Проверить свой CSS код на правильность по шпаргалке
4) Загрузить папку с проектом на свой хостинг

24
/
05

6

Lesson 06

Блочная модель CSS

Lesson 05

Lesson 07

Обязательное

Скачать макет, прикрепленный к уроку
Сверстать карточку товара

1) Сверстать карточку товара, используя строчно-блочную верстку
2) Сама карточка (прямоугольник с белым фоном) должна находиться по центру страницы по горизонтали
3) Чтобы расположить картинку слева, а текст справа - используйте свойство display: inline-block
4) Загрузить папку с проектом на свой хостинг

Усложненное

Скачать макет, прикрепленный к уроку
Сверстать карточку товара

1) Сверстайте карточку товара, используя строчно-блочную верстку
2) Сама карточка (прямоугольник с белым фоном) должна находиться строго по центру страницы по горизонтали и по вертикали независимо от размера экрана
3) При уменьшении размера экрана до 991 пикселя блок (прямоугольник с белым фоном) также меняет свой размер. При этом контент не должен выпадать за пределы блока
4) Загрузить папку с проектом на свой хостинг

24
/
06

7

Lesson 07

Flexbox CSS

Lesson 06

Lesson 08

Обязательное

Скачать макет для ОБЯЗАТЕЛЬНОГО домашнего задания, прикрепленный к уроку

1) Сверстать секцию, используя только верстку Flexbox
2) Нельзя использовать Bootstrap
3) В этом задании шрифты подключать не обазятельно, вы можете просто указать значение font-family: sans-serif (или выбрать любой системный шрифт)
4) Загрузить папку с проектом на свой хостинг

Усложненное

Скачать макет для УСЛОЖНЕННОГО домашнего задания, прикрепленный к уроку

1) Сверстать ПЕРВЫЕ ДВЕ секции, используя только верстку Flexbox
2) Нельзя использовать Bootstrap
3) Загрузить папку с проектом на свой хостинг

24
/
07

8

Lesson 08

Вёрстка макета на HTML и CSS

Lesson 07

Lesson 09

Обязательное

Сверстать макет, прикреплённый к уроку.

1) Выполнить вёрстку секций: главная, о книге и подвал сайта.
2) Нельзя использовать Bootstrap
3) Адаптировать сайт под маленькие экраны не нужно.
4) Загрузить папку с проектом на свой хостинг

Усложненное

Сверстать макет, прикреплённый к уроку полностью.

1) Свёрстаны должны быть все секции и блоки из макета.
2) Разместите картинки в секции “Люди” таким образом, чтобы можно было вставить туда любые фото и вёрстка не будет нарушена. Если вы добавляете другое фото и блоки разъезжаются и ваша вёрстка “ломается” — задание не выполнено.
3) Загрузить папку с проектом на свой хостинг

24
/
08

9

Lesson 09

Библиотека Bootstrap 4

Lesson 08

Lesson 10

Обязательное

Сверстать ряд, в котором 6 иконок. Отображаться они должны с следующем виде:

1) На самых маленьких мониторах ( < 576px) в ряд по 1 элементу
2) На маленьких мониторах (≥576px) также в ряд по 1 элементу
3) На средних мониторах (≥768px) в ряд по 2 элемента
4) На больших мониторах (≥992px) в ряд по 3 элемента
5) На очень больших мониторах (≥1200px) в ряд по 6 элементов
6) Загрузить папку с проектом на свой хостинг

Усложненное

Сверстать ряд, в котором 6 иконок. Отображаться они должны с следующем виде:

1) На самых маленьких мониторах ( < 576px) в ряд по 1 элементу.
2) На маленьких мониторах (≥576px) также в ряд по 1 элементу.
3) На средних мониторах (≥768px) в ряд по 2 элемента
4) На больших мониторах (≥992px) в ряд по 3 элемента
5) На очень больших мониторах (≥1200px) в ряд по 6 элементов
6) Сделать так, чтобы на мобильной версии ( < 576px) 4-й элемент стал первым

24
/
09

10

Lesson 10

Вёрстка на Bootstrap

Lesson 09

Lesson 11

Обязательное

Сверстать макет, прикреплённый к уроку, используя библиотеку Bootstrap 4.

1) Выполнить вёрстку секций: главная, о книге и подвал сайта.
2) Адаптировать сайт под маленькие экраны не нужно.

Усложненное

Сверстать макет, прикреплённый к уроку, используя библиотеку Bootstrap 4.

1) Свёрстаны должны быть все секции и блоки из макета.
2) Пропишите все необходимые классы, чтобы сайт хорошо смотрелся на маленьких, средних и больших экранах — используйте для этого ту же библиотеку Bootstrap.

24
/
10

11

Lesson 11

Препроцессоры в CSS

Lesson 10

Lesson 12

Обязательное

Скачать архив, прикрепленный к уроку

1) Написать SASS-файл, который на выходе скомпилируется (преобразуется) в такой же CSS-файл
2) Прикрепить sass файл с выполненным ДЗ

Задание на баллы №1

Скачать макет, прикрепленный к уроку

1) Сверстать его ТОЛЬКО с использованием ГОТОВЫХ компонентов Bootstrap 4
2) Загрузить папку с проектом на свой хостинг

24
/
11

12

Lesson 12

Git. Подготовка к практике

Lesson 11

Lesson 13

Обязательное

Создать новый репозиторий на GitHub

1) Клонировать репозиторий на свой компьютер
2) Создать базовый шаблон в index.html
3) Создать Commit и отправить изменения в репозиторий (Сделать PUSH)

Задание на баллы №2

Скачать архив, прикрепленный к уроку

1) Создать свой SASS-файл, используя переменные и цветовые функции
2) Загрузить архив с проектом в формате .ZIP на облачный сервис

24
/
12

13

Lesson 13

Адаптивная вёрстка. Mobile First

Lesson 12

Lesson 14

Обязательное

Сверстать шапку из макета, прикрепленного к уроку.

1) Сверстать шапку из макета, прикрепленного к уроку.
2) Адаптировать шапку под экраны, шириной менее 1200px. и менее 768px.

Усложненное

Сверстать шапку из макета, прикрепленного к уроку.

1) Сверстать шапку из макета, прикрепленного к уроку. Адаптировать шапку под экраны, шириной меньше 1200px., меньше 768px. и меньше 567px.
2) Проверить свою вёрстку на совпадение с макетом по методу Pixel Perfect. Для этого можно воспользоваться инструментом Avocode, который называется Pixel Checker.
3) Вёрстка должна совпадать с макетом на экранах шириной более 1200px и на экранах шириной 320px.

24
/
13

14

Lesson 14

БЭМ

Lesson 13

Lesson 15

Обязательное

Сверстать блок hero по практическому макету.

1) Сверстать блок hero по практическому макету.
2) Адаптировать этот блок под экраны, шириной менее 1200 пикс. и менее 768 пикс.
3) В ответе к уроку прикрепить ссылку на выполненное домашнее задание

Усложненное

Сверстать блок hero по практическому макету.

1) Сверстать блок hero по практическому макету.
2) Использовать методологию BEM.
3) Адаптировать этот блок под экраны, шириной менее 1200, 768, 320 пикс.

24
/
14

15

Lesson 15

Шрифты

Lesson 14

Lesson 16

Обязательное

Подключить шрифты.

1) Подключить шрифты к сайту.
2) Подогнать всю вёрстку под макет по принципу Pixel Perfect, используя инструмент Pixel checker от Avocode.
3) В ответе к уроку прикрепить ссылку на выполненное домашнее задание

Усложненное

Подключить шрифты к сайту, не используя Google Fonts или Webfonts.pro.

1) Сверстать блок hero по практическому макету.
2) Скачайте исходники шрифта.
3) В архиве находятся шрифты в формате .ttf Ваша задача конвертировать исходники в .woff и .eot, используя конвертер шрифтов и подключить их к сайту.
4) В ответе к уроку прикрепите ссылку на выполненное задание.

24
/
15

16

Lesson 16

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

Lesson 15

Lesson 17

Обязательное

Используйте псевдоклассы и псевдоэлементы.

1) Дополните стили для кнопок на вашем сайте, чтобы поведение кнопки менялось при наведении курсора.
2) Стилизуйте список в секции hero, чтобы у последнего элемента в списке не было отступа снизу.
3) Сверстайте секцию offer с использованием псевдоэлемента :before
4) Адаптируйте вашу вёрстку и сравните её с макетом через pixel checker.

Усложненное

Используйте псевдоклассы и псевдоэлементы.

1) Прочитайте статьи, которые указаны в разделе “ссылки”.
2) Стилизуйте input внутри формы в блоке offer, чтобы при клике на input его обводка сменялась с серого цвета на оранжевый, пока этот инпут находится “в фокусе”.

24
/
16

17

Lesson 17

Знакомство с JavaScript

Lesson 16

Lesson 18

Обязательное

Написать скрипт на чистом JavaScript

1) Написать скрипт для показа модального окна на сайте на чистом JavaScript.
2) Окно должно всплывать при клике на кнопку “Перезвоните мне”. При клике на кнопку закрыть в модальном окне, оно должно пропадать.

Усложненное

Сверстать ряд, в котором 6 иконок. Отображаться они должны с следующем виде:

1) Напишите скрипт, который закрывает модальное окно через 5 секунд после его появления.
2) Модальное окно появляется при клике на кнопку “Перезвоните мне”. Закрывается автоматически, спустя 5 секунд. Подсказка: вам понадобятся функции setInterval или setTimeout.

24
/
17

18

Lesson 18

jQuery

Lesson 17

Lesson 19

Обязательное

Написать скрипт на чистом jQuery

1) Написать jQuery-скрипт для показа модального окна, как это показано в уроке.
2) В ответе к уроку прикрепить ссылку на выполненное задание.

Усложненное

Написать скрипт на чистом jQuery

1) Сверстать на сайте небольшую кнопку со стрелкой наверх.
2) При клике на кнопку страница должна откручиваться на самый верх.
3) Скрипт этого события должен быть написан на jQuery.

24
/
18

19

Lesson 19

Слайдеры на сайте

Lesson 18

Lesson 20

Обязательное

Установить слайдер Slick

1) Сверстать и установить слайдер на сайте в блоке “Портфолио”, как это показано в видео-уроке.
2) Использовать слайдер Slick.

Усложненное

Установить слайдер Owl Carousel

1) Сверстать и установить слайдер на сайте в блоке “Портфолио”.
2) Использовать для этого библиотеку Owl Carousel 2.

24
/
19

20

Lesson 20

Анимация на CSS3

Lesson 19

Lesson 21

Обязательное

Подключить к сайту wow.js

1) Подключить к сайту “Ремонт квартир” библиотеку animate.css и wow.js.
2) Продумать анимацию 5-6 элементов на сайте. Выбрать их можно с любых секций, главное, чтобы это было уместно.
3) Реализуйте анимацию (желательно анимировать ещё что-то, кроме карточек в секции price).

Усложненное

Написать анимацию для сайта

1) Написать анимацию для сайта “Ремонт квартир” без использования сторонних CSS и JS библиотек.
2) Используйте @keyframes при написании анимации.
3) Написать скрипт JS (или jQuery), который запускает анимацию элементов только тогда, когда пользователь увидел его (доскролил до нужного элемента).

24
/
20

21

Lesson 21

Валидация форм

Lesson 20

Lesson 22

Обязательное

Реализовать валидацию всех форм.

1) Реализовать валидацию всех форм, которые имеются на сайте.
2) Добавить поле email во вторую форму на сайте.
3) Если поле не заполнено, должно появляться сообщение “Заполните поле”. Если пользователь вводит некорректный email должно появиться сообщение “Введите корректный email”

Усложненное

Написать анимацию для сайта

1) При проверке на валидность формы, в случае ошибки поле для ввода (input) должно иметь красную рамку толщиной в 1 пиксель. При этом сообщение об ошибке не должно иметь такую рамку.
2) Класс, который должен присваиваться элементам при ошибке должен называться “invalid”, вместо класса “error”.
3) Сообщение об ошибке должно выводиться в теге div, вместо тега label

24
/
21

22

Lesson 22

Гео-карты на сайте

Lesson 21

Lesson 23

Обязательное

Яндекс карта

1) Сверстать подвал сайта и подключить карты от Яндекса с помощью конструктора карт.
2) Прикрепить ссылку на выполненное ДЗ.

Усложненное

Yandex Map API

1) Подключить к сайту карту от Яндекса, используя Yandex Map API (JavaScript).
2) Оптимизировать карту

24
/
22

23

Lesson 23

Аналитика для сайта

Lesson 22

Lesson 24

Обязательное

Яндекс Метрика

1) Подключить к сайту счётчик Яндекс Метрика.
2) В качестве цели указать нажатие на кнопку “Перезвоните мне”.

Усложненное

Счётчик Яндекс Метрики

1) Подключить к сайту счётчик Яндекс Метрика.
2) В качестве цели указать отправку заполненной формы обратной связи на сайте. Форму можно выбрать любую.

24
/
23

24

Lesson 24

Тестирование и оптимизация вёрстки

Lesson 23

Обязательное

Настроить Gulp

1) Настроить gulp так, чтобы он подготовил все файлы сайта к публикации.
2) Протестировать свою верстку на разных браузерах и устранить все недочёты по макету.
3) Проверить HTML-код на валидность — устранить все ошибки, которые найдёт валидатор.
4) Проверить скорость загрузки своего сайта через Google Page Speed и оптимизировать свою вёрстку до 80+ баллов.

Усложненное

Настроить gulp для сжатия файлов

1) Настроить gulp так, чтобы он сжимал все файлы, в том числе и JavaScript.
Но важно настроить его так, чтобы он не сжимал уже минимизированные файлы из папки src. То есть если в папке лежат минимизированные js файлы, Gulp должен просто переложить их в папку dist/js. Если же в папке есть несжатые файлы javascript, Gulp должен их сначала сжать, присвоить им имя заканчивающееся на .min.js и положить в папку dist/js.

24
/
24