Адаптивная HTML CSS верстка сайта из Figma c нуля для новичков. Пошагово и подробно. Советы от профи
↓↓↓ Макет и ссылка на материалы в описании под видео ↓↓↓ Адаптивная верстка сайта с нуля для начинающих. Объяснение действий. В этом видео уроке я подробную покажу HTML CSS верстку простого макета из FIGMA. Поделюсь полезными приемами как быстро сделать адаптивную верстку, добавить мобильную навигацию и разместить видео на вашем сайте.
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💻 Курс “Профессия HTML верстальщик“:
Обучение с наставником, 3 месяца, результат, гарантия.
Старт курса: 4 Декабря 2023 года
💻 Курс “JS Frontend разработчик React“:
Обучение с наставником, 3 месяца, результат, гарантия.
Старт курса: 27 Ноября 2023 года
🏁 Обучение с нуля
💁♂️ Обучение с наставником
🎯 Доведение с нуля до результата
🏢 Помощь с трудоустройством
💵 Поможем взять первый заказ на фрилансе
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💻 Бесплатный курс по верстке сайтов:
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
МАТЕРИАЛЫ К УРОКУ:
• Макет:
• Код с урока:
• Урок по VS Code:
• Основы HTML:
• Сброс стилей :
ТАЙМ КОДЫ:
00:00 Знакомство с макетом и старт проекта
03:38 Сброс стилей
18:02 Базовые стили, контейнер, шрифты
29:57 Контейнер
33:40 Верстка шапки с навигацией
1:10:30 Верстка верхней секции
1:47:35 Секция How It Works - заголовок
2:04:48 Секция How It Works - колонки
2:32:34 Секция Story
2:56:56 Секция Our Product
3:27:54 Подвал
3:34:16 Правка багов
3:37:37 Читкод для отображения десктопной версии на смартфонах
3:41:58 Адаптивная верстка шапки и навигации
3:50:20 Адаптация первой секции
3:56:10 Адаптивная верстка секции How It Works - заголовок
4:00:30 Адаптивная верстка секции How It Works - колонки
4:07:42 Адаптивная верстка Story
4:12:51 Адаптив для секции Product
4:38:05 Адаптив для подвала
4:43:02 Мобильная навигация, скрипты
5:06:24 Видео в секции Story, Скрипты
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Меня зовут Юрий Ключевский. Я занимаюсь разработкой сайтов уже много лет, специализируюсь на front-end разработке и верстке сайтов, JavaScript и PHP программировании. Здесь буду делиться с вами информацией на разные темы по веб-разработке - HTML, CSS, JavaScript, jQuery, PHP, MySQL, React, Gulp.
На нашем канале вы найдете много полезных обучающих материалов, а так же сможете поработать со мной лично пройдя мои курсы.
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Сайт школы ВебКадеми:
Наша группа Вконтакте:
Telegram канал:
1 view
977
340
7 months ago 00:17:26 1
🔥 ПАТЧ ШЕМИРА Новый ПРОБУЖДЕННЫЙ Герой афк арена коды в описании 🔥AFK ARENA🔥
7 months ago 02:56:32 1
HTML - Полный Курс HTML Для Начинающих [3 ЧАСА]
7 months ago 00:28:24 1
Как подготовить дизайн-макет для передачи разработчику (верстальщику, программисту)
7 months ago 00:03:30 1
Обзор Honda Vezel, 2014 | Авто в продаже
7 months ago 01:16:34 1
Иммунитет. Антиоксиданты и стрессовые реакции. Алименко А.Н. ()
7 months ago 01:11:10 1
Профессионально верстаем макет с адаптивом, часть 2 | HTML, CSS
7 months ago 01:24:26 1
Профессионально верстаем макет с адаптивом, часть 1 | HTML, CSS
7 months ago 00:27:44 1
🔥 ТИР ЛИСТ 2023 МОГИЛОРОЖДЕННЫЕ самые сильные герои афк арена коды в описании 🔥AFK ARENA🔥
7 months ago 00:03:16 1
Продажа Toyota C-HR, 2017 год в Абакане | НП АВТО
7 months ago 00:10:08 1
Тег picture в HTML. Адаптивные изображения
7 months ago 00:24:48 1
Ошибки начинающих при верстке сайтов на HTML и CSS
7 months ago 05:05:31 1
Адаптивная верстка сайта с SCSS и JS. Объясняю по шагам. CSS Grid, БЭМ. Макет LoftHouse
7 months ago 00:20:07 1
Верстка сайта с нуля. Начало, шапка сайта.
7 months ago 00:18:11 1
ПЛАН РАЗВИТИЯ ФРОНТЕНД РАЗРАБОТЧИКА. ЭФФЕКТИВНОЕ ОБУЧЕНИЕ HTML CSS JAVASCRIPT
7 months ago 00:24:37 1
4 урок — Векторные объекты. Подробный курс по Figma
7 months ago 00:10:27 1
3 урок — Frame & Slice tool. Подробный курс по Figma
7 months ago 00:11:43 1
1 урок — Интерфейс. Подробный курс по Figma
7 months ago 00:08:54 1
Flydigi Vader 3 Pro. Обзор. Наконец-то лучший универсальный геймпад без минусов!!!
7 months ago 00:05:34 2
Autodesk Inventor. Массив с адаптивной длиной элементов
8 months ago 00:30:42 1
🔥ТЕСТ Героя РОБИН ГУД - Благородный Разбойник Арена Испытаний афк арена коды в описании 🔥AFK ARENA🔥
8 months ago 01:25:45 1
023. Новинки 20.6, масштабирование адаптивных шрифтов, хайп вокруг Bun
8 months ago 00:17:54 11
🔥 ПАТЧ РОБИН ГУД Новый Герой Из Других Измерений афк арена коды в описании 🔥AFK ARENA🔥
8 months ago 00:12:48 1
Верстка сайта. Весь процесс от задания до сдачи проекта. // Учимся #Домавместе
8 months ago 03:17:08 1
Адаптивная HTML-верстка макета из Figma с подробным объяснением. Советы от профи. HTML SCSS GULP.