#4 Верстка сайта с нуля для начинающих | HTML, CSS

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

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

50% 1

В этом видео продолжаем верстать сайт с нуля и практиковать верстку сайтов используя только HTML и CSS!
------------------------------------------------
Основы HTML и CSS для начинающих: brainscloud.ru/landing/html-css
Верстка сайта транспортной компании: brainscloud.ru/landing/logist...
Файлы урока: files.brainscloud.ru/file/mog...
Главы видео:
00:00 - Начинаем верстать
06:00 - Верстаем блок с аккордеоном
16:50 - Состояния аккордеона
22:00 - Верстаем блок отзывов
------------------------------------------------
Меня зовут Дмитрий Валак. Я занимаюсь разработкой сайтов уже много лет, специализируюсь больше на front-end разработке и верстке сайтов, но и программирование тоже изучаю. Здесь буду делиться с вами информацией на разные темы по веб-разработке - HTML, CSS, Javascript, JQuery, Vue, PHP, MySQL, React, Gulp и тд.
На сайте проекта brainscloud.ru вы найдете много полезных закрытых материалов, а так же сможете поработать со мной лично, при наличии такого желания.
------------------------------------------------
Мой ВК - odimaz
Группа BC - brainscloud
Мой Instagram: / dmitryvalak
#верстка #версткасайта #html #css #css3

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

11 июн 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

@BrainsCloud 5 лет назад

"00:30" - Начинаем верстать "06:00" - Верстаем блок с аккордеоном "16:50" - Состояния аккордеона "22:00" - Верстаем блок отзывов

@5051SQUAGAMING 3 года назад

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

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

@@5051SQUAGAMING просмотри внимательно html и названия классов, возможно где-то слетают селекторы

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

"робото" я тоже подключал

@boriskinev 5 лет назад

Спасибо за отличные уроки, Дмитрий! Вы наверняка это знаете, пишу для новичков: плагин "Emmet" умеет вставлять текст "Lorem Ipsum". Если прописать в нужном месте: "lorem12" и нажать клавишу "Tab" на клавиатуре, появится текст, начинающийся с "Lorem ipsum..." - 12 слов (цифра означает количество слов)... Если написать "loremru20"" и "Tab" - будет написано 20 слов на русском языке. Если написать только одно слово "lorem" (без цифр)" и "Tab", то получим 30 слов текста латиницей. А конструкция "p*3>lorem17" и "Tab" - пропишет три параграфа по 17 слов каждый... Желаю успеха всем верстальщикам и программистам ))))

@mr.predator8208 4 года назад

Спасибо большое! Как новичку в верстке - очень полезная инфа!

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

@Zigtelus нужно установить плагин Emmet. Посмотри видео по поводу плагинов дял Sublime Text на канале Web Developer Blog или на этом канале (емсли такой ролик имеется)

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

@Zigtelus установи Emmet и напиши в коде ---- .wego и нажми на Tab

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

@Zigtelus а как вы определили, что изучили? как понять, что уже пора js учить?

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

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

@Zahadym 5 лет назад

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

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

Нет времени на раскачку ©))

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

Чудесная верстка, одно удовольствие верстать по Вашим урокам!

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

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

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

Очень крутые уроки !!! Примеры профессиональной верстки с подробными объяснениями - редкость....

@maramanshow2942 5 лет назад

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

@bulba1995 9 месяцев назад

Я вам признателен за ваши уроки .

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

Супер контент! Смотрел после этого видео про БЭМ методологию, а тут оказывается уже к 4 уроку почти все оттуда изложено и реализовано сразу на понятных примерах

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

Супер, чем больше смотрю, тем больше поражаюсь как у вас Дмитрий всё легко и просто получается! Спасибо вам огромное за такой материал!

@PChelper39ru 5 лет назад

Чувааак, ты просто Бог!) я после border'ов со стрелками, с ума сошел от твоего видео! они настолько крутые!

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

Дмитрий, спасибо. Я вам безмерно благодарен за эту серию видеоуроков. Вы прекрасный специалист и мы (зрители-новички в вёрстке) мечтаем быть похожими на вас. Ваш труд характеризуется русской поговоркой "дело мастера боится". Удачи вам во всех начинаниях и побольше отдыха от работы 🔥

@chesterbennington7574 5 лет назад

