Верстка сайта с нуля, для новичков. Марафон по верстке, день 1

Подписаться 84 тыс.

Просмотров 109 тыс.

50% 1

Марафон по верстке сайта. За 3 дня полностью сверстаем сайт и сделаем адаптив. Объясню все что делаю, и зачем. Отвечу на вопросы.
Тема в VSC - плагин Material Theme
Все исходники, инструкция и информация в телеграм канале.
Ссылка на телеграм канал:
t.me/from0to1ru
Ссылка на телеграм канал с впн:
teleg.one/from0to1ru
Если это не помогает, просто зайдите в телеграм и в поиске введите from0to1ru или марафон по верстке.
Чат верстальщиков:
t.me/chat_from_0_to_1
Как создавался этот дизайн:
• Дизайн сайта
Написать мне в ВК:
vadimprokopchuk
Написать мне в телеграм:
t.me/silver8light
Отзывы о моем авторском курсе по верстке:
topic-104892258_40476405
Подпишитесь на канал, если вам понравилось данное видео:
bit.ly/2IFzwBZ

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

2 фев 2021

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 129

@user-wq1yt7rw2y 3 года назад

Вечеринка! спасибо- нравиться твой стиль работы и мысли

@alexinsaev 3 года назад

Денис Борисов в сфере верстки))) Спасибо за позитивный, полезный и доступный контент!

@ZEPHYR-Dima 3 года назад

Отличный марафон! Люблю тебя смотреть!)

@user-dj1wr4lh1v 3 года назад

Большое спасибо!!! На позитиве, заряжаешь, красавчик!!!

@julbarsstar4913 3 года назад

верится с трудом, что реалии среды обитания полные человеческого равнодушия не оттолкнули УЧИТЕЛЯ ( с большой буквы) от учеников. по обучаловой теме Вам нет равных: нет воды.космического благополучия и здоровья всем нам и Вам .

@dota2i0psdasdas36 3 года назад

Красавчик! . жду продолжения истории)))

@digitalclub9379 3 года назад

Марафон огонь, приятно смотреть! Верстаю потихоньку, скоро догоню.

@user-kz7xz4xb7o Год назад

Круто очень!!! Перебрал кучу видео, остановился на "вечеринках"))) Заходит на Ура!!! Спасибо большое!!!

@winter9674 3 года назад

Моё почтение! Здоровья тебе и твоим близким, друг

@vadymprokopchuk 3 года назад

Благодарю

@inBalancer 3 года назад

Спасибо! Как же круто, что я наткнулся на этот канал. Изучение верстки становится веселым и занимательным. Респект

@j-lewis 3 года назад

Такие же мысли)

@kuzya6488 3 года назад

Это лучшее что есть в бесплатном рунете, на тему верстки для новичков. Свободное общение, доступные материалы! Спасибо! Не останавливайся! Уверен в твоем светлом и богатом будущем!

@abramofandrey 3 года назад

всем привет, отличный марафон, лайк однозначно!

@user-vg8te8up5m 3 года назад

Девачки, я снова плачу, за что мне такой бесплатный контент? У меня день рождения? ВАДИМ, от души...

@user-py9uv4nw5k 3 года назад

Классная вечеринка!))) Автор молодец!

@user-nm7yi4ol6z 3 года назад

как всегда на высоте - спасииибо

@xanxan3256 3 года назад

Очень хорошо объясняешь. Мне понравилось. Подписался

@karatvlog Год назад

класна та доступна подача матеріалу, дякую)

@janmaly3292 3 года назад

контейнер родителем быть не может, у него проблемы в жизни Орууууу ахахахахаха

@user-wl7is8gq2l 3 года назад

Спасибо большое! Ты классный)

@hightommy7961 3 года назад

1:28:20 когда спрашивают как продвигаются у тебя дела в изучении верстки

@vvks9901 Год назад

Очень подробные понятные объяснения! Дякую!

@user-xm8bp2hb4y Год назад

спасиба что есть такие люди каторые обьясняют и все панятно учусь по вашем видео и хачу в дальнейшим устроится на работу по верстке как устроюсь на работу буду делать данаты вам добро адуши душевно в душу с уважением😃

@Napolion4ik 2 года назад

Подписка и лайк .Буду ждать новые стримы по верстке.

@anv7259 3 года назад

Ты делаешь доброе дело🙏

@vvks9901 Год назад

Много внимания мелочам, это мега круто!!!

@farruxeshboev9788 3 года назад

Просто кайфуем 😂👍

@user-yv4tn5ll9z 3 года назад

Твои уроки очень крутые) Успехов тебе в твоих планах!

@aleksandrkanygin2672 3 года назад

Топчик, отличный контент

@veaceslavpascaru7294 3 года назад

