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

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

[@ea4613]

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

[@gost-to2810]

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

[@СергейОдоевский-щ7ы]

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

[@m1akarov2021]

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

[@pandashu571]

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

[@time4769]

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

[@FaceCoolProd]

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

[@m1akarov2021]

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

[@shp-o4p]

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

[@peterparker3794]

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

[@sergsergey4251]

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

[@wb_flow]

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

[@jogach240]

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

[@bekhzod908]

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

[@Alexus1504]

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

[@BrainsCloud]

:D

[@Tsepenlife]

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

[@slarx2476]

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

[@v.v.p.3234]

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

[@liza_sashina]

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

[@vladimirsvodjanojs8158]

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

[@iamzvir777]

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

[@PiterProduction]

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

[@kosha9951]

Супер!

[@ЛюбаФедоренко]

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

[@noname-ut9ws]

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

[@jackdoe1312]

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

[@noname-ut9ws]

@@jackdoe1312 согласен

[@peterparker3794]

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

[@FaceCoolProd]

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

[@maratiosmirovio3128]

SPASIBO!

[@igorkurbanov4855]

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

[@BrainsCloud]

скоро

[@ИльяКвитковский-г9л]

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

[@sidless3862]

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

[@snowfall6590]

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

[@amaksatovich5935]

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

[@WhiteBear141981]

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

[@workbis2316]

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

[@noname-ut9ws]

Срасибо

[@villishelpy5055]

top

[@maclaud2039]

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

[@vladislavtokarev8662]

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

[@johnpramah362]

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

[@nikomunikabelen8540]

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

[@eugenekuznecow5993]

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

[@BrainsCloud]

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

[@askhat9232]

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

[@warman582]

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

[@jackdoe1312]

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

[@hatuol]

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

[@volod-one]

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

[@volod-one]

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

[@zidgmundfreid9775]

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

[@pavuk7086]

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

[@MikailKhalikov]

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

[@deniseagle]

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

[@slarx2476]

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

[@navajo458]

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

[@elenaRyabovaV]

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

[@elenaRyabovaV]

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

[@EgoistPlatinum]

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

[@СаняЛуг]

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

[@Abramenkoff]

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

[@archezzz.6847]

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

[@archezzz.6847]

на каком*

[@BrainsCloud]

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

[@Den_camrad]

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

[@user-du3zt7ui8f]

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

[@ИгорьНово]

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

[@BrainsCloud]

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

[@ИгорьНово]

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

[@WhiteBear141981]

@@ИгорьНово , посмотри на канале GloAcademy "Git для самых маленьких"

[@stepstream5773]

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

[@boole_cat]

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

[@GAMER-zq7um]

11:00

[@slavamelnikov5319]

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

[@WhiteBear141981]

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

[@FaYrUsinc]

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

[@jogach240]

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

[@antonkrasov]

Привет от дизайнеров ВК ))

[@artashesmkrtchyan]

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

[@WhiteBear141981]

Обои

[@sergeyandreev6854]

все супер)) но когда переделываем меняем)) классы. ...не гуд)) все так же матеряться как и я?))))

[@GAMER-zq7um]

45:30

[@zerosteep8682]

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

[@Андрій-я6э]

+

[@silentspace593]

Решил вас поискать в просторах интернета, теперь мне страшно))) - prnt.sc/vqdwr9

[@BrainsCloud]

да да )

[@turtrueweb]

+