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

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

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

50% 1

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

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

23 ноя 2020

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

@gost-to2810 Год назад

47:30 Шикарный лайфхак для стилизации текстового инпута. Так просто добавить эффект при фокусе!! Здорово!! Спасибо!!

@ea4613 Год назад

До сих пор актуально. 👍 Спасибо за труд. 🙏 Начинал учить вёрстку по вашим видео, конспектируя каждое слово 😅....отучился в htmlacademy 1.5 года и после окончания до сих пор смотрю вас и учусь по вашим видео 🤫😅. От души 🤜🤛

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

Наконец, дошел от начала до конца за 3 часа, спасибо все получилось. Не зря писал ты сколько.

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

Вы просто копируете код, который он пишет? Не разбираясь в нем? Потому что тут урок на 1 час и ещё 5 уроков по 30 минут. Т. Е. Уже около 4х часов, а если ещё сидеть и вникать во все это? Или же у вас есть реал ный опыт вёрстки из за чего вам проще? Если это видео будет смотреть новочок и чтобы понять арицып все работы, уйдёт как минимум часов 8. Если не больше.

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

Спасибо за видео! Ждем следующее! Я из тех кто соскучился по длинным урокам!

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

Спасибо за понятные видео по вёрстке! Успехов в развитии канала. HTML, CSS, Gulp, вёрстка

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

Отличное видео-урок. Вам нужно преподавать в Университете !

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

Отличная длинна урока)) лайк и коммент - обязательно)

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

Урок еще не начался , я уже комментирую и ставлю везде лайки . Спасибо Вам за урок !

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

Ребята, кнопка "Не нравится" - это не кнопка "Загрузить это офигенное видео", не путайте пожалуйста!!! А урок шикарный, как всегда:)

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

как всегда, уровень подачи информации на высоте ! так держать. бесконечный лайк с меня ))

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

Урок супер, как всегда! тот случай, когда хочется залайкать много много раз ) где же уже следующий урок? С нетерпением жду продолжения

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

Урра! Кстати музыка топчик просто, макет вообще топчик. Супер!

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

Где же новый урок? Что-то задерживается))

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

Блин вы Гений, Хокаге для меня !) В мире IT )

@v.v.p.3234 3 года назад

Я надеюсь, вы завершите проект до конца. Т.к. это отличный гайд для начинающих.

@PiterProduction Год назад

Супер!) Спасибо❤

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

Посмотрел что получается, сейчас буду начинать с 1 урока ибо очень интересно

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

Я посмотрел результат 6-го урока (последний на сегодня) Мне понрав, я пошёл по порядку. Понял что не понимаю интерфейс фигмы((( На данный момент я уже прошел половину курса по фигме, и буду готов идти дальше.

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

Едем дальше. Спасибо!

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

Много лайков и благодарностей Вам!

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

Супер! Спасибо!

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

Супер!

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

спасибо за урок)

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

SPASIBO!

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

закрыл первую тысячу )) 👍

@noname-ut9ws 3 года назад

Срасибо

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

На 45 минуте можно просто задать border-bottom:1px solid к текстовому полю и при :focus сменить цвет этого border'a ------------ p.s: мой вариант.

@snowfall6590 Год назад

Может кому пригодиться, сам на 5 минут застрял с моментом перелинковки на 33:10 где Дмитрий делал ссылки на пост и обратно. Здесь ссылку на с индекса на пост он делает в индексном файле (который хедер), а обратно возврат делает уже с поста в индекс (который хедер) уже в пост.хтмл, потому и вписывать путь обратно нужно тоже в другом файле иначе у вас будет решётка.

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

Нужно сокращать количество людей, которые смотрят видео без подписки!!!))))) Дмитрий, не убивай ни кого!!!))))))

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

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

кайфую и учусь, во время войны самое то

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

Большое спасибо за уроки. Я так понимаю, что поддержка Brackets прекратиться в сентябре 2021?

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

top

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

Здравствуйте! Спасибо большое за уроки - они лучшие!!! Есть вопрос: а почему просто нельзя здесь 45:55 сделать так: &:focus { border-bottom: 1px solid $blue;} также в селекторе .form__control ? Так ведь тоже работает все. И transition тоже срабатывает как надо. Вот этот момент я не поняла( Зачем обязательно добавлять этот form__line?

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

Привет. Спасибо за столь чудесный урок. а когад следующее видео? а то прям очень хотелось бы финальную версию сделать.

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

скоро

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

30:22 миксином тоже вариант, даже более удобно

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

Здравствуйте, когда закончим этот проект, можно будет его добавить в портфолио?

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

Здравствуйте, прошу прощения что может вопрос не по теме, но мне понравился брекет как редактор, можете подсказать плагины для работы с js? Буду очень признателен

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

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

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

Не знаешь сколько всего будет уроков и когда ты планируешь всех их выпустить?

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

Пока смотрю видео и повторяю действия, всё понимаю., как только пробую сделать что-нибудь самостоятельно, так понимаю, что дура😒 Спасибо, Дмитрий, это лучший канал на Ютуб, посвящённый вёрстке!

@noname-ut9ws 3 года назад

Практикуйся, У меня такая же проблема была.

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

Постарайтесь еще теорию повторить. Впереди js, а это на порядок сложней.

@noname-ut9ws 3 года назад

@@jackdoe1312 согласен

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

Ничего , всё у вас получится ! :)

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

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

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

