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

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

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

50% 1

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

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

4 авг 2019

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

@kirillshevchenko7677 4 года назад

Ура, новые видео по верске, долго их ждал.

@MaraZzzMShow 4 года назад

Посмотрел предыдущий макет и зашел сюда. Голос отличный - дикторский. Отличные уроки, отличная подача информации. Спасибо за работу и помощь новичкам!

@turalperfectworld1065 4 года назад

То чувство когда ждёшь видео от BrainsCloud сильнее чем отпуск.

@justspartak 4 года назад

Аминь!

@Mr-in8km 4 года назад

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

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

Привет! Меня долго не было, но я никуда не пропал ) Кто соскучился ставит лайк на видео ;)

@karambinos 4 года назад

Горизонтальная линия, которая отвалилась - это подчеркивание слова "work" (но всё съехало, ибо слово contacts тоже съехало). Так показан активный или наведенный пункт меню по задумке автора. Надпись "hire me" - это кнопка, которая не является пунктом меню, поэтому выделена рамкой с закругленными краями.

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

@@karambinos спасибо за комментарий, я об этом позже подумал, но ничего страшного

@Mykhailo_Vdovychenko 4 года назад

С возвращением =)

@tasha6079 4 года назад

Не могу найти в psd макете модальные окна, их там нет?

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

Tasha видимо нет :(

@Spencerrrr 4 года назад

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

@KuKu_RuKu88 4 года назад

слов нет, одни эмоции.... Спссибо за подробные уроки ;))

@Dean-nh3ms 4 года назад

Наконец-то!!!) пасыба, жду продолжения! You are the best.

@urseke 4 года назад

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

@akhmad_goytinski 2 месяца назад

Спасибо Дмитрий! Отличные подробные уроки!

@Mykhailo_Vdovychenko 4 года назад

Крутая верстка! СПАСИБО! 40 мин урока пролетело незаметно! =)

@Artem-bt1cx 4 года назад

Хороший материал, в каждых последующих плейлистах по вёрстке есть новые инструменты по мере нарастания. Успехов в развитии канала!

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

Этот курс по верстке самый интересный. Давай в том же духе.

@noviceprogrammer8625 4 года назад

Не поверишь но я понимаю в одном твоем видео больше чем в других 1000 урок. Желаю удачи братан. Я с тобой 15000 подписчиков.

@beria_ 4 года назад

не ври

@alexeyn2793 4 года назад

Спасибо! Очень круто! Вот бы еще видос с формами.

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

Всегда крутые видео, спасибо большое!

@Greencraftstudio 4 года назад

Воу! Только закончил предыдущий. Просто супер

@jorgenUA 4 года назад

менюшка тегом не только для многоуровневости используется. Ещё для 1. скринридер будет добрее) 2. для натяжки на WP гораздо удобнее , кто-то не убъётся при "натяжке")

@elitech3339 4 года назад

Ток посмотрел твой урок, как всегда с чувством с толком с растоновкой

@muborizDev 4 года назад

Спасибо за видео , разобрался в некоторых тонкостях верстки.

@progerlife6690 4 года назад

Офигеть Димон спасибо!!! как раз практика Less! Thank you very much!! Лайк!

@thekamol 4 года назад

Круто! Продолжайте пожалуйста

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

Дима здоров будь. Начинаю третий учебный сайт с тобой. Давай пожалуйста не будем останавливаться на трех. Запиши еще одну многостраничную обучалку. Тебе респект.

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

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

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

Дмитрий, спасибо за урок!

@andreaswss 4 года назад

Бро, Спасибо огромное за твои видео Твой канал сделал мою самоизоляцию очень продуктивной)))

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

same XD

@den3381 4 года назад

Ты лучший в объяснении уроков)))

@igorgerald8294 4 года назад

Спасибо бротан, очень помог😊😊😊

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

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

@optimist6598 4 года назад

О отлино еще проект.Отлично))Лайк!!!

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

Ты просто нереально крут!!!!

@user-fn8yv4yl9v 4 года назад

Наконец новое видео)

@tmfouz 4 года назад

Хороший урок, много полезного

@andrey_ryzhko 4 года назад

Для удобства работы с ремами можно начальный размер шрифта задавать не 15 а 10 пикселей. Тогда легко переводить с пикселей в ремы, достаточно поделить на 10. К примеру 16px = 1,6rem. Не нужно постоянно калькулятор дергать

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

