Верстка сайта с нуля для начинающих | Адаптивная вёрстка сайтов
В этом видео мы сверстаем макет Organic Fruit от начала и до выгрузки в интернет
Это видео урок по верстке для начинающих. Так же это вёрстка для начинающих по макету из Фигмы(Figma) с подробным объяснением каждого шага.
Здесь мы сделаем сразу адаптивную верстку для начинающих. Подробно разберем каждый момент шаг за шагом.
Мы разберем такие темы как:
верстка с помощью Flex
позиционирование элементов (relative, absolute, fixed)
работа с псевдо классами
работа с псевдо элементами (:: before ::after)
адаптивная верстка
верстка с помощью медиа запросов (@media)
подключение скриптов
работа с разными JavaScript библиотеками
как работать с Slick Slider
выгрузка сайта в интернет
проверка на скорость загрузки страницы (Google Page Speed)
И еще многими разными нюансами которые возникаю во время верстки.
Будет Жарко ))
Будет Интересно!
В конце видео я покажу как выложить сайт в интернете, как проверить сайт с помощью сервиса Google Page Speed.
Сделаем все круто))
Если тебе нравятся мои видеоуроки - подпишись на мой канал
и поставь лайк этому видео по БРАТСКИ ))
P.S. - ребята в конце видео где я показываю как оптимизировать картинки - я показываю как повторно выложить html на GitHub , так же нужно перезалить папку с картинками images. Иначе у вас не будет нужного результата ))
Патреон автора: / ilay_stoaynov
Курс Продвинутая Верстка - https://frontend-courses.com/
telegram - https://t.me/olegfront
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
Полезные ссылки:
👉 Макет: https://www.figma.com/file/vbcp8xa88Q...
👉 GitHub - https://github.com/Ilya-Stoyanov/orga...
👉 Гугл Page Speed - https://pagespeed.web.dev/?hl=ru
👉 Я верю - ты сможешь, у тебя получиться 🏆
👋 Меня зовут Илья и я создаю магию для сайта )), занимаюсь разработкой сайтов более 9 лет. На этом канале, я регулярно и в максимально доступном формате буду делиться с тобой своим опытом, наработками, секретами и лайфхаками!
Watch video Верстка сайта с нуля для начинающих | Адаптивная вёрстка сайтов online without registration, duration hours minute second in high quality. This video was added by user Илья Стоянов - Верстка Сайта 03 February 2023, don't forget to share it with your friends and acquaintances, it has been viewed on our site 888 once and liked it 49 people.