CodeQuest
CodeQuest
  • Видео 34
  • Просмотров 347 410
#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 - Стили ...
Просмотров: 3 677

Видео

#1 Верстка сайта из Figma для начинающих | Марафон по верстке с GULP, SASS, БЭМ и Pixel Perfect
Просмотров 6 тыс.2 года назад
Все видео и материалы марафона (закрытые трансляции все исходники): boosty.to/codequest/posts/77cc4a11-119d-4a64-8a4e-fccf89ba4e71?share=post_link Подписывайся на альтернативные каналы: - codequest - t.me/codequest 🔥 Бонусом ты получишь готовую сборку Gulp и более 20 макетов Figma, которые пополняются каждую неделю. Профессиональная верстка сайта со всеми современными подходами только у ...
Git и GitHub для начинающих | Работа с GitHub Pages с нуля
Просмотров 8 тыс.2 года назад
Шпаргалка по 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,2 тыс.3 года назад
Исходники к видео: boosty.to/codequest/posts/954f704b-4cbe-4208-96b3-9e46654a93e4?share=post_link Подписывайся на альтернативные каналы: - codequest - t.me/codequest Присоединяйся и ты!
Slick Slider и jQuery в 2022 | Установка через NPM и подключение к Gulp
Просмотров 8 тыс.3 года назад
Исходники к видео: 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,2 тыс.3 года назад
Современная сборка 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 для верстки сайтов
Просмотров 62 тыс.3 года назад
Готовая сборка 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 для работы
Просмотров 41 тыс.3 года назад
Шпаргалка по командам NPM: boosty.to/codequest/posts/e434518f-a073-46aa-80d0-b4b8ae9a113a?share=post_link Подписывайся на альтернативные каналы: - codequest - t.me/codequest Это полный гайд для начинающих о том, как использовать NPM в своей работе. Из него вы узнаете, что такое NPN и зачем он нужен верстальщику. После чего я покажу, как установить его на windows, чтобы не было ошибок. Вы...
Анимация карточки товара при наведении мыши | Практика HTML и CSS анимации для начинающих
Просмотров 10 тыс.3 года назад
Исходники к видео: 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 | Практика верстки для начинающих
Просмотров 26 тыс.3 года назад
Исходники к видео: boosty.to/codequest/posts/00bb930b-f0c7-4847-acf2-184bcf5567b6?share=post_link Подписывайся на альтернативные каналы: - codequest - t.me/codequest В этом видео я хотел бы показать вам создание крутой формы регистрации и авторизации на сайте. Напишем ее полностью с нуля, добавим анимацию перехода и адаптируем под мобильные устройства. 0:00 - Демонстрация формы 0:40 - Ба...
Практика JavaScript и CSS анимации | Крутой эффект при наведении курсора на текст
Просмотров 6 тыс.3 года назад
Исходники к видео: 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 с нуля | Верстка, скрипт и его безопасность
Просмотров 19 тыс.3 года назад
Исходники к видео: 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,3 тыс.3 года назад
Исходники к видео: boosty.to/codequest/posts/6a4fac65-3f86-4933-90fe-300143cfbbae?share=post_link Подписывайся на альтернативные каналы: - codequest - t.me/codequest Адаптивность сетки Bootstrap реализована через специальные классы, которые позволяют установить элементу нужное количество колонок в каждой контрольной точке. В этом уроке мы подробнее поговорим про адаптивность, а также нап...
#2 Пишем свой Bootstrap с нуля | Классы колонок на Sass
Просмотров 2,2 тыс.3 года назад
Исходники к видео: boosty.to/codequest/posts/4b82c57b-c3d1-4ade-a92c-489aa8825b0d?share=post_link Подписывайся на альтернативные каналы: - codequest - t.me/codequest В прошлом уроке мы начали писать свою реализацию Bootstrap. И на данный момент у нас уже есть основа для сетки: - класс контейнера - ряда - и гибкой колонки Этого уже достаточно, чтобы создавать макеты с симметричными элемен...
#1 Пишем Bootstrap с нуля | Основа сетки на Sass и Flexbox
Просмотров 4 тыс.3 года назад
#1 Пишем Bootstrap с нуля | Основа сетки на Sass и Flexbox
Как стать программистом с нуля | Мой полный путь в IT
Просмотров 7833 года назад
Как стать программистом с нуля | Мой полный путь в IT
#4 Bootstrap миксины на SCSS | Построение адаптивной сетки без классов
Просмотров 6 тыс.3 года назад
#4 Bootstrap миксины на SCSS | Построение адаптивной сетки без классов
#3 Настройка сетки Bootstrap 5 под себя | Как поменять количество колонок сетки и другие переменные
Просмотров 11 тыс.3 года назад
#3 Настройка сетки Bootstrap 5 под себя | Как поменять количество колонок сетки и другие переменные
#2 Адаптивная верстка сайта на Bootstrap 5 для начинающих | Основа сетки Bootstrap
Просмотров 30 тыс.3 года назад
#2 Адаптивная верстка сайта на Bootstrap 5 для начинающих | Основа сетки Bootstrap
#1 Сетка Bootstrap 5 для начинающих | Быстрая верстка сайта при помощи колоночной сетки
Просмотров 45 тыс.3 года назад
#1 Сетка Bootstrap 5 для начинающих | Быстрая верстка сайта при помощи колоночной сетки
Какой язык программирования учить в 2021 году?
Просмотров 2,1 тыс.4 года назад
Какой язык программирования учить в 2021 году?
HTML теги I и EM | Разница, сравнение, практические примеры
Просмотров 2,6 тыс.4 года назад
HTML теги I и EM | Разница, сравнение, практические примеры
HTML теги B и STRONG | Разница, сравнение, практические примеры
Просмотров 3 тыс.4 года назад
HTML теги B и STRONG | Разница, сравнение, практические примеры
Практика Flexbox CSS для начинающих | Игральные кости на HTML и CSS
Просмотров 2,9 тыс.4 года назад
Практика Flexbox CSS для начинающих | Игральные кости на HTML и CSS
Прохождение Flexbox Froggy, все 24 уровня с пояснениями | Практика Flexbox CSS
Просмотров 19 тыс.4 года назад
Прохождение Flexbox Froggy, все 24 уровня с пояснениями | Практика Flexbox CSS
Прохождение Flexbox Defense с объяснением | Практика Flexbox CSS в формате игры
Просмотров 3,1 тыс.4 года назад
Прохождение Flexbox Defense с объяснением | Практика Flexbox CSS в формате игры
#6 Верстка сайта с нуля для начинающих | Завершаем последние блоки нашего макета
Просмотров 9644 года назад
#6 Верстка сайта с нуля для начинающих | Завершаем последние блоки нашего макета
#5 Верстка сайта с нуля для начинающих | Верстаем 4 и 5 блоки сайта на HTML и CSS
Просмотров 1,2 тыс.4 года назад
#5 Верстка сайта с нуля для начинающих | Верстаем 4 и 5 блоки сайта на HTML и CSS
#4 Верстка сайта с нуля для начинающих | Практика Flexbox CSS
Просмотров 1,9 тыс.4 года назад
#4 Верстка сайта с нуля для начинающих | Практика Flexbox CSS
#3 Верстка сайта с нуля для начинающих | Верстаем первый блок на HTML и CSS
Просмотров 4,3 тыс.4 года назад
#3 Верстка сайта с нуля для начинающих | Верстаем первый блок на HTML и CSS

