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

  Рет қаралды 315,972

ВебКадеми | Юрий Ключевский

ВебКадеми | Юрий Ключевский

Күн бұрын

Пікірлер: 191
@neleaonila2191
@neleaonila2191 2 жыл бұрын
Спасибо за умение заражать желанием учиться чему-то новому.
@Pet8089
@Pet8089 5 ай бұрын
Мужик эрудирован и видно что знает о чём вещает!!!Ставлю палец вверх!!!
@НатальяЛоскутова-и8ы
@НатальяЛоскутова-и8ы 2 жыл бұрын
Пожалуйста, не удаляйте урок! Ну, пока я не сделаю)))) А если серьезно, оставьте. Нужно как следует вникнуть во все нюансы. Много нового показываете, чего я раньше не знала
@juriigorunov3751
@juriigorunov3751 2 жыл бұрын
полностью поддерживаю выше написанное
@Ким-п6ы
@Ким-п6ы 2 жыл бұрын
Тоже поддерживаю, топ 🔥
@ГидроксидКалия
@ГидроксидКалия 2 жыл бұрын
Рад что урок остался! Бесценный туториал, чистая практика. Большое вам спасибо.
@romanmegagunko4650
@romanmegagunko4650 2 жыл бұрын
Очень хорошая подача материала. Все четко и понятно. И макет интересный. Подписался
@yuriykolomytsyn2352
@yuriykolomytsyn2352 2 жыл бұрын
Спасибо огромное за мастеркласс! Приобрел массу новых знаний и практического опыта! Юрий, всего тебе самого наилучшего!
@pigsel2509
@pigsel2509 2 жыл бұрын
+
@yuriykolomytsyn2352
@yuriykolomytsyn2352 2 жыл бұрын
@WebCademy скажите пожалуйста а какие горячие клавиши в vscode, что бы копировать и вставлять классы из html в css?
@Jesiksss
@Jesiksss Жыл бұрын
@@yuriykolomytsyn2352 их самому нужно указывать, в настройках
@wizartable
@wizartable 2 жыл бұрын
не удаляй плз видео. у меня нет финансов чтобы учиться платно, поэтому использую все возможности бесплатного обучения. сейчас вот примерно на половине верстки остановился. а седня слишком много дел, смогу лишь завтра продолжить. спасибо
@wizartable
@wizartable 2 жыл бұрын
@user mail доброго. все сделал уже давно. отлично получилось. практика - наше всё. после этого уже несколько макетов свертал(как самостоятельно так и по видео-руководствам). легкие макеты верстаю без проблем, а вот всякие вычурные не получается. не хватает знаний.
@dhdhdhsgshdh5687
@dhdhdhsgshdh5687 2 жыл бұрын
@@wizartable я давно начал изучать,но до сих пор немогу понять как правильно позиционировать элементы
@Azor-kp5fd
@Azor-kp5fd 2 жыл бұрын
@@wizartable Как успехи?
@АнтониоБандерас-ч7к
@АнтониоБандерас-ч7к 2 жыл бұрын
@@dhdhdhsgshdh5687 получилось?
@sulsanzhar
@sulsanzhar Жыл бұрын
@@dhdhdhsgshdh5687 научился? если да, то пришло это с практикой или есть какие-нибудь специально посвящённые для этого темы для понимания?
@кейонник4242
@кейонник4242 6 ай бұрын
Уснул под стрим другого челика, проснулся и тут это видео просмотренное до конца
@PREFECT_54
@PREFECT_54 5 ай бұрын
АХАХАХ точно такая-же фигня. Только смотрел не стрим а видео на вообще другую тему)
@Jesik-uw1pw
@Jesik-uw1pw 4 ай бұрын
ХАХАХАХ. Я короче оставил комп с видосами по видеоиграм и заснул, просыпаюсь а тут это
@ymarimus
@ymarimus 26 күн бұрын
Спасибо вам огромное!!! Просто спасибо мне так нужен был такой урок спасибо вам большое удачи вам и здоровья❤
@gro1449
@gro1449 2 жыл бұрын
Большое спасибо! Очень показательный момент, который демонстрирует Ваше умение преподавать, - это объяснение создания container.right Я очень благодарна, что вы показали всё поэтапно, а не сразу настрочили страшную формулу, которая таковой теперь не кажется)) И знание переменных, которые вы прекрасно объясняете, поднимает меня на новый уровень в программировании!
@akylbekbaizakov
@akylbekbaizakov 4 ай бұрын
+
@AirRaceHub
@AirRaceHub Жыл бұрын
Все ещё актуально) Спасибо за твой труд.
@RAFO.
@RAFO. Жыл бұрын
Как всегда один из самых лучших стримов! Спасибо что не удаляете записи после стримов! очень полезно для развития! жаль что лайк можно поставить только 1 раз)
@АннаФролова-е2с
@АннаФролова-е2с 2 жыл бұрын
Спасибо за ваши уроки!
@Balenciaga_police
@Balenciaga_police 2 жыл бұрын
Большое спасибо за урок, много полезных вещей которые я раньше делал гораздо дольше
@dedlive51
@dedlive51 2 жыл бұрын
Спасибо, в целом довольно доходчиво объясняете. Удачи и хорошей отдачи!
@Zaraza7
@Zaraza7 27 күн бұрын
Прикольный монтаж 😂 Хочу продолжение 😌
@СтаниславГорячев-г1ъ
@СтаниславГорячев-г1ъ 2 жыл бұрын
Спасибо Вам
@nikomunikabelen8540
@nikomunikabelen8540 2 жыл бұрын
Круто, что урок решили оставить. Не знаю на долго ли) Особенно хорош вот этот подход с тайм кодами по действиям, это очень удобно в плане обучения. т.к. обычно записи таких стримов потом очень не удобно смотреть, во всяком случае сильно не удобнее целевых уроков..когда у создателя есть четкий план на урок)примененный подход считай нивелировал все неудобство) хотя это конечно заморочится нормально так пришлось, все эти тайм коды запилить) надеюсь продолжите эту практику...я так понимаю вы не хотели запись оставлять что бы не забивать этот конкретный ютуб канал...если это так, то было бы круто мб отдельный сделать чисто для стримов...так вроде многие делают решать конечно вам, так чисто свой взгляд излагаю, плюс комент на канал для продвижения) спасибо за урок!
@ЧеловекБудущего-л8ю
@ЧеловекБудущего-л8ю 2 жыл бұрын
крутейший урок, и канал супер) сегодня взялся за верстку этого проекта) Спасибо!
@СергейМурин-ь8х
@СергейМурин-ь8х 2 жыл бұрын
Спасибо вам за ваш труд и за такое классное обучающее видео.
@aleksandr-IT
@aleksandr-IT 2 жыл бұрын
Спасибо, очень помогло!
@raabdulk
@raabdulk Жыл бұрын
Юрий спасибо большое! Очень полезный и понятный контент👍
@marcuslysenko38
@marcuslysenko38 2 жыл бұрын
Спасибо большое за стрим, очень интересно и познавательно!!! Удачи вам))
@СергейМурин-ь8х
@СергейМурин-ь8х 2 жыл бұрын
Все очень классно. Оставьте это видео на канале. 👍👍👍
@ПрохороваДиана
@ПрохороваДиана 2 жыл бұрын
Спасибо большое за твои уроки. Я узнала много нового
@uk-lych_sveta
@uk-lych_sveta 2 жыл бұрын
Юрий добрый вечер!!! Спасибо за замечательный контент, за макет и готовый код. Очень понятно и подробно все объясняете. Также спасибо за ответ про многоязычность, если у вас будет возможность, объясните самый простой вариант на небольшой страничке, думаю многим новичкам зайдет.
@uk-lych_sveta
@uk-lych_sveta 2 жыл бұрын
Так, чтобы можно было при помощи HTML, CSS и JS реализовать на простом сайте-лейдинге. Вы пояснили, что можно реализовать многоязычность по ссылкам, честно говоря я начинаю только разбираться в верстке, правильно ли я понял, что нужно заверстать странице на двух языках, а потом сделать на них ссылки?
@WebCademy
@WebCademy 2 жыл бұрын
Да, если сайт просто на html страничках, то делаем например главную на русском index.html и рядом страницу на английском index-en.html и где нибудь в шапке ставим иконки RU и ENG с соответствующими ссылками.
@uk-lych_sveta
@uk-lych_sveta 2 жыл бұрын
@@WebCademy Спасибо за помощь. Удачи Вам в вашем не легком деле.
@victory2132
@victory2132 2 жыл бұрын
Спасибо большое за стрим!☺
@qqshkarar9654
@qqshkarar9654 Жыл бұрын
спасибо броу, выручил, все четко и по делу
@AlexApanasik
@AlexApanasik 2 жыл бұрын
Спасибо за видео, информативно и интересно. Очень импонирует манера изложения Юрия.
@drknss3021
@drknss3021 2 жыл бұрын
Спасибо за ваш труд и возможность учиться!) Отдельное спасибо за функцию calc вначале, как раз ломал голову над таким же блоком, сам бы не понял)
@Grigoren_com
@Grigoren_com 2 жыл бұрын
Шикарное видео! десять тыщ лайков👍
@vaspurakavdalian1133
@vaspurakavdalian1133 2 жыл бұрын
Спасибо что урок оставил.Позжалуйста,не удаляй,будь другом.👍
@igorblagoy6718
@igorblagoy6718 10 ай бұрын
Добрый день. 29:39 почему calc не учел 15px padding,ведь они уже были включены в ширину контейнера (1240 + 15 с каждой стороны = 1270) с box-sizing: border-box.
@dmitry_korsakov
@dmitry_korsakov 2 жыл бұрын
Добрый человек, оставь пожалуйста этот вебинар, не удаляй!! Он невероятно полезный!
@ИринаМорой-ы4э
@ИринаМорой-ы4э 2 жыл бұрын
Спасибо большое за такую ценную информацию!!!!!! Успехов и процветания!!😉❣
@dedlive51
@dedlive51 2 жыл бұрын
48:11 а как вставили в файл стилей пустые правила для скопированных блоков из index.html?
@WebCademy
@WebCademy 2 жыл бұрын
Плагин eCSStractor, по нему есть ролик на канале.
@sam_starikov
@sam_starikov Жыл бұрын
Четко с контейнерами!
@AmanRahim01
@AmanRahim01 2 жыл бұрын
Сижу, верстаю, спасибо за видео!
@dedlive51
@dedlive51 2 жыл бұрын
В файрфоксе картинка header-bottom.svg отображается некорректно при такой верстке. Полоска снизу возникает.
@avocodeuser1343
@avocodeuser1343 2 жыл бұрын
Я сам из Донецка, выбора работы у нас тут мало, но я всё таки нашёл микро компанию, в которую меня взяли с моим минимальным опытом работы. Так вот я пришёл к ним как верстальщик, но мне сказали, что у них таких вакансий нет, типа вёрстка для них это не выгодно, учи js, ну я и верстал сайты, у них месяц, было пипец тяжело в начале и параллельно учил js. Потом начались события эти, мы временно не работали, доделывали старые заказы. И меня снова взяли, но как фронта и у меня из-за этого сложилось мнение, что вёрстку недооценивают или действительно, она уже не актуально может. Ну как я сказал выше, выбора тут особо нет, поэтому учу вью, потому что когда я вернулся с базой js(не скажу, что я там профик на js, но знания есть, нужно просто практика, чтобы набить руку по сути) и мне сказали что сейчас с одним js тоже никуда, учи фреймоврк, я начал учить vue(потому что реакт это фейсбук, а ангуляр это гугл я не стал учить эти фреймворки из-за полит. обстановки), мало вероятно что наши уйдут с реактов там, но я уже ничему не удивлюсь и т.к. как вью это китайцы решил учить их фрейм. Ну я к тому или это у меня такой опыт или просто требования сейчас для новичков супер завышенные. Я в айти сейчас получаю меньше, чем когда ездил на заработки в рф, я там в отеле грубо говоря полы мыл за х3 больше по деньгам, чем сейчас в айтишке, зато у нас печеньки бесплатные)) терплю свою контору ради опыта. Спасибо тебе за твои уроки смотрю просто всё в захлёб и очень многое подмечаю для себя, в будущем обещаю задоначу тебе, курс покупать не буду для меня уже поздновато, а отблагодарю 100%. Спасибо и желаю всех благ тебе.
@WebCademy
@WebCademy 2 жыл бұрын
Насчет требований в frontend - все так, и я при случае всегда об этом говорю. Сегодня нужен специалист который умеет делать frontend на JS фреймворке. А это и верстка и JS и сам фреймворк. Рост ЗП будет со временем. То есть на старте - это работа для опыта и на зачетку, чтобы был трудовой стаж в фронтенде. После переходить в компанию которая платит больше - это либо местная компания с продуктом, либо работающая на зарубежного заказчика, либо удаленка с той же Москвой, к примеру, ну либо с зарубежьем. Удачи и успехов в профессиональном плане!) Спасибо за развернутый комментарий.
@Jorlian-nl6xm
@Jorlian-nl6xm 4 ай бұрын
Здравствуйте, возник вопрос. Как вы в VS Code разворачиваете имя класса в HTML, при написании этого самого имени. Сочетанием каких клавиш? Пример 1:27:18
@ДианаДиана-с1г
@ДианаДиана-с1г Жыл бұрын
Спасибо! Понравилась идея с паддингом и марджином
@НатальяТулякова-п5д
@НатальяТулякова-п5д 2 жыл бұрын
при верстке первого экрана, при добавлении в css файл кода ".header_img { flex-grow: 1; position: relative; } пропадает подчеркивание в меню Pricing Contact и перестаёт прожиматься ссылка-кнопка в меню. В сообщениях ранее так же об этом упоминалось, но ответа не было.
@gro1449
@gro1449 2 жыл бұрын
У меня такая же проблема(
@alexander_stark
@alexander_stark 3 ай бұрын
Не хотелось вставлять svg в хедере... Через генератор сделал пентагон и 1 строкой оптимизировал код) 1:23:00 как раз об этом был вопрос
@romanmegagunko4650
@romanmegagunko4650 2 жыл бұрын
В блоке header так и не добавлены svg элементы на фон. Надеюсь на следующем стриме это будет учтено. Интересно как это делается
@WebCademy
@WebCademy 2 жыл бұрын
Да, добавим эти декор элементы в шапку на следующем стриме.
@baytszy
@baytszy 2 жыл бұрын
спасибо....как Вы так быстро перемещаетесь по всему...
@ТОЛЬКОПОБЕЗДОРОЖЬЮ
@ТОЛЬКОПОБЕЗДОРОЖЬЮ Жыл бұрын
Классный лайфхак про линейку 😂
@ТОЛЬКОПОБЕЗДОРОЖЬЮ
@ТОЛЬКОПОБЕЗДОРОЖЬЮ Жыл бұрын
Я знаю вёрстку, самообучение, работу найти не могу
@jugo-stream
@jugo-stream 2 жыл бұрын
Много фишек о которых я не знал, спасибо!
@ВладСеменов-и3п
@ВладСеменов-и3п 2 жыл бұрын
скажите пожалуйста, какая у вас тема в vs code ?
@EmNetProblem
@EmNetProblem 2 жыл бұрын
Здравствуйте, в figma установил плагин Font Fascia, но когда нажимаю слева наверху - в меню нету вообще раздела plagins, как это исправить?
@ДмитрийНормов-ю6ц
@ДмитрийНормов-ю6ц 2 жыл бұрын
На 2:01:30 решается проблема скачка кнопок при нажатии (решение - в виде фиксации высоты слайдера). А есть ли другие способы решения проблемы?
@VSM84-1
@VSM84-1 10 ай бұрын
Логин почему линк, а не батон?
@likerus22
@likerus22 2 жыл бұрын
Подскажите пожалуйста. Почему при использовании стиля .slider .center .slider__item { width: 380px; height: 456px; } центральное изображение прилипает к изображению справа?
@banderabender
@banderabender 2 жыл бұрын
та же проблема, разобрался?
@likerus22
@likerus22 2 жыл бұрын
@@banderabender Разобраться не получилось. Сделал через Slick Slider
@blackdracula8196
@blackdracula8196 2 жыл бұрын
я все делаю как ты делаешь но у меня как в начале не пошло с CALC я копирую даже у тебя код но он не срабатывает как у тебя у меня не ровно все равно (((
@СергейКаминский-ь4щ
@СергейКаминский-ь4щ 2 жыл бұрын
Здравствуйте, очень полезное видео, но можете пожалуйста подсказать, как вгрузить фотки с бекенда в слайдер. Как например на киносайте "kinogo"
@thomasshelby4753
@thomasshelby4753 2 жыл бұрын
Когда мы разместили картинку и посунули ее верх согласно макета ,то не работает hover ведь мы закрыли login и что делать как разместить не закрывая этот ефект ?
@WebCademy
@WebCademy 2 жыл бұрын
Мы после добавили pointer-events: none; чтобы клик происходил сквозь изображение.
@thomasshelby4753
@thomasshelby4753 2 жыл бұрын
@@WebCademy спасибо бро ты крутой больше туториалов
@thomasshelby4753
@thomasshelby4753 2 жыл бұрын
@@WebCademy Как сделать текст поверх картинки , position absolute не помогает
@Jesiksss
@Jesiksss Жыл бұрын
@@thomasshelby4753 z-index пробовал?
@makardakar8840
@makardakar8840 2 жыл бұрын
у меня на моменте 1:47 не выходит сделать так чтобы центральная картинка становилась больше остальных при листании карусели, может кто то сталкивался с подобным?
@WebCademy
@WebCademy 2 жыл бұрын
Сравните с готовым кодом из урока.
@РоманПетров-й5е
@РоманПетров-й5е Жыл бұрын
У меня такая же и история .
@РоманПетров-й5е
@РоманПетров-й5е Жыл бұрын
Была ошибка или что то нужно было менять ?
@makardakar8840
@makardakar8840 Жыл бұрын
Все оказалось проще простого. Название класса в css отличалось от названия в html🥲
@ssffq7651
@ssffq7651 Жыл бұрын
11:25 Не могу скопировать через ctrl+D
@LegionWotTeam
@LegionWotTeam Жыл бұрын
Ты должен скачать сам фигма файл, и потом удастся
@anatoliyvelichko2413
@anatoliyvelichko2413 2 жыл бұрын
после того как сделал вторую кнопку , панель навигации перестала работать, а когда сделал 3-ю кнопку , перестала вторая утапливаться, что это может быть ?
@gro1449
@gro1449 2 жыл бұрын
У меня такая же проблема((
@12394465
@12394465 2 жыл бұрын
Спасибо за урок! Подскажите, какие приложения используете для vsc?
@WebCademy
@WebCademy 2 жыл бұрын
Добрый день. Есть пост в блоге со списком моих плагинов для VS Code: webcademy.ru/blog/746/
@Андрей-р9ы5х
@Андрей-р9ы5х 2 ай бұрын
А ничего, что форма 800px в длину в макете?
@mrwise4436
@mrwise4436 Жыл бұрын
Хорошо , а сможете ли вы свертстать игровой сайт? на подобье Perfect world!
@ТимофейЛогинов-ч1и
@ТимофейЛогинов-ч1и 2 жыл бұрын
не могу врубиться, как container right оказался шире чем container.....на 28:14, у меня наоборот. И вроде логичным кажется, так как мы задали слева и справа большой отступ контент ужался больше чем в container
@albinak245
@albinak245 2 жыл бұрын
У меня тоже самое
@АндрейШпунт-е3ш
@АндрейШпунт-е3ш 2 жыл бұрын
container right шире чем просто container. Автор высчитал отступ , что бы контент начинался на одинаковом расстоянии с другими блоками, а заканчивался заграницей контейнера. У container right отступ слева и упирается в край экрана справа А левый наоборот упирается в левый край заполните контейнеры словами все и увидите
@FromStock333
@FromStock333 2 жыл бұрын
Добрый день! Большое спасибо за Ваш труд. Очень круто... Подскажите пожалуйста почему тег подчеркивает как ошибка? Спасибо
@WebCademy
@WebCademy 2 жыл бұрын
Спасибо. По поводу ошибки - надо смотреть код. Вообще не должно такого быть.
@FromStock333
@FromStock333 2 жыл бұрын
@ВебКадеми,. Юрий, спасибо. Это не только в этом проекте. Может какие-то настройки в VS Cod? Ещё иногда и "link" выделяется как ошибка
@darkus0
@darkus0 2 жыл бұрын
@@FromStock333 если у вас там ничего нет, он вам подсказывает, что нужно туда что-то добавить 😉
@КириллЦэрэндаш-с8п
@КириллЦэрэндаш-с8п 5 ай бұрын
уснул под видос булкина, проснулся под какую оо верстку
@pro5189
@pro5189 2 жыл бұрын
Здравствуйте! У меня вопрос. Когда я пишу background-color для header у меня экран не весь заливается градиентом. Как это можно пофиксить?
@SultanKent
@SultanKent 2 жыл бұрын
Извините если глупый вопрос но разве не легче просто копировать свойства картинок и всё в figma
@vaspurakavdalian1133
@vaspurakavdalian1133 2 жыл бұрын
Красава
@SuperDima99
@SuperDima99 2 жыл бұрын
подскажите пожалуйста не работает emmet ставлю !и таб и ничего просто отступает что не так? спасибо
@FoxMindShow
@FoxMindShow 2 жыл бұрын
!tab и все ок будет. Emmet авто встроен в vscode, это не всякие atom и notepad++ Все должно работать. А кажется понял твою проблему, он работает в файле index.html а ты возможно пытаешься не там использовать )
@КапитанАхав-д4к
@КапитанАхав-д4к 2 жыл бұрын
Это обновление VScode поломало emmet . Нужно в параметрах галочку поставить !tab она отключена у тебя, посмотри в настройках .
@SuperDima99
@SuperDima99 2 жыл бұрын
@@FoxMindShow да в index.html а что не так
@SuperDima99
@SuperDima99 2 жыл бұрын
@@КапитанАхав-д4к а где там эта настройка Я новичок Спасибо
@ВасилийКулаков-г5я
@ВасилийКулаков-г5я 2 жыл бұрын
@@SuperDima99 В нижнем левом углу нажми на шестерёнку и выбери параметры. Далее введи в поиске "emmet" и пролистай до пункта "Trigger Expansion On Tab" и установи галочку. Или обнови редактор, должны были починить.
@yuriy2109
@yuriy2109 Жыл бұрын
Смотрю, повторяю и записываю урок с комментариями текстовкой для себя. И почти в конце не досмотрев видео, вдруг перестали работать псевдоэлементы в верхнем меню. Что я только не делал. Сначала сравнивал футер с хедером стили и верстку, но потом путем выключения блоков верстки понял, что виновата картинка, которая залазит на меню. Я исправил зет индексами, но потом увидел как это сделал автор. Наверное где-то минут 40 провозился пока выключал всякие варианты. Урок нормальный, хочу посмотреть как этот макет переработать в мобильную версию. Также интересно было смотреть применение готовой библиотеки слайдера.
@splcell
@splcell 2 жыл бұрын
Осталось несколько вопросов: зачем задавать паддинги контейнеру и от чего они считаются, можно ли ширину контейнера указывать в процентах? Секция со слайдером, там же можно было сделать вообще без контейнера и не создавать отдедбный?
@АндрейШпунт-е3ш
@АндрейШпунт-е3ш 2 жыл бұрын
паддинги контейнеру задают, чтобы контент не прижимался к краям.Ширину в процентах скорее всего можно если вам хочется считать сколько процентов составляют 20 или 15 пикселов
@vabyars
@vabyars 2 жыл бұрын
Привет, крутой урок! А что за плагин помогает в html превратить .container в целый блок? Вот таймкод 25:52
@WebCademy
@WebCademy 2 жыл бұрын
Это emmet он встроен в VS Code по умолчанию.
@vabyars
@vabyars 2 жыл бұрын
@@WebCademy спасибо!
@PRO-kh8hb
@PRO-kh8hb Ай бұрын
Скажите а где взять макет? В телеграмме нет, не переносит меня на макет.
@WebCademy
@WebCademy Ай бұрын
Приветствую вас. Ссылка на макет: www.figma.com/file/w3Bb1v9Vq08lIoiIYLPegP/gotrip7?node-id=0%3A1 Готовый код с стрима по верстке макета "GoTrip": t.me/c/1579074518/101 Также макет и готовый код можно взять отсюда: webcademy.ru/blog/880/
@FoxMindShow
@FoxMindShow 2 жыл бұрын
У вас на сайте значок телеграма не работает, пофиксите плиз для обратной связи, а контакта у меня нет 😉
@WebCademy
@WebCademy 2 жыл бұрын
Проверил, работает. Ник в Тг: webcademysupport
@alanhilf9989
@alanhilf9989 2 жыл бұрын
Доброго! Что за плагин позволяет скопировать структуру хтмл и перевести в цсс селекторы автоматически
@darkus0
@darkus0 2 жыл бұрын
ecsstractor, на этом канале есть видео по настройке
@tmusabaev5188
@tmusabaev5188 7 ай бұрын
Help после подключения jquery и овл перестали отображаться картинки сладйера
@WebCademy
@WebCademy 7 ай бұрын
Посмотрите в инспекторе. Возможно вы не задали размеры слайдеру или слайдам.
@ИльяАлександрович-ы9я
@ИльяАлександрович-ы9я 2 жыл бұрын
Как всегда! Начали за здравие, кончили за упокой! Видео называется "подробно с разъяснениями для новичков". Когда вы начинаете добавлять скрипты в учебный проект - никаких объяснений нет. Просто делайте вот так и всё. Повторял и другие проекты, и там была та же самая проблема, из-за чего конечная версия проекта выглядела ломаной, ведь починить что-то невозможно, если не понимаешь в чем ошибка. Спасибо за бесплатный контент, но карусель ведь можно сделать и более простым способом, например используя бутстрап. Думаю, многим вашим зрителям хотелось бы увидеть именно эту вариацию.
@Jesiksss
@Jesiksss Жыл бұрын
А что сложного было в карусели? Там буквально поменять один класс нужно. Если до этого хоть когда-нибудь работал с другими языками, то проблем с пониманием не будет
@alexderenko2867
@alexderenko2867 2 жыл бұрын
Подскажите пож, как вы копируя часть хтмл вставляю в цсс получаете там сразу все классы, спасибо за урок
@WebCademy
@WebCademy 2 жыл бұрын
Плагин eCSStractor ускоряем верстку в VS Code. Быстрое копирование CSS классов из HTML разметки kzbin.info/www/bejne/povMiqaViNWoqpo
@vindrozel6909
@vindrozel6909 Жыл бұрын
У меня возникла проблема, не могу открыть лайф сервер
@ДмитрийНормов-ю6ц
@ДмитрийНормов-ю6ц 2 жыл бұрын
а использование @import в css - может, это плохая практика?
@WebCademy
@WebCademy 2 жыл бұрын
Чем? В конкретном проекте для конкретной задачи это подходящее решение не влекущее за собой негативных последствий, так что все в порядке. Конечно если в CSS будет под 30 импортов, то что-то здесь не так, и стоит использовать SCSS c сборкой в единый общий CSS файл.
@froxy4340
@froxy4340 2 жыл бұрын
Здравствуй, подскажи пожалуйста, где можно найти список установленных у тебя расширений на vs code?
@WebCademy
@WebCademy 2 жыл бұрын
Часть есть здесь: kzbin.info/www/bejne/b2WVoKRmlNtsa6c Но вообще пора обновить это видео.
@WebCademy
@WebCademy 2 жыл бұрын
И вот еще более новая статья: webcademy.ru/blog/746/
@froxy4340
@froxy4340 2 жыл бұрын
@@WebCademy Благодарю 😉
@ЛарисаЗахарова-б4ь
@ЛарисаЗахарова-б4ь Жыл бұрын
Как так быстра копировать классы с HTML в CSs?))
@alexlobotskii5530
@alexlobotskii5530 2 жыл бұрын
где взять макет в телеге все перелопатил макета нету помогите пожалуйста
@отецисын-ж3т
@отецисын-ж3т 2 жыл бұрын
Не скромный вопрос, я в мало что понимаю в сайтах, но почему нажимая стрелку направленную вправо, слайде едит налево и наоборот, Вроде бы правильнее было куда стрелка показывает туда и картинка прячеться
@WebCademy
@WebCademy 2 жыл бұрын
Это стандартное поведение всех слайдеров/каруселей. Кликаем вправо - и видим фотографии которые находятся правее.
@pigsel2509
@pigsel2509 2 жыл бұрын
33:50 Хорошо, что оставили))
@maskaradikk
@maskaradikk 2 жыл бұрын
Привет, вопросы не по верстке, подскажите как сделать так, чтобы было видно превью svg файлов?
@WebCademy
@WebCademy 2 жыл бұрын
Установить утилиту, легко гуглится "превью SVG в Windows"
@avocodeuser1343
@avocodeuser1343 2 жыл бұрын
Привет, мне нравятся твои уроки. Прости если умничаю, но я не качал свг шейпа(5ти угольника) на тайтле под девушкой, а сделал так clip-path: polygon(50% 80px, 100% 6px, 100% 100%, 0% 100%, 0% 6px); + к этому, что я прикрепил формулу для отзывчивости и красиво адаптировать можно под любой вкус, изменяя параметры на лету, очень гибко, немного задрочисто, в первый раз юзал этот клип паз, методом тыка научился использовать его, классная штука для адаптации самое то.
@WebCademy
@WebCademy 2 жыл бұрын
Круто, но угол получается острый, без скругления. Но идея интересная, рисовать треугольник не сверху а снизу. Вот код для полигона с закругленными углами: codepen.io/thebabydino/pen/XbxKbL?editors=1100 В уроке использовал svg - посчитав это оптимальным (быстрым и рабочим) решением, без clip-path, хотя можно и с ним заморочиться.
@avocodeuser1343
@avocodeuser1343 2 жыл бұрын
@@WebCademy Спасибо за код, точно ведь у меня там острый угол.
@b.abdurashidov4863
@b.abdurashidov4863 2 жыл бұрын
я не могу убрать border-radius от графики.
@WebCademy
@WebCademy 2 жыл бұрын
Сделайте дубликат макета к себе в черновики - Dublicate to drafts, в начале стрима показал.
@beautyisinternal6953
@beautyisinternal6953 2 жыл бұрын
Скажите пожалуйста а что эта за программа макета?
@Jesiksss
@Jesiksss Жыл бұрын
Figma, если ещё актуально
@jostinramirez9080
@jostinramirez9080 2 жыл бұрын
@frusya-freak
@frusya-freak 2 жыл бұрын
Здравствуйте) А уместно ли в кнопке задавать не отступами высоту, а тексту назначить line-height?
@worldchanger104
@worldchanger104 2 жыл бұрын
не уместно. Текст станет больше , по дизайну может не пойти. Удобнее отступами
@TopMusic-ps5bp
@TopMusic-ps5bp 2 жыл бұрын
Привет что это за программа где макет
@Ivan.Gostev
@Ivan.Gostev 2 жыл бұрын
Figma
@TopMusic-ps5bp
@TopMusic-ps5bp 2 жыл бұрын
@@Ivan.Gostev Спасибо
@LegionWotTeam
@LegionWotTeam Жыл бұрын
38:00
@azimkurbanov4659
@azimkurbanov4659 2 жыл бұрын
борода мощно идет
@typokrat
@typokrat 2 жыл бұрын
какой смысл в переменных css , с ними писанины в несколько раз большое....
@WebCademy
@WebCademy 2 жыл бұрын
Конечно не стоит заводить переменные пока они действительно не понадобятся. В данном случае, для контейнера и с вариациями container-right и container-left ширина контейнера в переменной - это обосновано и удобнее, чем три раза дублировать ширину в трех классах.
@Bezdelniza
@Bezdelniza 7 ай бұрын
Я, Мы, Вёрстка😂😂😂😂😂
@Mascentfrost
@Mascentfrost Жыл бұрын
1:39:00 (для себя)
@ДмитрийНормов-ю6ц
@ДмитрийНормов-ю6ц 2 жыл бұрын
Создатель owl-карусели сам задепрекейтил свое творение и рекомендует юзать tiny слайдер...
@WebCademy
@WebCademy 2 жыл бұрын
Пруфы? Не отрицаю что такое возможно, но пока требуемые от OwlCarousel функции она выполняет.
@WebCademy
@WebCademy 2 жыл бұрын
Для тех кто будет искать: github.com/ganlanyuan/tiny-slider Tiny slider for all purposes, inspired by Owl Carousel.
@WebCademy
@WebCademy 2 жыл бұрын
К слову да, tiny более функциональная. Похожа на swiper.
@ДмитрийНормов-ю6ц
@ДмитрийНормов-ю6ц 2 жыл бұрын
@@WebCademy , как вы уже заметили. на самом Гитхабе автор лично задепрекейтил свое детище ))))
@avocodeuser1343
@avocodeuser1343 2 жыл бұрын
Насчёт того что быстро пишешь и трудно типа повторить, я смотрю на 1.5 и успеваю повторять. Сначала сам пишу, потом сравниваю твой вариант, как-то так
@WebCademy
@WebCademy 2 жыл бұрын
Отличная скорость)
@user-nu1jj6ps4y
@user-nu1jj6ps4y 2 жыл бұрын
Усложнил в начале с переменными
Верстка сайта онлайн. Подробно с объяснениями для новичков. HTML, CSS, JS
3:18:50
HTML - Полный Курс HTML Для Начинающих [3 ЧАСА]
2:56:32
Верстка сайта для новичков. Проект Pet Spa. Часть 1. HTML, CSS верстка
2:55:51
ВебКадеми | Юрий Ключевский
Рет қаралды 8 М.
Верстка сайта - HTML, CSS, JS. Адаптив
3:01:57
От 0 до 1
Рет қаралды 113 М.
Подготовка JS перед React. Функции, деструктуризация, map, filter
2:22:46
ВебКадеми | Юрий Ключевский
Рет қаралды 9 М.
Верстка сайта онлайн. Подробно с объяснениями для новичков. HTML, CSS, JS
3:52:18
Прогноз погоды на JS. От дизайна до работы с API
3:58:41
ВебКадеми | Юрий Ключевский
Рет қаралды 114 М.
Продолжение. Адаптив. Верстка сайта онлайн. HTML, CSS, JS. Часть 2
3:06:59
ВебКадеми | Юрий Ключевский
Рет қаралды 10 М.