Видео супер. Вадим, тебе большое спасибо.!!!! Скажи, как называется тема для VSCode?

@islomtoshev8721 3 года назад

Братан спасибо большой :)

@andyanatolich 3 года назад

Спасибо большое за марафон! Скажите пожалуйста, при подключении normalize.css нужно писать для тэга свойство box-sizing: border-box?

@stavrogin_ 3 года назад

классная вечеринка получилась

@ardan575 3 года назад

шикарно!

@viktoriaviktoria3178 3 года назад

Супер! Щиро дякую!

@cloubglow 3 года назад

А есть где нибудь код? Не работает слик, не могу найти ошибку 🤒

@dmitrid.317 3 года назад

Малый конечно молочага!)) jQuery в топку))

@coldwarrior9992 3 года назад

Привет, спасибо за материал. А адаптив будет?

@kosslanoss 3 года назад

Клаааас!!!

@winter9674 3 года назад

Это...Просто...О%#енно

@shsshh1264 3 года назад

Реально он круто обоснует

@TaimasovK Год назад

Спасибо большое!!! Круто!!! Респект!!!

@DmitriiBozan Год назад

если я дам свой телеграм, то можешь прислать етот сайт?

@TaimasovK Год назад

Давай

@DmitriiBozan Год назад

@@TaimasovK @John_1565

@alexdrumer5933 Год назад

Спасибо за марофон! Только где макет? Ссылка на чат верстальщиков!

@user-yv4tn5ll9z 3 года назад

Как всегда вместо сериальчика стримчанский с Вадосом)))))

@velobarahlo 3 года назад

спасибо!!

@littlecat8931 3 года назад

спасибо!

@romansokurenko4357 2 года назад

100 мильёнов лайков!!! Спасибо БОЛЬШОЕ!!!!

@animatron9479 2 года назад

где можно сравнить твой код с собственным, например найти ошибки в коде

@niksemenov5490 3 года назад

на заметку! 2:40:40 для .top__item{ вместо всего ниже написанного display: flex; flex-direction: column; align-items: center; justify-content: space-around; text-align: center; можно указать для .top__item img{ margin: 0px auto 10px; результат тот же. буду смотреть дальше оба варианта, как поведут себя при адаптиве. Спасибо!

@sulejmanpovelitel1220 Год назад

СПАСИБО ! Дядя Вадим ! п.с. не сердись на меня за предыдущий коммент , удачи !

@sapojNick 3 года назад

Вадим, хочу записаться на Ваш курс, но ссылка на телеграм ведёт на скачивание приложения, а в контакте, не отвечаете. Как с Вами связаться?

@maximivchuk9796 3 года назад

почему вы не делали section 100vh, секция с иконками же не вмещается по высоте первого экрана

@edkar4629 3 года назад

Подскажите, как с позиционировать placeholder

@user-qc2sf3fl7x 2 года назад

ты мой бро))))))))))

@abilkhaiyraubekerov7284 3 года назад

Krasavchik

@opex9979 3 года назад

Хедером называется все что попадает на первый экран без прокрутки (нав бар, тайтл, текст, кнопка и ТД), то что вы называете хедером - называется нав бар

@blacksimus295 2 года назад

какие плагины у тебя для css, заметь пожалуйста))

@youritperson 3 года назад

а где исходники? в телеграмме не вижу, чтобы были

@lassic5244 3 года назад

slider 2:01:30 кнопка 1:52:00 css 30:33 html 9:39

@Wolos1978 3 года назад

доброго дня, не подключается слайдер, до момента подключения все работало корректно

@weTRONer 3 года назад

Лукашенко !

@CokoJI_CTAJIuHA 6 месяцев назад

цеэуропейцы без антисоветчины не существуют

@KseniiaBurtseva Год назад

Здравствуйте, можно ссылку на фигму с этим дизайном?

@Tora20112 3 года назад

Как обойти фичу, когда transform: scale блюрит изображение, в макете был текст, но бывает кнопки и с фото? зы Постараюсь это задать в чате, если тут не увидите, надеюсь эти вопросы не только мне интересны)

@ShoTHIk 3 года назад

Нужно смотреть на код. Но, как вариант, добавить элементу, который НЕ нужно блюрить обёртку (.wrapper, или просто закинуть в тэг div), и в CSS застилизовать её прямопротивоположно. То есть задать отрицательный transform: scale, либо scale по умолчанию.

@user-cg9pq4qo8f 3 года назад

Чувак, как адаптировать свёрстанный сайт под мобильное устройство?

@user-jl2je2lk8m Год назад

Почему в хеадере просто по центру все расставил, если в фигме там по px не все по центру стоит? И расстояние между меню логотипом и телефоном тоже не указали, а просто выставили по центру, так можно делать?