Покажите как верстать интернет магазины ))) было бы очень полезно. Благодарю..за уроки, очень познавательно

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

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

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

Спасибо за очередной урок! Все как всегда круто!

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

Учусь по вашему видео в 2021. Спасибо за полезный контент!

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

Спасибо огромное за урок!!! Со стрелками помучался здорово :))

@user-ms7jg1sq4o 5 лет назад

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

@Mykhailo_Vdovychenko 5 лет назад

Спасибо большое Вам, Дмитрий, за такой огромный труд! Успехов во всех начинаиях и счастья Вам и близким =)

@BrainsCloud 5 лет назад

Спасибо!

@lolololco911 5 лет назад

большое спасибо за уроки.

@MrZorg23 5 лет назад

Очень благодарен за работу!

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

Отличная практика,, очень доволен, Спасибо автору!

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

Огромное спасибо, никуда не торопимся потихонечку верстаем)

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

Автор просто гений своего дела спасибо за столь крутой контент!

@maxivanov5845 Год назад

Отличное видео, большое спасибо за вашу работу

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

Этот парень вдохновляет:)

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

10Q ! Идём дальше... Дмитрий, тебе спасибо, за то что тратишь время на всех нас=)

@Sun2rw Год назад

Привет. Спасибо за курс. Просмотрел и всё повторил. Всё было очень круто. Лайк, подписка, однозначно.

@alexeyrakul123 5 лет назад

Cпасибо за уроки!

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

Проделал Видео #4, Дмитрий спасибо. Когда пишу код чтоб лучше разбираться что и как происходит даю элементам разноцветные outline 1px - так удобнее.

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

Хах, для rotate стрелок reviews мне понадобились противоположные значения : prev(-135deg), next(45deg). Забавно :) В остальном всё повторил, всё работает :) Спасибо огромное, дорогой Дмитрий! Вы для нас как друг уже, а не просто голос из ютуба)

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

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

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

Отличные уроки, за 4 урока с 0 я уже что-то понимаю и делаю иногда даже сам. Единственное, что меня смущает - это некоторые названия классов по характеристике объекта, а не по по объекту, как например: section--gray правильнее назвать section--feedback если цвет фона станет синим, то класс section--gray будет выглядеть странно

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

это модификатор по БЭМ (гугл в помощь, либо уроки платные есть у Дмитрия). И его обзывают именно отвечая на вопрос, что он делает. (если я правильно всё понял )))

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

Thanks man.This video the best!

@belouale Год назад

Перевёрнутые бордеры это мощно конечно)

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

я обычно вырезаю картинки так: создаю дубликат нужного слоя/слоев в новый документ фотошопа, вырезаю нужную область инструментом рамка, затем правой кнопкой нажимаю на слой (папку слоев) -- быстрый экспорт в png

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

Спасибо большое за бесплатные курсы по вёрстке! На каникулах перед сессией решил заняться чем-то. С первых уроков было трудно воспринимать некоторые css-стили (flexы, position, display), загуглил несколько статей и стал по не многу понимать. Еще понял, что с моим монитором 4x3 я так далеко не зайду. В блоке about us (второй слайд) картинки чуть ли за края не выходят. Придётся покупать нормальный FullHD моник, зато будет 2)

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

Спасибо большое! Очень полезно

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

спасибо за ваше старание

@Spencerrrr 5 лет назад

Пока мы проходим уже 12к подписоты, мужик ты в правильном направлении пили дальше! С П А С И Б О !

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

Увлекательно!

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

Очень хорошо!

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

Ставлю лайк Пишу комент! Офигенный контент!

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

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

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

Спасибо большое :))

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

Класс!

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

хорошее видио. Благодарю.

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

На 33:05 я понял почему не видно было стрелки сразу, пока их left-ом right-ом по бокам не раскидали, они позиционированы были за картинкой, которой прописывали до этого z-index 1 и у батанов z-index 1. Я проверял - батанам z-index 2 прописал и их видно стало поверх картинки. По ходу если z-index-ы одинаковые, то CSS приоритет даёт тому селектору, который раньше прописан был, то есть селектору с картинкой. Спасибо Дмитрий огромное за уроки, пока верстаю MoGo потихоньку, до этого сверстал почти весь ActiveBox - самый последний блочек - низ футера не сделал (не помню почему:))). Как оба макета полностью сверстаю, пройдусь по ним ещё несколько раз и приобрету у вас курс вёрстки транспортной компании, пока мне рановато до него. Уроки у Вас просто отличные.