Мб вместо span.form-line сделать box-shadow inset для текстовых инпутов?

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

Дмитрий, проблема. Проект когда пересоб рается висит почти минуту, как это можно поправить? Комп вроде норм 16 гиг оперативы

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

HELP!!! При запуске галп удаляет паку css и ломает все верстку. В чем может быть проблема?

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

Мне нравятся твой контент и я удивлён что тебя так мало смотря. Я хотел бы поинтересоваться что мне стоит выучить из того чем я скорее всего буду пользоваться при версте сайтов. Мой стартер пак: js hyml css ,начинаю учить node.js. Заранее спасибо)

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

html, css, js основа основ

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

Почему не применяется gap для флекс элементов вместо margin . Так ведь удобнее задавать расстояние между элементами. upd. Да, сафари их не поддерживает. (

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

просьба большая сделай видео по натягиванию на цмс и создание админок!!!

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

Автор, давай новый урок, жду попапы)

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

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

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

Посмотрел минуту и выключил, потому что забыл лайк сначала поставить

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

Ну что же, остаётся записать нужные знания, и начать делать с первого урока.

@volod-one 3 года назад

столкнулся с проблемой того, что при добавлении иконки share, текст слегка уходит вниз (выравнивается по нижнему краю блока). пробовал исправить проблему при помощи inline-block и vertical-align, но текст вообще никак не реагирует. перепроверил в чем может быть проблема скачав материалы урока, но так ничего и не нашел, содержимое идентично, картинка экспортирована правильно. поиск в инете ничего не дал.. довольно странно порой получать разные результаты, особенно, когда следуешь за мастером.

@volod-one 3 года назад

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

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

@@volod-one такаяже херня, сделал как ты по 7 пикселей

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

нашёл решение - написать в .post__actions-icon { vertical-align: middle; }

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

Можно так создать многостраничный сайт с галпом без php?(зар. Спс)

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

При верстке блока .related, если в левом столбце сделать длинное наименование, то отступа между левым и правым столбиком не будет, получается что-то типа: «текст левого столбца...И тут сразу начинается текст заголовка правого столбца. Я что-то упустила? Как реализовать с отступом?)

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

@@stasalsakhanov435 спасибо, попробую😉

@GAMER-zq7um 2 года назад

11:00

@GAMER-zq7um 2 года назад

45:30

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

Не открывается вторая страница как только ее создал, как быть?!

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

@archezzz.6847 3 года назад

Дмитрий спасибо за ролик можешь сказать каком редакторе пишешь и сказать плагины какие. А тебя смотрю , ну так классно все и удобно

@archezzz.6847 3 года назад

на каком*

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

Говорил в видео в начале серии уроков. В данном видео я работаю в brackets из плагинов - emmet, sass hints

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

Дмитрий ты лучший спасибо тебе, твоей подаче, очень заходит! Подскажи пожалуйста есть ли у тебя видео, твоим понятным языком, как ты умеешь, как заливать на GitHub код, а то я не нахожу (( ? Спасибо Бро

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

Привет, такого видео нет

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

@@BrainsCloud Жаль Дмитрий! Может созреешь? Мне кажется это может быть интресно многим. Бо там можно и ноги поломать, если новичок))

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

@@user-wt8sq9om6c , посмотри на канале GloAcademy "Git для самых маленьких"

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

После установки gulp все запустилось. Ок. Перегрузил компьютер. Как запустить опять sass?

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

Если еще не нашли ответа, то нужно просто еще раз запустить gulp (cd c:/директория_с_проектом gulp)

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

как обой десктопа называется

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

Обои

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

бэм вышел из чата...

@boole_cat Год назад

Абсолютно непонятно почему {{> body }} добавляет в итоге на страницу то что написано, где блок {{> body }} , откуда он берется.Откуда берутся те же {{> header }} {{> sidebar }} понятно, у нас есть отдельные файлы хтмл соответствующие, а где файл боди.хтмл....Подробнее про логику сборки страниц бы , автор очень кратко про это упомянул в первых видео, нужны подробности.Спасибо.

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

Оч крутой дизайн у тебя получился, но мне кажется контентная часть ну слишком уж узковата. Как-то на фоне широченной навигации некомфортно на такую маленькую область смотреть. Чисто моё мнение

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

Адаптивность сделает наверное