HTML верстка сайта салона красоты. Джедай верстки #7 (HTML CSS JavaScript)

Референсы для прохождения курса: goo.gl/RQ3sYS
Приветствую вас, друзья в комплексном курсе по адаптивной HTML верстке макета на реальном примере. Данный выпуск является сборником всех выпусков "Джедай верстки #7" в одном видеоролике длительностью более 12 часов с подробными объяснениями всех нюансов современной адаптивной HTML верстки. Мы рассмотрим важнейшие моменты использования лучших инструментов и плагинов в профессиональной работе, использование адаптивной Bootstrap сетки для адаптации сайта на мобильных устройствах, использование CSS Flex для быстрой реализации нестандартных приемов верстки, оптимизацию скорости загрузки сайта инструментом Google PageSpeed, а также подробно рассмотрим автоматизацию HTML верстки и правильный деплой проекта на рабочий хостинг с помощью Gulp.
Создание сайта от А до Я (комплексный курс): goo.gl/ankxq9
Создание интернет-магазина от А до Я: goo.gl/7mDqYD
Создание крутого слайдера (+посадка на CMS): bit.ly/jVLyQ8
Все курсы в одном комплекте: wd-m.ru/bundle
Таймкоды по урокам:
00:00 Урок 1 - Подготовка к вёрстке, дополнительные материалы
29:33 Урок 2 - Подготовка графики для вёрстки, подключение шрифтов, Sass переменные
1:08:19 Урок 3 - Начинаем верстать сайт. Лого, телефон, Hamburgers
1:56:17 Урок 4 - Создаём открывающееся анимированное меню с помощью плагина Mmenu
2:46:37 Урок 5 - Решаем проблемы с Mmenu. Продолжаем верстать
3:15:46 Урок 6 - Флексбокс композиция
3:46:40 Урок 7 - Заканчиваем HTML вёрстку шапки
4:18:09 Урок 8 - Адаптация шапки для мобильных устройств
4:37:39 Урок 9 - Адаптивная карусель, Sass цикл для чередования стилей
5:03:46 Урок 10 - Шахматная карусель. Флексы
6:13:19 Урок 11 - Fotorama - адаптивная галерея изображений
7:26:33 Урок 12 - AJAX форма обратной связи и красивый отчёт об отправке
9:19:31 Урок 13 - Вёрстка адаптивной карусели отзывов
10:14:33 Урок 14 - Секция «Наши партнёры». Центрирование изображений в карусели флексами
10:51:12 Урок 15 - Вёрстка футера, создание прелоадера и кнопки «Наверх»
12:15:44 Урок 16 - Часть 16 (Заключительная): Деплой, оптимизация для Google PageSpeed
ВКонтакте: jediweb
Телеграм: t.me/jediweb
Дзен: dzen.ru/jediweb

[@wdm]

💥 Все курсы в одном комплекте 👇👇👇 webdesign-master.ru/bundle_courses

[@DeepHopeProd]

13 часов сразу... Я в магазан за чаем и печеньками... МНОГО ЧАЯ И ПЕЧЕНЕК

[@user-oh8lf9lc7n]

Мужик, ты нереально крут!)) Действительно джедай! Спасибо тебе большое за всё, что ты выкладываешь!!

[@Levon1655]

12 часов! Большое спасибо за урок! :)

[@yura7929]

Божественно! Спасибо что угодили всем и выпустили еще целое!

[@wolterwaite6626]

Дай Бог тебе и твоим близким здоровья ! Спасибо тебе огромное за твой труд !

[@granteza]

Дружище, тебе огромное спасибо. Чисто сердечное! Я только первый выпуск прошел, но беру уже первые заказы. Не видел таких дотошных, в хорошем смысле слова, "фри обучалок" выполненных с таким качеством. Потрясающий контент на твоем канале. Благодарю за вдохновение.

[@nikitasvalov7155]

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

[@user-fe8mg2wk9g]

Очень много полезной информации + приятный голос и музыка. С нетерпением жду новых выпусков. СПАСИБО!

[@ArthurGermanovich]

12 часов счастья! Алексей ты лучший!

[@user-us3vs3cg7k]

Я вам безмерно благодарен за такую информацию, ибо в ваших уроках, я полезного извлек больше чем за 3 года универа(учусь еще)... Прям от души спасибо :D

[@hardy_guardy2106]