@niggative3331 Год назад

Отличные уроки! Я только для .accordion_content добавил: max-height: 180px; overflow-y: auto; чтобы появился скролл.

@EnglishWithRinat Год назад

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

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

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

@PiterProduction Год назад

Спасибо))

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

Вот косяк за стрелочки( а так все на высоте!

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

4:33 можно там где выбор слоев "'Layer1" нажать правой кнопкой мыши на пустое место самой кнопки слоя -> "Быстрый экспорт в PNG"

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

Блин... Очень нравится. Верстаю щас, и кайф получаю. Это не так уж и сложно, а методология БЭМ все упрощает. Спасибо за возможность практики!

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

а в чем вы верстаете?

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

@@alenushkaskaska хм? Ну, как в чем, вс код, конечно. Хотя, я уже не верстаю, ибо вёрстка не мое, просто, не нравится.

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

33:00 Я так наугад весь сайт написал)

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

Из 1 млн 50к дошло до 3 урока

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

Только самые способные ;

@user-lq9yu7gr1n 5 лет назад

Спасибо.

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

Спс за уроки.Что бы не париться с картинками - ищешь слой, выбираешь его ,нажимаешь правой кнопкой быстрый экспорт в png

@aliona09 Год назад

спасибо ))

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

как отрисовать полосы прокрутки (думаю, что через псевдоэлементы) и чтобы блоки аккордеона не опускались ниже фото как на макете - будет показано в след. уроках когда js будем привинчивать?

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

Добрый день, у меня такой вопрос, почему то когда я начинаю двигать картинку на 13:34 она позиционируется относительно всего сайта, а не второго блока we do item, подскажите пожалуйста если кто встречался с этим

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

Спасибо

@user-bb6fc7hp3j 5 лет назад

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

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

Я сколько не бился - не удается в фотошопе отправить на экспорт слои, нет такой опции. Может, версия это не предусматривает, может я чего-то не понимаю...

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

@AntiCat Спасибо)

@realmadrid-ji9bd 3 года назад

@@user-jy7me1qw2g В adobe XD с такими вещами очень удобно работать)

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

Готово! спасибо, отличное видео.

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

Когда нажимаешь Ctrl+Alt+Shift+S то в следующем окне вверху с лева есть вкладки Original Optimized 2-Up 4-Up Может необходимо выбрать вкладку Original ?

@YuliiaJV 5 лет назад

СпасибО!

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

У меня стрелка для "prev" развернулась в нужном направлении только при 220deg.. с вашим значением она смотрела в другую сторону..

@user-gl9lm2zn8l 6 месяцев назад

👍👍👍

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

лайк

@denisabdullabekov9194 5 лет назад

Все супер! Жаль только, что аккордеон не совсем по шаблону сверстали. В совокупности, все три элемента аккордеона, с учетом одного раскрытого, должны по высоте занимать 380px. Элемент с текстом должен быть с прокруткой. Хотя, возможно, это не задача css.

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

достойно

@Gilyaeff 5 лет назад

Полезный курс, спасибо большое . Но такои вопрос с JS по поводу /* Collapse */ не подскажете как сделать 4то бы при клике на другой пункт предыдущий скрывался. А то они все открытые стоят и каждый закрывать вручную нужно

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

Подскажите пожалуйста как фото и аккордеон выровнять по нижней границе? Акоордеон вылазит вниз немного

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

34:00 можете объяснить, а зачем нужен after, в смысле именно не что это, а зачем стрелки в него, я просто новичок, но я с .reviews_bth:after все переместил в .reviews_bth, в кучу, ничего не изменилось , все также работает .reviews_btn{ position: absolute; z-index: 1; transform: translateY(-50%); top: 50%; font-size: 0; color: transparent; display: block; width: 15px; height: 15px; border-top: 3px solid #ccc; border-left: 3px solid #ccc; }

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

Видела, как раздел с отзывами также оформляют с помощью тегов blockquote и cite

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

22:36 а я увидел))))))))

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

Добрый день, блок we do разве нельзя было сделать выпадающим меню ?

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

