Тёмный

Верстка сайта для новичков. Адаптив, HTML, CSS. 

ВебКадеми | Юрий Ключевский
Подписаться 55 тыс.
Просмотров 4,8 тыс.
50% 1

За один вечер сверстаем сайт салона красоты для домашних питомцев. Верстка для новичков, HTML, CSS. С адаптивом и необходимыми скриптам. Начните изучать разработку вместе с нами.
Макет и готовый код со стрима будут в Telegram канале: t.me/+friZxyBulgNmYjE6
Чат верстальщиков ВебКадеми: t.me/+QAxmsKj2HyWfEKzz
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💻 Бесплатный курс "Создай свой первый сайт на HTML5 и CSS3"
От установки редактора, до публикации в сети.
👉 Получить уроки, конспекты, макет и код из уроков: webcademy.ru/htmlsite/
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💻 Курс по созданию и верстке сайтов: webcademy.ru/htmlstart/
Обучение с наставником, 3 месяца, результат, гарантия.
Научим создавать веб-сайты и зарабатывать на этом.
Старт обучения: 01 Июля 2024 года.
💻 Курс "Frontend разработчик. JavaScript + React": webcademy.ru/jscourse/
Обучение с наставником, 3 месяца, результат, гарантия.
Старт обучения: 08 Июля 2024 года.
💻 Курс "Разработка сайтов на PHP + MySQL":
webcademy.ru/phpcourse/
Создание сайтов с системой управления.
Присоединиться к курсу можно прямо сейчас.
🏁 Обучение с нуля
💁‍♂️ Обучение с наставником
🎯 Доведение с нуля до результата
🏢 Помощь с трудоустройством
💵 Поможем взять первый заказ на фрилансе
💳 возможна рассрочка
💳 если курс не понравится, вернём деньги в первую неделю
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💈 Сайт школы ВебКадеми: webcademy.ru/
💈 Вступайте в группу Вконтакте: webcademy
💈 Подписывайтесь на Telegram: t.me/webcademynews
ТАЙМ КОДЫ:
00:00 Начало
02:37 Где взять макет
05:05 Создание проекта
16:15 Верстка навигации
43:45 Общение с чатом
45:57 Верстка шапки
1:49:48 Общение с чатом
1:52:45 Структура CSS файлов
1:56:10 Верстка секции main
2:31:35 Секция с коллажом фотографий
2:36:42 Секция с контентом
2:48:11 Общение с чатом. Завершение стрима

Опубликовано:

 

30 июн 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 17   
@user-ji6vi7hp2z
@user-ji6vi7hp2z 27 дней назад
Очень ценный контент. Особенно с точки зрения разбора макета, объяснения верстки и показа многих других тонкостей web-разработки. Спасибо.
@user-rw8wi3sq9e
@user-rw8wi3sq9e 22 дня назад
Хороший стрим вышел. Классный. Много новых решений разобрали и наложения цвета на тексте тоже. Ждем 2 часть стрима с js моментами, что можно сделать на данном макете и мобильная адаптация тоже. И в целом побольше подобных макетов разбирать надо на разные решения и фичи. Продолжайте развиваться и улучшаться.
@user-mu1ul8qj1x
@user-mu1ul8qj1x 26 дней назад
Да урок супер, но мой мозг убежал в панике когда пошла работа с двумя текстами, потом вернулся послушал умный совет собрал из слоев компонент и экспортировал png не забыл и про ретину общем работаю дальше наслаждаюсь жду продолжения.
@user-wi6fs3vj3k
@user-wi6fs3vj3k 27 дней назад
Добрый день! Пожалуйста, подскажите, может будет у вас стрим с объяснением второй части макета ?? Хотелось бы вместе с вами вторую часть закончить.
@WebCademy
@WebCademy 26 дней назад
Да, будет, и мобильный адаптив тоже.
@user-wi6fs3vj3k
@user-wi6fs3vj3k 26 дней назад
@@WebCademy отлично! буду ждать с нетерпением
@user-zf8xr5do5m
@user-zf8xr5do5m 26 дней назад
@@WebCademy Макет и готовый код со стрима будут в Telegram канале без трояна, как был этот?
@WebCademy
@WebCademy 25 дней назад
@@user-zf8xr5do5m Без конечно.
@mikhailzvorygin1841
@mikhailzvorygin1841 15 дней назад
спасибо за труд! Продолжайте! Может быть, если некоторые нюансы объяснять, было б еще познавательнее (почему здесь это, а здесь вот так)! Ну это для новичков))))
@wdfrghztjk
@wdfrghztjk 24 дня назад
Хотелось бы видео с адаптивом главной секции.
@user-mu1ul8qj1x
@user-mu1ul8qj1x 25 дней назад
еще один момент при работе с grid не используются строки в результате чего нужно падингами например поднимать Scroll to discovery тут думаю можно было бы изначально поделить все на столбцы и строки и потом двигать элементы как нам надо но это как говорится из разряда умных мыслей когда говорить легко глядя как другие работают.
@WebCademy
@WebCademy 25 дней назад
Идею со строками понял, интересная. Только не уверен что она будет элегантнее или легче в реализации чем просто паддиннги, надо проверять.
@user-mu1ul8qj1x
@user-mu1ul8qj1x 25 дней назад
@@WebCademy я имел в виду что nav включить в header и поделить все это на строки и колонки и потом раскидать элементы по сетке а с картинкой есть идея что арочная надпись не изменна девиз woof! doggie wash он тоже постоянный а вот подложка пса может менятся так как есть тенденция на моду четвероногих или например цветовая гамма в этом году типа модно быть синим... и как вы и советовали сделать это одной каритинкой с возможностью подставлять псов под нее.
@user-mu1ul8qj1x
@user-mu1ul8qj1x 25 дней назад
@@WebCademy Просто вы размышляете как художник спец которому интересно заморочиться со сложными и не стандартными решениями и в этом плане это видео бесценно. Я даю советы как новичок в верстке как бы мне хотелось это изучить что бы я мог применять на практике и не заморачиваться лепить надежные простые шаблоны тем более что я бэкендер и не много далек от эстетики покраски кнопок - шутка насчет кнопок ))) еще раз спасибо Вам большое за ваш урок.
@WebCademy
@WebCademy 25 дней назад
​@@user-mu1ul8qj1x Если мы говорим о замене контента, то в данном конкретном случае, вполне нормально сохранить и собаку и надпись на ней картинкой. А когда надо будет заменить фото на другое, поменять в макете, сохранить картинкой и заменить. Опять же, это не общее правило, а конкретно в данном случае - это вполне оправдано. Но на стриме я сделал все отдельными элементами, так что можно будет редактировать и напрямую сразу в коде или из админка, если таковая будет.
@user-zf8xr5do5m
@user-zf8xr5do5m 26 дней назад
Хотя макет не сложный, но постоянное перескакивание туда сюда не дает возможности ничего рассмотреть даже в записи и с остановками. Такая скорость точно не для начинающих.
@WebCademy
@WebCademy 25 дней назад
Да, будет ролик, по мотивам стрима. С чувством,, с тактом, с расстановкой)
Далее
3M❤️ #thankyou #shorts
00:16
Просмотров 4,1 млн
OVOZ
01:00
Просмотров 812 тыс.
치토스로 체감되는 요즘 물가
00:16
Просмотров 1,1 млн
Login Form in HTML & CSS
11:07
Просмотров 1,2 млн
I Built 100 Homes And Gave Them Away!
9:36
Просмотров 46 млн