#2 Верстка сайта портфолио по шаблону с нуля!

Видеокурс по верстке сайта-портфолио с нуля используя HTML, препроцессор LESS и Adobe XD или Photoshop.
Хостинг: bit.ly/3kmX2V6
Скидки по моей ссылке: на виртуальный хостинг 10%, VPS/VPN 5%/10%, AntiDDoS 10% и другие услуги от 2-10%!
// Ссылки =================
Основы создания сайтов на HTML и CSS: brainscloud.ru...
Промокод: youtube (-500 руб.)
-------
Справочник HTML и CSS: htmlbase.ru/
Материалы урока: files.brainscl...
Макет: drive.google.c...
Автор макета: www.behance.ne...
// О проекте =================
Меня зовут Дмитрий Валак. Я занимаюсь разработкой сайтов уже много лет, специализируюсь больше на front-end разработке и верстке сайтов, но и программирование тоже изучаю. Здесь буду делиться с вами информацией на разные темы по веб-разрабокте - HTML, CSS, Javascript, JQuery, Vue, PHP, MySQL, React, Gulp и тд.
На сайте проекта brainscloud.ru вы найдете много полезных закрытых материалов, а так же сможете поработать со мной лично, при наличии такого желания.
// Соц. сети =================
Мой ВК - odimaz
Группа BC - brainsc...
Мой Instagram: / dmitryvalak
#верстка #версткасайта #html #less

[@BrainsCloud]

*Верстка сайта транспортной компании:* brainscloud.ru/landing/logistic-html *Хостинг Timeweb* - bit.ly/2Kms8Lf *Бонусы* доступны после оплаты тарифа Optimo+ на год. Для активации нужно открыть раздел "Бонусы и промокоды" в Панели управления и ввести промокод. *brainscloud* - плюс 1 месяц бесплатного хостинга *brainscoud2* - услуга "Ускоритель сайтов"

[@Сергей22-э4н]

Учусь на дизайнера...более углублённо изучаем верстку сайта с помощью фигмы. Добавили пары по HTML - сказали так, для поверхностного ознакомления, чтобы знали как это делается. Показали общие принципы (как изменить текст, вставить картинку). Затем преподаватель говорит - ах даа... ребята у нас экзамен через неделю...вы должны сделать сайт: минимум пять страниц, с адаптивной версткой, и всякими переходами и примочками. Дмитрий спасибо за видео! Очень сильно выручаете!

[@АндрейЧерников-г7ц]

Очень хороший канал. Я обучаюсь в онлайн школе и одновременно учу что то самостоятельно и много практикуюсь. Наткнулся на ваш канал недавно и очень рад. Некоторые вещи понял лучше у вас чем в школе. Больше видео по вёрстке.. успехов в развитии канала!

[@gennadiymedvedev214]

спасибо , Дмитрий , Вы -- лучший программист- педагог ,,, храни Вас Бог

[@Mykhailo_Vdovychenko]

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

[@akhmad_goytinski]

Спасибо Дмитрий! Всё грамотно и понятно объясняете!

[@progerlife6690]

досмотрел 2 часть, начал самостоятельно делать 3 часть верстки, в следующим ролике посмотрю верно ли я доделал)))Спасибо! Лайк без обсуждений!))))

[@lityuga]

Отличное изложение материала! Пересмотрел многих - но в голове больше всего осталось именно отсюда.

[@ivanzhelanov]

Как всегда профессионально, а главное понятно!)) Узнал что то новое для себя. Спасибо большое!

[@Видево-я5п]

Вижу урок от BrainsCloud - ставлю лайк.

[@time4769]

Лайк не глядя! хочу чтоб вы были моим преподом по программированию сайтов!

[@L.O.S-u7v]

Я тож учусь верстке спасибо вам за детальные видео уроки :)

[@elitech3339]

Спасибо за оперативность, уже смотрю

[@НискемкромеСовести]

Отличный ролик с отличным сайтом. Давно хотел попробовать сделать что то похожее.

[@m1akarov442]

Спасибо вам за 2 урок . Не забываем комментировать и лайкать =)

[@turalperfectworld1065]

Ходит слух что разработчики Google приглашают Дмитрия Валака на должность "ведущий разработчик", но он верен своим подписчикам.

[@elmira5244]

спасибо за видео! очень хорошо обьясняете

[@trayderonelove4167]

Можно же написать обнуляющий стиль и использовать его в каждом проекте ,чтобы не прописывать для кнопок и ссылок постоянно эти texd-decoration:none и тд. Вот отличный обнуляющий. *{padding: 0; margin: 0;border: 0;} *,*:before,*:after{ -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } :focus,:active{ outline: none; } a:focus,a:active{outline: none;} nav,footer,header,aside{ display: block } html,body{ height: 100%; width: 100% ; line-height: 1; font-size: 14px ; line-size: 100% ; font-size: 100%; ms-text-size-adjust: 100% ; moz-text-size-adjust: 100% ; webkit-text-size-adjust: 100% ; } input,buton,textarea{ font-family:itherit; } input::-ms-clear{display: none;} button{cursor: pointer;} button::-moz-focus-inner{padding: 0;border: 0} a, a:visited{text-decoration: none;} a:hover{text-decoration: none;} ul li{list-style:none;} img{vertical-align: top} h1,h2,h3,h4,h5,h6{font-size: inherit;font-weight: 400;}

