Тёмный

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

ВебКадеми | Юрий Ключевский
Подписаться 54 тыс.
Просмотров 154 тыс.
0% 0

Макет и материалы к уроку: 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 Вступление, где взять макет
03:05 Создание проекта, шрифты, reset.css
08:35 Экспорт графики из макета
18:00 container, переменные в CSS
26:45 Нестандартный container
33:05 Общение с чатом
35:40 Шапка сайта
43:50 Шапка. Структура элементов
50:00 Шапка. логотип
53:00 Навигация. Ссылки
59:58 Навигация. Login
1:04:13 Общение с чатом
1:06:05 Шапка. Контент
1:14:35 Шапка. Изображение
1:21:40 Шапка. Задвигаем картинку за текст
1:22:35 Общение с чатом
1:24:59 Секция Destinations
1:31:57 Destinations. контент в секции
1:37:20 Карусель
1:40:09 Карусель. Подключение плагинов
1:45:23 Карусель. Настройка owlCarousel
1:50:57 Карусель. Контролы для карусели
2:01:10 Карусель. Фикс плавающих кнопок
2:02:18 Общение с чатом
2:08:55 Секция Customers
2:11:30 Customers. Контент для секции
2:24:00 Реклама. Мои авторские курсы
2:27:30 Общение с чатом
2:31:02 Секция CTA
2:38:55 Секция Subscribe
2:50:50 Подвал сайта
2:53:20 Подвал. Стили для навигации
2:56:47 Подвал. Логотип
2:58:49 Рефакторинг кнопок по БЭМ
3:09:07 Общение с чатом

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

 

12 май 2024

