GoodLyfe. Адаптивная верстка макета. Gulp + PUG + SCSS + JavaScript. Часть первая.

Друзья, я всех вас приветствую. Предлагаю вам вместе с автором сверстать классный макет - GoodLyfe.

При вёрстке макета будут использованы: PUG, SCSS, Gulp, Git, JavaScript, Slider, Gallery, SVG. Если вы пока не знакомы с данными инструментами, ничего страшного, верстать можно с использованием HTML + CSS. Автор проекта будет демонстрировать HTML, CSS код, который получается при компиляции.

Также в данном проекте будут реализованы с помощью - JavaScript:
1) Изменение цветовой схемы сайта.
2) Кнопка "Back to top".

Макет проекта, а также коды с уроков можно будет скачать по следующей ссылке: https://drive.google.com/drive/folders/1HVTesxt1XRnwv0vI7fw9yiK-lKmHPJym?usp=sharing

Проект разбит на 2 видео, в силу ограничений "Youtube".

Ссылка на вторую часть проекта "Goodlyfe":
https://youtu.be/b_lCTLQu8ys

💻 Будем рады видеть вас в наших сообществах:
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
👉 Вконтакте: https://vk.com/web__skills
👉 Telegram канал: https://t.me/web_skills
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

Тайм коды:
00:00:00 - Обзор макета. Верстка навигации.
04:34:32 - Добавляем и настраиваем слайдер.
06:52:48 - Верстка секции "Meet your new body".
08:54:04 - Верстка секции "Premium Facilities".

Если есть вопросы, пишите их в комментариях, с радостью на них ответим.

Тэги:

#верстка_макета_html_css #адаптивная_верстка_макета #обучение_верстке #html_css #html #css #html_+_css #верстка_сайтов #HTML_верстка #создание_сайта #javascript #jquery #svg #gallery #owl_carousel #slider #adaptive_site_layout #site_layout #website_layout_from_scratch #верстка_сайта_с_нуля #сверстай_свой_первый_сайт #create_your_first_website #верстаем_сайт_из_макета_в_figma #making_up_a_website_from_a_layout_in_figma #верстка_сайтов_уроки #учимся_верстать #pug #scss #git #github #js #GIT

Скачать видео