[@morfulus160]

Не, ты топ, запомни, пойду смотреть первый урок, спс)

[@strifelifewb]

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

[@Mykhailo_Vdovychenko]

У кого проблема с SVG иконками - вместо лого компании отображается прямоугольник. Проблема связанна с отсутствием в системе шрифта "Font Awesome". Я просидел пол дня, но внятного решения не нашел (система у меня Win 10), может в слудующих уроках Дмитрий поможет решить данную проблему. На данный момент чтобы все красиво показывалось, то я вышел из того, что взял с .PSD макета сохранил картинки в .png и вставил их.

[@ВолодимирМартинюк-п2ь]

скачай fontAwesome на сайте fontawesome.ru/. Затем распакуйте архив и в папке FONTS установите fontawesome-webfont.ttf

[@alexlisouski4069]

@@ВолодимирМартинюк-п2ь что за папка fonts? в самом проекте или где ее искать?

[@ВолодимирМартинюк-п2ь]

@@alexlisouski4069 когда скачаеш шрифт с сайта то в архиве будет папка Fonts

[@alexlisouski4069]

@@ВолодимирМартинюк-п2ь спасибо, бро!!

[@АлексейСтупников-д4у]

Здравствуйте! Благодарю за видео!

[@DerAleksey]

Вот что я называю разжевать и по полочкам разложить =)

[@shifrl771]

Канал просто шикарный, однако верстать по блоком не очень удобно.

[@ИльяЛеонтьев-с4ю]

Это очень удобно кстa хочу скaзaть. Тaкaя вёрсткa мне очень понрaвилaсь.

[@Олег-з3с7г]

Блин, уже который раз задаю себе вопрос, почему ты не используешь теги или используешь очень редко. Допустим в этом видео на 12:30 ты профессию помещаешь прям в див. (нельзя ли тут использовать p или вообще спаны)? Если тебя не затруднит можешь пояснять в следующих выпусках этот момент. А так все круто, Спасибо тебе за твой труд!!

[@dipzera1025]

Я думаю это индивидуально, нравится , используй, нравятся дивы, без проблем верстай дивами.

[@whicencer8819]

38:13 хахаха, я тоже проверяю нужный ли это элемент нажимая на глазик))

[@Alex-hm3uk]

После этой серии уроков следующие можно в vscode и sass?

[@tanyamarushka7251]

Спасибо большое!

[@yomzfka]

Все клево понятно ))

[@Zahadym]

отличные уроки ! как то так

[@Андрейдазабей]

Отличный контент, красивая верстка, но кнопки одинаковы во всём шаблоне - не стоило ли их вынести в отдельный блок и позже вставлять там где нам это нужно. И ещё иконкам и фото мы не прописали ограничений в размерах, если вставлять изображения не из шаблона то вёрстка ползёт.

[@andryvoytsehovsky6591]

Здравствуйте, У меня небольшая проблема с этой версткой. Не отображаются иконки полностью, вместо значка квадратики. пробовал скачать svg иконки. Еще хуже. Как выйти из данной проблемы?

[@cornfed161]

Вам нужно скачать font awesome. Далее в папке fonts установить шрифт fontawesome-webfont.ttf после перезагрузите браузер и должно все заработать.

[@ВолодимирМартинюк-п2ь]

@@cornfed161 дякую, все запрацювало!

[@ГерасютенкоВалерия]

@@ВолодимирМартинюк-п2ь подскажите, пожалуйста, как именно вы это сделали? У меня что-то не получается(

[@ВолодимирМартинюк-п2ь]

@@ГерасютенкоВалерия вам нужно зайти на сайт fontawesome.ru/ и скачать архив со шрифтом. Затем распаковать и установить шрифт fontawesome-webfont.ttf. После этого перезагрузите браузер и все должно работать. Если не получится то пишите

[@xenm85]

@@cornfed161 для посетителей сайта тоже такую инструкцию писать?

[@ДаниилБалахнин-б4я]

Вопрос: При вставке картинки-свг отображены некорректно(просто прямоугольник цветной и внутри еще один) использую Adobe xd (в самом хд такие прямоугольники) Проблема в том, что у меня руки не из того места или надо что то докачать?

[@ibragimdaron4053]

у меня та же проблема

[@АлексейМогильный-п3с]

как решить эту проблему может кто подсказать?

[@ВолодимирМартинюк-п2ь]

Проблема в том, что не установлен шрифт font awesome. У меня тоже была такая проблема. После установки все заработало

[@ВолодимирМартинюк-п2ь]

@@ibragimdaron4053 Установите шрифт font awesome и все станет нормально

[@mariasana9]

@@ВолодимирМартинюк-п2ь не стало((

[@dennyluckes4783]

шикарно!

[@KuKu_RuKu88]

Спасибо, все хорошо !!! Подскажите, нет ли у Вас уроков по фотошоп или ХД ??? а лучше оба )))