Поделиться:

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 172   
@wizartable
@wizartable Год назад
не удаляй плз видео. у меня нет финансов чтобы учиться платно, поэтому использую все возможности бесплатного обучения. сейчас вот примерно на половине верстки остановился. а седня слишком много дел, смогу лишь завтра продолжить. спасибо
@wizartable
@wizartable Год назад
@user mail доброго. все сделал уже давно. отлично получилось. практика - наше всё. после этого уже несколько макетов свертал(как самостоятельно так и по видео-руководствам). легкие макеты верстаю без проблем, а вот всякие вычурные не получается. не хватает знаний.
@dhdhdhsgshdh5687
@dhdhdhsgshdh5687 Год назад
@@wizartable я давно начал изучать,но до сих пор немогу понять как правильно позиционировать элементы
@Azor-kp5fd
@Azor-kp5fd Год назад
@@wizartable Как успехи?
@user-dp5ms3kz6d
@user-dp5ms3kz6d Год назад
@@dhdhdhsgshdh5687 получилось?
@sulsanzhar
@sulsanzhar Год назад
@@dhdhdhsgshdh5687 научился? если да, то пришло это с практикой или есть какие-нибудь специально посвящённые для этого темы для понимания?
@neleaonila2191
@neleaonila2191 Год назад
Спасибо за умение заражать желанием учиться чему-то новому.
@RAFO.
@RAFO. Год назад
Как всегда один из самых лучших стримов! Спасибо что не удаляете записи после стримов! очень полезно для развития! жаль что лайк можно поставить только 1 раз)
@user-dt9jo8ho2q
@user-dt9jo8ho2q Год назад
Рад что урок остался! Бесценный туториал, чистая практика. Большое вам спасибо.
@user-io3fx2we9g
@user-io3fx2we9g Год назад
Пожалуйста, не удаляйте урок! Ну, пока я не сделаю)))) А если серьезно, оставьте. Нужно как следует вникнуть во все нюансы. Много нового показываете, чего я раньше не знала
@juriigorunov3751
@juriigorunov3751 Год назад
полностью поддерживаю выше написанное
@user-fg7dp8uf3b
@user-fg7dp8uf3b Год назад
Тоже поддерживаю, топ 🔥
@dedlive51
@dedlive51 Год назад
Спасибо, в целом довольно доходчиво объясняете. Удачи и хорошей отдачи!
@nikomunikabelen8540
@nikomunikabelen8540 Год назад
Круто, что урок решили оставить. Не знаю на долго ли) Особенно хорош вот этот подход с тайм кодами по действиям, это очень удобно в плане обучения. т.к. обычно записи таких стримов потом очень не удобно смотреть, во всяком случае сильно не удобнее целевых уроков..когда у создателя есть четкий план на урок)примененный подход считай нивелировал все неудобство) хотя это конечно заморочится нормально так пришлось, все эти тайм коды запилить) надеюсь продолжите эту практику...я так понимаю вы не хотели запись оставлять что бы не забивать этот конкретный ютуб канал...если это так, то было бы круто мб отдельный сделать чисто для стримов...так вроде многие делают решать конечно вам, так чисто свой взгляд излагаю, плюс комент на канал для продвижения) спасибо за урок!
@romanmegagunko4650
@romanmegagunko4650 Год назад
Очень хорошая подача материала. Все четко и понятно. И макет интересный. Подписался
@marcuslysenko38
@marcuslysenko38 Год назад
Спасибо большое за стрим, очень интересно и познавательно!!! Удачи вам))
@vaspurakavdalian1133
@vaspurakavdalian1133 Год назад
Спасибо что урок оставил.Позжалуйста,не удаляй,будь другом.👍
@user-vp6bu3fg1o
@user-vp6bu3fg1o Год назад
Спасибо вам за ваш труд и за такое классное обучающее видео.
@user-bq3lp2uf7g
@user-bq3lp2uf7g Год назад
Спасибо за ваши уроки!
@AlexApanasik
@AlexApanasik Год назад
Спасибо за видео, информативно и интересно. Очень импонирует манера изложения Юрия.
@yuriykolomytsyn2352
@yuriykolomytsyn2352 Год назад
Спасибо огромное за мастеркласс! Приобрел массу новых знаний и практического опыта! Юрий, всего тебе самого наилучшего!
@pigsel2509
@pigsel2509 Год назад
+
@yuriykolomytsyn2352
@yuriykolomytsyn2352 Год назад
@WebCademy скажите пожалуйста а какие горячие клавиши в vscode, что бы копировать и вставлять классы из html в css?
@kvidon1357
@kvidon1357 Год назад
@@yuriykolomytsyn2352 их самому нужно указывать, в настройках
@AirRaceHub
@AirRaceHub 4 месяца назад
Все ещё актуально) Спасибо за твой труд.
@raabdulk
@raabdulk Год назад
Юрий спасибо большое! Очень полезный и понятный контент👍
@aleksandr-IT
@aleksandr-IT Год назад
Спасибо, очень помогло!
@drknss3021
@drknss3021 Год назад
Спасибо за ваш труд и возможность учиться!) Отдельное спасибо за функцию calc вначале, как раз ломал голову над таким же блоком, сам бы не понял)
@victory2132
@victory2132 Год назад
Спасибо большое за стрим!☺
@user-ef3bt9ni4o
@user-ef3bt9ni4o Год назад
крутейший урок, и канал супер) сегодня взялся за верстку этого проекта) Спасибо!
@dmitry_korsakov
@dmitry_korsakov Год назад
Добрый человек, оставь пожалуйста этот вебинар, не удаляй!! Он невероятно полезный!
@gro1449
@gro1449 Год назад
Большое спасибо! Очень показательный момент, который демонстрирует Ваше умение преподавать, - это объяснение создания container.right Я очень благодарна, что вы показали всё поэтапно, а не сразу настрочили страшную формулу, которая таковой теперь не кажется)) И знание переменных, которые вы прекрасно объясняете, поднимает меня на новый уровень в программировании!
@user-kn8jo9ot6v
@user-kn8jo9ot6v Год назад
Спасибо большое за твои уроки. Я узнала много нового
@user-vp6bu3fg1o
@user-vp6bu3fg1o Год назад
Все очень классно. Оставьте это видео на канале. 👍👍👍
@Balenciaga_police
@Balenciaga_police Год назад
Большое спасибо за урок, много полезных вещей которые я раньше делал гораздо дольше
@AmanRahim01
@AmanRahim01 Год назад
Сижу, верстаю, спасибо за видео!
@user-lm9ee1gn5p
@user-lm9ee1gn5p Год назад
Спасибо Вам
@qqshkarar9654
@qqshkarar9654 Год назад
спасибо броу, выручил, все четко и по делу
@uk-lych_sveta
@uk-lych_sveta Год назад
Юрий добрый вечер!!! Спасибо за замечательный контент, за макет и готовый код. Очень понятно и подробно все объясняете. Также спасибо за ответ про многоязычность, если у вас будет возможность, объясните самый простой вариант на небольшой страничке, думаю многим новичкам зайдет.
@uk-lych_sveta
@uk-lych_sveta Год назад
Так, чтобы можно было при помощи HTML, CSS и JS реализовать на простом сайте-лейдинге. Вы пояснили, что можно реализовать многоязычность по ссылкам, честно говоря я начинаю только разбираться в верстке, правильно ли я понял, что нужно заверстать странице на двух языках, а потом сделать на них ссылки?
@WebCademy
@WebCademy Год назад
Да, если сайт просто на html страничках, то делаем например главную на русском index.html и рядом страницу на английском index-en.html и где нибудь в шапке ставим иконки RU и ENG с соответствующими ссылками.
@uk-lych_sveta
@uk-lych_sveta Год назад
@@WebCademy Спасибо за помощь. Удачи Вам в вашем не легком деле.
@Grigoren_com
@Grigoren_com Год назад
Шикарное видео! десять тыщ лайков👍
@user-sy7lm6lw8i
@user-sy7lm6lw8i Год назад
Спасибо! Понравилась идея с паддингом и марджином
@baytszy
@baytszy Год назад
спасибо....как Вы так быстро перемещаетесь по всему...
@sam_starikov
@sam_starikov 4 месяца назад
Четко с контейнерами!
@user-th4gy4sz8j
@user-th4gy4sz8j 10 месяцев назад
Классный лайфхак про линейку 😂
@user-th4gy4sz8j
@user-th4gy4sz8j 10 месяцев назад
Я знаю вёрстку, самообучение, работу найти не могу
@dedlive51
@dedlive51 Год назад
В файрфоксе картинка header-bottom.svg отображается некорректно при такой верстке. Полоска снизу возникает.
@igorblagoy6718
@igorblagoy6718 3 месяца назад
Добрый день. <a href="#" class="seekto" data-time="1779">29:39</a> почему calc не учел 15px padding,ведь они уже были включены в ширину контейнера (1240 + 15 с каждой стороны = 1270) с box-sizing: border-box.
@user-fi6nr6zv2i
@user-fi6nr6zv2i Год назад
Здравствуйте, очень полезное видео, но можете пожалуйста подсказать, как вгрузить фотки с бекенда в слайдер. Как например на киносайте "kinogo"
@user-ld8bk3lk3w
@user-ld8bk3lk3w Год назад
скажите пожалуйста, какая у вас тема в vs code ?
@romanmegagunko4650
@romanmegagunko4650 Год назад
В блоке header так и не добавлены svg элементы на фон. Надеюсь на следующем стриме это будет учтено. Интересно как это делается
@WebCademy
@WebCademy Год назад
Да, добавим эти декор элементы в шапку на следующем стриме.
@yuriy2109
@yuriy2109 5 месяцев назад
Смотрю, повторяю и записываю урок с комментариями текстовкой для себя. И почти в конце не досмотрев видео, вдруг перестали работать псевдоэлементы в верхнем меню. Что я только не делал. Сначала сравнивал футер с хедером стили и верстку, но потом путем выключения блоков верстки понял, что виновата картинка, которая залазит на меню. Я исправил зет индексами, но потом увидел как это сделал автор. Наверное где-то минут 40 провозился пока выключал всякие варианты. Урок нормальный, хочу посмотреть как этот макет переработать в мобильную версию. Также интересно было смотреть применение готовой библиотеки слайдера.
@user-or1hy4xz8u
@user-or1hy4xz8u Год назад
На <a href="#" class="seekto" data-time="121">2:01</a>:30 решается проблема скачка кнопок при нажатии (решение - в виде фиксации высоты слайдера). А есть ли другие способы решения проблемы?
@blackdracula8196
@blackdracula8196 Год назад
я все делаю как ты делаешь но у меня как в начале не пошло с CALC я копирую даже у тебя код но он не срабатывает как у тебя у меня не ровно все равно (((
@vaspurakavdalian1133
@vaspurakavdalian1133 Год назад
Красава
@12394465
@12394465 Год назад
Спасибо за урок! Подскажите, какие приложения используете для vsc?
@WebCademy
@WebCademy Год назад
Добрый день. Есть пост в блоге со списком моих плагинов для VS Code: webcademy.ru/blog/746/
@FromStock333
@FromStock333 Год назад
Добрый день! Большое спасибо за Ваш труд. Очень круто... Подскажите пожалуйста почему тег подчеркивает как ошибка? Спасибо
@WebCademy
@WebCademy Год назад
Спасибо. По поводу ошибки - надо смотреть код. Вообще не должно такого быть.
@FromStock333
@FromStock333 Год назад
@ВебКадеми,. Юрий, спасибо. Это не только в этом проекте. Может какие-то настройки в VS Cod? Ещё иногда и "link" выделяется как ошибка
@darkus0
@darkus0 Год назад
@@FromStock333 если у вас там ничего нет, он вам подсказывает, что нужно туда что-то добавить 😉
@user-jh6tn5qj6l
@user-jh6tn5qj6l Год назад
Спасибо большое за такую ценную информацию!!!!!! Успехов и процветания!!😉❣
@EmNetProblem
@EmNetProblem Год назад
Здравствуйте, в figma установил плагин Font Fascia, но когда нажимаю слева наверху - в меню нету вообще раздела plagins, как это исправить?
@mrwise4436
@mrwise4436 Год назад
Хорошо , а сможете ли вы свертстать игровой сайт? на подобье Perfect world!
@avocodeuser1343
@avocodeuser1343 Год назад
Привет, мне нравятся твои уроки. Прости если умничаю, но я не качал свг шейпа(5ти угольника) на тайтле под девушкой, а сделал так clip-path: polygon(50% 80px, 100% 6px, 100% 100%, 0% 100%, 0% 6px); + к этому, что я прикрепил формулу для отзывчивости и красиво адаптировать можно под любой вкус, изменяя параметры на лету, очень гибко, немного задрочисто, в первый раз юзал этот клип паз, методом тыка научился использовать его, классная штука для адаптации самое то.
@WebCademy
@WebCademy Год назад
Круто, но угол получается острый, без скругления. Но идея интересная, рисовать треугольник не сверху а снизу. Вот код для полигона с закругленными углами: codepen.io/thebabydino/pen/XbxKbL?editors=1100 В уроке использовал svg - посчитав это оптимальным (быстрым и рабочим) решением, без clip-path, хотя можно и с ним заморочиться.
@avocodeuser1343
@avocodeuser1343 Год назад
@@WebCademy Спасибо за код, точно ведь у меня там острый угол.
@SultanKent
@SultanKent Год назад
Извините если глупый вопрос но разве не легче просто копировать свойства картинок и всё в figma
@pigsel2509
@pigsel2509 Год назад
<a href="#" class="seekto" data-time="2030">33:50</a> Хорошо, что оставили))
@user-th7tl6uu1k
@user-th7tl6uu1k Год назад
при верстке первого экрана, при добавлении в css файл кода ".header_img { flex-grow: 1; position: relative; } пропадает подчеркивание в меню Pricing Contact и перестаёт прожиматься ссылка-кнопка в меню. В сообщениях ранее так же об этом упоминалось, но ответа не было.
@gro1449
@gro1449 Год назад
У меня такая же проблема(
@avocodeuser1343
@avocodeuser1343 Год назад
Я сам из Донецка, выбора работы у нас тут мало, но я всё таки нашёл микро компанию, в которую меня взяли с моим минимальным опытом работы. Так вот я пришёл к ним как верстальщик, но мне сказали, что у них таких вакансий нет, типа вёрстка для них это не выгодно, учи js, ну я и верстал сайты, у них месяц, было пипец тяжело в начале и параллельно учил js. Потом начались события эти, мы временно не работали, доделывали старые заказы. И меня снова взяли, но как фронта и у меня из-за этого сложилось мнение, что вёрстку недооценивают или действительно, она уже не актуально может. Ну как я сказал выше, выбора тут особо нет, поэтому учу вью, потому что когда я вернулся с базой js(не скажу, что я там профик на js, но знания есть, нужно просто практика, чтобы набить руку по сути) и мне сказали что сейчас с одним js тоже никуда, учи фреймоврк, я начал учить vue(потому что реакт это фейсбук, а ангуляр это гугл я не стал учить эти фреймворки из-за полит. обстановки), мало вероятно что наши уйдут с реактов там, но я уже ничему не удивлюсь и т.к. как вью это китайцы решил учить их фрейм. Ну я к тому или это у меня такой опыт или просто требования сейчас для новичков супер завышенные. Я в айти сейчас получаю меньше, чем когда ездил на заработки в рф, я там в отеле грубо говоря полы мыл за х3 больше по деньгам, чем сейчас в айтишке, зато у нас печеньки бесплатные)) терплю свою контору ради опыта. Спасибо тебе за твои уроки смотрю просто всё в захлёб и очень многое подмечаю для себя, в будущем обещаю задоначу тебе, курс покупать не буду для меня уже поздновато, а отблагодарю 100%. Спасибо и желаю всех благ тебе.
@WebCademy
@WebCademy Год назад
Насчет требований в frontend - все так, и я при случае всегда об этом говорю. Сегодня нужен специалист который умеет делать frontend на JS фреймворке. А это и верстка и JS и сам фреймворк. Рост ЗП будет со временем. То есть на старте - это работа для опыта и на зачетку, чтобы был трудовой стаж в фронтенде. После переходить в компанию которая платит больше - это либо местная компания с продуктом, либо работающая на зарубежного заказчика, либо удаленка с той же Москвой, к примеру, ну либо с зарубежьем. Удачи и успехов в профессиональном плане!) Спасибо за развернутый комментарий.
@pro5189
@pro5189 Год назад
Здравствуйте! У меня вопрос. Когда я пишу background-color для header у меня экран не весь заливается градиентом. Как это можно пофиксить?
@splcell
@splcell Год назад
Осталось несколько вопросов: зачем задавать паддинги контейнеру и от чего они считаются, можно ли ширину контейнера указывать в процентах? Секция со слайдером, там же можно было сделать вообще без контейнера и не создавать отдедбный?
@user-xq6hg2iz9z
@user-xq6hg2iz9z Год назад
паддинги контейнеру задают, чтобы контент не прижимался к краям.Ширину в процентах скорее всего можно если вам хочется считать сколько процентов составляют 20 или 15 пикселов
@dedlive51
@dedlive51 Год назад
<a href="#" class="seekto" data-time="2891">48:11</a> а как вставили в файл стилей пустые правила для скопированных блоков из index.html?
@WebCademy
@WebCademy Год назад
Плагин eCSStractor, по нему есть ролик на канале.
@alexlobotskii5530
@alexlobotskii5530 Год назад
где взять макет в телеге все перелопатил макета нету помогите пожалуйста
@likerus22
@likerus22 Год назад
Подскажите пожалуйста. Почему при использовании стиля .slider .center .slider__item { width: 380px; height: 456px; } центральное изображение прилипает к изображению справа?
@banderabender
@banderabender Год назад
та же проблема, разобрался?
@likerus22
@likerus22 Год назад
@@banderabender Разобраться не получилось. Сделал через Slick Slider
@alexderenko2867
@alexderenko2867 Год назад
Подскажите пож, как вы копируя часть хтмл вставляю в цсс получаете там сразу все классы, спасибо за урок
@WebCademy
@WebCademy Год назад
Плагин eCSStractor ускоряем верстку в VS Code. Быстрое копирование CSS классов из HTML разметки ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-pZiYs_Sput8.html
@jugo-stream
@jugo-stream Год назад
Много фишек о которых я не знал, спасибо!
@VSM84-1
@VSM84-1 3 месяца назад
Логин почему линк, а не батон?
@froxy4340
@froxy4340 Год назад
Здравствуй, подскажи пожалуйста, где можно найти список установленных у тебя расширений на vs code?
@WebCademy
@WebCademy Год назад
Часть есть здесь: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-942oq0_v95E.html Но вообще пора обновить это видео.
@WebCademy
@WebCademy Год назад
И вот еще более новая статья: webcademy.ru/blog/746/
@froxy4340
@froxy4340 Год назад
@@WebCademy Благодарю 😉
@jostinramirez9080
@jostinramirez9080 Год назад
@vabyars
@vabyars Год назад
Привет, крутой урок! А что за плагин помогает в html превратить .container в целый блок? Вот таймкод <a href="#" class="seekto" data-time="1552">25:52</a>
@WebCademy
@WebCademy Год назад
Это emmet он встроен в VS Code по умолчанию.
@vabyars
@vabyars Год назад
@@WebCademy спасибо!
@maskaradikk
@maskaradikk Год назад
Привет, вопросы не по верстке, подскажите как сделать так, чтобы было видно превью svg файлов?
@WebCademy
@WebCademy Год назад
Установить утилиту, легко гуглится "превью SVG в Windows"
@user-nu1jj6ps4y
@user-nu1jj6ps4y Год назад
Усложнил в начале с переменными
@anatoliyvelichko2413
@anatoliyvelichko2413 Год назад
после того как сделал вторую кнопку , панель навигации перестала работать, а когда сделал 3-ю кнопку , перестала вторая утапливаться, что это может быть ?
@gro1449
@gro1449 Год назад
У меня такая же проблема((
@user-qi1bz3hr2e
@user-qi1bz3hr2e Год назад
Как так быстра копировать классы с HTML в CSs?))
@user-wk4qg9fx5k
@user-wk4qg9fx5k Год назад
Не скромный вопрос, я в мало что понимаю в сайтах, но почему нажимая стрелку направленную вправо, слайде едит налево и наоборот, Вроде бы правильнее было куда стрелка показывает туда и картинка прячеться
@WebCademy
@WebCademy Год назад
Это стандартное поведение всех слайдеров/каруселей. Кликаем вправо - и видим фотографии которые находятся правее.
@alanhilf9989
@alanhilf9989 Год назад
Доброго! Что за плагин позволяет скопировать структуру хтмл и перевести в цсс селекторы автоматически
@darkus0
@darkus0 Год назад
ecsstractor, на этом канале есть видео по настройке
@user-li7hl5yb2t
@user-li7hl5yb2t Год назад
не могу врубиться, как container right оказался шире чем container.....на <a href="#" class="seekto" data-time="1694">28:14</a>, у меня наоборот. И вроде логичным кажется, так как мы задали слева и справа большой отступ контент ужался больше чем в container
@albinak245
@albinak245 Год назад
У меня тоже самое
@user-xq6hg2iz9z
@user-xq6hg2iz9z Год назад
container right шире чем просто container. Автор высчитал отступ , что бы контент начинался на одинаковом расстоянии с другими блоками, а заканчивался заграницей контейнера. У container right отступ слева и упирается в край экрана справа А левый наоборот упирается в левый край заполните контейнеры словами все и увидите
@azimkurbanov4659
@azimkurbanov4659 Год назад
борода мощно идет
@vindrozel6909
@vindrozel6909 Год назад
У меня возникла проблема, не могу открыть лайф сервер
@thomasshelby4753
@thomasshelby4753 Год назад
Когда мы разместили картинку и посунули ее верх согласно макета ,то не работает hover ведь мы закрыли login и что делать как разместить не закрывая этот ефект ?
@WebCademy
@WebCademy Год назад
Мы после добавили pointer-events: none; чтобы клик происходил сквозь изображение.
@thomasshelby4753
@thomasshelby4753 Год назад
@@WebCademy спасибо бро ты крутой больше туториалов
@thomasshelby4753
@thomasshelby4753 Год назад
@@WebCademy Как сделать текст поверх картинки , position absolute не помогает
@kvidon1357
@kvidon1357 Год назад
@@thomasshelby4753 z-index пробовал?
@FoxMindShow
@FoxMindShow Год назад
У вас на сайте значок телеграма не работает, пофиксите плиз для обратной связи, а контакта у меня нет 😉
@WebCademy
@WebCademy Год назад
Проверил, работает. Ник в Тг: webcademysupport
@user-fe3ri6gj4h
@user-fe3ri6gj4h Год назад
Как всегда! Начали за здравие, кончили за упокой! Видео называется "подробно с разъяснениями для новичков". Когда вы начинаете добавлять скрипты в учебный проект - никаких объяснений нет. Просто делайте вот так и всё. Повторял и другие проекты, и там была та же самая проблема, из-за чего конечная версия проекта выглядела ломаной, ведь починить что-то невозможно, если не понимаешь в чем ошибка. Спасибо за бесплатный контент, но карусель ведь можно сделать и более простым способом, например используя бутстрап. Думаю, многим вашим зрителям хотелось бы увидеть именно эту вариацию.
@kvidon1357
@kvidon1357 Год назад
А что сложного было в карусели? Там буквально поменять один класс нужно. Если до этого хоть когда-нибудь работал с другими языками, то проблем с пониманием не будет
@user-or1hy4xz8u
@user-or1hy4xz8u Год назад
а использование @import в css - может, это плохая практика?
@WebCademy
@WebCademy Год назад
Чем? В конкретном проекте для конкретной задачи это подходящее решение не влекущее за собой негативных последствий, так что все в порядке. Конечно если в CSS будет под 30 импортов, то что-то здесь не так, и стоит использовать SCSS c сборкой в единый общий CSS файл.
@frusya-freak
@frusya-freak Год назад
Здравствуйте) А уместно ли в кнопке задавать не отступами высоту, а тексту назначить line-height?
@worldchanger104
@worldchanger104 Год назад
не уместно. Текст станет больше , по дизайну может не пойти. Удобнее отступами
@tmusabaev5188
@tmusabaev5188 10 дней назад
Help после подключения jquery и овл перестали отображаться картинки сладйера
@WebCademy
@WebCademy 10 дней назад
Посмотрите в инспекторе. Возможно вы не задали размеры слайдеру или слайдам.
@SuperDima99
@SuperDima99 Год назад
подскажите пожалуйста не работает emmet ставлю !и таб и ничего просто отступает что не так? спасибо
@FoxMindShow
@FoxMindShow Год назад
!tab и все ок будет. Emmet авто встроен в vscode, это не всякие atom и notepad++ Все должно работать. А кажется понял твою проблему, он работает в файле index.html а ты возможно пытаешься не там использовать )
@user-zi4bc6fu7b
@user-zi4bc6fu7b Год назад
Это обновление VScode поломало emmet . Нужно в параметрах галочку поставить !tab она отключена у тебя, посмотри в настройках .
@SuperDima99
@SuperDima99 Год назад
@@FoxMindShow да в index.html а что не так
@SuperDima99
@SuperDima99 Год назад
@@user-zi4bc6fu7b а где там эта настройка Я новичок Спасибо
@user-lg2ll3qo4i
@user-lg2ll3qo4i Год назад
@@SuperDima99 В нижнем левом углу нажми на шестерёнку и выбери параметры. Далее введи в поиске "emmet" и пролистай до пункта "Trigger Expansion On Tab" и установи галочку. Или обнови редактор, должны были починить.
@beautyisinternal6953
@beautyisinternal6953 Год назад
Скажите пожалуйста а что эта за программа макета?
@kvidon1357
@kvidon1357 Год назад
Figma, если ещё актуально
@makardakar8840
@makardakar8840 Год назад
у меня на моменте <a href="#" class="seekto" data-time="107">1:47</a> не выходит сделать так чтобы центральная картинка становилась больше остальных при листании карусели, может кто то сталкивался с подобным?
@WebCademy
@WebCademy Год назад
Сравните с готовым кодом из урока.
@user-rb5dx3cb9p
@user-rb5dx3cb9p Год назад
У меня такая же и история .
@user-rb5dx3cb9p
@user-rb5dx3cb9p Год назад
Была ошибка или что то нужно было менять ?
@makardakar8840
@makardakar8840 Год назад
Все оказалось проще простого. Название класса в css отличалось от названия в html🥲
@LegionWotTeam
@LegionWotTeam 9 месяцев назад
<a href="#" class="seekto" data-time="2280">38:00</a>
@ssffq7651
@ssffq7651 11 месяцев назад
<a href="#" class="seekto" data-time="685">11:25</a> Не могу скопировать через ctrl+D
@LegionWotTeam
@LegionWotTeam 9 месяцев назад
Ты должен скачать сам фигма файл, и потом удастся
@user-or1hy4xz8u
@user-or1hy4xz8u Год назад
Создатель owl-карусели сам задепрекейтил свое творение и рекомендует юзать tiny слайдер...
@WebCademy
@WebCademy Год назад
Пруфы? Не отрицаю что такое возможно, но пока требуемые от OwlCarousel функции она выполняет.
@WebCademy
@WebCademy Год назад
Для тех кто будет искать: github.com/ganlanyuan/tiny-slider Tiny slider for all purposes, inspired by Owl Carousel.
@WebCademy
@WebCademy Год назад
К слову да, tiny более функциональная. Похожа на swiper.
@user-or1hy4xz8u
@user-or1hy4xz8u Год назад
@@WebCademy , как вы уже заметили. на самом Гитхабе автор лично задепрекейтил свое детище ))))
@Mascentfrost
@Mascentfrost 9 месяцев назад
<a href="#" class="seekto" data-time="99">1:39</a>:00 (для себя)
@b.abdurashidov4863
@b.abdurashidov4863 Год назад
я не могу убрать border-radius от графики.
@WebCademy
@WebCademy Год назад
Сделайте дубликат макета к себе в черновики - Dublicate to drafts, в начале стрима показал.
@avocodeuser1343
@avocodeuser1343 Год назад
Насчёт того что быстро пишешь и трудно типа повторить, я смотрю на 1.5 и успеваю повторять. Сначала сам пишу, потом сравниваю твой вариант, как-то так
@WebCademy
@WebCademy Год назад
Отличная скорость)
@TopMusic-ps5bp
@TopMusic-ps5bp Год назад
Привет что это за программа где макет
@Ivan.Gostev
@Ivan.Gostev Год назад
Figma
@TopMusic-ps5bp
@TopMusic-ps5bp Год назад
@@Ivan.Gostev Спасибо
@typokrat
@typokrat Год назад
какой смысл в переменных css , с ними писанины в несколько раз большое....
@WebCademy
@WebCademy Год назад
Конечно не стоит заводить переменные пока они действительно не понадобятся. В данном случае, для контейнера и с вариациями container-right и container-left ширина контейнера в переменной - это обосновано и удобнее, чем три раза дублировать ширину в трех классах.
@kafiahammed3548
@kafiahammed3548 Год назад
Hello sir, I am from Bangladesh.
@user-fv5jb6nb9r
@user-fv5jb6nb9r Год назад
+
@user-ss6lf2mw7f
@user-ss6lf2mw7f Год назад
те переменные, которые вы использовали для контейнера - бесполезны
@WebCademy
@WebCademy Год назад
Неверно. Они переиспользованы в .container-right
@AntonioBenderas
@AntonioBenderas Год назад
Кто добавить таймкоды, тому курс в подарок?)
@WebCademy
@WebCademy Год назад
Благодарность от автора канала)
@HA_CTPIME
@HA_CTPIME Год назад
рили? !important ???
@HA_CTPIME
@HA_CTPIME Год назад
всё настолько не последовательно🤔
@kaswister
@kaswister Год назад
Для тех кто с малым опытом хочет сверстать макет -- не советую!!. В данном макете автор применяет плохие практики кода и сам не до конца понимает что создаёт.
@WebCademy
@WebCademy Год назад
Давайте или подробно с чем не согласны, или это выглядит как хейт и вброс.
@kaswister
@kaswister Год назад
@@WebCademy Это чисто моё мнение после того как я закончил смотреть оба видео и повторил проект у себя. Наверное самая главное чтобы хотел выделить - это отсутствие объяснения лучших практик: видео для новичков но Вы то не новичок - в стилях очень много перебора - даже если посмотреть в инструментах разработчика, много кода переписывается хотя этого можно было избежать. Внедрение карусели на jquerry в 2023 - ужасно, ладно старые проекты его поддерживают но можно было и на чистом js написать примитивный слайдер. Мне сложно выразить все недочёты в комментарии - но с моей точки зрения я не рекомендую просмотр именно этого проекта новичкам. В видео продемонстрирована не разработка сайта а просто "тупое верстание". Если отдать данный код продакшен разработчику, 90% будет переписано.
@user-uj7xn7tf6y
@user-uj7xn7tf6y Год назад
+
@user-qg8xc9ly3m
@user-qg8xc9ly3m Год назад
+
Далее
Magnet powered car
00:48
Просмотров 4,4 млн