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

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

[@jek126]

У меня просто слов нету, магия...Столько фишек новых для себя учу. Спасибо вам огромное Вадим!

[@user-jg8sf6ky5y]

Как всегда отлично все, информативно.

[@user-wp8ej2sh6y]

Большое спасибо, очень полезно. Верстаю вместе с тобой!

[@pavelsedoplatov]

Спасибо огромное, за вечерину!

[@user-zo2kg7ou5z]

Очень нравится ваша подача материала,как накоплю на курс обязательно запишусь ,а пока приходится самостоятельно изучать верстку.

[@Savkiv23]

Огромная благодарочка за твою работу!!!

[@vadymprokopchuk]

спасибо

[@user-bs3wu9rk3u]

Из каждого видео узнаю что-то новое

[@vadymprokopchuk]

супер

[@deutschc9058]

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

[@vladko5635]

Суперский контент, спасибо за работу!

[@averkovatatyana]

Спасибо! Было очень интересно!

[@user-wp1qb3nf4p]

Спасибо! Вечеринка что надо!)

[@EduardHoncharov]

Хорошая идея про улицу) Делай, мы оценим

[@mariia7044]

Делайте пожалуйста после каждого видео скринкасты, вы обещали Часто сижу и часами ищу какую то ошибку перелистывая видео по сто раз

[@user-qj1nb6df1g]

Святой человек Вадим, помогает и бедным людям, спасибо. Не в деньгах счастье. Ты не пропадешь)

[@andreyermolaev5391]

Думал что сам сверстаю макет но наткнулся на пару моментов и стал смотреть всё) Спасибо открыл для себя несколько фишек.

[@user-qj1nb6df1g]

Сам его нашел смотрел видео про Галп, а он оказывается местный братиш

[@user-qj1nb6df1g]

Вставать в 5 утра это круто -- нужно попробовать!

[@user-zn9gq3qn2s]

Вадим-Вы гений верстки!

[@megalodonn9356]

0:00 Приветствие; 2:35 Работаем!; 3:57 Заголовок (title) html; 7:08 Разметка для слайдера и текста. Слайдер; 14:08 Текст; 26:02 Делаем css стили; 26:48 отступы между секциями; 29:02 Заголовок (title) css; 35:18 Слайдер; 38:20 Настройка кнопок слайдера в JS; 46:59 Автоматическое листание слайдера; 50:14 Настройка слайдера CSS; 50:42 Настройка стрелок; 57:02 Анимация слайдера; 58:25 Задаём стили тексту; 1:14:17 Настройка слайдера 1:16:48 Следующая секция, Our Trip; 1:18:48 Слайдер our-trip(html); 1:22:17 Текст, title (html) 1:35:18 Настройка слайдера (css); 1:39:54 Текст (css) 1:52:50 Кнопка "Забронировать" (css) 1:58:40 Секция "Hotel"(html); 2:08:46 Галерея popup (html); 2:26:36 Стили для секции; 2:36:00 Ответы на вопросы;

[@bebracum4809]

😂😂😂😂😂😂😂

[@KIMI-lz5ym]

Спасибо тебе, Вадим, Побольше видео твоих хотим. Желаю тебе не хворать, И на фрилансе заказы почаще брать. Чтобы только успех тебя в жизни ждал, Чтобы на вечеринах ты не уставал, И развивать свой прекрасный канал продолжал.

[@vadymprokopchuk]

Благодарю) крутяк

[@user-pb2hf8cy8m]

Спасибо

[@user-or8xe9zw3m]

Крутое название канала

[@konstantinreut2577]

Спасибо за годноту, Вадим! Все делал, как показано на видео, но, к сожалению, fancy box не работает.

[@whiskyfake]

Можно ссылку на сборку VS? Спасибо! :)

[@martineden511]

Всем привет 👋

[@13rast]