Урок 12 часов где все доходчиво разжевано. Надоели уже уроки по 3-5 минут. Автор молодчага. Буду смотреть и мотать на ус:)

[@user-ti8wj2ud4w]

Матерь божья, 12 часов) Серьезно потрудился, спасибо!

[@oOcitizenOo]

12 часов. Вот это да, засесть на пару деньков самое оно. спасибо за склейку всех видео.

[@rvolik]

Большая Благодарность за урок и Ваш труд!

[@restartserver3168]

Спасибо тебе огромное, ЧЕЛОВЕЧИЩЕ) Такую работу проделал! Как бы сказала моя бабуля: "Дай Бог тебе здоровичка")

[@user-zw9in3np2e]

Отличные уроки, огромное спасибо !)

[@user-kt4bq8ye6l]

Посылаю благодать автору, ты реально красавчик!

[@olegmaximov4524]

Ни времени, ни себя не жалеешь! Молодец! Только благодаря твоим урокам я научился владеть новыми приемами. Раньше даже боялся их использовать, и вообще не знал про них. Особенно я полюбил SASS :D. Буду с нетерпением ждать новых уроков!! Огромное мерси!!

[@Dmadin1]

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

[@user-bl4bu3kf6i]

Уважение тебе и большое спасибо за труд!!!

[@PitMit]

ну просто респектище за такой труд. 13 часов!!! Вау))

[@MrErererererr]

Огромное спасибо. самое подробное видио, нигде такого больше не видел.

[@technic_and_programming]

12 ч. блин... спасибо тебе бро за твои старании!!!

[@user-un7qo2xu3d]

Спасибо большое! Сходу лайк, даже не успев посмотреть =)

[@user-vx1fx1nz7z]

Супер...Ты ошибся ты не джедай верстки, ты мастер ёдо))Божественно

[@SashaBookWitch]

ёдо :DDDDD

[@Vlog-ty2zb]

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

[@seregaktyh]

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

[@user-rk7wd9ei8l]

Спасибо за очень классные уроки! Ты очень крут!!! Спасибо тебе огромное! ))))

[@chelovekchelovek-ov3410]

Спасибо за такой подробный урок, учусь я

[@user-mi3bl1cj2d]

Здорово что все таки инфа есть в бесплатном доступе,

[@user-vj7cm6yg2z]

Единственные уроки, которые я охотно купил...

[@user-gl5ro7cd3i]

Это вам не за 30 минут выучить HTML верстку))

[@veronicavancaster604]

Смотря Ваши уроки даже не верится, что человек делает это бесплатно в помощь людям, даря свой опыт и знания. Это самый информативный, полезный и добрый канал на ютубе который я знаю. Если Вы когда нибудь напишите книгу я обязательно ее куплю, даже если к тому моменту уже достигну профессионализма. Храни Вас вселенная!!!

[@kennycake9870]

Безусловно, молодец. Но профит ему явно есть. Заказчик видит , что этот профи может...

[@user-vb9xk2hm1j]

Очень качественный и подробный плейлист! Много нового подчерпнул. Алексей, а посадка на ModX планируется?

[@fatal3st]

почти 13 часов, атас, молодец! Красава

[@mikhailurban1222]

спасибо огромное вам за доступное объяснение!

[@vlad2263]

Если каждый кто желает изучать Front-End попадал на твой канал, а не бежал на разные "Курсики", экономил свои деньги и время, а знания получал намного актуальнее! Огромное тебе спасибо, за твой колоссальный труд! Рекомендую твой канал всем своим друзьям!

[@ermiuslark1034]

Да прибудет с тобой сила! Спасибо

[@user-ji2gz7gd8g]

Ну какой же ты крутой чувак!) Спасибо за уроки!!!!

[@TamikMachine]

Я даже не начал смотреть ,но с меня лайк за старания)

[@user-is4jh4rl6d]

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

[@sanibanani9191]

Ирина Бондаренко архив с исходниками что, нужно покупать? ты его купила у автора? Еще вопросик, с какой целью изучаешь верстку сайтов? чтоб быть фрилансером?

[@user-is4jh4rl6d]

исходники можно купить у автора (в описании под видео есть ссылка) я решила купить, так как работа этого автора стоит потраченных денег :) сначала изучала верстку и это было для меня больше как хобби. потом стала замечать, что все больше и больше меня в это затягивает) мне нравится это изучать, искать решения и приходить в восторг, когда все работает)))

[@KonkerE_]

