CodeQuest
CodeQuest
  • 34
  • 348 367
#2 Верстка сайта из Figma для начинающих | Марафон по верстке с GULP, SASS, БЭМ и Pixel Perfect
Все видео и материалы марафона (закрытые трансляции + все исходники):
boosty.to/codequest/posts/77cc4a11-119d-4a64-8a4e-fccf89ba4e71?share=post_link
Подписывайся на альтернативные каналы:
- codequest
- t.me/codequest
🔥 Бонусом ты получишь готовую сборку Gulp и более 20 макетов Figma, которые пополняются каждую неделю.
Продолжаем наш марафон по верстке сайта с использованием всех современных подходов: Gulp, Sass, БЭМ и Pixel Perfect. В этом видео мы сверстаем три следующих блока нашего макета на Figma. И все это без воды и лишних разговоров, только практика, только хардкор!
0:00 - План урока
0:54 - Разметка формы поиска
3:59 - Оформление блока формы
13:11 - Разметка секции услуг
16:45 - Стили для блока услуг
23:27 - Секция о компании
25:32 - Стилизация блока о компании
28:47 - Послесловие о марафоне
До скорых встреч!
มุมมอง: 3 683

วีดีโอ

#1 Верстка сайта из Figma для начинающих | Марафон по верстке с GULP, SASS, БЭМ и Pixel Perfect
มุมมอง 6K3 ปีที่แล้ว
Все видео и материалы марафона (закрытые трансляции все исходники): boosty.to/codequest/posts/77cc4a11-119d-4a64-8a4e-fccf89ba4e71?share=post_link Подписывайся на альтернативные каналы: - codequest - t.me/codequest 🔥 Бонусом ты получишь готовую сборку Gulp и более 20 макетов Figma, которые пополняются каждую неделю. Профессиональная верстка сайта со всеми современными подходами только у ...
Git и GitHub для начинающих | Работа с GitHub Pages с нуля
มุมมอง 8K3 ปีที่แล้ว
Шпаргалка по Git: boosty.to/codequest/posts/50ffa57b-d135-445a-844c-b4ed523b3164?share=post_link Подписывайся на альтернативные каналы: - codequest - t.me/codequest Урок по основам Git и Github для начинающих. Покажу вам базовое использование Git для нашего проекта на Gulp. Вы узнаете, как установить Git на Windows и поставить GitBash в консоль редактора VsCode. Посмотрим на основные ком...
#0 Базовая сборка Gulp для участников марафона
มุมมอง 3.2K3 ปีที่แล้ว
Исходники к видео: boosty.to/codequest/posts/954f704b-4cbe-4208-96b3-9e46654a93e4?share=post_link Подписывайся на альтернативные каналы: - codequest - t.me/codequest Присоединяйся и ты!
Slick Slider и jQuery в 2022 | Установка через NPM и подключение к Gulp
มุมมอง 8K3 ปีที่แล้ว
Исходники к видео: boosty.to/codequest/posts/80e44095-6819-4e13-a15b-6f8679b67f21?share=post_link Подписывайся на альтернативные каналы: - codequest - t.me/codequest Slick Slider - один из самых популярных слайдеров, написанных на jQuery. В этом видео я покажу вам, как можно подключить и использовать эту библиотеку в своей сборке Gulp. 0:00 - Вступление 0:14 - Библиотека Slick Slider 0:4...
Как добавить FAVICON для сайта в 2021 году | Иконка Apple Android Safari вручную и через Gulp
มุมมอง 4.3K3 ปีที่แล้ว
Современная сборка Gulp Starter: boosty.to/codequest/posts/0dc02831-c225-4320-9b1b-869d9ad59281?share=post_link Подписывайся на альтернативные каналы: - codequest - t.me/codequest В этом видео я покажу вам как правильно добавлять favicon на сайт в 2021 году с учетом всех устройств: - Старых и современных браузеров - Apple iOS - Android - и т.д. Рассмотрим какие размеры и форматы иконок н...
Gulp сборка 2023 с нуля | Установка настройка и запуск - полный курс по Gulp для верстки сайтов
มุมมอง 62K3 ปีที่แล้ว
Готовая сборка Gulp Starter 2023: boosty.to/codequest/posts/0dc02831-c225-4320-9b1b-869d9ad59281?share=post_link Подписывайся на альтернативные каналы: - codequest - t.me/codequest В этом курсе мы рассмотрим что такое Gulp и для чего он нужен, как правильно выполнить его установку и запустить на windows, какие плагины использовать для работы с HTML, CSS, JavaScript, изображениями и шрифт...
Полный гайд по NPM для новичков | Как установить, обновить удалить пакеты - настройка NPM для работы
มุมมอง 42K3 ปีที่แล้ว
Шпаргалка по командам NPM: boosty.to/codequest/posts/e434518f-a073-46aa-80d0-b4b8ae9a113a?share=post_link Подписывайся на альтернативные каналы: - codequest - t.me/codequest Это полный гайд для начинающих о том, как использовать NPM в своей работе. Из него вы узнаете, что такое NPN и зачем он нужен верстальщику. После чего я покажу, как установить его на windows, чтобы не было ошибок. Вы...
Анимация карточки товара при наведении мыши | Практика HTML и CSS анимации для начинающих
มุมมอง 10K3 ปีที่แล้ว
Исходники к видео: boosty.to/codequest/posts/aa88ab41-2cfe-4683-b686-d9060f628c8f?share=post_link Подписывайся на альтернативные каналы: - codequest - t.me/codequest Cегодня я покажу вам, как сделать крутую анимированную карточку товара на чистом HTML и CSS. 0:00 - Вступление 0:25 - Подготовка проекта 0:59 - HTML разметка карточки товара 2:42 - Оформление карточки 3:25 - Центрирование эл...
Адаптивная форма с анимацией на HTML, CSS и JavaScript | Практика верстки для начинающих
มุมมอง 26K3 ปีที่แล้ว
Исходники к видео: boosty.to/codequest/posts/00bb930b-f0c7-4847-acf2-184bcf5567b6?share=post_link Подписывайся на альтернативные каналы: - codequest - t.me/codequest В этом видео я хотел бы показать вам создание крутой формы регистрации и авторизации на сайте. Напишем ее полностью с нуля, добавим анимацию перехода и адаптируем под мобильные устройства. 0:00 - Демонстрация формы 0:40 - Ба...
Практика JavaScript и CSS анимации | Крутой эффект при наведении курсора на текст
มุมมอง 6K3 ปีที่แล้ว
Исходники к видео: boosty.to/codequest/posts/48347b07-c22b-468c-a696-050cd49843a0?share=post_link Подписывайся на альтернативные каналы: - codequest - t.me/codequest В этом уроке я покажу вам принцип создания крутых эффектов при наведении мыши на текст. Думаю, что это будет для вас хорошей практикой в работе с JavaScript, CSS-переходами и CSS-анимацией. 0:00 - Демонстрация эффекта 0:30 -...
Калькулятор на чистом JavaScript и Grid CSS с нуля | Верстка, скрипт и его безопасность
มุมมอง 19K3 ปีที่แล้ว
Исходники к видео: boosty.to/codequest/posts/8ce86733-89e1-4196-ab2a-76c7d2bb4162?share=post_link Подписывайся на альтернативные каналы: - codequest - t.me/codequest В этом практическом уроке я хочу показать вам реализацию калькулятора на чистом JavaScript. Также в ходе работы мы будем использовать Grid CSS и немного поговорим о безопасности нашего скрипта. 0:00 - Вступление 0:29 - Настр...
#3 Пишем свой Bootstrap с нуля | Адаптивная сетка на Sass
มุมมอง 2.3K3 ปีที่แล้ว
Исходники к видео: boosty.to/codequest/posts/6a4fac65-3f86-4933-90fe-300143cfbbae?share=post_link Подписывайся на альтернативные каналы: - codequest - t.me/codequest Адаптивность сетки Bootstrap реализована через специальные классы, которые позволяют установить элементу нужное количество колонок в каждой контрольной точке. В этом уроке мы подробнее поговорим про адаптивность, а также нап...
#2 Пишем свой Bootstrap с нуля | Классы колонок на Sass
มุมมอง 2.2K3 ปีที่แล้ว
Исходники к видео: boosty.to/codequest/posts/4b82c57b-c3d1-4ade-a92c-489aa8825b0d?share=post_link Подписывайся на альтернативные каналы: - codequest - t.me/codequest В прошлом уроке мы начали писать свою реализацию Bootstrap. И на данный момент у нас уже есть основа для сетки: - класс контейнера - ряда - и гибкой колонки Этого уже достаточно, чтобы создавать макеты с симметричными элемен...
#1 Пишем Bootstrap с нуля | Основа сетки на Sass и Flexbox
มุมมอง 4K3 ปีที่แล้ว
#1 Пишем Bootstrap с нуля | Основа сетки на Sass и Flexbox
Как стать программистом с нуля | Мой полный путь в IT
มุมมอง 7863 ปีที่แล้ว
Как стать программистом с нуля | Мой полный путь в IT
#4 Bootstrap миксины на SCSS | Построение адаптивной сетки без классов
มุมมอง 6K3 ปีที่แล้ว
#4 Bootstrap миксины на SCSS | Построение адаптивной сетки без классов
#3 Настройка сетки Bootstrap 5 под себя | Как поменять количество колонок сетки и другие переменные
มุมมอง 11K3 ปีที่แล้ว
#3 Настройка сетки Bootstrap 5 под себя | Как поменять количество колонок сетки и другие переменные
#2 Адаптивная верстка сайта на Bootstrap 5 для начинающих | Основа сетки Bootstrap
มุมมอง 30K3 ปีที่แล้ว
#2 Адаптивная верстка сайта на Bootstrap 5 для начинающих | Основа сетки Bootstrap
#1 Сетка Bootstrap 5 для начинающих | Быстрая верстка сайта при помощи колоночной сетки
มุมมอง 46K4 ปีที่แล้ว
#1 Сетка Bootstrap 5 для начинающих | Быстрая верстка сайта при помощи колоночной сетки
Какой язык программирования учить в 2021 году?
มุมมอง 2.1K4 ปีที่แล้ว
Какой язык программирования учить в 2021 году?
HTML теги I и EM | Разница, сравнение, практические примеры
มุมมอง 2.6K4 ปีที่แล้ว
HTML теги I и EM | Разница, сравнение, практические примеры
HTML теги B и STRONG | Разница, сравнение, практические примеры
มุมมอง 3.1K4 ปีที่แล้ว
HTML теги B и STRONG | Разница, сравнение, практические примеры
Практика Flexbox CSS для начинающих | Игральные кости на HTML и CSS
มุมมอง 2.9K4 ปีที่แล้ว
Практика Flexbox CSS для начинающих | Игральные кости на HTML и CSS
Прохождение Flexbox Froggy, все 24 уровня с пояснениями | Практика Flexbox CSS
มุมมอง 19K4 ปีที่แล้ว
Прохождение Flexbox Froggy, все 24 уровня с пояснениями | Практика Flexbox CSS
Прохождение Flexbox Defense с объяснением | Практика Flexbox CSS в формате игры
มุมมอง 3.2K4 ปีที่แล้ว
Прохождение Flexbox Defense с объяснением | Практика Flexbox CSS в формате игры
#6 Верстка сайта с нуля для начинающих | Завершаем последние блоки нашего макета
มุมมอง 9654 ปีที่แล้ว
#6 Верстка сайта с нуля для начинающих | Завершаем последние блоки нашего макета
#5 Верстка сайта с нуля для начинающих | Верстаем 4 и 5 блоки сайта на HTML и CSS
มุมมอง 1.2K4 ปีที่แล้ว
#5 Верстка сайта с нуля для начинающих | Верстаем 4 и 5 блоки сайта на HTML и CSS
#4 Верстка сайта с нуля для начинающих | Практика Flexbox CSS
มุมมอง 1.9K4 ปีที่แล้ว
#4 Верстка сайта с нуля для начинающих | Практика Flexbox CSS
#3 Верстка сайта с нуля для начинающих | Верстаем первый блок на HTML и CSS
มุมมอง 4.4K4 ปีที่แล้ว
#3 Верстка сайта с нуля для начинающих | Верстаем первый блок на HTML и CSS