Кстати да

@ikadill5921 4 года назад

Спасибо за подсказку) Имею странную привычку, читать комменты, а только потом приступать к уроку. Сразу сделала по Вашему совету.

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

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

@andreev.frontend 4 года назад

Дим, привет! Спасибо за твой контент!) бальзам для ушей и глаз!) По поводу nav ты, по-моему, немного ошибся. Очень похоже, что полоска это эффект hover, а hire me, это кнопка с выводом на форму) тогда и contacts оказывается не лишним) А в подтверждение моих слов - презентация макета на behance)

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

Хелоу. Да я уже понял ) исправим.

@user-ce8dt3og5z Год назад

@@BrainsCloud Привет Дима хочу научиться программировать Вёрстку сайта с Нуля мне нужен программист для учёбы в программирование я новичок

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

Отличный урок!) спасибо. Единственное, не очень понимаю, зачем ты использовал значение 1Rem = 15px, и потом тратил время с калькулятором при переводе px в rem. Можно вполне было задать 1rem = 10px и это было бы в разы понятнее и быстрее в переводе значений)

@natanrock4358 4 года назад

еееее!!!!Здорово!!!

@GavoshA 4 года назад

я даже не заметил эти 45 минут. жду продолжения

@7lipa7 3 года назад

Полоска слева - это активное меню "work", а "contacts" съехали вниз. Hire me - это кнопка - призыв к действию.

@alexlisouski4069 4 года назад

Отлично! Есть чем заняться

@deniskyoto4515 4 года назад

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

@alexanderfilippovich4757 4 года назад

здравствуйте. Не подскажите, выключил файл, включил заново и файл less не компилируется теперь в css

@user-bt4vn1oc4o 4 года назад

Дмитрий, объясни пожалуйста rem и em

@user-qv2cm2qo5j 4 года назад

Спасибо большое за подробные объяснения. Но у меня возникло несколько трудностей с добавлением фона (и картинки и заливки). Не работает и все. Поэтому не знаю есть ли смысл дальше продолжать?

@user-ko7yn7wg6i 4 года назад

Привет Дмитрий, спасибо за уроки. Я занимаюсь вёрсткой, и мы сначала создаём общий контейнер а потом делим его на блоки. У тебя я заметил другой подход, ты берешь блок и внутри него создаёшь контейнер. Объясни пожалуйста в чем смысл такого подхода и насколько такое решение лучше ?

@RosarioPorello 4 года назад

Хотелось бы так же увидеть курсы по JS . За оплату конечно , что бы ваш труд не был в пустую

@farhadsamadov3598 4 года назад

Согласен!

@MaximLisyanskiy 4 года назад

Reserious учи основы, чтобы прям от зубок знания были. Потому что js, как верстку не достаточно посмотреть и повторить.

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

@@zMxxxxxxxxxx просто повторяй из видео по JS на собедеседование потом покажешь что сделал,и тогда возьмут на работу JS разработчиком

@user-vl4kv5pg2g 4 года назад

Отлично!

@fromvytvytska 4 года назад

Классссс, супер, пупер

@user-um1nq1ib6b 4 года назад

Привет. Ты вроде всё круто быстро верстаешь, но вот в ручную считаешь перевод пикселей в rem. Может проще написать один миксин который будет конвертировать px в rem? Тогда 16px по стандарту можно будет оставить и время не тратить на расчёты.

@user-ox8tf7fy8f 4 года назад

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

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

Дмитрий, можете ли вы скинуть ссылку да и вставить шрифт FontAwesome в описании. После установки с офф. сайта, шрифты всё равно не подгружают в макете( Adobe XD ).

@user-tv6mw8dl5p Год назад

Super! 👍

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

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

@dsim2632 4 года назад

Так же, при открытии макета через фотошоп, нету макетов модльных окон, только шаблон сайта. Они есть только при открытии в Адоб ХД ?

@user-ig5en5eh7d 4 года назад

Спасибо!

@madales832 4 года назад

Класс!

@Alex-nu5pw 4 года назад

Супер!!!!!!!!!!!!!!

@user-dl2kw2ef5k 4 года назад

спасибо за видео

@gvitoss 4 года назад

