ОБРАЗЕЦ

ВВОДНЫЙ МОДУЛЬ
- Добро пожаловать на курс! :)
- Давайте знакомиться :)
- Ваш финальный проект №1 или чему вы научитесь за 2 месяца
- Финальные проекты моих студентов. Вдохновляйтесь! :)
- Как проходят занятия?
- Как ускорить работу на компьютере?
- Гид: 10 самых нужных действий на клавиатуре
- Технические неполадки: куда писать?
- Где и как задавать вопросы?
- ВАЖНО !
- Совет и чат :)
- Специальные символы HTML https://htmlweb.ru/html/symbols.php#title2
Модуль 1. Что такое HTML?
- 1. HTML и CSS - это....
- 2. Немного истории и... две важные аббревиатуры
- 3. Наша первая платформа для написания кода
- 4. Проверьте свою интуицию :)
- 5. Почему такой цвет?
- 6. Создавать аккаунт на Codepen или нет?
- 7. Готовимся к написанию кода!
- 8. Структура страницы: с чего мы начнём?
- 9. Заголовок
- 10. Видео-шпаргалка - h1
- 11. Видео-шпаргалка - h2
- 12. Видео-шпаргалка - h3
- 13. Видео-шпаргалка - h4
- 14. Видео-шпаргалка - h5
- 15. Видео-шпаргалка - h6
- Важная информация
- Обязательное домашнее задание № 1 - Заголовки от мелкого к крупному
- Надо ли сдавать домашние задания?
- Обязательное домашнее задание №2 - Заголовки от крупного к мелкому
- 16. Курсив
- Обязательное домашнее задание № 3 - Курсив + 5 примеров по аналогии (смотрите вторую часть задания под картинкой)
- 17. Абзац
- Обязательное домашнее задание №4 - Абзац + 5 других примеров по аналогии (смотрите вторую часть задания под картинкой)
- 18 - Жирный шрифт
- Обязательное домашнее задание №5 - Жирный шрифт
- Обязательное домашнее задание №6- Жирный шрифт и курсив + 5 примеров по аналогии (смотрите под картинкой)
- 19. Перенос строки
- Обязательное домашнее задание № 7 - Перенос строки
- 20. Списки: нумерованные и ненумерованные
- 21. Видео-шпаркалка: нумерованные и ненумерованные списки ol и ul
- Обязательное домашнее задание №8 - Рецепт омлета с сыром
- Обязательное домашнее задание №9 - Список продуктов
- 22. Списки понятий dl
- 23. Видео-шпаргалка: список понятий
- Обязательное домашнее задание № 10 - Список понятий (толкование)
- 24. Немного о CSS и о взаимодействии между HTML и CSS
- Обязательное домашнее задание №11 - Цвета шрифтов
- 25. Понятия
- Словарь - модуль 1
- МОДУЛЬ 1 - Словарь в формате PDF
Модуль 1: Дополнительные домашние задания
- Задание № 1. Лондон
- Задание № 2. Религия в Нью-Йорке
- Задание № 3. Авиасообщение в Нью-Йорке
- Задание № 4. Рецепт омлета
- Задание № 5. Сериал "Друзья"
- Задание № 6. Награды сериала "Друзья" + Новый материал
Модуль 2. Создание первого сайта
- Ещё один вопрос к вам
- Чат единомышленников
- ВАЖНО!
- Разбираем несколько распространенных ошибок домашних заданий первого модуля
- 1. Как установить Google Chrome
- Обязательное домашнее задание №1 - Установите Google Chrome
- 2 - Как установить редактор кода - VS Code
- Обязательное домашнее задание №2 - Установите VS Code
- 3 - Начинаем работу с VS Code
- Обязательное домашнее задание №3 - Отобразите заголовок в Google Chrome
- 4 - Крутые лайфхаки использования VS Code
- 5 - Разбираем шаблон в HTML
- 6 - Шпаргалка по шаблону HTML
- 7 - Где искать классные фотографии для сайтов, приложений или... instagram?
- 8 - Учимся добавлять изображения на сайт
- 9 - Видео-шпаралка - Изображения
- Обязательное домашнее задание №4 - Добавьте изображения на сайт
- 10 - Ссылки
- 11 - Ссылки на разные рубрики(секции) в пределах одного сайта
- 12 - Видео-шпаргалка - Ссылки
- Обязательное домашнее задание №5 - Ссылки
- Обязательное домашнее задание №6 - Создаём наш первый сайт! СРАЗУ ПОСЛЕ ПРОСМОТРА ЭТОГО ВИДЕО ПРОЧИТАЙТЕ ДОКУМЕНТ СЛЕДУЮЩЕГО УРОКА
- Как приступить к этому заданию? План действий!
- Ответ на домашнее задание № 6 - Сайт с вашими любимыми фильмами - Обязательно посмотрите перед началом работы!
- Как отправить сайт на проверку?
- Возможная проблема, с которой вы столкнётесь и решение :)
- Для тех, кому мало и кто жаждет практиковаться! :)
- Словарь - модуль 2
- МОДУЛЬ 2 - Словарь в формате PDF
- А CSS где?
- БОНУС! Вебинар 1 - Субботу 22 января 2022 - Страхи и сомнения - ЗАПИСЬ!
- Вопросы к вам - Модуль 2
Модуль 2 - Ответы на домашние задания
- Домашние задания №1, 2, 3
- Домашнее задание №4 - Изображение
- Домашнее задание №5 - Ссылки
- Домашнее задание № 6 - Сайт
Модуль 3. Продвинутый HTML и знакомство с CSS
- 1 - Таблицы: введение
- 2 - Стиль таблиц
- Обязательное домашнее задание № 1 - Строим первую таблицу
- Обязательное домашнее задание №2 - Ширина таблиц
- 3 - Плохая практика или как НЕ надо делать!
- 4 - Как добавить emojis + Обязательное домашнее задание №3
- 5 - Шпаргалка - Как добавить emojis?
- 6 - Видео-шпаргалка - Таблицы
- 7 - Приступаем к CSS!
- Обязательное домашнее задание №4 - Рецепт из авокадо
- 8 - Способ 1 - Internal CSS - Внутренний CSS
- 9 - Способ 2 - Inline CSS - Встроенный CSS
- 10 - Способ 3 - External CSS - Внешний CSS
- 11 - Какой способ лучше?
- 12 - Шпаргалка - Как сделать код невидимым для браузера в VS Code?
- 13 - Шрифт и размер текста
- Обязательное домашнее задание №5 - Рецепт из авокадо (CSS)
- Обязательное домашнее задание №6 - Скрываем код от браузера
- 14 - Property and value - Свойство и значение
- 15 - Tag selectors - Селекторы тегов
- 16 - Class selectors - Селекторы классов
- 17 - Шпаргалка - Селекторы (tag selectors and class selectors)
- 18 - Шпаргалка - Selector, property and value
- 19 - Как правильно сочетать цвета?
- Обязательное домашнее задание №7 - Преображаем сайт с фильмами
- 20 - Ответ на обязательное задание №7 + Новый материал по границам таблицы
- Обязательно смотрим следующие 2 урока ДО начала работы! Обязательное домашнее задание №8 - Резюме
- 21 - Обязательно смотрим следующее видео ДО начала работы! Требования по домашнему заданию
- Ответ на домашнее задание №8 - Обязательно посмотрите это видео ДО начала работы над резюме
- Дополнительное домашнее задание - Создайте своё резюме!
- Если вы хотите больше практики
- Словарь - Модуль 3
- МОДУЛЬ 3 - Словарь в формате PDF
- МОДУЛЬ 3 - Вопросы к вам. Буду ждать ваши ответы :)
Модуль 3: Ответы на домашние задания
- Видео-ответ на домашнее задание №1 - Строим первую таблицу
- Видео-ответ на домашнее задание №2 - Ширина таблиц
- Обязательное домашнее задание №3
- Обязательное домашнее задание №4 - Рецепт из авокадо
- Обязательное домашнее задание №5 - Рецепт из авокадо (CSS)
- Обязательное домашнее задание №6 - Скрываем код от браузера
- Обязательное домашнее задание №7 - Преображаем сайт с фильмами
- Обязательное домашнее задание №8 - Резюме
Модуль 4. CSS - продолжение и... кнопки!
- 1 - Психология цвета - Вебинар
- 2 - Виды границ
- Обязательное задание №1 - Границы таблицы
- Обязательное домашнее задание №2 - Границы таблицы
- 3 - Отступ
- Обязательное домашнее задание № 3 - Отступ
- Обязательное домашнее задание №4 - Отступ
- 4-Оформление кода - Indentation
- Обязательное домашнее задание №5 - Установите плагин indent-rainbow
- Обязательное домашнее задание №6- Оформление кода
- 5 - Где искать дополнительную информацию?
- 6 - Как создать УНИКАЛЬНУЮ иконку?
- 7 - Как добавить логотип в title?
- Обязательное домашнее задание №7 - Создайте уникальную иконку
- 8 - Родители, дети, div...
- 9 -
  или
  ? И... заглядываем в REACT