про большой монитор , очень вовремя . Я полтора часа потратил пока к своей 29ке подогнал. .page-section{ margin: 200px 300px; у меня так получилось. Не знаю какие последствия будут. По этому переписал на твои значения. ps.душа теперь на месте

[@13rast]

к стати с жирафами тоже самое вылезло, но я оставил как есть так как это была моя первая работа. А это уже девятая. Сейчас по другому все вижу благодаря твоим урокам

[@user-pp3cv4nz4n]

4:24 - html (1) 7:15 - html (2) 11:56 - плагин Emmet слайды 12:48 - вставляем слайды (html) 35:11 - слайдер (js) 41:51 - какие могут быть ошибки при установки 50:09 - css 15:15 - txt 18:27 - список 26:57 - page-section 35:11 - слайдер (js) 50:42 - работаем со стрелками 58:21 - css (txt) 1:00:45 - 2 1:02:56 - 3 1:06:54 - 4 1:09:51 - как на собесе могут прикопаться 1:14:20 - боримся с большими мониторами ------------------------------------- 2 лист 1:16:46 - начало 1:18:40 - слайды (html) 1:22:18 - контейнер 1:26:28 - txt (html) 1:32:20 - кнопка ЗАБРОНИРОВАТЬ

[@jugo-stream]

9:28 - но никак иначе)

[@aramas36]

скажите пожалуйста, а что такого если слайдер станет флексом?

[@Marshmallow-cl1yp]

Спасибо еще раз. Новый вопрос: сборка Ваша, строка один в один ​$('.fairy-tail__slider').slick({ НО слайдер так и не работает. В чем может быть проблема?

[@valdemar2987]

Ну проблема может быть в чем угодно. Например: 1. Перед этой строкой пропустили знак $, где-то вместо запятой поставили ; или не закрыли какую-то скобку. 2. Допустили ошибку в названии класса в html. 3. Не подключили, или неправильные ссылки на jquery и/или slick, или подключение вашего js-файла выше по коду чем подключение jquery/slick. В общем без вашего кода - гадание на кофейной гуще.

[@MrGreenman02]

Marshmallow 007 решил проблему со слайдером. У меня код пуля в пулю с автором, но слайдер не работает....

[@Marshmallow-cl1yp]

@@valdemar2987 main.js $(function(){ ​$('.fairy-tail__slider').slick({ prevArrow: '', ​nextArrow: '', autoplay: true }); }); index.html ...

[@Marshmallow-cl1yp]

@@valdemar2987 при просмотре кода через браузер, в main.js отображается ошибка Uncaught SyntaxError: Invalid or unexpected token на второй строке: ​$('.fairy-tail__slider').slick({

[@valdemar2987]

@@Marshmallow-cl1yp Скопировал ваш код отсюда, вставил в VS code - действительно в консоли браузера появилась эта ошибка. Удивительно то, что переписав код вручную, не копируя, и снова запустив в браузере, я увидел, что ошибка пропала. Чудеса прям. Далее я снова скопировал код и вставил уже в текстовый редактор Vim - перед знаком $ и перед nextArrow стоял символ ?, я его удалил, скопировал код с vim обратно в vs и ошибка исчезла. Скриншот: prnt.sc/sue3xm

[@Vladimir-zp4kw]

почему то не работает flacybox все делаю в точности как у вас и не выходит

[@serg-k]

Сначала на слайдере стрелка правая ушла в право, вроде все так же ,потом второй блок ,текст был на ширину родителя но почему то текст был больше пришлось из 100% делать 90. Посмотрим что будет дальше

[@strangechannel4589]

Я верстаю с нормалайзом. Для класса с текстом .fairy-tail__body не срабатывает padding-left: 55px. Разметка показывает, что он есть, а отступа нет, а padding-left: 55% срабатывает. Так можно?

[@user-xl2ru1bu2k]

Strange Channel тоже так же

[@olhapidkovych5517]

В секции с маршрутом Our-trip при добавлении еще нескольких дней, контент начинает вываливаться из контейнера. Можно это пофиксить как-то?

[@madinaixmatullaeva5151]

у меня также,как вы исправили это? если помните конечно же

[@evilmonkey7611]

А почему не получается сделать галерею с картинками в svg формате без потери качества при увеличении? Вот тайминг 2:23:00 , если надо.

[@vadymprokopchuk]

фотки не могут быть в формате svg

[@mikhailbakhtin3916]

Вадим будет ли видео про JS?

[@user-mk3qg3zt2z]

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

[@user-qj1nb6df1g]

я записан на бомж версию авторского курса Вадима Прокопчюка по верстке, вот на эти видео)))

[@user-qj1nb6df1g]

Версия с нуля, с нуля денег)

