Верстка сайта с нуля для начинающих | Адаптивная вёрстка сайтов

В этом видео мы сверстаем макет Organic Fruit от начала и до выгрузки в интернет
Это видео урок по верстке для начинающих. Так же это вёрстка для начинающих по макету из Фигмы(Figma) с подробным объяснением каждого шага.
Здесь мы сделаем сразу адаптивную верстку для начинающих. Подробно разберем каждый момент шаг за шагом.
Мы разберем такие темы как:
- верстка с помощью Flex
- позиционирование элементов (relative, absolute, fixed)
- работа с псевдо классами
- работа с псевдо элементами (:: before ::after)
- адаптивная верстка
- подключение скриптов
- работа с разными JavaScript библиотеками
- как работать с Slick Slider
- выгрузка сайта в интернет
- проверка на скорость загрузки страницы (Google Page Speed)
И еще многими разными нюансами которые возникаю во время верстки.
Будет Жарко ))
Будет Интересно!
В конце видео я покажу как выложить сайт в интернете, как проверить сайт с помощью сервиса Google Page Speed.
Сделаем все круто))
Если тебе нравятся мои видеоуроки - подпишись на мой канал
и поставь лайк этому видео по БРАТСКИ ))

P.S. - ребята в конце видео где я показываю как оптимизировать картинки - я показываю как повторно выложить html на GitHub , так же нужно перезалить папку с картинками images. Иначе у вас не будет нужного результата ))

Time Stamps 👇
00:00 Intro
00:03 section Header
01:00:45 section Hero
01:46:00 section Service
02:29:25 section Vegetable
02:53:49 section Customers
03:36:19 section App
03:58:25 section Footer
04:07:39 Adaptive Heade and Hero
04:44:59 Adaptive Service and Vegetable
05:08:45 Adaptive Customers App and Footer
05:34:25 Add GitHub
05:37:45 Google Page Speed

Горячие клавишу (hot keys vs code)
➤ Ctrl + F ищем в файле,
➤ Ctrl + N создает новый файл,
➤ Ctrl + O добавляем проект в редактор,
➤ Ctrl + G ищем нужную строку в файле,
➤ Ctrl + C копируем
➤ Ctrl + X вырезаем(удаляем)
➤ Ctrl + V вставляем
➤ Ctrl + Z отменить действие
➤ Ctrl + Y вернуть отменное действие
➤ Ctrl + Пробел вызвать подсказку Emmet

Полезные ссылки:

👉 Я верю - ты сможешь, у тебя получиться ​​🏆​

👋 Меня зовут Илья и я создаю магию для сайта )), занимаюсь разработкой сайтов более 9 лет. На этом канале, я регулярно и в максимально доступном формате буду делиться с тобой своим опытом, наработками, секретами и лайфхаками!

[yuriyv]

Добрый день. Из Фигмы не смог достать фрукты с прозрачным фоном ( поверх которых Order Now и стрелка).
подскажите, как Вы это сделали?
комментарий в поддержку канала ;)

[yuriyzadorozhnyi]

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

[nikolay]

Подскажите пожалуйста, при выпадающем меню бургера мы ставим класс hidden запрещаюший скрол. Если выпадающее меню не закрыть и перейти на размеры <850px выпадающее меню пропадает, а запрет на скрол остается.Как это исправить. Я пока только две секции сделал, возможно Вы обьясняете это дальше, подскажите где или напишите как решить эту проблему. Заранее спасибо, еще раз подчеркну видео SUPER!!!

[yuriyv]

когда позиционировали иконку "delivery men", то выскочил целый список вебкитов, моз, мс.... и т.д. что это такое и откуда выскочило- не сказали