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

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

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

50% 1

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

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

21 май 2019

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

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

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

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

А это нормально, что из-за margin: 0 -15px справа белая полоса при просмотре с мобильного? Из-за чего так?

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

Дмитрий, не хотели бы Вы снять видео про разные платформы для веб-разработки? Заметил, что иногда у Вас в видео MacOs, а иногда Windows. Так вот, может расскажете, где и что удобнее на Ваш взгляд, стоит ли веб-разработчику переходить на Мак и т.д.?

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

@@andrewlincoln9208 ОС не имеет значения, скачал WebStorm и пишешь, для вёрстки вообще ничего не нужно кроме пары прог, которые есть на всех ОС

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

@@user-qy9yi1kc3r в html порядок блоков или в css flex order

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

Не знаю как для кого, а для меня после стольких часов этот голос стал как родной)

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

за работу с SVG огромное спасибо

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

Поддерживаю. Давно искал, но так и не мог найти доступную для простого понимания инфу

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

"Если вам понравилось видео" ))) рассмешил! тут без вариантов! так доступно и понятно, это просто клад какой-то! Спасибо тебе!

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

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

@AkciaInterestingSite 5 лет назад

Все на высоте! Большое спасибо за уроки!

@Techniker357 5 лет назад

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

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

Дмитрий, спасибо! Больше таких видео!!!

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

Дмитрий вы молодчина, очень практичные уроки, после них не надо ни на какие курсы ходить, мне очень понравились спрайты, 5+

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

спасибо Вам большое! такого объяснения нигде не найти. Роста этому каналу. Однозначно подписка и лайк)))

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

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

@_Fantom_. 4 года назад

Оригинальный подход, спасибо, очень познавательно...

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

Спасибо, очень понравилось, хорошая подача и подробные объяснения очень помогают в усвоении материала.

@niggative3331 Год назад

Спасибо за такие уроки! Разбор со спрайтами - огонь!

@GK-tc3tw 4 года назад

Спасибо вам огромное!С вами учусь верстать!У вас очень приятный голос 😉

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

Большое спасибо! Замечательный урок!

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

Полезные уроки для новичков, спасибо большое ✊

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

Большое спасибо, с svg было особенно познавательно!

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

У вас такой приятный голос!!! Спасибо все очень понятно даже начитающим.

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

Лучший преподаватель, спасибо за время 😊 Я учусь постепенно, рад что всё понимаю на практике. Лайк поставил ❤️

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

Все еще не перестаю удивлятся что с этими видео я понимаю, что я делаю :) Прекрасное видео!

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

🌟🌟🌟🌟🌟 *Спасибо за очень полезный и понятный урок!!!* 🌟🌟🌟🌟🌟

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

Очень круто, спасибо большое! Твои видео - это самая лучшая верстка на youtube! Svg спрайты вообще пушка) Буду покупать верстку транспортной компании. Реально, лучшие примеры качественной верстки.

@Burovasofia Год назад

спасибо за еще один прекрасный урок!!!

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

Очередное качественное видео, спасибо. Кто-то пожадничал и не закинул в архив картинки "twitter" и "linkedin" :-)

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

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

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

спасибо за отличные уроки!

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

Спасибо ещё раз! более, чем информативно! За SVG! Открыл для себя! Думаю, хоть-бы Дмитрий выбрал reviews, вместо testimonials и о-чудо! А ещё цвет кода - улыбнуло :)

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

Вообще крутейший урок! Особенно порадовал гайд по использованию SVG. До этого момента думал что лучше способа чем FontAwesome нет, но таки ошибался. SVG - топчик. Спасибо, Дмитрий. Ваши уроки - лучшие. Добра и успехов Вам =)

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

Самый лучший контент на эту тему! Снимаю шляпу.

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

Как всегда отличный ролик.

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

Все получается. Все супер. Спасибо!

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

ну как -то так ) я все заверстала) спасибо большое за видео , после верстки мого все понятно и просто )

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

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

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

Отличные уроки! Я вам очень благодарна за труд! Все предельно понятно (даже для скрипучих), обьясняются даже мелочи. Лучшие уроки, которые можно было найти. Успехов и развития вам!

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

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

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

Код цвета, цвет кода не баг, а фичей стало) Фишка с SVG это бомба! На курсах учили в фотошопе все совмещать, смотреть на высоту, сравнивать пиксели и т.д и т.п., а тут бац бац, Работает! Легко и гениально! Спс за видос.

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

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

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

