Верстка сайта на гридах с нуля. Organic Juicy Co. Часть 5. Вёрстка footer (html, css, js, бэм, grid)

Organic juicy - это серия видеороликов, в которой мы верстаем и адаптируем с помощью гридов макет с очень интересной сеткой и визуальной составляющей (лёгкий, летний и яркий макет с фруктами). Мы реализуем эффектную анимацию в шапке. Применим знания БЭМ и запрограммируем на чистом js два разных слайдера. И всё это с подробными объяснениями каждого действия. Вёрстка сайта позволит нам попрактиковать знания html, css, javascript, grid, бэм, адаптив, работа в редакторе кода Visual Studio Code. В данном видео я отвечу на следующие вопросы: ► Что такое подвал на сайте? Что такое footer? ► Как перевести картинку из растровой графики в векторную? Программа Vector Magic для преобразования растра в вектор. В чем отличие растрового изображения от векторного? Как перевести jpg в svg? Как перевести png в ai? Как удалить фон у картинки? ► Как увеличить расстояние между буквами в css? ► Как создать форму на сайте? Как создать текстовое поле на сайте? ► Как сделать кружок, скруглённую рамку вокруг иконки? Как скруглить кнопку на сайте? ► Как поменять цвет у картинки при наведении на сайте? ► Можно ли задавать размеры (ширину и высоту) строчному элементу? ► В чём отличие value от placeholder в input? Как создать подсказку для пользователя в текстовом поле на сайте? 🚀 НАЧНИ ОБУЧЕНИЕ В ШКОЛЕ WEB PRO. Получить первый урок, тест и домашнее задание можно совершенно бесплатно по ссылке ниже: ✅ Логотип сайта в svg формате в комментариях под постом в ТГ: 🍏 Ссылка на полный плейлист верстки данного макета Organic Juicy Co: 🔵 Ссылка на плейлист верстки макета Velocity с очень подробными объяснениями: 👨‍💻 Мой список плагинов и расширений для редактора кода VS Code: ❗️САМЫЕ ПОЛЕЗНЫЕ КАНАЛЫ ДЛЯ ВЕРСТАЛЬЩИКОВ: 💜 Сайт школы WEB PRO 📚 Материалы для верстки сайта и макет сайта можно получить в телеграме, написав боту слово “код“ без кавычек: 🎁 Готовый код с уроков можно получить в телеграме, написав боту слово “готкод“ без кавычек: Ищи школу WEB PRO в соц. сетях: 🚀 Группа ВК: 🔥 Телеграм канал: 💬 Телеграм чат для общения веб-разработчиков: 🔔 Бонусные материалы и уведомления от школы: Ссылка на дизайнера макета: Таймкоды: 00:00 Что нас ждёт в этом видео? 01:00 Определяем что на сайте является футером. 04:20 Преобразуем логотип сайта в svg формат. 10:20 Разметка footer и article. 24:25 Создаём сетку для обёртки нижней части сайта. 29:30 Создаём сетку для footer. 41:15 Стилизуем элементы в footer. 59:25 Стилизуем article. Скругляем кнопку. 01:03:03 Что будет в следующей части видео? Начни путь веб-разработчика уже сегодня! С вами был Никита Щегольков, школа веб-разработки Веб Про. Данные видеоуроки были бы интересно всем, кто ищет: верстка сайта с нуля, адаптивная верстка сайта, верстка сайта для начинающих. #organic #webpro #вебпро #figma #верстка #версткасайта #гриды #версткасайтанагридах #созданиесайта #каксоздатьсайт #адаптив #бэм #css #html #никитащегольков