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

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

[@sergeychaus8842]

Пасиб за марафон, один из самых крутых блогеров - фронтеров, тааких как тип. верстальщик, фрилансер по жизни, которых мне нравятся.Удачи тебе!)

[@user-ic9wm9mi1l]

Ушел в середине марафоне, устал, и вот доделал сайт, каждый марафон появляются новые фишки, и ручки набиваются, спасибо

[@user-yd6be5wz4p]

Вечеринка огонь ! Никакой водички, только годнота. Благодарю :)

[@user-jx2ry4gu8u]

Вадим, спасибо Вам за этот марафон. Интересная подача, нужная информация. Доступно, понятно, интересно. Крутая вечеринка! =)

[@vadymprokopchuk]

благодарю

[@megalodonn9356]

0:00 Приветствие; 1:55 Начинаем Заголовок, разметка (html); 12:00 Стили для текста(css); 17:06 Паркуем шары 23:26 Секция контактов (html); 30:29 Форма (html); 36:24 Делаем стили; 51:35 Стили для формы; 1:08:46 Центрирование формы относительно картинки; 1:11:14 footer, html-разметка; 1:17:54 Картинки для футера; 1:23:42 css стили. Фон; 1:25:42 css стили. контент; 1:29:35 css стили. Контакты; 1:33:33 Момент по поводу использования для телефона и почты; 1:39:40 Значки для телефона и почты; 1:43:15 Значки соц.сетей и цвета выделения при hover; 1:57:41 Адаптив header; 2:25:09 Адаптив fairy-tail; 2:35:19 Убрать стрелки слайдера; 2:44:26 Высота и ширина слайдера; 2:52:30 Плавный скролл при нажатии на ссылку; 2:58:39 Нюанс. Не работает ссылка на след.страницу;

[@ramrain262]

Пожалуй ты единственный чьи макеты я верстаю до конца и с интересом! Ожидаю стрим для старичков. Спасибо большое за такую полезную практику.)

[@helenradaykina5665]

Как всегда отлично! Спасибо огромное!!!

[@abroad_fam5243]

Отличный марафон выдался , СПАСИБО!!!

[@vadymprokopchuk]

круто, рад что понравилось

[@alexbigar9769]

Спасибо за твой труд) Отличные видео!

[@user-qd5kr4zh6b]

Спасибо, Вадим. Прошел у вас 3 марафона для новичком, доволен результатом.

[@KIMI-lz5ym]

Привет, очень информативно и полезно, как обычно!! Спасибо.

[@Alexus1504]

Вадим, спасибо Вам за работу!!!

[@jek126]

Шары есть всем хорошо всем весело ))) Спс огромное вам за вашу роботу, и за такой крутой контент!

[@user-pj7op1pr4v]

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

[@SYNTHTRAYA]

оч крутой стрим Вадим) спасибо огромное вам за мотивацию^_^

[@user-ok4qd9is7q]

Отличный марафон, многое подчерпнул.

[@vadymprokopchuk]

круть, спасибо

[@user-wp8ky5dz4e]

Спасибо братан за обучения Уже 3-день я вчера немного сверстал и у меня получилось но до footer не дошел удачи вам

[@vasvas1105]

Вадим, приветствую, очень интересный материал, вместе с тем если смотрим iphone5 в горизонтальной раскладке разлетается верстка первого банера-экрана (текст кападокия улетает). Подскажи есть ли на канале (или планируется) видео про организацию кросс-браузерного тестирования? Спасибо!

[@user-Arvard]

блин, жаль, что не досидел до конца стрима... там вопрос про auto-prefixer, он работает !! просто сейчас все браузеры уже почти всё знают, поэтому он ничего не прописывает. в js файле задана у многих настройка типа "проверять последние 2-4 версии браузеров" а они уже всё умеют почти! нужно задавать последние 20 версий, тогда он оочень много вписывать буде тв css файл (а именно вот эта строчка overrideBrowserslist: ['last 20 versions'],)

[@user-xb4bk1un7j]

Как же сложно все даётся. 6 макет уже под руководством. Но как только один на один с макетом, это трешшшш просто. Скоро на курс накоплю, думаю дело пойдёт лучше

[@mikhailbakhtin3916]

Вадим сделай видео про JS как сам учил, как лучше учить, и как сделал такую тему на инспектор?(вроде файлы заменять надо на гите было)

[@user-pp3cv4nz4n]

Для себя ;) 30:40 - регистрация

[@normparenb2831]

Привет, спасибо за Ваши старания. У меня важный для меня вопрос, ответьте, пожалуйста. А что адаптив не обязательно проверять на горизонтальном развороте устройства? На 320 тайтл хедера, например, уходит далеко вниз бекграунда.

[@user-qo5sq4me6k]

Адаптив нужно проверять везде, может быть Вадим упустил какую-то деталь, ваша задача-доработать недочеты.

[@user-mk3qg3zt2z]