[@KonkerE_]

У меня картинку hotel__images сузило , а на правой стороне три из четырех маленькие картинки в ряд стали

[@wavve66_]

как решил?

[@KonkerE_]

@@wavve66_ В чат пацанам написал и они помогли. Поищу сейчас и если найду отпишусь

[@KonkerE_]

@@wavve66_ .hotel__images { margin-right: 100px; flex: 0 0 40%; }

[@KonkerE_]

@@wavve66_ Норм стало?

[@wavve66_]

@@KonkerE_ Да, спасибо

[@den3212]

54:02 у меня почему-то не работает slick-prev, slick-next

[@evgenykorolev9108]

Перепиши код вручную или скопирую код снизу. Проделав такие действия, у меня всё заработало. $(function(){ $(`.fairy-tail__slider`).slick({ prevArrow: '', nextArrow: '', }); });

[@user-xc1kv5en8g]

Может у тебя не подключен jqery

[@den3212]

@@user-xc1kv5en8g все было подключено)) не парся я другие сайты наверстал)

[@user-xc1kv5en8g]

@@den3212 моладец

[@martineden511]

У меня проблема с выравниванием кода в visual studio когда ставлю тему Material. Раскидывает не читабельно на одной строке < потом пробел div и закрытие на новой строке >. < div > .

[@user-ji3rt5bv3b]

У меня слайды работают только через Live сервер, почему так?

[@user-mk3qg3zt2z]

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

[@apexnuts9785]

смотрел, смотрел, потом ты начал тупить со слайдером, ну я так понял ты не дружишь с js, а я кокрас недавно научился слайдер на js писать, короче сделал свой :D

[@bohdan3125]

1:17:00

[@niklion9111]

Где макет

[@megapinkiswag622]

Телеграмм канал Вадима

[@doniyorusmonov152]

урок очень хороший спс, только одно просьба можете по 20 30 минут сделать

[@dieeeev]

а толку по 20-30 минут? надо же как можно подробнее рассказать, что происходит на экране, это же для новичков + ответы на вопросы

[@gozalb6813]

@@dieeeev можно и короче. Реально долго и тянет . Можно по активнее

[@dieeeev]

Gozal B а как иначе можно подробно объяснять каждый шаг? Если ты не способен уделить 3 часа, то уж извиняй

[@bakhrombek1657]

@@dieeeev 3 часа это слишком долго на одну часть. Так медленно ещё никто не Верстал!!))). Новички так далеко не пойдут) а если тебе норм и медленно догоняешь, то извиняй)))

[@dieeeev]

@@bakhrombek1657 я как раз не медленно догоняю, а 3 часа потому что постоянно задают вопросы, на которые надо отвечать

[@bakhrombek1657]

Много не по делу. Растягивает и тянет автор. Давай грамотно по делу. Времени не жалко чесать столько)

[@bakhrombek1657]

@Александр Решетников дело не во времени. А как автор тянет вёрстку. Посмотри верстку Active box хотя бы. Все по делу. Никакой воды))

[@bakhrombek1657]

@Александр Решетников первый раз верстаешь по ходу.)) За 3 часа можно весь макет сверстать и за меньшее время. А у автора один блок контента 3 часа. Вода в том что отвлекается рассказывает про ситуации в вёрстке - не по делу короче тянет). И вообще по ходу ты автор с левого профиля)) смотри другие верстки и поймёшь ошибки)))

[@bakhrombek1657]

@Александр Решетников походу пукан лопнул)) твой ор - как громкий позор. Вот с тебя я орнул реально.)) Не первый раз верстаешь)) видно по 3 часа торчишь. Видно тормозишь нереально)). а теперь потеряйсЯ😂😂

[@Forward172]

@@bakhrombek1657 не хочу никого оскорбить! Но вы не правы. Для меня как для человека который только учиться это идеальное объяснение! Все понятно и доходчиво. Если вы умеете что то то пожалуйста на другие каналы! Автор предупреждал что эти видео для новичков!