Комментарии

  • @alexazarubin8456
    @alexazarubin8456 14 дней назад

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

  • @tonygun5664
    @tonygun5664 Месяц назад

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

  • @alonewolf2610
    @alonewolf2610 2 месяца назад

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

  • @alonewolf2610
    @alonewolf2610 2 месяца назад

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

    • @CodeQuestRu
      @CodeQuestRu 2 месяца назад

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

  • @АлександрСилков-ф2ж
    @АлександрСилков-ф2ж 3 месяца назад

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

  • @vpodsak
    @vpodsak 3 месяца назад

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

  • @tiestovadim95
    @tiestovadim95 4 месяца назад

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

  • @РоккиРоки
    @РоккиРоки 5 месяцев назад

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

  • @1world937
    @1world937 5 месяцев назад

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

    • @CodeQuestRu
      @CodeQuestRu 5 месяцев назад

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

  • @igorpom2
    @igorpom2 5 месяцев назад

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

  • @Wowa12345
    @Wowa12345 5 месяцев назад

    9:25

  • @laretabatl5934
    @laretabatl5934 6 месяцев назад

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

  • @sergeysergeev8705
    @sergeysergeev8705 6 месяцев назад

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

  • @ВикаЧерношей
    @ВикаЧерношей 6 месяцев назад

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

  • @Aleksey-s5t
    @Aleksey-s5t 6 месяцев назад

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

  • @Aleksey-s5t
    @Aleksey-s5t 6 месяцев назад

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

  • @НиколайБабиков-ы5ъ
    @НиколайБабиков-ы5ъ 6 месяцев назад

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

  • @ЕнотОбормот-ж9о
    @ЕнотОбормот-ж9о 7 месяцев назад

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

  • @blackhome418
    @blackhome418 7 месяцев назад

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

  • @Евгений-м8н6д
    @Евгений-м8н6д 7 месяцев назад

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

  • @1world937
    @1world937 7 месяцев назад

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

  • @НикитаДубровин-т7б
    @НикитаДубровин-т7б 7 месяцев назад

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

  • @mansur_terla
    @mansur_terla 7 месяцев назад

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

    • @CodeQuestRu
      @CodeQuestRu 7 месяцев назад

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

  • @ДанатаВитауто
    @ДанатаВитауто 8 месяцев назад

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

  • @ДанатаВитауто
    @ДанатаВитауто 8 месяцев назад

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

  • @Anna-td4cq
    @Anna-td4cq 8 месяцев назад

    супер!

  • @asifabbasov3801
    @asifabbasov3801 8 месяцев назад

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

  • @SnezanaG
    @SnezanaG 8 месяцев назад

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

  • @anatol08013
    @anatol08013 8 месяцев назад

    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 9 месяцев назад

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

  • @aton_goldenstern
    @aton_goldenstern 9 месяцев назад

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

  • @ruslayder9387
    @ruslayder9387 9 месяцев назад

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

  • @KhabibulinAnvar
    @KhabibulinAnvar 10 месяцев назад

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

  • @Дневникпрограммиста-у3д
    @Дневникпрограммиста-у3д 10 месяцев назад

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

    • @IgorBobyrev
      @IgorBobyrev 8 месяцев назад

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

  • @kykripchannel4814
    @kykripchannel4814 10 месяцев назад

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

    • @CodeQuestRu
      @CodeQuestRu 10 месяцев назад

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

  • @abvideo9156
    @abvideo9156 10 месяцев назад

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

  • @mashulka02
    @mashulka02 11 месяцев назад

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

  • @cherrymllw6140
    @cherrymllw6140 11 месяцев назад

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

  • @cherrymllw6140
    @cherrymllw6140 11 месяцев назад

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

  • @AishaJo
    @AishaJo 11 месяцев назад

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

  • @ДимаБатраков-и3ъ
    @ДимаБатраков-и3ъ 11 месяцев назад

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

  • @AlexAlex-bp9il
    @AlexAlex-bp9il 11 месяцев назад

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

    • @CodeQuestRu
      @CodeQuestRu 11 месяцев назад

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

    • @AlexAlex-bp9il
      @AlexAlex-bp9il 11 месяцев назад

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

  • @alexlebed8000
    @alexlebed8000 Год назад

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

  • @tuwka705
    @tuwka705 Год назад

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

    • @tuwka705
      @tuwka705 Год назад

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

    • @bekmyrza2005
      @bekmyrza2005 11 месяцев назад

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

  • @NIkFreedomForce
    @NIkFreedomForce Год назад

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

  • @РачковМаксим-э5и

    Спасибо