@Norm Parenb Здравствуйте! Обратитесь к ребятам из neoseo.com.ua . Все Вам обьяснят и со всем помогут! Сама в свое время к ним обращалась и сделали все очень хорошо!

[@user-Arvard]

ну и судя по комментариям, в теорию очень мало новичков лезет читать, поэтому тут напишу, может кто увидит, что если в ссылке есть решётка, то ссылка отправляет куда-то по этой странице, а не на другую.

[@olegti1934]

Привет, может сделаешь такой формат "скоростная верстка"? Где будешь пытаться сделать проект максимальнео быстро, это будет интересно тем кто уже не новичок, ибо мне слушать инфу для новичков уже нудно и я чувствую прям как течёт мое время)), а вот в проекте на скорость мог бы какие нибудь фишки почерпнуть и времени много на просмотр не терять

[@user-di6gk6cf3f]

я думала этот на скорость)) но я новичок

[@zelenyigor6919]

Спасибо! A исходники готовой верстки где можно скачать ?

[@vadymprokopchuk]

готовой нет, только самостоятельно

[@alizhilov1391]

Вадим а если картинку background-image, прописал правильно путь, на компьютере она есть, но на сайте не отображается в чем может быть дело?

[@vadymprokopchuk]

вероятно путь прописан не верно

[@_fnf1995]

А нужен ли PUG при том что EMMET неплохо справляется?

[@fantast2568]

Нужен если есть такое требование у работодателя. Если для себя (фриланс) то делай что хочешь.

[@nikolay-t6497]

Многие кофе едят )) Это нормально )))

[@vadymprokopchuk]

это да)

[@fantast2568]

Вроде по рекомендациям пить кофе можно не более 2х чашек в день. Больше уже вредно для здоровья

[@user-kh7fv5rn1g]

Помогите, в секции our-trip слайдер идет после текста, в адаптации как поменять их местами? чтобы слайдер - первый, потом текст. у меня никак не получается

[@bellakocharyan1240]

.our-trip__inner{ display: flex; flex-direction: column-reverse; }

[@kexve79]

пропустили в стилях .price__title span{ margin-left: 120px;

[@user-to8gd1kj6g]

Всем привет. При масштабировании в футере бг остается прилепленным к низу, при отдалении масштаба картинка все так же приклеена к низу, а текст поднимается в нужное место.

[@user-to8gd1kj6g]

Все , решил. background-position:top center; прописал. Хотя было bottom :/

[@MrAdamko0001]

Тааакс, ребят, я прописал в js все как у Вадима и стрелки пропали при размере 601, но после обновления снова появились и не пропадают. Код проверил раз 10...

[@denisk9194]

Видео мегаполезное! :D Не понял только как адаптировать страницу, где в одном диве our-trip__body сидит и Тайтл и 4 списка и кнопка. При уменьшении экрана, по логике, картинка-слайдер уходит под низ our-trip__body. Внутри него уже должны перестроится, например, Тайтл слева > 4 списка по центру под тайтлом > кнопка справа (например). Манипуляции с flex приводят к растянутой кнопке и съехавшим спискам. Наверное их нужно оборачивать дивами и задавать высоту. Если кто доделал, поделитесь, пожалуйста, с помощью чего вы двигали и элементы.

[@user-mk3qg3zt2z]

@Denis K Здравствуйте! А не пробовали обратится к neoseo.com.ua? Они очень крутые,делают все отлично,быстро и недорого. Искренне советую!

[@user-Arvard]

Позволю себе сделать тут уточнение к объяснению, потому что ни на одном ресурсе не нашёл нормального объяснения... когда первый раз столкнулся с id... и с его объяснением, что он должен быть один на странице. Мне прям так глубоко эта заноза засела, и я ломал голову - всмысле только один ??? Один на всю страницу? нет! Один в каком смысле ? и долго мучался, пока сам не пошёл на jsfiddle.net (аналог codepen.io) и начал мудрить с "айдишниками". Смысл в том, что id может быть много на странице! Но! Суть не в том, что может быть именно один атрибут id на странице, а уникальное значение этого атрибута. на одной странице может быть id="one" и id="two", и id="three", и id="four".... Значения должны быть уникальны, сам атрибут id может быть много раз применён на странице. ну по крайней мере ВАЛИДАТОР (validator.w3.org/#validate_by_input) на это не ругается :)

[@vadymprokopchuk]

))) конечно много айди может быть, главное чтобы каждый был уникальным

[@user-sf2iy6uz6w]

Не могу понять по каким законам живет вложенность тегов. header, wrapper, div, div Боюсь переборщить с дивами вкладывая в него по одному элементу, а найти объяснения как и зачем создавать вложенность не могу.

[@user-sf2iy6uz6w]

Глянул верстку для новичков по макету с суперменом и все стало ясно как день. Отличная подача у автора, легкая, позитивная, чувствуется максимальная отдача.

[@SYNTHTRAYA]

ахах у меня такая же клавиатура)))

[@seleldjdfmn221]

I love This Vid. Heart my comment. Enjoy your evening xP

[@walterwhite4407]

respect