недостаток - иногда не использует семантические теги, например, тег blockquote для отзывов и еще местами....

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

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

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

Спасибо. Познавательно очень

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

Смотрю тебя в 2021 году. Не знаю на сколько устаревшая информация, но точно могу сказать, что преподносишь информацию, ты круто Лайк однозначно, успехов тебе, как человеку и твоему каналу!!!

@PalyufishkuRuSite 5 лет назад

Фишка со спрайтами супер, спасибо! ))

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

только хлопотно больно... из за какой то мелочи

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

@@dinir1000 когда первый раз увидел как это делается, тоже так подумал. А сейчас проделав данную процедуру раз 20-ть уже вообще не паришься, делается быстро, так что это наверное дело привычки.

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

@@default2199 можно же сниппеты сделать (в VS Code или Sublim`e, например) и уже после быстрого вызова просто втыкать туда необходимые данные

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

@@user-xr7pl9hg7g Спрайты уже неактуальны. Я делал это вручную, чтобы запомнить на мышечном уровне как их делать.

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

@@default2199 А что тогда актуально? Подскажи, куда глядеть?

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

Лучший урок.Нет слов тупо и по БЭМУ все хорошо лайк

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

с отрицательным margin удивил, хороший урок

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

Спасибо за годный контент!!!

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

Спасибо тебе ты мне очень помог .С шапкой и вообще сверсткой

@Kristina-zn3co 3 года назад

Круто! Круто! Спасибо!

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

Вот какие видео нужно в топ выводить, а не эти пранки. Спасибо видел топчик💪🙂

@likavk9458 Год назад

Замечательный курс! Все ясно и понятно! Спасибо большое! И флексы и слайдер... Одно НО - очень мешали направляющие в макете и в Фигме все гораздо удобнее и быстрее. Даже стили прописаны) Но это так, ложка дегтя, равная 20% из 100%))) Спасибо!

@elitech3339 5 лет назад

прикольно было бы сделать дз. Например если вы бы могли кинуть тоже какой-то макет и дать нам время над ним поработать а потом сделать его разбор)

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

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

@_Fantom_. 4 года назад

Изначально так и сделал...

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

лучший мужчина мира, я считаю!

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

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

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

Зарегался на Вашем сайте htmlbase.ru Более доступного и разжёванного материала ещё не находил на просторах I-net'а!!! Советую всем! А Вам процветания и СПАСИБО за такую работу!!!

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

Отличная обучалка good

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

пушка бомба спасибо доступным языком + изучаю фотошоп ))))

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

Со спрайтами конечно очень занимательно, но я нашел иконки максимально похожие на те что в макете и дал им Opacity: 0.5, а при наведении 0.8 Дешего и сердито)) Конечно зависит от заказчика, но вариант рабочий) А вобще уроки пушка, спасибо за работу 👍

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

Топовый учитель!

@TIKTOK-mk7um 3 года назад

одна ковычка в сss которую я не заметил, и пол часа работы над поиском почему не меняется цвет в спрайте, огонь :D

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

ахахха жиза

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

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

@Spectrum.Luxury 4 года назад

Спасибо за инфу со спрайтами)) Видео супер, подписан конечно же. Так а теперь эти svg файлы можно удалять с пк? Они будут отображаться только с помощью кода?

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

да

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

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

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

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

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

у меня в VSC не отображается тег где прописан код svg как его найти?

@Matkerimov_b 5 лет назад

спасибо вам огромное

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

Спасибо!

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

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

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

Дмитрий спасибо за очередной урок, очень познавательно, однако фишка с svg спрайтами не очень понравилась, подключил fontawesome + добавил в верхнее меню иконку поиска и корзины - как ты в первом уроке хотел, иконок вышло уже пять - вполне себе повод подключить библиотеку. Плюс если понадобиться в будущем добавить ещё несколько соцсетей - библиотека уже подключена.

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

Ничегосебе, за svg спасибо!

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

Попробовал самостоятельно сверстать иконки и сделал не с помошью SVG, а фотошоп. Получилось одинаково и анимацию сделал(при наведении квадрат становится кругом). Согласен, что с svg легче и правильней получается) сделаю..

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

Спасибо!!!)

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

Спасибо!!!

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

День добрый! у меня в svg class="social__icon" когда вставлял facebook, item расширился по горизонтали и пришлось прописывать в css для .social__icon не только высоту 18px, но и ширину 18px... Так и не смог разобраться почему.

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

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

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

В некоторых случаях нет разницы p или div. Как по мне, абзацы должны быть в блоке с тектом, если у нас просто какая-то строка, то почему не div. Заголовки я обычно используя для заголовков блоков, разделов и новостей, например. Ничего криминального в этом нет, я считаю, а для индексации сайта вам нужен хороший контент - это самое главное. Ну и реклама ) это мое мнение. Пусть у вас будет сделан сайт идеально с точки зрения семантики, но если контент гавно и о сайте никто не знает - это вам не поможет.

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

@@BrainsCloud Дим, там все же логичней ....

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

well done man

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

Респект за SVG !!!

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

привет всем!а как поработать со спрайтами в Visual Code studio? не могу найти path.

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

круто)

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

за SVG отдельное спасибо)

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

А вот за svg спасибо!

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

спасибочки)

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

Привет! А чем плоха практика вставлять иконки через псевдо-элементы в CSS? Там и кастомайз куда более логичный(на мой взгляд),да и выглядит лаконичнее.

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

Возник вопрос один.Мы в первом уроке в контейнере прописывали margin 0 auto. А тут применяем класс контайнер и на видео фотки отступ сверху почему-то.

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

Привет. Хотел спросить, почему ты не используешь свойство background для картинок, там ведь удобнее, cover прописал она выровнялась.

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

потому что в этом уроке картинки - фотографии. При использовании background / cover они будут сжиматься вплоть до центра, исказится лицо. А при width 100% height auto при нехватке места в контейнере они будут пропорционально уменьшаться в размерах

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

19:36 Иконки; 25:29 Спрайты

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

Привет. Повторяю все за тобой, но в .team__item при width: 25% и padding: 0 15px, дочерние елементы не помещаются и один из них перескакивает на новую "строку". В чем причина? Во второму уроке с блоком .features и его дочерними елементами по 33.33333% было тоже самое. При добовлении внутреннего padding: 0 40px; одному из елементов не хватало места и он перескакивал на новую "строку"

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

В последнем блоке, там где фото и контент (текст) написано вроде флекс врап и блоки должны становится на маленьком экране один под другим, но это не так, блок с текстом просто остается справа и становится невидим.

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

А не легче ли брать иконки с font awesome? Там можно легко настраивать размеры. Или я не прав?

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

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

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

Если бы мог, поставил бы 2 лайка

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

А есть какая-нибудь разница создавать team до контейнера или после? Просто я создал сразу контейнер, а потом team и вышло также

@o.kiryukhin 3 года назад

43:30 Это единственный простой способ "засунуть" картинку в блок меньшего размера? Или есть еще?

@daniilk-r8430 3 года назад

Можно ли менять шрифты только для ? Просто у меня что-то не работает

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

Добрый день, у меня такой вопрос 39:56. Если мы пропиуем flex-wrap: wrap; то у меня блок с текстом переходит вниз как и полагается, так как у вас так вышло, что он остался там где должен быть ?

@noname-zj8ne 4 года назад

после всех действий со спрайтом иконка не отображается. работаю на visual studio code. в чем может быть ошибка и как ее исправить?

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

проверь все ли теги закрыты, зачастую у меня тоже что-то отображается неккоректно, перепроверяю и все гуд! Также на SV code работаю.

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

решили проблему? столкнулся с тем же, причем перепробовал на других иконках, на других svg и все равно не отображается.

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

Подскажите пожалуйста цвет кода? я пойду пока клитку плеить...

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

Когда вставил иконки соцсетей, рядом с ними появился знак "больше или равно", как его убрать?

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

Спасибо

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

так в чём прикол с SVG? ничего же не работает, код полностью писал как на видосе

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

Здравствуйте, спасибо вам огромное за возможность учиться) Все нравится) особенно находить свои провтыки...) но уже битый час сижу и не могу понять одну вещь) У меня в "reviews" отзыв меняется с масштабом страницы, уже раз 9 пересмотрел с начала именно эту часть, но у вас отзыв сразу "фиксированый", а мой плавает, код проверял вроде уже уйму раз. и никак не пойму в чем причина) Но может кто-то поможет?! как сделать текст не "плавающим"?!)