Верстка лендинга из PSD с нуля и до конца. Как сделать верстку сайта. Правильная верстка сайта. №2

Верстка лендинга из PSD с нуля и до конца. Как сделать верстку сайта. Правильная верстка сайта. №2.

Макет:

Результат верстки + макет:

Бесплатный курс по верстке сайтов (Уроки HTML CSS JS):

Программы и инструменты для верстки сайтов:

Меня зовут Женя Андриканич, я IT - специалист, занимаюсь разработкой сайтов. На этом канале, я регулярно и в максимально доступном формате буду делиться с тобой своим опытом, наработками, секретами и лайфхаками!
«Фрилансер по жизни». Живи, а работай в свободное время! ©

[mrSturnn]

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

[GANGSTER]

Пока что самый лучший верстальщик которого я встречал на YouTube в RU сегменте.

[aharshyna]

Не канал, а находка для тех, кто учится и прокачивает свою вёрстку! Спасибо за ваш труд!

[nikolay]

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

[empnbyl]

Трудно подобрать слова, чтоб выразить восхищение. Скорость работы и результат просто потрясающие. Такой пример лучшая мотивация усовершенствоваться в этой области. Огромное спасибо.

[vsbgxns]

Смотрел твой канал 4 месяца назад. До этого момента прочитал 2 книги. Джона Даккета HTML и CSS, и Кейта Гранта CSS для профи, сделал 6 макетов сложнейших, начал изучить JS. Теперь смотрю это видео и вспоминаю себя 4 месяца назад полного чайника и уже чувствую себя не так неловко когда ты шустро набираешь код

[Denik-isgi]

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

[MaJLoPo]

Я просто влюблён в этот подход к вёрстке.
Спасибо огромное тебе, Жень!)

[tuoktsf]

Отличный живой стрим. Детальный, понятный для новичка разбор вёрстки. Учиться у тебя одно удовольствие. Начинающим, как я сейчас, советую смотреть этот стрим и верстать макет после 20-го урока курса и вёрстки тренировочного макета по флексам. На этот момент как раз достаточно знаний. Если делать это ранее, то в голове, скорее всего, будет бардак и непонимание)

[useruseroff]

Высший класс ! Большое спасибо ! И еще Жека не надо оправдываться за длительность или скорость твоего мастер класса, кому надо тот смотрит а кому нужно всё быстро-быстро идёт на курсы "Full Stack Developer" за один месяц!)

[svenkov]

Отлично верстаешь, вроде 3 часа стрим, а смотреть не скучно (я смотрел запись)! Продолжай в том же духе и успехов тебе!

[Alagontor]

Собирался заняться практикой), вторая верстка на канале), думаю буду потихоньку списывать за Женей)), создал проект), начал смотреть) и понимаю, что это мы не проходили) и новый шаблон, много всяких добавлений ввели меня в ступор). Осталось смотреть за работой мастера) запоминать фишки и продолжать учебу).Очень приятно глянуть полностью работу верстальщика и тому к чему надо стремится в особенности к скорости работы) и к ювелирному наметанному глазу Фрилансера по жизни), спасибо большое за этот материал)

[itsedward]

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

[maksimpyshkov]

Тайм-коды к видео:
2:55 Подключение шрифтов.
9:33 Анализ и настройка адаптивности. Ширина контентной части.
10:40 Анализ и верстка шапки.
16:30 По поводу лишних оберток.
17:15 Стилизация шапки.
22:07 Стилизация шапки "header-bottom".
25:58 Подгонка шапки под PixelPerfect.
33:08 Адаптив шапки. Breakpoints.
1:03:55 Структура папок и файлов для картинок.
1:05:13 Верстка 1ого блога "private".
1:06:47 Верстка кнопки. Класс "btn".
1:09:35 Стилизация 1ого блока "private".
1:18:25 Адаптив 1ого блока "private".
1:26:30 Верстка 2ого блока "products".
1:30:50 Стилизация 2ого блока "products".
1:49:17 Адаптив 2ого блока "products".
1:52:22 Починка шапки.
1:54:50 Верстка 3ого блока "why".
1:58:21 Стилизация 3ого блока "why".
2:05:38 Адаптив 3ого блока "why".
2:08:55 Верстка 4ого блока "contacts".
2:16:11 Стилизация 4ого блока "contacts".
2:32:12 Адаптив 4ого блока "contacts".
2:34:38 Верстка подвала.
2:38:37 Ответы на вопросы.

[fedordostoevskiy]

Я только сейчас понял, что когда стрим смотрел - НИЧЕГО не понимал что происходит. А сейчас второй раз посмотрел и уже процентов 90 четко понял что, почему и зачем . А уроки по верстке я только на этом канале смотрю. ИТОГ - Жека очень хороший преподаватель ! Блин, не поверите у меня карты нет своей. Как заведу- сразу патроном стану .

[tsunami]

Из одного видео нашёл кучу моментов, в которых я тупил и ты решил их, спасибо)

[Neopolitanian]

Огромное спасибо, Евгений! Я вам реально благодарен за ваш труд! Есть место примерно перед уроком с SASS/SCSS которое по моему мнению дизориентирует! В том плане что не умея еще достаточного опыта и не понимая как там все работает начинаем верстать уже с препроцессором SASS/SCSS и все последующие ваши видео верстки тоже с препроцессором. Хотя в вашем же видео "ПЛАН РАЗВИТИЯ ФРОНТЭНД РАЗРАБОТЧИКА" вы советуете перед SCSSсом закрепить все на практике и лишь только ПОТооооМ начинать использовать этот инструмент. Я понимаю что как говорится "дареному коню в зубы не смотрят", но думаю что не я один проваливался в этом моменте! В связи с чем прошу вас Евгений, снять побольше видео с версткой простых макетов без использования препроцессора SASS/SCSS, используя только HTML и CSS!!! У вас есть видео "стрим 1 Верстка простого сайта" Вот побольше бы такого чтобы реально набраться опыта перед сложными макетами!

[oleg_andrianov]

Спасибо за мастер-класс, Жека! Голова взрывается и много непонятного, и это все таки хорошо)

[zwpqpfk]

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

[SanyaMangust]

очень хочу стать верстальщиком. а дальше уже посмотрим!) учусь на твоем контенте. очень здорово, спасибо большое!!!