@user-wz9qr6ki9v 3 года назад

сколько вёрстка такого макета стоит в россии?у нас примерно 200-300 баксов.

@user-zy4qf6dl6s 4 месяца назад

подскажите пожалуйста есть ли макет в фигма?

@royal_aver4403 3 года назад

Зачем использовать line-height, если всего одна строка текста?

@DarKiFriaR 3 года назад

заказчик может в дальнейшем добавлять контент в макет на своё усмотрение. так что другие строки вполне допустимо могут появиться

@veterok54 3 года назад

что за тема в vscode?

@user-ke3nn4fr4z Год назад

А что это за программа в начале ? где сам сайт

@DevOps1 3 года назад

дайте ссылку на макет

@Deadpool-nf1ln Год назад

не могу в телеге найти этот макет!

@NIKOLARUS1 9 месяцев назад

Есть видео, где макет про Турагенство, где большое количество картинок, которые заходят за пределы контейнера?

@vadymprokopchuk 9 месяцев назад

все что было на марафонах все есть на канале

@NIKOLARUS1 9 месяцев назад

@@vadymprokopchuk Понял спасибо, буду искать. Просто наверное знаете, когда кучу картинок, которые расположены на тексте в качестве украшения сайта.

@user-qc2sf3fl7x 2 года назад

я с тобой владос!!!!!!!!!!!!

@salo_ed6046 3 года назад

2:45:45 такая жиза))

@user-qz1ic6yb5v Год назад

Добрый день..Простите, если не буду оригинален. Где брать материалы к этому уроку? Имею ввиду макет

@vadymprokopchuk Год назад

првиет, телеграм в описании, переходите и там листаете до этого проекта, там будет макет

@user-qz1ic6yb5v Год назад

@@vadymprokopchuk Благодарю.

@freakGuitar 3 года назад

а че в одном марафоне бокс-сайзинг только для звездочки, в другом еще для афтер и бифор, а здесь вообще для хтмл, а для бифор и афтер отдельно инхерит? ¿🙈

@DevOps1 3 года назад

а где макет?

@alex_hmeln Год назад

доброго дня, підкажіть датупроведення марафону в телеграмі..не можу знайти макет

@alex_hmeln Год назад

сам спитав..сам знайшов 3 лютого 2021 року

@user-pp8hk8fg3g 3 года назад

когда вторая часть

@vadymprokopchuk 3 года назад

Вышла уже давным давно

@user-pp8hk8fg3g 3 года назад

@@vadymprokopchukсори не видел

@user-pp8hk8fg3g 3 года назад

@@vadymprokopchuk а так канал у вас топ еще с 2019 года подписан

@kadetovdesign 3 года назад

Круто конечно , но если смотреть в 2х, много отвлекаешься на вопросы, хотя сам говоришь что в конце стрима ответишь

@shake4970 2 года назад

Круто, конечно, что ты у нас великий всезнайка, но не все такие, как ты. В чате много новичков, которые задают ему вопросы, возникающие по пути вёрстки. А запись смотрит не меньшее количество новичков, у которых могут быть одинаковые вопросы, которые будут озвучены Вадимом сразу же. Так что закрой пасть и не кипишуй)

@user-mc9hl2hq2b 2 года назад

Как убрать маркеры в списке?...

@skmillionaire3409 3 года назад

В когось слайдер зїжав при підключені slick????

@serg-k 3 года назад

Осталось сделать этот сайт и для старичков

@serg-k 3 года назад

я сам не смог сделать, чет жестко новые свойства transform: scale(1.25); я специально не стал сам делать думаю щас посмотрю а там че будет, как хорошо что я не стал сам делать я бы каждый шриф прибавлял и проклял бы этот hover. а тут просто scale черкануть нужно

@Denik-dg9cc 2 года назад

Де взяти макет дизайну?

@vadymprokopchuk 2 года назад

телеграм в описі, дальше в файлах

@user-xr7ds3kq2k Год назад

а есть ссылка где можно скачать этот дизайн в фигме? или кто-то может скинуть, пожалуйста)

@pavelyoung6355 Год назад

в телеге

@severinhotkowotwowsua 3 года назад

Як включити в фігмі ці червоні рамки що на 8:11 ?

@ta_ni_ko2082 3 года назад

Shift+R

@dredwis2865 3 года назад

Shift + R

@damir_9347 3 года назад

У меня не выровнялось.

@whilefordo 3 года назад

Вот блин. фигма уже не работает на виндоус 7 ((( а онлайн версия очень сильно тормозит. что же делать. поддержка виндоус 7 прекращена, и я теперь не смогу скачать обновление KB2533623 а без него фигму не запустить на семерке (((