На каком устройстве вы смотрите данное видео? Попробуйте открыть его на разных устройствах, скорее всего блоки перестраиваются, но вы также можете взаимодействовать с интерфейсом. Все это благодаря адаптивности. В этом уроке мы начнем перестраивать шапку сайта под разные устройства.

Дополнительные материалы: htmlbook.ru/css/value/media
html5book.ru/css3-mediazaprosy/
html5book.ru/css3-transform/
Ссылка на макет: www.figma.com/file/lFqXrgfJRmKsiF9wl9omlI/Portfolio
Чат в телеграм — t.me/joinchat/CJJ7_BROjQewexDwnr9Rpg

0:00 — Введение
0:30 — Изучаем макет
0:50 — Стандартные размеры устройств
1:09 — Про брейкпоинты
1:34 — Пишем медиа-выражение
2:20 — Смотрим результат
2:49 — Адаптируем для мобильных устройств
3:20 — Результат
3:37 — z-index
3:48 — Скрываем меню

Сайт компании — napoleonit.ru/
Записаться на другие курсы — napoleonit.ru/schools.html
Мы ВКонтакте — vk.com/napoleonit_school
Instagram — instagram.com/napoleonit_school
Детские курсы — junior.napoleonit.ru/

На сайте есть множество интерактивных элементов и все они должны работать плавно, чтобы пользователь понимал, что происходит. Например переход по элементам меню должен перемещать к выбранному пункту, но это должно быть не резко. В этом уроке вы научитесь переопределять стандартное поведение ссылок и делать переход по ним плавным.

Дополнительные материалы: developer.mozilla.org/ru/docs/Web/API/Event/preventDefault
learn.javascript.ru/coordinates-document

Ссылка на макет: www.figma.com/file/lFqXrgfJRmKsiF9wl9omlI/Portfolio
Чат в телеграм — t.me/joinchat/CJJ7_BROjQewexDwnr9Rpg

0:00 — Введение
0:28 — Получаем ссылки-якоря
1:10 — Добавляем прослушивание события
2:10 — Сбрасываем стандартное поведение
2:25 — Получаем ссылку на элемент

2:59 — Получаем место элемента по ссылке
3:34 — Добавляем переход к элементу
3:59 — Чиним скролл
4:30 — Выводы

Сайт компании — napoleonit.ru/

Записаться на другие курсы — napoleonit.ru/schools.html
Мы ВКонтакте — vk.com/napoleonit_school
Instagram — instagram.com/napoleonit_school
Детские курсы — junior.napoleonit.ru/

Вы ведь знаете, что сайт можно просматривать с разных устройств? Все блоки должны перестраиваться, а содержимое подстраиваться. Но что делать с картинками, если на мобильном устройстве они изменяются? Конечно можно подключать несколько вариантов и скрывать с помощью стилей, но это не лучшее решение. В видео разберем как загружать новые картинки на разных устройствах.

Дополнительные материалы: webref.ru/html/picture
developer.mozilla.org/ru/docs/Web/HTML/Element/picture

Ссылка на макет: www.figma.com/file/lFqXrgfJRmKsiF9wl9omlI/Portfolio
Чат в телеграм — t.me/joinchat/CJJ7_BROjQewexDwnr9Rpg

0:00 — Введение
0:33 — Смотрим макет первой страницы
0:59 — Почему бы просто не обрезать?
1:37 — Добавляем тег picture
2:49 — Как это работает?
3:03 — Стилизуем блок картинки
3:44 — Выводы

Сайт компании — napoleonit.ru/
Записаться на другие курсы — napoleonit.ru/schools.html
Мы ВКонтакте — vk.com/napoleonit_school
Instagram — instagram.com/napoleonit_school
Детские курсы — junior.napoleonit.ru/

Видели ли вы когда-нибудь слайдеры? Это такие блоки на сайте, которые показывают не все содержимое сразу, а постепенно переключают элементы. Чаще всего это какой-то набор картинок, но могут быть и обычные блоки с текстом, при нажатии на которые они будут как-то перемещаться. В этом уроке мы подключим готовый слайдер на страницу

Дополнительные материалы: kenwheeler.github.io/slick/

Чат в телеграм — t.me/joinchat/CJJ7_BROjQewexDwnr9Rpg

0:00 — Введение
0:31 — Подготовим HTML
0:55 — Используем готовый слайдер
1:33 — Подключение скриптов из интернета
1:45 — Подключение стилей из интернета
2:44 — Вставляем слайдер
3:29 — Домашнее задание

