Верстка сайта на гридах с нуля. Organic Juicy Co. Часть 4. Вёрстка main (html, css, js, бэм, grid)
Organic juicy - это серия видеороликов, в которой мы верстаем и адаптируем с помощью гридов макет с очень интересной сеткой и визуальной составляющей (лёгкий, летний и яркий макет с фруктами). Мы реализуем эффектную анимацию в шапке. Применим знания БЭМ и запрограммируем на чистом js два разных слайдера. И всё это с подробными объяснениями каждого действия. Вёрстка сайта позволит нам попрактиковать знания html, css, javascript, grid, бэм, адаптив, работа в редакторе кода Visual Studio Code.
В данном видео я отвечу на следующие вопросы:
► Что такое article? Для чего нужен тег article на сайте?
► Как добавить переносы слов на сайте? Свойство hyphens. Символ
► Как выделить первую строчку в тексте и задать другие стили? Псевдоэлемент ::first-line
► Как использовать тег span?
► Как работать с бэм? Как правильно называть классы, чтобы их переиспользовать? Что такое модификаторы?
► Как выстроить элементы в колонку, в ряд, в перевернутую колонку и перевернутый ряд с помощью флексбокса? Направление осей в flex обертке. Свойство flex-direction в flexbox.
► В чем отличие img от background-image? Как понять контентная ли картинка?
🍏 Ссылка на полный плейлист верстки данного макета Organic Juicy Co:
🔵 Ссылка на плейлист верстки макета Velocity с очень подробными объяснениями:
👨💻 Мой список плагинов и расширений для редактора кода VS Code:
📚 Материалы для верстки сайта и макет сайта здесь:
🎁 Готовый код с уроков, а также макет из фигмы с визуальной разметкой можно получить, написав в личные сообщения группы ВК слово “код“.
Ищи школу WEB PRO в соц. сетях:
🚀 Группа ВК:
🔥 Телеграм канал:
💬 Телеграм чат для общения: Pn0AlTS0yVlhOGYy
Ссылка на дизайнера макета:
Таймкоды:
00:00 Что нас ждёт в этом видео?
01:05 Разметка секции Freshy
07:10 Стилизация секции Freshy
21:05 Разметка секций Healthy, Thirsty
25:05 Стилизация секций Healthy, Thirsty
33:50 Разметка секции Orange
38:10 Стилизация секции Orange
44:50 Последние штрихи в main и header. Выравниваем сетки.
52:50 Что будет в следующей части видео?
Начни путь веб-разработчика уже сегодня!
С вами был Никита Щегольков, школа веб-разработки Веб Про.
Данные видеоуроки были бы интересно всем, кто ищет: верстка сайта с нуля, адаптивная верстка сайта, верстка сайта для начинающих.
#organic #webpro #вебпро #figma #верстка #версткасайта #гриды #версткасайтанагридах #созданиесайта #каксоздатьсайт #адаптив #бэм #css #html #никитащегольков
1 view
20
5
3 weeks ago 06:41:57 1
Курс по верстке и созданию сайтов с нуля. Все основы HTML / CSS на практике.
3 weeks ago 00:37:31 1
Урок верстки журнала в Индизайн. Работа с текстом.
3 weeks ago 00:19:37 1
⚡️ Эта CSS новинка уничтожила SCSS
3 weeks ago 00:03:34 1
«ВЕРА ВЕЧНА» – МУЖСКОЙ ХОР «РУССКИЙ ФОРМАТ» & АРХИДИАКОН КОНСТАНТИН БАРГАН & АРТЕМ ВАСИЛЕВИЧ
3 weeks ago 00:12:30 1
Украл? Выпил? В Думу! Как спиваются российские чиновники | Разборы
3 weeks ago 00:36:01 4
Интеграционные тесты с базой данных | Java QA Automation
3 weeks ago 00:10:06 1
В чем разница между Float, Flexbox и Grid CSS?
3 weeks ago 02:34:22 1
Figma основы. Бесплатный курс по figma.
3 weeks ago 01:10:44 1
Обучение FlutterFlow, с нуля до про. Часть 2 из 2. API, работа с базой даных, local state, backend
3 weeks ago 00:59:04 1
Обучение FlutterFlow, с нуля до про. Часть 1 из 2
3 weeks ago 00:10:12 1
Уроки MySQL | Введение. Как подключить базу данных
3 weeks ago 00:50:51 1
Создание сайта с красивой анимацией при скролле (HTML CSS JavaScript)
3 weeks ago 00:07:13 1
Что такое ВЕРСТКА сайта? Как работает сайт? Что такое HTML CSS JS // Фрилансер по жизни
3 weeks ago 00:28:11 1
VS Code — настройка, установка, плагины ✅ Подробный гайд за 30 минут про VS Code
3 weeks ago 03:55:02 1
Верстка сайта с нуля, для новичков. Интенсив по верстке, день 1
3 weeks ago 00:33:05 1
Типографика. Как оформить абзац текста. Пошаговый урок.
3 weeks ago 00:50:16 1
Как построить сетку. Графический дизайн, ч1
3 weeks ago 00:03:17 1
❗️❗️ Новая мобилизация после выборов: Путин все решил
4 weeks ago 00:25:04 1
Создаем калькулятор 👨💻 JavaScript. Без eval, по шагам для начинающих
4 weeks ago 01:05:42 3
Верстка сайта HTML/CSS с использованием переменных и clamp()
4 weeks ago 01:05:51 1
Адаптивная верстка одностраничного сайта на чистом HTML & CSS || Travel Agency Website HTML&CSS
4 weeks ago 00:27:10 1
Восполнение потерь и слухи о мобилизации | Потери России в войне: сводка 29 марта 2024