а будет java script? а то просто хотелось бы насытить его движениями ты просто хорошо обьясняешь, а то на ютубе только как функции и переменные создавать научат и все

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

никак не могу понять момент с выравниванием по центру, где top: 50% и translateY(-50%). от чего высчитываются вторые 50% и почему именно при таких значениях блок оказывается по центру? казалось бы, мы опускаем на 50% сверху и тут же возвращаем 50% назад вверх по Y?

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

Дмитрий! Можно ли выравнивать иконки не с помощью position: absolute/reletive , а с помощью flexbox? Как правильней?

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

зависит от дизайна

@user-kj4db2mz2s 5 лет назад

Привет, хочу мнения узнать Как ты относишься к вёрстке на bootstrap 4 ?

@BrainsCloud 5 лет назад

Ничего не имею против данного инструмента

@user-ms7jg1sq4o 5 лет назад

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

@BrainsCloud 5 лет назад

Что-то проглядели, смотрите внимательно

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

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

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

Скажите зачем автор когда применяет Position указывает Z-index хотя он в больших случаях не нужен ? Или за этим есть что-то чего я не понимаю

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

На какой версии photoshop вы работаете?

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

Дим, а при верстке h3 ты вставляешь до h2 - это на seo как то негативно влияет?

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

Можете поменять теги местами

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

Когда в .reviews__Btn прописываю top: 50%; - стрелки улетают аж на интро, в чем может быть проблема? Без этой строки все работает. Но они соответственно не по центру.

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

Пропиши для класса .reviews position: relative; . Тогда кнопки reviews__Btn будут центроваться по вертикали относительно блока reviews.

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

like:)

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

Чем отличается модификатор(".section section--grey") от двух классов(".section.grey")?

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

прошу прощение, но вы могли сделать где аккордион hover))))

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

а как же стилизация скролла в аккордеоне? Так ее ждал, а ее не было.

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

Привет из 2021

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

В помощь. Если нужна картинка, можно нажать на нужном слое правой кнопкой и Convert to Smart Object. Зачем каждый раз вырезать все эти объекты если есть такая возможность

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

привет брэйн !!!!!!! я не могу найти где скачать фотошоп cc снимай видосик или подскажи откуда скачать пожалуйста я скачал какую та фотошоп но там жоско логает

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

А нельзя вырезать картинки, а потом просто для них в css прописывать высоту и ширину, вроде же будет тогда точно как в шаблоне?

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

А не лучше узнать способы например для создания стрелки, и т.д. Лучше знать больше, чем вырезать каждое фото. Можно вырезать всю страницу в фш и вставить на сайт, и что дальше?

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

@@lawhooper причём тут это, вы видимо не поняли о чем идёт речь. Речь идёт о том что при вырезании картинки уменьшается её масштаб - в фотошопе , вот я и задался таким вопросом

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

не получилось с последними стрелками .(текст prev и next не исчезает и стрелки не появляются)

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

Интересно, зачем все иконки позиционировать абсолютно? Можно просто флекс делать и выравнивать по вертикали, просто же, что бы сделать стрелочки, берем библиотеку font Awesome и используем каррент (current) вроде , изи профит, при открытии аккордеона , закрываем все остальные циклом for и можно для красоты стрелку разворачивать трансформом rotate вешая класс на item active , а вообще красивый аккордеон, надо сверстать его, высоту контента как я привык берем из текста и даем Макс высоту при открытии, дабы не прописывать рандомные значения, текст все равно может быть любого количества и высоты, и все будет красиво работать с транзишеном

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

22:35 section--gay ахапфпфпхпа

@Andre-mp4ii 4 года назад

ha-ha

@maxon17 5 лет назад

Не очень понимаю, 13:35 зачем при выравнивании нужны эти top 50% и translate 50%? Можете объяснить?

@BrainsCloud 5 лет назад

Один из способ центрирования блока по X,Y осям

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

Дмитрий подскажи пожалуйста прописываю но не появляется картинка заданных размеров. Что я делаю не так?

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

Знаешь что лежит в src? Попробуй эту ссылку, открыть в браузере, если открывается, то все работает, если нет, то она и не откроется у тебя в теге. Дам подсказку, ищи ошибку в последних 7 символов ссылки