#18 Вёрстка сайта визитки для начинающих | HTML, CSS, JS - Секция работа
Сегодня займёмся секцией работа! В этом видео научимся проводить большие вычисления для расположения элементов на странице. Увидим пользу и удобство. В самом конце познакомимся с html Data атрибутами!
Поддержать канал:
https://www.tinkoff.ru/rm/shevchuk.vi...
https://www.donationalerts.com/r/webp...
Подписывайтесь и ставьте лайк, приятного просмотра!
Также обязательно подпишись на мой телеграм канал, там будет много общения и ответов на вопросы!
https://t.me/webpacman
------------------------------------------------
Ссылки:
GitHub: https://github.com/webpacman/webpacma...
GitHub Pages: https://webpacman.github.io
Код урока: https://github.com/webpacman/webpacma...
Тайминг:
00:00 - Вступление
00:46 - Начинаем вёрстку секции работа
02:18 - Анализ готового сайта и подготовленной HTML структуры. Подготовка стилей
03:37 - Альтернативный способ описания стилей для чередующихся элементов
04:01 - Продолжаем подготовку стилей для секции
04:47 - align-items и justify-content при flex direction column
06:35 - Базовые стили для элемента работы
10:43 - Стилизация года устройства на работу
13:39 - Математика для расчётов позиции after элементов в секции
19:53 - Наполнение before и after элементов через свойство content
21:12 - Математика для расчётов позиции before элементов в секции
27:03 - Решаем проблему высоты средней линии
29:58 - Плавная анимация появления элементов. Css vw
39:13 - Стилизация карточки работы
47:24 - Реализация тултипа (подсказки) при наведении
51:38 - Завершения стилизации
57:41 - data - атрибуты. Использование их в css
Музыка:
Dead Pacman by N3rgul
Track: Home — Another Kid [Audio Library Release]
Music provided by Audio Library Plus
Watch: • Home — Another Kid | Free Background Music...
Free Download / Stream: https://alplus.io/home-another-kid
Track: Midnight — Declan DP [Audio Library Release]
Music provided by Audio Library Plus
Watch: • Midnight — Declan DP | Free Background Mus...
Free Download / Stream: https://alplus.io/midnight-declan-dp
Track: Old Times — Next Route [Audio Library Release]
Music provided by Audio Library Plus
Watch: • Old Times — Next Route | Free Background M...
Free Download / Stream: https://alplus.io/old-times-next-route
Track: Oxygen — Next Route [Audio Library Release]
Music provided by Audio Library Plus
Watch: • Oxygen — Next Route | Free Background Musi...
Free Download / Stream: https://alplus.io/oxygen-next-route
Track: Falling — Declan DP [Audio Library Release]
Music provided by Audio Library Plus
Watch: • Falling — Declan DP | Free Background Musi...
Free Download / Stream: https://alplus.io/falling-declan-dp
Track: Peace — Next Route [Audio Library Release]
Music provided by Audio Library Plus
Watch: • Peace — Next Route | Free Background Music...
Free Download / Stream: https://alplus.io/peace-next-route
Track: Back To Party — Zackross [Audio Library Release]
Music provided by Audio Library Plus
Watch: • Back To Party — Zackross | Free Background...
Free Download / Stream: https://alplus.io/back-party
------------------------------------------------
Привет! Меня зовут Виталий Шевчук, я веб-разработчик. Свой путь в разработке сайтов я начал ещё в школе, создавая форумы для игр. К текущему времени я получил много опыта в разработке сайтов и очень хочу им поделиться с вами!
------------------------------------------------
Telegram: https://t.me/webpacman
Сайт: http://vshevchuk.ru/
Теги: #html #html5 #верстка #css #css3 #css3tutorial