Сайт компании — napoleonit.ru/
Записаться на другие курсы — napoleonit.ru/schools.html
Мы ВКонтакте — vk.com/napoleonit_school
Instagram — instagram.com/napoleonit_school
Детские курсы — junior.napoleonit.ru/

Вы когда-нибудь работали или учились в окружении людей, которые очень быстро выполняют свою работу, ну или быстро учатся? Если да, то вы могли заметить, что вы тоже начинаете быстрее что-то делать. Окружение вас определяет. В веб-разработке тоже есть окружение, но это уже не люди, а специальные программы, которые помогают нам быстрее создавать конечный продукт. В этом видео будем обсуждать как ускорить процесс разработки.

Дополнительные материалы: code.visualstudio.com/
webdesign-master.ru/blog/html-css/2.html

Ссылка на макет: www.figma.com/file/lFqXrgfJRmKsiF9wl9omlI/Portfolio

Плагины:
Auto Close Tag — автоматическое закрытие тега
Auto Rename Tag — автоматическое переименование второй пары тега
Bracket Pair Colorizer — подсвечивает скобочки разной вложенности (удобно при работе с JS)
Live Server — локальный сервер
Material Icon Theme — красивые иконки для файлов
Open in browser — при клике на файл правой кнопкой мыши появляется возможность открыть в браузере (горячая клавиша alt b)
Path Intellisense — подсказывает пути до файлов

Чат в телеграм — t.me/joinchat/CJJ7_BROjQewexDwnr9Rpg

0:00 — Введение
0:20 — Устанавливаем vscode
0:58 — Создаем первый проект
2:57 — Включаем автосохранение
3:33 — Устанавливаем плагин Live Server
4:45 — Вывод
4:57 — Домашнее задание

Сайт компании — napoleonit.ru/
Записаться на другие курсы — napoleonit.ru/schools.html
Мы ВКонтакте — vk.com/napoleonit_school
Instagram — instagram.com/napoleonit_school
Детские курсы — junior.napoleonit.ru/

Краснодарский государственный институт культуры

Еженедельный стрим, на котором мы общаемся и узнаем много нового

 Чат в телеграм — t.me/joinchat/CJJ7_BROjQewexDwnr9Rpg

Сайт компании — napoleonit.ru/
Записаться на другие курсы — napoleonit.ru/schools.html
Мы ВКонтакте — vk.com/napoleonit_school
Instagram — instagram.com/napoleonit_school
Детские курсы — junior.napoleonit.ru/

С чего должен начинаться каждый проект? Я думаю с подготовки рабочего места, ну или среды для разработки. Если вы смотрели прошлое видео, то вы помните, что мы не рассказали об основной структуре файла html. Пришло время исправляться) А еще в этом видео мы подключим шрифты локально, но об этом уже в видео.

Дополнительные материалы: htmlbook.ru/css/font-face
htmlbook.ru/css/box-sizing
webdesign-master.ru/blog/html-css/2.html
Ссылка на шрифты: yadi.sk/d/9z0DOJ0NNikhIw
Ссылка на макет: www.figma.com/file/lFqXrgfJRmKsiF9wl9omlI/Portfolio
Чат в телеграм — t.me/joinchat/CJJ7_BROjQewexDwnr9Rpg

0:00 — Введение
0:15 — Как создать стандартную структуру HTML?
0:32 — Тег HTML
0:51 — Тег head
1:31 — Тег body
1:47 — Как подключить стили?
2:12 — Добавляем основные свойства
2:46 — Подключаем шрифты
6:25 — Выставляем основные стили для текста
7:51 — Выставляем отступы для страницы
9:18 — Выравниваем по центру
10:21 — Выводы

Сайт компании — napoleonit.ru/
Записаться на другие курсы — napoleonit.ru/schools.html
Мы ВКонтакте — vk.com/napoleonit_school
Instagram — instagram.com/napoleonit_school
Детские курсы — junior.napoleonit.ru/

ytimg.preload(https://r14---sn-axq7sn7s.googlevideo.com/generate_204);ytimg.preload(https://r14---sn-axq7sn7s.googlevideo.com/generate_204?conn2);Образовательный интенсив RUSSKY.DIGITAL | Front-end | Владилен Минин — YouTube<link rel=«alternate» type=«application/json oembed» href=«www.youtube.com/oembed?format=json

Еженедельный стрим, на котором мы общаемся и узнаем много нового

 Чат в телеграм — t.me/joinchat/CJJ7_BROjQewexDwnr9Rpg

Сайт компании — napoleonit.ru/
Записаться на другие курсы — napoleonit.ru/schools.html
Мы ВКонтакте — vk.com/napoleonit_school
Instagram — instagram.com/napoleonit_school
Детские курсы — junior.napoleonit.ru/