Привет. Слушай, у меня брекетс грузит ЦП почти на сто процентов постоянно. Процесс node.exe/ это так и должно быть? Или Они решили майнить на нас, не пойму)

@Drake67666467464564 4 года назад

42:17 это не декоративная линия, а подчеркивание при наведении на элемент меню, последний элемент меню это кнопка

@khamzagal7928 4 года назад

пиздец он нахуевертил

@ohwooow1223 4 года назад

это домашка была))

@tarashrunyk9491 4 года назад

Привіт! Я стажувався в одній невеликій компанії і мені там сказали що встановлювати будь які стилі для body непотрібно.....чи це так ? І ще одне питання: чому в тебе елементи меню розтягнулись на цілу висоту ?

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

Дмитрий, у меня Brackets пишет что поддержка Adobe закончена, т.е. теперь нужно переходить в VSCODE?

@dimitru1776 4 года назад

А подскажите пожалуйста, как исправить то что у меня в Less файле (VS code) не предлагает подсказки с названиями классов и приходится прописывать их вручную, а также альтернативу "LESSHints"

@ShadowBRN 4 года назад

Дим, привет. Спасибо за хороший контент. Но подскажи пожалуйста, ты используешь параметр justify-content, он не поддерживается браузером ie вообще любой версии да и не только им. Подскажи чем его можно заменить

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

Привет. Вот ответ: stackoverflow.com/questions/17695865/why-does-display-ms-flex-ms-justify-content-center-not-work-in-ie10

@ShadowBRN 4 года назад

Дима, большое спасибо!

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

Здравствуйте ! А что за &:hover ? Это потому что в less ? А то браузер и VSCode ругаются, мол, нет такого.

@iDobroslavin 4 года назад

Можешь добавить в окончания видео ссылки на "предыдущий" - "следующий" урок?

@na_depressah 4 года назад

Странно, все делаю по видео, max-width поставил 1200 и пэдинги 1рем, но размер 1200 а не 1170, почему так?

@elitech3339 4 года назад

Даааааа, только думал об этом и вот !! ( я про LESS)

@Alekseypravda 4 года назад

У меня не генерируется новый файл .less, когда я пишу тот же style.less, не появляется файл style.css. Причем что сначала появлялся, но когда я начал заново писать то все. Подскажите

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

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

@dsim2632 4 года назад

Привет. Не пойму что делаю не так. У меня Саблайм 3, при сохранении less файла формируется css, хотя указана настройка // main: ../style.less .Что может быть не так ?

@romaroman8204 4 года назад

Мне кажется елементам меню при ховере просто полоска снизу добавлялась, у вас просто макет слегка не правильно отобразился

@andreyzaharov2784 4 года назад

Привет, у меня возникла проблема Я пытаюсь less код скомпилировать в css и в браузере видеть все изменения, которые я провожу с less файлами БЭМ-блоков моей верстки. Однако если я делаю изменения непосредственно в style.less - все изменения видны и в браузере и style.css.Но если я произвожу изменения в любом другом less документе - ничего не меняется. Код не сразу компилирует в css после изменения в less, решаю эту проблему тем, что просто прокликиваю файлы style.less и style.css Редактор кода Brackets Есть варианты как решить эту проблему?

@sevakvart1111 4 года назад

Отличные уроки, по JS что-нибудь намечается?

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

Привет, а подскажите, зачем контейнеру давать width 100%? Ведь max-width предотвращает использование width. А урок клевый! Голос пушка!)

@KepObvious 4 года назад

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

@limeya4099 4 года назад

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

@Aslankz1983 4 года назад

где взять полноценный шаблон с фото? Тот что в ссылке весь урезанный...

@user-uw1yc7fi9u 4 года назад

Доброе время суток. К сожалению Файл png не полный. Нет модального окна и полностью отсутствует вторая половина. Использовать Adobe XВ к сожалению пока не могу

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

Я не смотрел урок по less, но меня одного смущает то, что он ведь прямая копия css, только с переменами, в sass, там вообще удобней кодить и он многом отличается от css.

@martinpokrovski9212 4 года назад

спасибо

@inspirostudio 4 года назад

Спасибо большое за канал! Узнаю много полезных деталей здесь! Почему-то импортируемые less файлы компилируются только после сохранения style.less. Т е каждый раз изменив что-н в подключаемом файле, надо сохранить style.less. В чем может быть причина?

