Бесплатный марафон по верстке сайта html/css/js, для новичков
Вставка
- Опубліковано 15 бер 2024
- Друзья, всем привет. Это верстка сайта для новичков, для всех, кто делает свои начальные шаги в верстке сайтов. В видео я подробно объясняю каждый этап разработки, мы по полной программе используем html, css и js. Это будет серия видео в виде марафона по верстке сайта.
----------------------------------------
макет - drive.google.com/file/d/1-SAc...
файлы (начальный html и css) - drive.google.com/file/d/1B1BT...
----------------------------------------
Сайт курса по верстке - from0to1.com.ua/
----------------------------------------
----------------------------------------
Готовая верстка на patreon - / from0to1
Телеграм канал - t.me/from0to1com
----------------------------------------
----------------------------------------
Доп ссылки:
box-sizing: • box sizing border box ...
ХотКей по VScode: • 10 горячих клавиш в VS...
Видео про БЭМ - • БЭМ методология. Практ...
Видос по svg - • SVG, большой гайд
Большой гайд по гридам - • CSS GRID Большое руков...
Все о флексах - • FLEXBOX начало. Флексб...
Продвинутые флексы - • flex-basis, flex-grow,...
----------------------------------------
Подпишитесь на канал, если вам понравилось данное видео:
bit.ly/2IFzwBZ
Мне 38. К it отношения никогда не имел, но почти 3.5 года назад начал с твоих видео, потом покупал твой курс на юдеми по шопу. Дальше больше. Сейчас я почти мидл фронт, работаю на иностранную компанию! Хочу сказать тебе огромное спасибо! Благое дело делаешь, Вадим! И всем кто хочет войти в it: если вы нашли этот канал, то дальше можете не искать, по верстке лучше, чем Вадим в ру сегменте ничего нет 100%.
Благодарю
Вообще скажу ,Вадим прекрасный человек ! Говорю не понаслышке ! Рекомендую !
И скоро заменит всех программистов ребята
Подскажите пожалуйста, где вы нашли курс Вадима на Юдеми платформе?
@@aswarriorr спасибо, мне очень приятно
С ума сойти. Что за человек!
Невероятная самоотдача и работоспособность.
Каждый выпуск на этом канале - праздник.
Если вы искали, как я канал, где можно получить скилл с самого 0 и до проекта, это именно он.
Спасибо автору!
Благодарю, рад, что помогаю
каждый выпуск не только праздник,но и целая история! лучший канал!!!
и снова вечеринка!))
привет вадим. спасибо за всё что делаешь. дай бог здоровья.
Благодарю
Чувак! Ты просто Бог в сфере "пояснение информации", я просрал кучу времени в поиске качественной подачи информации и нихрена так и не научился. Твоя информация как теплый мёд на уши, всё четко и по полочкам!!!
Огромный лайк и подписка!!
То ти ще й з України! Іди сюди, обійму :D
Дякую=)
Вадим, дорогой, приветствую! Рад видеть новый марафон, спасибо тебе огромное!!! Храни Господь добрых людей!
Благодарю, супер !
Спасибо Вадим. Прекрасный урок. Здоровья Вам и вашей семье.
Вот ТАК нужно преподавать !!! Четко, ясно и без лишней воды.
Спасибо
вроде давно перешагнул этот уровень, но к Вадосу на вечеринку регулярно захожу поддержать лайком
Благодарю
Спасибо большое! Надеюсь будет как можно больше выпусков)
Огромная благодарность автору за разжевывание каждого действия. Ну этот контент, ну мед, ну медятина.🤩
Спасибо тебе за уроки, они мне дали базовые знание в верстке)))
Спасибо, ждал с нетерпением
Спасибо
Красава 🎉
Ты гений брат! У тебя талант! Спасибо большое за разжовывания, такого сейчас не хватает!
спасибо
Спасибо за работу, напишу по поводу стрелок под слайдером. На макете они нарисованы правильно и на одном уровне. В этом можно убедиться вытащив горизонтальную линейку. А вот картинки на 2 и 3 слайдах подняты на 50рх от низа контейнера. Соответственно контейнер можно сделать 750рх, а картинки поднять на 50. И тогда все по макету получится.
Большое спасибо Вадим, очень помогаешь на начальных этапах верстки. Очень жду следующий видос❤
Спасибо
Спасибо за твой полезный контент ❤
Спасибо
Сразу лайк 👍
По верстке это самый топовый образовательный контент 100%. Буду готовиться на следующий курс по верстке однозначно!
Благодарю
Пффффф только заварил чая, думаю что посмотреть, тут Владос вечеринку выкладывает новую, бомба
Ну, я как знал, успел )))
Глубокая благодарность автору ❤️❤️❤️
спасибо
просто лучший препод
Спасибо
думал вы будете делать контент все более труднее для новичков. спасибо вам.
Спасибо за видос очень полезно
Вадим, респект!
Капитальный красавчик.
Спасибос
Добрый день, при скачивании макета есть только frame 3, 4, 5, а frame 1, 2 отсутствует, подскажи куда пропало?
Автору здоровья желаю!!!
Благодарю
наконец то вечеринка от Вадима, рад вас видеть
Спасибо, взаимно
Спасибо родной
Дякую за пізнавальні відосики) все круто і зрозуміло)
дякую
👍👍👍
Привет! Эх, видео бы для старичков..😊 Очень классные видео, спасибо
👍👍👍👍👍👍👍
В очередной раз спасибо за такие стримы! Поправляйся!
В ходе просмотра в начале появилось 2 вопроса:
1. Почему элементы хедера, например навигация, по БЭМ не называлась например header__nav, а выносилось в отдельный блок? Разве не правильней содержимое хедера делать его частью.
2. Для кнопок "избранные", "корзина", почему было решение вставлять картинку через , а не в css добавить тегу background-image ?
Предположу
1. Тогда было б . Судя по макету, меню на сайте будет только одно и назвав блок и так будет понятно, что оно в header.
2. Скорее всего для бэк-энда. Бэк-эндер не имеет доступа к СSS, а только к index.html
Хоть я уже и прошел этот уровень верстки и на некоторые моменты больно смотреть😄 Но я хочу выразить тебе благодарность за это видео, спасибо!
Спасибо
Когда у тебя будет на youtube урок верстка большого интернет магазина с Js. и еще один вопрос будут ли уроки по типу использования библиотеки React Redux очень интересно твоя подача информации ))
пошло добро!
Полным ходом
Хелов еврібаді) Вадим снова с нами💪
Хелоу еврібаді =)
Спасибо вам большое, что даете учится бесплатно,Ваши видео много чему научили меня
❣❣❣
Круто, я очень рад
какой макет))))😊😊😊
Макет прелесть просто, один из самых лучших в моей практике
@@vadymprokopchuk 😘😘😘😘 май харт
30:10 1:03:52 1:07:00 1:22:40 ,1:28:45,1:29:55(1:31:23,1:32:05),1:38:00,1:39:05,1:41:50,1:45:40,1:46:45,1:52:52,1:55:23,1:57:40,2:01:37,2:02:40,2:02:54,2:06:45,2:09:10,2:10:55
29:00 . плотность пикселя на квадратний мм
1:58:12 Подскажите пожалуйста почему margin-left: auto сместила кнопки на 2 последних слайдов, но не сместила кнопку на первом слайде, хотя классы у них одинаковые?
Большое спасибо, Вадим, за очень интересный и информативный, на мой новичковский взгляд, урок!
У меня такой вопрос: универсален ли этот reset.css из вашего архива, или не под каждый макет он подойдет?
И как его правильно вписать в уже существующий html-файл, в котором уже прописаны определенные стили, чтобы ничего не слетало? А то пытаюсь его вставить перед всеми линками со стилями, как на видео, но в итоге все отображается криво.
Заранее спасибо!
он должен быть подключен самым первым, как у меня на видосе, тогда все ок будет, подходит почти всегда
Огромное спасибо за отличную верстку. Есть вопрос...почему у меня левая стрелка свайпера упирается в край экрана, вроде следовал за вами по шагам, может что-то пропустил? я добавил свойство для .container-arrow margin-left 100px вроде помогло, но наверняка как-то надо было по другому
А еще почему-то картинки slider slider-bg-1.jpg и slider-bg-2.jpg не встают на всю ширину экрана, а только на ширину контейнера...есть идеи?
Ну на конец-то новый лендос.
Написал 5 лендосов и устроился на работу.
Ща будет шестой, повышу свою зп :D
Красава=)
Привет Вадим . Такой вопрос . Как ты делаешь переносы на 22:43 при нажатии на таб. У меня они компонуются как-то по другому . Расширение какое-то ?
Небольшие строки в настройках Эммета я прописал, поэтому по другому разворачивает
Привет. Спасибо за твои труды.
Ты для body прописал высоту строки 1.4. В "шапке" текст в h3 по макету auto. Я так понимаю, для него высоту строки надо поменять на 1.2, это и означает auto?
Если у тебя далее в списке будет шрифт с высотой строки 1.2, а ты для body задал 1.4, то элементы списка наследуют 1.4 даже если для текста в элементе задать 1.2. Как с этим бороться? Или вообще для body не задавать высоту строки, или переопределять её для li, а не для, например, ссылки в элементе списка.
я не понял первую часть вопроса, но если у тебя на бади стоит какое-то значение, а потом у конкретоного элемента тебе нужно другое поставить, то просто задаешь ему другое и все, оно более сильное по приоритетности для него будет
Вопрос не по теме ролика, хочу в gulp сборку добавить reset.css(чтобы стили сбрасывать), сборку только что закончил делать по вашим видео про сборку. Если уже в конечную папку dist/css закидывать и reset.css и style.min.css будет ли это правильно? Или надо сбросы стилей кидать в style.min.css чтобы файл css был только один?
Лучше кидать в мин, чтобы один файл был, просто импорту его туда
После каждого билда папка dist будет перезаписываться, лучше в папке, где будут писаться стили, добавить reset.css и импортировать его в style.css
почему ты не переходишь на pixso та же самая figma только с русскоязычным меню + режим разработчика
Доброго дня! Встречалось мнение что контентное изображение стоит вставлять в img, а иконки фоном. Сдесь же сделано наоборот, стрелки в img слайды в фон. Это мнение неактуально или ошибочно или вообще без разницы?)
Спасибо)
там главное не как, а где
можно в нтмл или в сss, контентные изображения строго в нтмл, у меня так и есть, бекграунд-имейдж прописан в файле нтмл, и это бекграунд так как там фоновое изображение, это четко видно.
а вот значки так как вам удобно, в данном случае намного быстрее в нтмл прописать, но мы будем их немного по другому вставлять так как я заметил что они должны фон менять при ховере, но это все равно будет в нтмл.
Когда-то давным давно лупили иконки в сss, просто была привычка, и там было свое удобство так как свг формат мало поддерживался
что то у меня стрелки arrow-left arrow-right получаются прижаты к самому левому нижнему краю страницы, а не как в макете по срезу контейнера...
Вадим спасибо за новые уроки,. Но скачал макет , а у меня только 3 фрейма показывает ,где еще два не пойму?
возможно баг, завтра перезалью макет
Неа, все так же. В чем беда не понимаю, ну да ладно. Спасибо что обратил внимание.
а в чём смысл писать html`у border-box, а потом звездулей делать inherit ? можно сразу звездуле дать inherit и делов, или так красивее ? Тогда можно использовать вместо html - > :root {} будет ещё кравивее :) мне нравится :root и всем сразу ясно\понятно :)
Вечеринка продолжается 🙃
100%
А можно для самый больших?)) С крутыми анимациями, не привязанным к сетке как старые шаблоны с вордпресса? А то простых и так на ютюбе хватает
Супер, записал !
Приветствую, пытаюсь зайти на сайт по поводу курсов, не загружает ни с одного устройства. У всех так ?
Привет Всем! UI Kit у всех отображается? Лендинг огнище!!!!!!)))Спасибо!
Доборого вечора, дякую за такі уроки, дивлюсь Вас давно, зараз придбав ноутбук і пишу з Вами. В мене 2 питання.
1. Не підтягує шрифт, якщо ставити значення 400,700 як у Вас.
2. Emet записує посилання таким чином , це нормально? Дякую
По другому пункту все ок, в мене просто налаштування інші. По шрифту, подивись на вкладку консоль в інспекторі, можливо в шляху помилка, чи в чомусь такому, можливо не прописано в css
Курс для самых маленьких)))
Почему мы не писали в html тег , а сразу теги ? Вроде же как нужно писать
Здравствуйте! Скажите пожалуйста. Если ли какой то порядок написания свойств по важности на убывание для класса?
Привет, если для одного класса, то такого нет, просто желательно компоновать, все для текста, для отступов и так далее, просто для красоты и удобства
Спасибо!@@vadymprokopchuk
Дякую за пояснення зі стрілками 👍 Питання, як бути з різним відступом після хедера? 1 слайд поставили 90, а в наступних відступ після хедера по 50.
Я подивлюсь в 3 частині, не звернув увагу мабуть, сьогодні другу вже записав, в третій гляну
@@vadymprokopchuk добре)
что делать если 1 и 2 фрейма нету?
а нам стайл гайд в макете?)
Реально ли в 2024 новичку найти работу?)
Ну а как по другому? Кто-то уходит из профессии на другие должности, кто-то приходит, плюс есть категории компаний которые очень любят джунов
Когда стрим?
Нужен стрим?)
Почему у меня не убираются стрелки хотя я для них прописал content none, все точно также делаю
Если в браузере в инспекторе я могу убрать галочку и отключить это свойство, то вот в коде непосредственно прописывая none ничего не меняется
вы не тому прописываете, где-то есть ошибка, или не хватает специфичности(приоритета)
@@4h3940
.swiper-button-next:after,
.swiper-button-prev:after {
content: none !important;
}
.swiper-button-next{
left: 75px !important;
right: auto !important;
}
Ребята помогите, открываю макет сайта в фигме, и просто белый лист, что делать???
У меня такое же было, когда открывал в десктоп версии Фигмы. ХЗ, может ноут просто не вытягивает. Открываю сейчас онлайн через брайзер и все ок
У всех получается скачать макет и запустить в фигме? Просто это уже не первый макет, который мне не удаётся скачать и открыть на этом канале.
У всех получилось, у тебя может настройки в браузере такие, или ты не до конца качаешь
нету frame 1,2 в файле фигмы
спасибо, посмотрю исправлю
@@vadymprokopchuk спасибо, я прост устроился недавно в компанию на пхп программиста и решил подучить верстку для себя, чтобы понимание было, а тут первого второго фрейма нету, слушай, если до завтра исправишь, буду оч благодарен! Да и в общем тебе спасибо большое за все, ты правда оч понятно объясняешь
А где сложные макеты ?
Два отрисованы и ждут, должны были выйти еще в конце февраля, но я долго болел, вот немного расчехлить я с этим
@@vadymprokopchuk Здоровье важнее, видосики подождут!!!Тем не менее ждем верстку макетика на Gulp, с видео про dev mode в Figma!!! Спасибо за контент!
@@vadymprokopchuk понятно, все ровно спасибо за твою работу, вот тебе ещё одна идея для ролика, gulp для WP, чтобы можно было легко пользоваться gulp и делать бэк часть на WP, на ютубе такого не было и было бы полезно такое видео
@@user-xm1hd8fe9m спасибо
Вадос як ідея запалити react щось для дедов
Идея бомбезная =)
Коли вийде марафон українською?
А ти минулий відос вже зверстав ?
Дякую тобі за твою працю!
Дякую
wgt@400;700, а не 400,700 иначе выдаёт еррор
Спсасибо за годный контент, вы очень классно всё обьесняите 👍👍👍
У меня так и получилось - не подтягивался Regular. Сделал просто отдельной дополнительной строчкой