@@user-is4jh4rl6d так же получаю удовольствие когда все работает

[@whynot3052]

12 часов это такой труд лайк

[@MrEgorlo]

Огромное спасибо!

[@s02l84u]

Чувак, ты лучший!

[@friendly334]

По-моему, все делаешь правильно Мало кто "разжевывает" так как ты, поэтому не всегда все понятно. Не вижу ничего плохого в подробном объяснении каждого действия, к тому же многие только учатся и для таких людей это будет более понятно. Продолжай в том же духе!

[@mikhailurban1222]

спасибо за подробное объяснение!

[@vladimirgoncharuk1586]

Я думал 12 минут, а там 12 часов. Просто каеф. : )

[@n0stamina]

Господи, цены тебе нет за такие подгоны. Да для тебя нужно памятники строить везде!

[@user-kf3jp7qx8v]

Ничёсе ты мастер Йода!!! Спасибо!!!!!!!!

[@Qnoize]

Очень круто и полезно!

[@artemyakovenko5208]

Л-лучший, спасибо)

[@hatamsoyunov]

Спасибо!

[@dizz9719]

Блин , парень , просто огромное спасибо тебя за этот ролик !С меня лайк .

[@user-ow3fd1op3j]

ну что тут скажеш.круто!лайк! подписка!

[@oleksiisydorenko9329]

Лучший!!!

[@alibear3875]

Вы крутые пацаны!

[@thekable7606]

Влеплю царский лайк.)))

[@xglot]

Amazing Boy!

[@vadimveksler7645]

Большое спасибо

[@lifelovelaugh9740]

Супер. Спасибо.

[@TheDarkModer]

Спасибо большое!

[@HomeBog]

Офигенные уроки. Купил и не пожалел. Все четко, все по делу! Молодец! Продолжай так же.

[@TheManblax]

Для центрирования элемента вместо отрицательного маргина, можно использовать: Transform: translateX(-50%), translateY(-50%) Или transform: translate(-50%, -50%)

[@Fraiwar]

Эт так с утреца и до ночи=)

[@user-vg3em9fs5u]

Лучшее, что есть по фронтенду на русском языке. Надеюсь, новые джедаи будут?)

[@andddreu7259]

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

[@olg3089]

Объясняешь понятно

[@user-nb5db2kt2h]

спасибо за такую работу !!! такой проект можно посадить на wordpress ?

[@spiralisna]

Ты крут, чувак

[@igor9830]

"Здесь вот девушка валяется" как я орнул) лайкусик и подписочка

[@anizaupet17]

Да-да! Это было эпично! )))

[@Megosks]

По поводу скорости объяснения не понимаю претензий. Поставьте себе х2 скорость воспроизведения видео и все. Тем кому нужно медленно, будут смотреть на обычной скорости. Это же логично)

[@user-qh7hu3el5y]

подписался, без раздумий... ты "локомотив"!

[@serhiyfedorenko8266]

Подскажи, пожалуйста. Допустим мне нужно сделать видео-бекграунд. Куда файл с видео расположить? В папку img? Будет ли это видео как-то минимизироваться так же как и картинки? Благодарю за ответ.

[@silencesir]

Доброго времени суток! Возможно, автор канала или кто-нибудь из комментаторов сможет помочь решить проблему. Как выровнить по вертикали (центрировать) иконку font-awesome относительно текста в одной строке при изменеии размера иконки (уменьшении)??? Например, звездочки вокруг слова "в Москве". Стоит их сделать размером меньше 9 пикселей, и они располагаются гораздно ниже центральной оси строки, что смотрится уродливо. Или наоборот, увеличиваем размер иконок, и уже слово "в Москве" располагается криво. Вроде бы, это можно исправить атрибутом "padding-bottom" в относительных единицах (em), но стоит его применить к иконке сдвигается вся строка (блок), а сама иконка не меняет своего положения. Очень прошу, помогите! Ведь подобная проблема возникает не раз и не два. Ответ очень пригодится в дальнейшей работе. Спасибо!

[@voytya94]

понятно ли? та все идеально!! )

[@valeryhaag5540]

лайк+подписка! а теперь послушаем)

[@tako0898]

Скажите это видео подходить для тех кто недавно выучил основы html css?

[@D4rkyfirefly]

Super!

[@_br0wl__stars_143]

Спасибо

[@muslimguseinov6852]

Guy, you are amazing.