- Обязательное домашнее задание №8 - div **Уровень сложности: выше среднего
- 10 - ID selectors - Селекторы ID
- 11 - Дополнительные материалы по id selectors (English + мой перевод главного)
- Обязательное домашнее задание №9 - Id
- 12 - Padding... Padding.... Набивка?
- Обязательное домашнее задание №10 - Padding
- 13 - Кнопки - Как они формируются в HTML и немного CSS
- 14 - Кнопки - Hover
- 15 - Кнопки и разные виды курсора
- 16 - Транзиция в кнопках
- 17 - Ссылка в кнопке?
- 18 - Ширина кнопок
- Обязательное домашнее задание №11 - Кнопка "Нажми на меня"
- Дополнительное домашнее задание - Кнопки
- Дополнительное домашнее задание - Кнопка "Купить"
- Обязательное домашнее задание №12 - Кнопка "Заказать"
- 19 - Шрифты
- Обязательное домашнее задание №13 - Шрифты
- Подтяните все свои хвосты
- Словарь - Модуль 4
- МОДУЛЬ 4 - Словарь в формате PDF
- МОДУЛЬ 4 - Вопрос к вам
Модуль 4 - Ответы на домашние задания
- Обязательное домашнее задание № 1 - Границы таблицы
- Обязательное домашнее задание №2 - Границы таблицы
- Обязательное домашнее задание №3
- Обязательное домашнее задание №4 - Отступ
- Ответы №5-7
- Обязательное домашнее задание №8 - Div
- Обязательное домашнее задание №9 - id
- Обязательное домашнее задание №10 - Padding
- Обязательное домашнее задание №11 - Кнопка НАЖМИ НА МЕНЯ
- Обязательное домашнее задание №12 - Кнопка ЗАКАЗАТЬ
- Дополнительное домашнее задание - Кнопка КУПИТЬ
Модуль 5. Продвинутый HTML и продолжение CSS
- 1 - Фильтры изображений
- Обязательное домашнее задание №1 - Добавьте фильтры на изображения
- 2 - Opacity в изображениях
- Обязательное домашнее задание №2 - Меняем насыщенность
- 3 - Margin-top... или нет?
- 4 - Позиционирование в CSS
- 5 - Позиционирование: absolute;
- Обязательное домашнее задание №3 - Позиционирование в CSS
- Как выполнить обязательное задание №3?
- Видео-ответ на домашнее задание №3 - Позиционирование в CSS
- 6 - Анкета - Продвинутый HTML
- 7 - Анкета - Создаем поля (type: text и type: email)
- Обязательное домашнее задание №4 - Поля анкеты
- 8 - Анкета - Меню выбора (select)
- Обязательное домашнее задание №5 - Меню выбора
- 9 - Анкета - Опции возраста
- Обязательное домашнее задание №6 - Опции
- 10 - Анкета - Checkbox
- Обязательное домашнее задание №7 - Checkbox
- 11 - Пароль в анкетах
- 12 - Как разделять поля анкет?
- Большое домашнее задание №8 - Анкета школы программирования
- Как приступить к этому заданию? План действий!
- Что должно получиться? + Изображение
- Ответ на домашнее задание №8 "Анкета школы программирования" - Часть 1
- Ответ на домашнее задание - Часть 2
- 13 - Как зачеркнуть текст? 2 способа
- Обязательное домашнее задание №9 - Подчёркиваем двумя способами
- Дополнительное домашнее задание - Зачеркиваем и подчёркиваем
- Инструкция по выполнению задания - Примерный порядок действий
- 14 - Как указать номер телефона?
- Обязательное домашнее задание №10 - Укажите свой номер телефона в вашем резюме
- Словарь - модуль 5
- МОДУЛЬ 5 - Словарь в формате PDF
- МОДУЛЬ 5 - Вопрос к вам
Модуль 5 - Ответы на домашние задания
- Обязательное домашнее задание №1 - Фильтры
- Обязательное домашнее задание №2 - Opacity
- Обязательное задание №3
- Обязательное домашнее задание №4 - Поля анкеты
- Обязательное домашнее задание №5
- Обязательное домашнее задание №6
- Обязательное домашнее задание №7
- Обязательное домашнее задание №9 - Подчёркиваем двумя способами
- Дополнительное домашнее задание
Модуль 6. Продвинутый CSS + Отображение сайта на разных устройствах (iPhone, iPad, Galaxy...)
- 1 - Что мы будем изучать в этом модуле?
- ВАЖНО !
- 2 - Понятие и немного истории....
- 3 - Готовимся к применению flexbox
- 4 - Display: flex;
- 5 - Flex-direction: основные свойства
- Шпаргалка - Flex-direction: row и column
- 6 - Flex-direction: другие свойства
- Обязательное домашнее задание №1
- Обязательное домашнее задание №2
- 7 - Главная и поперечная оси
- Шпаргалка - Главная и поперечная оси
- 8 - Justify-content: горизонтальная ось
- Обязательное домашнее задание №3
- Обязательное домашнее задание №4
- Обязательное домашнее задание №4
- Обязательное домашнее задание №5
- Обязательное домашнее задание №6
- 10 - Align-items: горизонтальная ось
- Обязательное домашнее задание №7
- 11 - Align-items: вертикальная ось
- Обязательное домашнее задание № 8
- 12 - Flex-wrap - горизонтально
- Обязательное домашнее задание №9
- 13 - Flex-wrap - вертикально
- 14 - Align-content - горизонтально
- 15 - Align-content - вертикально
- 16 - Flex-flow
- 17 - Flex: 1;
- Дополнительное домашнее задание - flex;
- 18 - Order - Порядок элементов
- Дополнительное домашнее задание - Order
- 19 - Align-self - перемещаем индивидуальные элементы
- Дополнительное домашнее задание - align-self
- 20 - Меню сайта - Способ 1
- 21 - Меню сайта - Способ 2
- 22 - Слова мудрости :) Ну... типа того.
- 23 - Двигаем лягушек!
- Обязательное домашнее задание - Лягушки. ОЧЕНЬ НУЖНАЯ ПРАКТИКА!! Не пропускайте!
- 24 - Видео-объяснение - Лягушки - Часть 1
- 25 - Видео-объяснение - Лягушки - Часть 2
- 26 - Видео-объяснение - Лягушки - Часть 3
- Обязательное домашнее задание №10
- 27 - Видео-ответ - Позиционирование через Flexbox
- 28 - Видео-ответ - Добавляем дизайн
- 29 - Как наш сайт отображается на разных устройствах?
- 29.1 - Небольшое пояснение по поводу следующих видео и мобильных устройств
- 30 - Меняем фоновый цвет сайта на разных устройствах (iphone, Ipad, Galaxy)
- 31 - Позиционирование на мобильных устройствах - Часть 1
- 32 - Позиционирование на мобильных устройствах - Часть 2
- Обязательное домашнее задание №11 - Адаптируйте наш сайт с сериалами под мобильные устройства
- Дополнительное домашнее задание
- Дополнительное домашнее задание - Меню на разных устройствах
- 34 - Большое домашнее задание - ПРОДВИНУТЫЙ УРОВЕНЬ! Создаем сайт-визитку кабинета адвокатов
- 35 - Видео-ответ - Меню
- 36 - Видео-ответ - Добавляем фото и её растягиваем по горизонтали
- 37 - Видео-ответ - Меняем цвет фона
- 38 - Видео-ответ - Добавляем фото и цитату
- 39 - Видео-ответ - Слово "Экспертиза"
- 40- Видео-ответ - Отрасли права
- 41 - Видео-ответ - Слово "Тарифы"
- 42 - Видео-ответ - Изображение
- 43 - Видео-ответ - Стоимость услуг
- 44 - Видео-ответ - Анкета
- 45 - Видео-ответ "Кнопка"
- Словарь - Модуль 6
- МОДУЛЬ 6 - Словарь в формате PDF
- МОДУЛЬ 6 - Вопрос к вам
Модуль 6. Ответы на домашние задания
- Обязательное домашнее задание №1
- Обязательное домашнее задание №2
- Обязательное домашнее задание №3
- Обязательное домашнее задание №4
- Обязательное домашнее задание №5
- Обязательное домашнее задание №6
- Обязательное домашнее задание №7
- Обязательное домашнее задание №8
- Обязательное домашнее задание №9
- Дополнительное задание - flex
- Дополнительное задание - align-self
- Задания 10 и 11
- Дополнительное задание - мобильные устройства
Модуль 7 - Финальный проект 1 "Сайт пекарни"
- 1 - Где искать видео?
- 2 - Как добавить видео на сайт?
- Обязательное домашнее задание №1
- 3 - Как располагать элементы под углом?
- Обязательное домашнее задание №2
- 4 - Финальный проект, который мы будем воспроизводить
- 5 - Требования и подсказки
- 6 - Макеты (или то, что должно получиться)
- 7 - Добавляем видео на сайт
- 8 - Работаем с h1 - Peach Bakery
- 9 - Добавляем фразу "Семейный бизнес, основанный в 1989 году"
- 10 - Добавляем фразу "Мы существуем, чтобы сделать вашу жизнь лучше"
- 11 - Меняем фоновый цвет сайта
- 12 - Добавляем первый элемент (Искушение)
- 13 - Добавляем второй элемент (Соблазн)
- 14 - Добавляем первого родителя
- 15 - Добавляем второго родителя
- 16 - Смещаем элементы на середину страницы
- 17 - Разделяем элементы
- 18 - Перемещаем h3 и img на середину элемента
- 19 - Добавляем желтый фон на список
- 20 - Меняем цвет h3
- 21 - Работаем с ценой
- 22 - Преображаем кнопку
- 23 - Добавьте остальные элементы
- 24 - Остальные элементы
- 25 - Проблема с размером одного из элементов
- 26 - Добавляем flex-wrap на родителя (мобильные устройства)
- 27 - Адаптируем шрифт под мобильные устройства
- 28 - Бесплатная платформа для публикации сайта
- 29 - Переносим код на этот сайт
- 30 - Добавляем видео на сайт
- 31 - Публикуем сайт адвокатов на этой платформе
- Поздравляю! Вы закончили финальный проект! Но.... курс ещё не закончен.
- МОДУЛЬ 7 - Вопрос к вам
С 7. Что дальше?
- Ответы на домашние задания :)
- Требования к финальному проекту по курсу откроются через неделю
- Сертификат
МОДУЛЬ 8 - Финальный проект 2 - Экзамен
- 1 - Интересная фишка - 1! Как добавить ссылку на WhatsApp?
- 2 - Интересная фишка - 2! Как добавить ссылку на карту Google Maps?
- 3 - Интересная фишка 3! - "Эффект Юры"
- Как добавить несколько страниц на платформу?
- Как привязать купленный домен?
- Требования к финальному проекту
- Идеи для личного проекта
- Как получить сертификат? 3 шага!
- Словарь - Весь курс
- Доступ к курсу
- Спасибо вам за всё! Заключительное видео
- Поздравляю! Вы закончили курс! :)
Бонусный урок! Где брать вдохновение и как сочетать цвета?
- Урок находится тут:
Слезы при мобильной адаптации позади !
- Курс
Бонусный модуль! Модуль 9. Сайт адвоката - новый визуал
- 1 - Создаем сайт-визитку кабинета адвокатов
- 2 - Текст и картинки
- 3 - Создаем папку и 2 документа
- 4 - Работаем над меню
- 5 - Добавляем изображение
- 6 - Добавляем заголовок к секции
- 7 - Позиционируем изображение и текст
- 8 - Рубрика "Why our firm?" - Часть 1
- 9 - Рубрика "Why our firm?" - Часть 2
- 10 - Рубрика "Our expertise"
- 11 - Рубрика "Our services"
- 12 - Рубрика "Our address"
- 13 - Наш footer
- 14 - Кнопка "CALL US NOW"
- 15 - Советы по мобильной адаптации
- 16 - Домашнее задание
- 17 - Публикуем сайт на Netlify
- 18 - Мобильная адаптация
Бонусный модуль! Модуль 10. Сайт пекарни - новый визуал
- 1 - Какой сайт мы создадим?
- 2 - Добавляем видео и заголовок на сайт
- 3 - Добавляем изображения
- 4 - Our Specials
- 5 - Добавляем изображения под текстом
- 6 - Добавляем первые 2 элемента
- 7 - Добавляем текст
- 8 - Добавляем 4 торта
- 9 - Мобильная адаптация
- 10 - Мобильная адаптация и netlify
- 11 - Мобильная адаптация
Бонусный модуль! Семантическая верстка
- 1 - Что такое "семантическая верстка"?
- 2 - Header
- 3 - Примеры header
- 4 - Footer
- 5 - Примеры footer
- 6 - Aside
- 7 - Примеры aside
- 8 - Article
- 9 - Примеры article
- 10 - Section
- 11 - Main
- 12 - Анализируем сайт Джейми Оливера
- 13 - Можно ли в article поместить section?
- 14 - Резюме семантической верстки
- 15 - Домашнее задание
- 16 - Домашнее задание
- 17 - Интересный факт
- 18 - Анализ еще двух сайтов
- 19 - Пример - Семантическая верстка сайта адвокатов
- 20 - Пример - Семантическая верстка сайта пекарни
Бонусный модуль! Полезная информация
- 1 - Что такое кроссбраузерная верстка?
- 2 - Grid
- Лайфхаки - в формате PDF

Модуль 2. Создание первого сайта

For player

AAAAA bbbbb — ccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc cccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc.