Верстка сайта HTML, GULP, SASS | Персональный блог #2

Подписаться 177 тыс.

Просмотров 45 тыс.

50% 1

В этом видео продолжаем верстать сайт на html css используя gulp и препроцессор sass. Делаем многостраничный сайт - персональный блог. Макет сайта нарисован в Figma.
Ссылки
-------------------------------------------
Материалы урока: bit.ly/3pDTmQS
О проекте
-------------------------------------------
Меня зовут Дмитрий Валак. Я занимаюсь разработкой сайтов уже много лет, специализируюсь больше на front-end разработке и верстке сайтов, но и программирование тоже изучаю. Здесь буду делиться с вами информацией на разные темы по веб-разработке - HTML, CSS, Javascript, JQuery, Vue, PHP, MySQL, React, Gulp и тд.
На сайте проекта brainscloud.ru вы найдете много полезных закрытых материалов, а так же сможете поработать со мной лично, при наличии такого желания.
Соц. сети
-------------------------------------------
Мой ВК - odimaz
Группа BC - brainscloud
Мой Instagram: / dmitryvalak
#верстка #html #css #sass #gulp

Опубликовано:

15 ноя 2020

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 146

@BrainsCloud 3 года назад

@user-tw5hj3gq7q 3 года назад

Pug вообще не используете?

@unknown.6914 Месяц назад

Комментарий с целью продвижения данного ютуб канала. Больше начинающих ребят должны начинать изучение HTML и CSS именно у этого человека. Спасибо вам Дмитрий!

@cy66a 2 года назад

Ребята, если у вас на 7:00 не сработал placehold.it/100, то теперь нужно писать в другом формате via.placeholder.com/100 Поддержите лайками, чтобы комментарий был выше

@Workandu Год назад

а зачем? не проще аву так добавить ?

@cy66a Год назад

@@Workandu иногда нечего ставить. А placeholder нужен в качестве "затычки". Он так и называется из-за этого - place holder. Это всё равно что вместо использования Lorem Ipsum сказать, а не проще ли самому сочинить содержимое параграфа. Примерно такая аналогия, думаю.

@Legat74 3 года назад

Удачи Дмитрий! Спасибо за обучение, до сих пор помню твои курсы!

@andriysocolov4135 3 года назад

Как всегда отличный урок!)

@sergsergey4251 3 года назад

Отличное видео по вёрстке. Спасибо! Верстка сайта HTML, GULP, SASS.

@skibasyg1557 3 года назад

Здравствуйте, Дмитрий, вас очень приятно смотреть, интересно узнавать особенности профессиональной вёрстки, многое для меня новое, но очень интересное, спасибо)

@satanist70 3 года назад

Дима, спасибо огромное!! Пока Activebox прохожу, очень интересно и понятно, а твой справочник это чудо по html, css, спасибо. Обязательно доберусь и сюда, впереди ещё Mogo и портфолио )

@OrlonGaming 3 года назад

Стоит кое-что взять на заметку, спасибо за видео!)

@firdavsdadakhanov5087 3 года назад

бро я очень уважаю тебя, учился верстать в основе твоих видео роликов) давай больше видео с новейшими технологиями. A я поддержу с лайками)

@temir9945 3 года назад

Салам научился????

@user-lm9ee1gn5p 2 года назад

Поддерживаю

@FaYrUsinc 3 года назад

очень понравилось объяснение, буду ждать продолжение.

@user-lm9ee1gn5p 2 года назад

Спасибо, Вам за ваши труды, очень приятно Вас слушать, как для новичка в этой стезе. P.s.было бы здорово увидеть от Вас серию видео по практике в js

@Jane-ge7ho 3 года назад

Спасибо за труд! Ты как всегда на высоте:)

@WhiteBear141981 3 года назад

Супер! Очень профессионально. Gulp для меня в новинку, поэтому узнаю много нового. Спасибо!

@user-kn1fe7xu4o 3 года назад

Все супер как всегда! Осталось разобраться с интернет магазинами))) Жду видео)))

@user-bo2fn9ye6b 3 года назад

Давно ждал. Ура. пока не смотрел. сегодня начну.

@gravitation-ether242 3 года назад

Офигенный контент четко без воды

@manik7777 Год назад

Дмитрий, очень мощный контент👍

@spyrav 3 года назад

лучшее видео, спасибо) будет чем заняться сегодня вечером

@tolirum 3 года назад

Вторая часть, - полёт отличный 👍 Второй месяц изучаю frontend - наткнулся на твой канал - очень полезные уроки для меня. Правда в btn.scss (transition: background-color .2s linear;) - sass отказался компилировать - изменил на (transition: background .2s linear;) и все пошло. Мне нравится твой подход к работе - все четко по блокам - без месива)) Хорошо, когда есть возможность сразу учиться у нормальных людей, нормальной верстке, нормальному коду. 💪 Дмитрий, Спасибо!

@Dimasiki168 3 года назад

Очень круто. Самое главное что не нудно.

@Max-ed4yd 2 года назад

Специально поставил на паузу, чтобы посмеяться над С-ВИ-ДЖИ)))) Хватаем же ума у людей ...)) Контент супер, Спасибо, Дима!

@DerAleksey 3 года назад

да, самое главное в верстке, это понять как контент правильно разделить на части.

@user-ki2uu1jp6q 3 года назад

Огромное спасибо за такой большой и думаю актуальный проект! Подскажите как часто будет выходить видео по данному проекту?

@dim3143 3 года назад

Крутой урок) иконки social__item кстати можно позиционировать через .social {... &:not(:last-child) { margin-right: 15px; } ...} думаю, так будет более правильно)

@timzeynalov3537 3 года назад

главное что получается чувствовать себя как дома в галпе ) это махина для разработки . очень редко можно найти подобные курсы где все как надо и есть материалы к уроку. был бы рад если будет еще тема в галпе . создадим какой нибудт интернет магазин

@user-td1wn3wt3z 3 года назад

Хороший урок, сенсей 🙏

@user-cp3cx1rr1c 3 года назад

50000 человек из первой части похоже сказали: "ну его нахер"

@ant3413 Месяц назад

Ну дааа сложно верстать, вроде верстаешь и думаешь а вдруг я не так сделал блок и прописал стили и т.д неувереность у меня.

@user-ie7md3mm6x 3 года назад

Отличный урок )

@N1k0lay 3 года назад

Круто, если потом к этой верстке сделать WordPress

@grigodoes 3 года назад

Как по мне, интереснее вариант с ModX

@N1k0lay 3 года назад

@@grigodoes WordPress самая популярная CMS. Это бы принесло каналу много новых подписчиков. Все хотят умеет верстать современные сайты и садить их на WP. Да и лично мне больше нравится WordPress в качестве CMS для блога/инфосайта.

@user-qr2br5kf6z 2 года назад

Ударение в слове «красивее» - «красИвее»

@shifrl771 3 года назад

Просто супер CMS ваще лайк

@denvudd4492 3 года назад

Вау, новая верстка, круто

@shps.online9830 3 года назад

все, коммент зарядил)) погнал смотреть ))

@ChizhikovSergey 3 года назад

Та самая заставка. Слушал тебя год назад и думал как это все осилить... Я уже немного лучше ). Знаю немного JS, PHP, написал пару проектов на React. Дмитрий, я благодарен.

@Linarmzt Год назад

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

@ChizhikovSergey Год назад

@@Linarmzt Я скажу, что нельзя останавливаться если ты начал учиться в IT. Неважно в какой сфере. Даже если ты просто пришел и осваиваешь CSS, JS. Инстукция. П1 - Пилишь каждый день по 18-24 часа теорию и решаешь задачи. Простые задачи. П2 - Потом решаешь практические задачи на фрилансе или в компании. П3 - Не забываешь про П1 П4 - Дмитрий, спасибо! )) Тут должна быть реклама меня....

@ihorkondratov2189 3 года назад

Годный контент!!!!

@itmoroz 3 года назад

агонь, спасибо за труд! Хочу уточнить в исходниках должен быть макет формата фигмы?

@nikomunikabelen8540 2 года назад

Спасибо!

@vladkutuzov1285 3 года назад

Класс)

@Anopeng 2 года назад

Я раньше верстал сайты на чистом HTML/CSS/JS. Недавно выучил основы jQuery, SASS, БЭМ и Gulp. Решил поискать хороший пример их использования и наткнулся на этот курс/плейлист или как это называется... В общем, все понятно и интересно)

@maleliuk 3 года назад

Восторженные аплодисменты, лайки, подписки и добра!

@workbis2316 3 года назад

супер, спасибо большое)

@aidamur 2 года назад

просто спасибо, друг

@PiterProduction Год назад

Спасибо

@tilegenbakitov9243 3 года назад

Спасибо тебе очень понятно создам несколько аккаунтов и подпишусь на тебя чтобы набрал 100тыс по быстрее )

@user-jb3cd5uk2j 3 года назад

Супер!!!

@grave3101 3 года назад

Спасибо большое за видео! Очень вовремя вас нашел! Я попытался вставить вместо картинки-заглушки аватарку из фигмы, и получилось так, что она заполняет только половину. Думаю, в следующем выпуске вы проблему эту сможете решить!)

@grave3101 3 года назад

Проблема в самой картинке, которая в фигме, там почему-то экспортится ещё пустое пространство, проверьте, пожалуйста, что там не так

@ibxmusic8052 3 года назад

Привет из Узбекистана

@user-ku6zf7jq3s 3 года назад

в фигме справа вверху есть вкладка inspect, там отображаются scc стили для выбранного элемента. стили оформления, на мой взгляд удобней брать там, например box-shadow и д.р

@AntonioBenderas Год назад

0:07 175K subscribers. Мы свою задачу выполнили) Ждём контент)

@djonikbb5572 2 года назад

Как относишься к каналу фрилансер по жизни??? Вы оба четко ,без воды приподаете материал

@elenaga4585 3 года назад

Насыпай больше ! Плюсую

@abylaym4157 3 года назад

Уже не терпится посмотреть следующий урок :)

@user-ql8it5be3v 3 года назад

Смотрю только сейчас, возможно дальше исправлено. Но как я вижу по макету кнопки одинакового размера w120. Тут же они вышли разные в зависимости от контента. Да мы делаем не строго по макету, учитывая что макет был нарисован автором. Но всё же по мне, одинакового размера красивее)

@shittywizzard5727 3 года назад

Заставочка из Масс Эффекта :3

@elitdie 3 года назад

Картинка в сайдбаре же не контентная, а элемент дизайна. Лучше на мой взгляд в бэкграунд прописать. Дополнение про замену картинки в cms конечно важное, но тогда картинка становится контентной)

@user-oy7zh1lk6o 3 года назад

красИвее

@user-fy3jo6nj3b 3 года назад

Когда, следующий урок?

@user-xd4mv4mk4c 3 года назад

правильнее красивше))

@jinke5935 3 года назад

А будет ли проверка на валидацию кода?

@peterparker3794 3 года назад

УРРА!

@steff8826 3 года назад

У меня, почему-то к иконкам social__item не применяется margin. И они изначально встали не в столбик, а в строку. И между ними какая-то синяя горизонтальная полосочка.

@jackdoe1312 3 года назад

Решил поменять иконку одну (качал с Flaticon), в итоге не понял где выставлять width, height внутри svg документа. Но потом нашел Social icons для Figma и там (перед скачиванием) задал размеры (кстати, внутри этой иконки width, height указаны).

@splash8701 3 года назад

Та ну! Давай №3 видео это слишком легко

@user-zk3fu4zj8y 3 года назад

Здравствуйте Дмитрий. А что делать если высота окна меньше чем sidebar? У меня например до сдвига контента кнопок не было видно.

@user-et7wv6pq7k 3 года назад

Какую прогу используешь для создания дизайна сайта?

@user-ig4lq2ts8b 3 года назад

snipet коментария в html c. почему не копировать тень из фигмы раздел inspect?. думаю вы знаете.

@1vekod456 3 года назад

друзья, подскажите что это за ошибка (less-autocompile превысил время ожидания 10000 мс)?

@khrustalev_creative 3 года назад

Cтили можно копировать из figma, вкладка inspect

@DOLBOEBIZM-fx5ol 3 года назад

не советуется это делать никому, потому-что там коды по 10 строчек кода а то и больше. По типу position и т.д

@khrustalev_creative 3 года назад

@@DOLBOEBIZM-fx5olкопировать не все, только заковыристые. Например бокс-шадоу. Для скорости

@kawaikaino5277 3 года назад

Почему flex не используешь?

@user-bx7ly2th3b 2 года назад

2:20 а вот КАК правильно задать класс такой картинке по БЭМ в этом случае? sidebar__header__img - так нельзя, и как быть?

@kkulebaev 3 года назад

Дмитрий, подскажите, будете ли Вы выносить SVG в отдельный файл и вставлять с помощью тега use? Потому что у меня в проекте возникла проблема с отображением градиента для SVG иконок. Я прочитал, что это из-за свойства display: none, изменил это свойство на нулевую высоту и ширину, но градиент все равно не показывается. Хотелось бы увидеть решение проблемы. На данный момент я теги иконок symbol добавил в index.html, так градиент работает, но хочу вынести в отдельный файл, чтобы не захламлять верстку.

@BrainsCloud 3 года назад

посмотрим, но я обычно svg спрайты делаю в html, не выношу в отдельный файл

@user-ut3re8nd1p 3 года назад

Урок отличный, но теперь понял что много чего не знаю((( где селекторы внутри других селекторов это что?? gulp or sass??

@BrainsCloud 3 года назад

sass

@shilizor 3 года назад

Когда 3 урок?

@valerypobelenskiy1001 3 года назад

картинки не видит данный ниже плагин gulp-imagemin: Couldn't load default plugin "optipng" не отрабатывает

@user-td1wn3wt3z 3 года назад

А почему, если написать relative для profile__avatar, то баг с border пропадает?

@andreich1980 3 года назад

Почему бы картинку в сайдбаре не загрузить как фон?

@AntonioBenderas Год назад

3:10 если мы пишем scss то 13 строчку можно перенести внутрь .sidebar { &__header{} }

@ulbolsynzh 3 года назад

Как найти первый заказ?

@HD-qp3fw 3 года назад

Картинки, svg не отображаются, закомментил в gulpfile отдельные строки, полностью task, не работает

@villgard 3 года назад

Здравствуйте, прошу помощи. В сборке при верстке появилась проблема отображения картинок. Выдает в консоли 404. Может, кто подскажет, как ее решить?

@thesan4os100 2 года назад

У меня почему-то иконки svg не показывает((( КАк исправить?

@strikerworld7896 3 года назад

Я первое видео ещё не успел досмотреть😅 (доделать)

@valerypobelenskiy1001 3 года назад

Добрый вечер Дмитрий проблема в сборке Gulp gulp-imagemin: Couldn't load default plugin "optipng" как можно решить данную проблему ?? переустанавливал плагин и даже версии Node под свою опреационку правда у меня старая 7 ка 32 битка

@BrainsCloud 3 года назад

Сложно сказать, у меня такой проблемы нет. На крайний случай можете просто убрать данный pipe из таска и просто переносить картинки

@warface-nik4410 3 года назад

Сколько частей будет ?

@BrainsCloud 3 года назад

не знаю

@user-di4zt3br5m 3 года назад

@user-iu1cv1ol3q 3 года назад

смысл бить стили по мелким файлам? даже для 5 разных шаблонов это будет условно, 20-30 файлов. даже если стили будут разбиты по папкам с названием шаблона, уже через месяц забудете какой файл за что отвечает, какое бы говорящее название не было у файла. на мой взгляд map-файлы решают эту задачу, в девтулзах указывая строчку, где какой элемент стилизован. Далее в sublime Ctrl+G прыгаем на эту строчку и редактируем что нам нужно

@BrainsCloud 3 года назад

делайте как хотите, я же не настаиваю

@user-iu1cv1ol3q 3 года назад

@@BrainsCloud хм.. я ожидал более конструктивного ответа, ну ок)

@user-ku6zf7jq3s 3 года назад

поддерживаю вопрос, какой смысл выносить каждый элемент в отдельный css блок?

@Kempriol 3 года назад

Странно, что смещение было применено к блоку, а не аватарке, потому как если убираем аватарку из дизайна - сместится текст с именем и прочее..

@yehorich1975 3 года назад

При старте gulp терминал выдает ошибку TypeError in plugin "gulp-imagemin" Message: fn is not a function Details: fileName: D:\OpenServer\domains\personal-blog\src\assets\images\sidebar-header.jpg domainEmitter: [object Object] domain: [object Object] domainThrown: false что делать - ума не приложу. Подскажите, пожалуйста.

@yehorich1975 3 года назад

Всем спасибо, проблема решена.

@tonyn2036 3 года назад

@@yehorich1975 привет. Как решил проблему?

@yehorich1975 3 года назад

@@tonyn2036 Привіт. Закоментував рядок 204. imagemin.optipng({optimizationLevel: 5}), в файлі gulpfile.js :)

@tonyn2036 3 года назад

@@yehorich1975 дякую))

@yehorich1975 3 года назад

@@tonyn2036 Будь ласка.

@alizhilov1391 17 дней назад

Народ подскажите в brackets ошибки не выдает а vsc постоянно ошибки точку поставишь красное уведомление scss error и кричит дынь дынь дынь по мозгам не возможно верстать!!!

@vantuz54 3 года назад

В названии написано SASS, а в видео используется SCSS

@addlokkesself4239 3 года назад

Сильная претензия, но удаваться в подробности не буду ) Могу подсказку только написать - SASS (SCSS)

@godfrey1947 3 года назад

Я новичек. Есть пару вопросов. 1. Почему все размеры в ремах? 2. Зачем под чуть ли не каждый блок свой css файл? а не один общий файл css.

@yuryrudny2207 3 года назад

Сверстаешь десяток макетов, поймёшь

@godfrey1947 3 года назад

@@yuryrudny2207 уже сверстал. Не сложно же конкретно ответить да? Или будем вы*быватся какие мы тут все опытные?

@imilkyway628 3 года назад

@@godfrey1947 советую все-же сверстать с десяток корпоративных сайтов, порталов или просто многостраничек чтобы понять.

@godfrey1947 3 года назад

@@imilkyway628 мда вот это комьюнити у канала...

@godfrey1947 3 года назад

@@imilkyway628 ну сверстал я 10 многостраничек. использовал пиксели как единицу величины везде. Везде использовал единый файл стилей на весь сайт. Всё нормально с вёрсткой. Вопрос повторить?

@maximskliarenko7047 3 года назад

а как открыть проект в браузере второй раз?????

@addlokkesself4239 3 года назад

По схеме как в первом видео, заходишь в директорию своего проекта через Git Bash, и прописываешь gulp. Правда у меня почему-то долго подгружаются файлы

@user-wq9nn9xw7h 3 года назад

У меня почему-то не открывается дизайн сайта через фигму. У кого то была такая проблема?

@elenaabramova6589 3 года назад

У меня такая же ситуация. Figma предлагает свой учебный макет. Разобрались в ситуации или ещё нет?

@user-wq9nn9xw7h 3 года назад

@@elenaabramova6589 Да, в самой Figme в правой части экрана имеется возможность открыть проект. Вот через эту функцию у меня все заработало.

@user-iu1cv1ol3q 3 года назад

смысл использовать БЭМ-подобные именования для классов и не почти не использовать вложенность sass? на 5:26. но если использовать вложенность, зачем писать сравнительно длинные именования классов в html? .sidebar → .header → img типа название класса более говорящее и лучше описывает сущность? так вложенность и этот вопрос снимает. а более короткий html-код приятнее переносить на движок. попробуйте сто раз скопировать и (пример выдуман)

@ideagame3633 3 года назад

каждый пишет по разному , методов много, как ему удобно, слово - зачем? ваше не имеет смысла.

@user-ge6xe9hh9m 3 года назад

Кука «io» вскоре будет отклоняться, поскольку её атрибут «SameSite» установлен в значение «None» или в недопустимое значение, и в ней отсутствует атрибут «secure».

@user-ge6xe9hh9m 3 года назад

Разобралась 😊 Глуповата я для этих дел, но жутко интересно. Буду мучаться