[@MT-qm1ll]

you are amazing*

[@user-gc6pv9vw7q]

ребят подскажите пожалуйста как разобраться какую версту на какие CMS можно посадить ?

[@UDAV_]

А что за тема используется для саблайма? очень красивая.

[@wdm]

One Dark Material Theme - kzbin.info/www/bejne/p53YlqJsrKucoa8

[@user-lv1je5jr3w]

Привет. За видео и канал в целом огромное спасибо!!!! Подскажите пожалуйста на каких ресурсах Вы покупаете изображения, фотки, иконки, больше фотки интересуют. Есть ли ресурсы которые продают поштучно изображения, а не по подписке?? Очень интересует!!!

[@wdm]

Здравствуйте изображения частично бесплатные, частично с депозитфота. На последнем подписка.

[@user-lv1je5jr3w]

Понял, спасибо!

[@63..51]

Здравствуйте!Обучение вёрстке?Спс!

[@user-nu4hg6dz1r]

Я хотел спросить в adobe xd открываются те шрифты которые находятся в макете. Или приложение заменяет их на те которые есть в нем ? Шрифты нестандартные

[@wdm]

Шрифты должны быть установлены в системе.

[@serhiyson4531]

А почему меню открывается сразу после открытия страницы? Как это изменить? Спасибо

[@hechnqn3460]

ДО СИХ ПОР НЕ МОГУ ПОНЯТЬ КАК ВЫ ДОСТГЛИ ТОГОГО СОВЕРШЕНСТВА В ВЭБЕ

[@glebjiglov183]

что происходит с файлом mail.php после команды gulp build?

[@jproger-it6831]

святой человек, святой

[@vanekjalba5882]

Ошибку выбивает при подключении шрифтов - gulp-notify: [Error running Gulp] app\sass\main.sass Error: File to import not found or unreadable: fonts. Parent style sheet:*********/_html/app/sass/main.sass on line 1 of app/sass/main.sass >> @import "fonts"; ^ В чем косяк?

[@seregaktyh]

Vanek Jalba ищи ошибку в fonts.sass

[@user-qs1nb5cz5x]

Скажите пожалуйста, как можно открыть PSD в Adobe XD?

[@yuriyshoshin5279]

Подскажите пожалуйста. Когда сделал карусель, заметил, что при пролистывании всех слайдов, слайды повторяющиеся идут перевернутые. Когда уходит за край третий слайд, первый становится обратно как нужно. Не знаю как по другому объяснить:)

[@wdm]

Это мелочь. Можете раздать цвета другим способом.

[@voytya94]

кстати, а Вы уже в этой верстке не использовали em?? что, не стоит оно той мороки?

[@wdm]

Не обязательно ))

[@voytya94]

WebDesign Master еще планируте такие джедай верстки выпускать?? Мы все понимаем, что работы у вас много, но все же очень ждём)

[@wdm]

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

[@wdm]

Здравствуйте. Новый Джедай верстки уже на канале: kzbin.info/www/bejne/aYHdq41rmq17n8k

[@kennymorkovka2012]

Кто может подсказать? У меня такая проблема: шапка так же с bg-image на весь экран, но при использовании height: 100vh; background-size: cover; background-position: center; она не занимает весь экран. Встает на место только после width: 100%; Но в такой ситуации она лишается адаптивности и растягивается по ширине или высоте в зависимости от формы окна браузера. В видео не нашел ответа (может так смотрел). P.S Возможно вопрос тупой или элементарный, я просто еще учусь этому делу. P.P.S Использую сетку бутстрап

[@user-mp5cc5ib3y]

скорее всего фото слишком маленького разрешения используете

[@user-vf7qw9hu8t]

а сколько было учащихся в этом проекте

[@MajedSalih]

Так, я не понял.. Почему и у вас, и у меня, диск Д называется ДАТА ????? Что это за совпадение ? В чем прикол-то ?))

[@OnlineGamePlaying]

на 9 часе искал как убрать box-shadow, но этот эффект был добавлен при помощи border-bottom

[@mykolaanikeyev4783]

Стоит ли начинающему веб-разработчику пройти всех "джедаев" или лучше начать с седьмой части?

[@wdm]

Mykola Anikeyev лучше с последней, технологии меняются, выпуски обновляются как айфоны.

[@mykolaanikeyev4783]

Спасибо за совет!

[@hurynovich]

А что это за тема? Как называется?