ความคิดเห็น

  • @alexazarubin8456
    @alexazarubin8456 หลายเดือนก่อน

    Спасибо, очень круто

  • @tonygun5664
    @tonygun5664 2 หลายเดือนก่อน

    npm в терминале не выводит...всплывает окно - спрашивает с помощью какого приложения открыть. Что это? 100 раз удалял и переустанавливал и vsc и node js и ноут перезагружал...не помогает

  • @alonewolf2610
    @alonewolf2610 2 หลายเดือนก่อน

    Здравствуйте Сергей. У сборки для марафона внутри папки sass есть две папки _mixins и _config. Вот эти папки создается для каждого проекта отдельно? Если можно про это тоже подробно скажите. Заранее спасибо.

  • @alonewolf2610
    @alonewolf2610 3 หลายเดือนก่อน

    Урок просто супер. Как можно найти автора этого курса ?

    • @CodeQuestRu
      @CodeQuestRu 3 หลายเดือนก่อน

      @@alonewolf2610 добрый вечер, а зачем меня искать? Я здесь =)

  • @АлександрСилков-ф2ж
    @АлександрСилков-ф2ж 4 หลายเดือนก่อน

    зачет..,)) толковая подача.

  • @vpodsak
    @vpodsak 4 หลายเดือนก่อน

    Текущая gulp-size не поддерживает require, для данного урока, устанавливайте конкретную: npm i -D gulp-size@4.0.1

  • @tiestovadim95
    @tiestovadim95 4 หลายเดือนก่อน

    Хорошее, грамотное видео. Спасибо!

  • @РоккиРоки
    @РоккиРоки 5 หลายเดือนก่อน

    Очень познавательный урок, спасибо большое делайте больше таких уроков

  • @1world937
    @1world937 5 หลายเดือนก่อน

    Смотрел у других блогеров различные видео про верстку, но ты единственный человек который объясняет так, что я понимаю каждое твое слово ! Спасибо тебе большое !!!!!!!

    • @CodeQuestRu
      @CodeQuestRu 5 หลายเดือนก่อน

      Спасибо, старался =)

  • @igorpom2
    @igorpom2 6 หลายเดือนก่อน

    Большое спасибо за видос!)

  • @Wowa12345
    @Wowa12345 6 หลายเดือนก่อน

    9:25

  • @laretabatl5934
    @laretabatl5934 6 หลายเดือนก่อน

    Как приятно слушать, когда грамотная речь

  • @sergeysergeev8705
    @sergeysergeev8705 6 หลายเดือนก่อน

    Просто и очень чисто.

  • @ВикаЧерношей
    @ВикаЧерношей 6 หลายเดือนก่อน

    Снимаю шляпу. Маэстро браво

  • @Aleksey-s5t
    @Aleksey-s5t 7 หลายเดือนก่อน

    Даёшь адаптив!!!😁

  • @Aleksey-s5t
    @Aleksey-s5t 7 หลายเดือนก่อน

    Спасибо. Подписался.

  • @НиколайБабиков-ы5ъ
    @НиколайБабиков-ы5ъ 7 หลายเดือนก่อน

    зачем приплетать в урок другие технологии ? сделай ты по простому, с самого начала исполнил что то не понятное, смысл дальше смотреть(повторять) отпал....

    • @CodeQuestRu
      @CodeQuestRu 7 หลายเดือนก่อน

      Бывает

  • @ЕнотОбормот-ж9о
    @ЕнотОбормот-ж9о 7 หลายเดือนก่อน

    Огромное спасибо за урок, пришлось переделывать лет 6 назад собраный сборщик. Частично неактуален, тот же size и csso уже не работает через require

  • @blackhome418
    @blackhome418 7 หลายเดือนก่อน

    Единственное видео где я понял про сетки.автор канала ты красавчик, не забрасывай своей канал🎉

  • @Евгений-м8н6д
    @Евгений-м8н6д 8 หลายเดือนก่อน

    Круто, классно! Нет слов, одни эмоции! Доходчиво объяснил, разжевал, хорошая подача. Лайк и подписка однозначно.

  • @1world937
    @1world937 8 หลายเดือนก่อน

    Спасибо вам большое, я никак не мог понять данный урок по сеткам в платном курсе ! P. S. Ещё раз огромное вам спасибо !!!!

  • @НикитаДубровин-т7б
    @НикитаДубровин-т7б 8 หลายเดือนก่อน

    Дай бог тебе здоровья))) ты меня спас)

  • @mansur_terla
    @mansur_terla 8 หลายเดือนก่อน

    Лучший формат видео который я когда-либо смотрел по IT тематике .. Спасибо вам Автор за этот урок)

    • @CodeQuestRu
      @CodeQuestRu 8 หลายเดือนก่อน

      Спасибо, приятно)

  • @ДанатаВитауто
    @ДанатаВитауто 8 หลายเดือนก่อน

    Где я упустил момент, ведь функция clean удаляет все файлы с папками из public и gulp dev запускает все задачи включая опять сжатие картинок по кругу Может добавить в clean массив удаления return del([`${path.root}/css`, `${path.root}/js`]); только двух папок ???

  • @ДанатаВитауто
    @ДанатаВитауто 8 หลายเดือนก่อน

    Лучший мануал что я видела! Это ТОП из ТОПов! Смотрю запоем, не знаю что ещё сказать)

  • @Anna-td4cq
    @Anna-td4cq 9 หลายเดือนก่อน

    супер!

  • @asifabbasov3801
    @asifabbasov3801 9 หลายเดือนก่อน

    У меня проблема, есть проект. В нем уже есть package.json, мне нужно установить пакет node modules, но команда npm install не работает не в VS Code не в терминале. Помогите пожалуйста

  • @SnezanaG
    @SnezanaG 9 หลายเดือนก่อน

    Большое спасибо. Очень понятно и подробно.

  • @anatol08013
    @anatol08013 9 หลายเดือนก่อน

    CodeQuest благодарю Вас, - полезный и хорошо систематизированный контент. Сборка не выводит изображение в браузер. При этом в тулзах отображается загрузка и выводятся Alt=" ". К тому же отображается изображение исключительно svg-формата. Несколько раз переделал таск изображений (пути, версии, параметры...). Добавлю что не использую pug - верстаю html с @@ include -ами. Вопрос: в чем 'закралась' ошибка? p.S. В тулзах (Сеть) по файлу .png указан Статус 206 Partial Content; по файлу .svg - 304 Not Modified . P.P.S. по файлу .png указан также и Статус 304. Интересно что используя data/'file'.json где хранится путь к изображению; потом используя его в блоке html с помощью конструкции : src="@@image" выдает ошибку Error: Cannot read properties of null (reading '0'). Похоже ряд ошибок - при включении в поток .pipe(webpHtml()) Еще раз благодарю

  • @alice_black_1004
    @alice_black_1004 9 หลายเดือนก่อน

    Спасибо. Стало лучше понятно насчет npm

  • @denissavast
    @denissavast 9 หลายเดือนก่อน

    Огромное спасибо

  • @Vanhes_brawl
    @Vanhes_brawl 10 หลายเดือนก่อน

    А что в папке НОД модульс?

    • @CodeQuestRu
      @CodeQuestRu 10 หลายเดือนก่อน

      Пакеты

  • @aton_goldenstern
    @aton_goldenstern 10 หลายเดือนก่อน

    Благодарю за полезный контент! Очень жаль, что вам пришлось оставить контент-мейкинг.

  • @ruslayder9387
    @ruslayder9387 10 หลายเดือนก่อน

    не не не не не чувак это реально круто!!!😎😎😎

    • @CodeQuestRu
      @CodeQuestRu 10 หลายเดือนก่อน

      Спасибо)

  • @KhabibulinAnvar
    @KhabibulinAnvar 10 หลายเดือนก่อน

    Спасибо за хорошую визуализацию и подачу. Очень полезное видео.

  • @Дневникпрограммиста-у3д
    @Дневникпрограммиста-у3д 11 หลายเดือนก่อน

    опять архив за бабки, там ничего сакрального нету, скиньте архивы, хотя бы на гитхаб.

    • @IgorBobyrev
      @IgorBobyrev 8 หลายเดือนก่อน

      тебе чего три доллара жалко?

  • @kykripchannel4814
    @kykripchannel4814 11 หลายเดือนก่อน

    вау, спасибо большое. ещё посмотрел видео про gulp. очень понравилось.

    • @CodeQuestRu
      @CodeQuestRu 11 หลายเดือนก่อน

      Рад, спасибо =)

  • @abvideo9156
    @abvideo9156 11 หลายเดือนก่อน

    Молодец! Хорошо объясняешь! Очень пригодилось

    • @CodeQuestRu
      @CodeQuestRu 11 หลายเดือนก่อน

      Спасибо)

  • @mashulka02
    @mashulka02 11 หลายเดือนก่อน

    ВЫ МОЙ СПАСИТЕЛЬ, СПАСИБО ОГРОМНОЕ ❤

  • @cherrymllw6140
    @cherrymllw6140 ปีที่แล้ว

    Очень понятно объясняешь, спасибо

  • @cherrymllw6140
    @cherrymllw6140 ปีที่แล้ว

    Спасибо, очень полезное видео!

  • @AishaJo
    @AishaJo ปีที่แล้ว

    Надо бы еще рассмотреть проблемку: если вписать большое число цифры заходят на обочину самого калькулятора .

  • @ДимаБатраков-и3ъ
    @ДимаБатраков-и3ъ ปีที่แล้ว

    0 объяснений, очень сухо, для новичков будет вообще непонятно

  • @AlexAlex-bp9il
    @AlexAlex-bp9il ปีที่แล้ว

    А есть другие подобные игры\тренажеры ?

    • @CodeQuestRu
      @CodeQuestRu ปีที่แล้ว

      Да, в одном из предыдущих видео я показывал игру с башнями. Еще есть огород для изучения гридов и другие)

    • @AlexAlex-bp9il
      @AlexAlex-bp9il ปีที่แล้ว

      @@CodeQuestRu Посмотрю. Спасибо !

  • @alexlebed8000
    @alexlebed8000 ปีที่แล้ว

    Отлично! Спасибо!

  • @tuwka705
    @tuwka705 ปีที่แล้ว

    Дословно всё переписал. При анимации формы друг на друга залазят в любом случае. Ошибку не нашёл после детального просмотра. Из этого хочется сделать вывод, что код в редакторе отличается от кода того, что видно у вас в браузер

    • @tuwka705
      @tuwka705 ปีที่แล้ว

      Так что лучше на это видео время не тратить. Автор обманул

    • @bekmyrza2005
      @bekmyrza2005 ปีที่แล้ว

      даже переписать нормально не смог? у меня все работает

  • @NIkFreedomForce
    @NIkFreedomForce ปีที่แล้ว

    Круто! Пасиба

  • @РачковМаксим-э5и
    @РачковМаксим-э5и ปีที่แล้ว

    Спасибо