@inspirostudio 4 года назад

Если кому пригодится, проблема решилась изменением настройки less2css: "main_file": "style.less"

@katerynaburakowa4709 4 года назад

@@inspirostudio Большое спасибо! Та же проблема была в Sublime text 3.

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

Пушка

@iDobroslavin 4 года назад

Привет. Почему паддинги не используешь в таком формате: padding: 0 1rem? Не слишком ли много делений на блоки .less? Я вот с ремами так и не подружился, так и остался на px.

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

Чтобы с ремами было проще, делайте 1rem = 10px и не придется высчитывать. Когда начал записывать курс об этом не подумал, но спасибо зрителям.

@iDobroslavin 4 года назад

@@BrainsCloud Не увидел плюсов в переходе на ремы, которые появились так давно, что.. Только что зашёл на сайты Asus, Microsoft, Nvidia - везде пиксели используются.

@ukrainianghost6680 4 года назад

BrainsCloud привет) у меня проблема с &: hover - & подчеркивается, hover отображается как обычный текст

@skymonn 4 года назад

Хорошо

@user-gj5oh4sn3w 4 года назад

У меня почему-то отсутствует шрифт FontAwesome, хотя я его установил с оф сайта

@grandfridel759 4 года назад

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

@user-rt4pn7xt4e 4 года назад

Вопрос: Есть ли какой нибудь плагин в brackets который автоматически переводит px в rem ? А то постоянно калькулятором пользоваться не совсем удобно )

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

Сделай 1rem = 10px, тогда удобней считать

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

Privet! Spasiba za ochen poleznuyu uroku. Izuchal ochen mnoga. Xochu sprosit, moy XD ne mog otkrit social icons. Shto nada delat shtob otkrit icons? Spasibo za rane. U menye netu russian keyboard poetomu napishu english letters.

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

Лайк неглядя)

@youtuberelaxvideo 4 года назад

ОГОНЬ

@alexeychernov3902 4 года назад

Добрый день. Скажите пожалуйста, почему user__prof и user__name не вкладывается во внутрь user__content в less файле? Спасибо.

@alexlisouski4069 4 года назад

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

@yurisamarin8200 4 года назад

Аффтар канешн красавчег... но я пока поверстаю на html css без js j-query и других еще мне не понятных вещей...Через месяц может дорасту до этого макета))но лайк сразу!

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

Как успехи спустя год?

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

@@user-qm1cw5eo6v немного получил вёрстку... Из jQuery слайдер. С джаваскрипта клацанье на кнопку чтобы Гамбургер меню открыть. А так в основном работал в конторе рекламной делал сошейл. На Афтар еффектс. И сайты на елементоре.. а у тебя?

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

@@user-qm1cw5eo6v мой канал number one creative там мой рост можно наблюдать

@AkciaInterestingSite 4 года назад

Макет есть, но скачать невозможно, при нажатии FREE DOWNLOAD пишет "Too many requests". Помогите кто нибудь с ссылкой, может кого есть на облаке?

@Mykhailo_Vdovychenko 4 года назад

Может кому поможет: Установил на Win 10 Adobe XD - при запуске выскакивало белое окно и закрывалось, без каких либо ошибок или сообщений. Помогла просто перезагрузка ПК и Adobe XD начал нормально запускаться.

@ildarfatakhov8254 4 года назад

А как макет скачать то ?Куда жмакать?

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

Привет, Дима!) В тестовых заданиях написано одно из требований - Retina Support. У тебя есть на канале что-то про такие картинки? И что вообще надо делать и как правильно делать, если такие требования для макета?=)) не очень понятный момент( спасибо за ответ! пс - верстать уже умею более-менее, но все равно видео твои лучшие!!!

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

Привет! Надо растровую графику подготовить х2 размера, чтобы на ретине она не была мыльной и где есть возможность использовать векторные изображения вместо растровых. Насколько помню видео на эту тему я не записывал, возможно какой-то момент был в видео по тегу picture.

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

@@BrainsCloud спасибо!

@user-ce8dt3og5z Год назад

@@marynakosiv3750 привет Марина можешь меня научить программировать Вёрстку Сайта с нуля пожалуйста я новичок хочу программировать научиться