[@BrainsCloud]

Есть обзор Xd на ютубе. Более подробные уроки по данным программам только в платном курсе по html и css

[@KuKu_RuKu88]

@@BrainsCloudСпасибо, нужно будет посмотреть

[@shurfly6961]

Хороший канал

[@Гражданин-в5с]

Отлично!

[@kosha9951]

Спасибо!)

[@slava_po]

Лучший!

[@maksimkoshmanpsy]

Всё супер, сверстал МоГо, посмотрел урок про Лесс, теперь смотрю эту серию уроков. Очень классно, но если с разбиением лесс файлов на блоке я смерился, то вот зачем усложнять жизнь ремами, я не понимаю.....

[@alexrosu3333]

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

[@БорисБаровский]

Шрифт для нормального отображения иконок можно скачать тут: github.com/beakerbrowser/beakerbrowser.com/blob/master/fonts/fontawesome-webfont.ttf просто устанавливаете шрифт и перезагружаете adobeXD

[@baton4iki]

Спасибо чел)

[@idgulaynx7709]

Благодарю

[@NeedForHeavyMetal]

Спасибо!

[@umalishonuy7977]

незнаю как, но у меня работает непрозрачность цвета без fade. Просто rgba(@gray, .3) ну или rgba(@black, .7)

[@carolbounce49]

У меня возник вопрос. Где-то на 1:50 вы убираете padding, объясняя это тем, что тогда полоска будет больше. Почему она должна стать больше? Просто я padding не убирала, и все вроде вышло.

[@jamshidkarimov1021]

font-size это fz в emmet

[@PavloShkura]

День добрый! Может кто-то знает, почему в Chrom не отображается формат svg.

[@sanadashiro8272]

Здравствуйте, у меня почему то картинка с социальной сетью сбоку текста а не в низу. С чем это может быть связано?

[@Даулет1111]

Почему иконки social не двигаютя через hover

[@FiremanTV]

Дмитрий, а ты сам как предпочитаешь делать заказы, на простом css или используя препроцессоры?

[@BrainsCloud]

Использую препроцессор sass

[@Sidorov_YT]

Можете прикрепить файл с символами🥺

[@vladimirsokirka9243]

подскажите как менять фон у svg который скачан сfontawesome, потому как метод по работе с загруженной с сайта библиотекой не помагает?

[@ЕгорИвашкин-ь3ь]

Мне нравится твоя тема в breckets,можешь мне поведать её название???

[@BrainsCloud]

Егор Ивашкин стандартная темная, в настройках она сразу есть

[@kekwww5051]

а убирать margin у последнего не актуально?)

[@ai-history21]

Привет, ссылка на макет есть?)

[@NeedForHeavyMetal]

нет, это тебе спасибо)

[@klassman6759]

А что за курс? Он платный?

[@Артемий-ф6н]

Почему в таком качестве?

[@morfulus160]

Когда видео только загружается оно в таком качестве через время появится нормальное

[@ПавелРендаренко]

У меня вместо кнопок социальных белые квадраты =( Ничего не помогло,Э ни перезапуски ни добавление новых шрифтов. КТо нить знает, как исправить?

[@BrainsCloud]

Там используются fontawesome иконки, надо скачать fontawesome шрифт

[@xenm85]

@@BrainsCloud Это не решение проблемы. Так всем посетителем сайта говорить? Есть нормальное решение или лучше не использовать svg?

[@spir1tfly]

​@@BrainsCloud Это не решение проблемы. Так всем посетителем сайта говорить? Есть нормальное решение или лучше не использовать svg? хелп

[@dipzera1025]

37:20, можно еще через селектор :last-child. :)

[@BrainsCloud]

Если вы про кнопки то нет

[@dipzera1025]

@@BrainsCloud Почему же?

[@dipzera1025]

@@BrainsCloud &:last-child { мэрджины }, тот же результат.

[@BrainsCloud]

@@dipzera1025 а если будет 3 кнопки? или последний элемент будет не кнопка? Получается топорно

[@dipzera1025]

BrainsCloud Да, вы правы. Спасибо что пояснили)

[@undefined9544]

Модификатор БЭМ вроде через 1 тире

[@BrainsCloud]

ru.bem.info/methodology/naming-convention/

[@foziljoneshmatov7769]

19:49

[@near5090]

А почему в ремах а не в пикселях вообще ?

[@BrainsCloud]

в пикселях уже два макета верстали. Хотя это не самый лучший макет для rem/em.

[@near5090]

@@BrainsCloud я хочу сказать чем же рем лучше пекселей

[@near5090]

Зачем вообще заморачиваться усложнять можно же просто в пикселях все писать ...?

[@BrainsCloud]

@@near5090 Пишите в пикселях. Или разберитесь в вопросе. Объяснять в комментариях - дело гиблое

[@berserk1331]

Зачем вообще нужны ремы, тратить время их высчитывать если есть пиксели??

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

+