Верстка сайта онлайн. Подробно с объяснениями для новичков. HTML, CSS, JS. Часть 2

Рет қаралды 22,207

Күн бұрын

Макет и материалы к уроку: t.me/+9XtDDNBdHAk4Yjhi
Верстаю макет в прямом эфире. Макет будет на стриме в описании под видео.
Адаптивная мобильная верстка HTML CSS JS из Figma. FlexBox, формы, карусель.
Первая часть. Десктоп: • Верстка сайта онлайн. ...
Плейлист: • Верстка макета GoTrip....
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💻 Бесплатный курс "Создай свой первый сайт на HTML5 и CSS3"
7 уроков по 30 мин: webcademy.ru/htmlsite/
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💻 Курс по созданию и верстке сайтов: webcademy.ru/htmlstart/
Обучение с наставником, 3 месяца, результат, гарантия.
Научим создавать веб-сайты и зарабатывать на этом.
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💻 Курс "Frontend разработчик. JavaScript + React": webcademy.ru/jscourse/
Обучение с наставником, 3 месяца, результат, гарантия.
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
🏁 Обучение с нуля
💁‍♂️ Обучение с наставником
🎯 Доведение с нуля до результата
🏢 Помощь с трудоустройством
💵 Поможем взять первый заказ на фрилансе
Сайт: webcademy.ru/
Вконтакте: webcademy
Telegram канал: t.me/webcademynews
ТАЙМ КОДЫ:
00:00 Приветствие
00:33 Открываем код проекта. Где взять код и макет
02:00 Тег meta для адаптива
02:40 Добавление декоративных элементов в шапку
10:30 Адаптив
12:10 Фикс курсора для декора в шапке
14:00 Первая точка перелома. Адаптив для контейнера
17:45 Навигация
20:50 Иконка для мобильной навигации
28:00 Правка иконки моб навигации
34:30 Верстка мобильной навигации
43:40 JS скрипты для мобильной навигации
45:17 Общение с чатом
51:30 no-scroll для мобильной навигации
53:24 Адаптив для шапки
1:14:00 Общение с чатом
1:17:00 Секция Destinations
1:42:50 Общение с чатом
1:44:08 Секция Customers
1:51:40 Секция CTA
1:53:51 Секция Subscribe
1:55:10 Подвал сайта
2:04:25 Проверка адаптива
2:07:10 Правка Subscribe
2:14:10 Правка навигации в подвале
2:15:40 Правка Карусели. Один слайд на 320px
2:20:10 Правка Customers
2:23:33 Общение с чатом
2:30:10 Мои авторский курс по верстке сайтов
2:37:00 Публикуем проект на GitHub Pages

Пікірлер: 26

@user-mn1so6hs8z Жыл бұрын

Дядька из сериала "Пёс" как всегда красава 💗

@user-pp2oj2jw5k Күн бұрын

ахаха)))

@neleaonila2191 Жыл бұрын

От вашего упоения возможностью создавать что-то новое, выигрываю и я. Спасибо, что делитесь своим опытом.

@aleksandr-IT Жыл бұрын

Спасибо, как всегда НУЖНО, ИНТЕРЕСНО и ПОЛЕЗНО!)

@user-vp6bu3fg1o Жыл бұрын

Спасибо вам за проделанную работу, все очень классно. Оставьте пожалуйста видео.

@HA_CTPIME Жыл бұрын

Спасибо за урок 👍

@user-jh6tn5qj6l Жыл бұрын

Спасибище!!!!!! Огонь👍 Еще нужно верстку)))

@Paritetekspo Жыл бұрын

Видео очень классное, респект Вам, Юрий!

@nicolasray6257 Жыл бұрын

Спасибо за опыт👍👍👍👍

@RAFO. Жыл бұрын

Спасибо за урок! Очень классное и познавательное видео! Несмотря на то что много переходов между кодом многому научился! урок просто огонь!

@Grigoren_com Жыл бұрын

спасибо за Вашу работу) всё чётко и понятно. !сто тыщ лайков разгрузить под этим видосом!

@user-fg7dp8uf3b Жыл бұрын

Что-то мало коментов,) видео топ, большое спасибо ❤️

@gro1449 Жыл бұрын

Делаю сайт по вашему уроку. Но сейчас застопорилась на первой части, потому что у меня в какой-то момент перестал рабоать hover в навигации шапки и самая первая кнопка!!! Многое в первом видео столкнулись с такой проблемой (пишут, что это вроде после добавления картинки девушки) Очень бы не хотелось бросать обучение по вашим видео, но у самой опыта мало, чтобы решить эту проблему!

@WebCademy Жыл бұрын

Правка для фона внизу шапки, чтобы было скругление в форме треугольника. Необходимо поправить background-size: 100% 100%; .header::after { ... background-size: 100% 100%; }