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

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

[@BrainsCloud]

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

[@dmitriy516]

09:58 Не сочтите за укор. хЭйт = ненавидеть. хАйт - высота. translate.yandex.ru/?clid=2256546&win=231&lang=ru-en&text=%D0%B2%D1%8B%D1%81%D0%BE%D1%82%D0%B0

[@BrainsCloud]

Продолжаем верстать. Лайк поставил?)

[@MacLeanShow]

Лайка поставил, продолжай в том же духе👍

[@submefitosubmefito4905]

можно вопрос почему в 1 уроке мы фоновое изображение использовали как "div" вместо того чтобы просто применить его к секции header???

[@BrainsCloud]

@@submefitosubmefito4905 потому что header это совсем другой блок.

[@danilrakhmatullin5372]

Установлен photoshop cc2019,но стоит только мне посмотреть шрифт,то фш сразу ругается ,то что у меня не установлен данный шрифт,а устанавливать каждый раз с инета не хочется,подскажите что мне нужно сделать для устранения такой неприятности?

[@BrainsCloud]

@@danilrakhmatullin5372 сделать то что вам не хочется

[@megafyrnd]

Когда автор затрагивает моменты, которые ты уже более менее понял: "Тормози, я в этом шарю.". Жмешь на паузу и начинаешь верстать, играясь с css :D А когда видишь что получается - чувствуешь себя магом 80-го лвла :D

[@user-lt3rp7zv6z]

А когда не получаеться дебилом 10000 уровня

[@rbisultanov2108]

люди, у кого features получились вертикально, вам нужно в html коде каждый "feature__item" должен быть в отдельности и каждый "feature__item" должен находиться в "features" выглядит это так: 1ый feature__item -------------------------------------------------------------------------------------------------- Easily Customised Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla 2ый feature__item-------------------------------------------------------------------------------------------------- Responsive REady Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla 3ый feature__item-------------------------------------------------------------------------------------------------- Modern Design Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla 4ый feature__item -------------------------------------------------------------------------------------------------- Clean Code Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla 5ый feature__item -------------------------------------------------------------------------------------------------- Ready to Ship Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla 6ый feature__item-------------------------------------------------------------------------------------------------- Download for Free Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla --------------------------------------------------------------------------------------------------

[@aruzhanbodenova2407]

Огромное Вам СПАСИБО!!!!

[@mukhammadjonmamurov8465]

сам бог послал тебя, спасибо бро

[@Noozer]

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

[@hookahel8030]

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

[@BrainsCloud]

HookahEl спасибо!

[@user-ny9sh6iy4v]

Для новичков - самое то. Отработал все 9 уроков по 2 раза. Хорошая подача материала, затронуты все важные моменты. Спасибо автору.

[@technique9940]

Доступно и понятно , всё показывается и объясняется на понятном языке для новичков. Верстал макет вместе с ним во всех видео,могу сказать что моя копилка знаний расширилась,и обучился чему-то новому,ждем гайд по JS для новичков,точно на таком же понятном языке :))

[@pavelbahutski8386]

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

[@Ky3dMu4]

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

[@user-jz9ur9fv8h]

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

[@viktoriiap.1552]

Вы объясняете, как боженька!!! Спасибо Вам за это!! Ждем новые видео-уроки!

[@elitech3339]

спасибо что услышал наши пожелания и снимаешь курс, смотрю

[@user-ok9vw1zh6b]

Такой труд достоин уважения! Продолжаю верстать по этому курсу и кайфую)

[@dariavoromyova7639]

Из сотен обучающих видео для новичков - эти самые полезные. Все понятно, информативно, повествование доступным языком. Верстала по видео, все получилось. Многие фишки, что не получались до этого, с этими уроками поняла. Рассказчику - огромное спасибо!

[@user-xd4mv4mk4c]

для меня как начинающего очень классно! спасибо! все структурированно и с объяснениями, а то кто-то только пишет со скоростью света и ни слова пояснений, кто-то говорить вообще не умеет, а тут всего в меру и в адекватном темпе

[@user-rt4pn7xt4e]

13:46 По умолчанию отображается в in а не в px. Может не все знают но поменять единицу измерение в Photoshope можно Ctrl + K -> Units & Rulers -> Type

[@jajozhik]

Огромное спасибо за проделанную работу! Ты даже не представляешь как много даешь людям

[@Aleksis93]

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

[@clayandplay7131]

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

[@alishermereke2953]

Большое спасибо за курс. Голос приятный и все доходчиво объясняешь.

[@lanacooper2534]

Подробный и професиональный урок по верстке! Спасибо)

[@artemkiychenko9132]

Действительно очень доходчиво, сколько не искал, толком не мог найти подобного видео

[@yevheniidodiak3644]

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

[@pavlishin13071987]

У Вас реально классные уроки, залетают на одном дыхании)

[@user-bz6lb8kl8n]

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

[@svitlanaars3452]

Спасибо большое за Ваши уроки. Особенно за бесплатные файлы урока.

[@Spencerrrr]

За материалы курса отдельно спасибо - все четкое и удобно! М О Л О Д Е Ц !

[@shweeps251]

Очень жалко, что такие видосы собирают так мало лайков и просмотров(( Ты заслуживаешь уважения, потому что такого качественного контента действительно мало, на русскоязычном ютубе. Огромнейший респект и фура лайков ^_^

[@IgarunyaTV]

Да я тоже заметил, а вот как пожарить яйца птеродактеля выходят в тренд...(

[@user-co7nl8pf4p]

Потому что информация подаётся скрупулёзно и со всеми разъяснениями. Большинству нравятся ролики типа КАК СТАТЬ СУПЕРПРОГРАМИСТОМ ЗА 1 ЧАС!!!

[@dedovchan8482]

@@user-co7nl8pf4p потому что программистами хотят стать не вся россия, поэтому в тренды не попадает , из за того, что аудитория узконаправленная. если бы все в россии пытадись стать прогерами, то и в тренды бы подобные видосы попадали

[@user-hl4xr6zm6l]

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

[@user-hg7pi5lr6j]

Спасибо. За бесценный опыт и знания. И еще одну работу в портфолио)

[@user-cg6qk3vi7n]

Ну очень доходчивый практикум для новичка. Класс ;)

[@Ty4ka8]

Спасибо. Доступно, понятно и по сути

[@shifrl771]

урок класс сделайте такие верстки очень понравилось!!!

[@user-qh9jw8if1p]

Красавчик, смотрел на одном дыхании!

[@deepcox4229]

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

[@podkolpakina]

спасибо тебе огромное)) все так доходчиво... а голос просто нечто! 😍

[@gooshiding]

Ты профи своего дела, продолжай в том же духе, рад смотреть твои видео и верстать вместе :)

[@alexnovik6223]

Учу Java и данный урок по использованию CSS просто все расставил на свои места. Пошел дальше 3 видео смотреть и заодно эти видео добавил в свой плейлист по веб разработке. Ну и подписаться чуть было не забыл.

[@user-is7de3wd5u]

Дмитрий, это просто бомба. Спасибо!

[@Linda-js4dv]

Вау ..... Я не думал что вы мне так понятно научите.....я всегда считал себя дураком которое вапще не понимает 🤯афигеть спасибо вам огромное...я оч многооо научился.....спасибооо еще раз♥️❤️

[@user-fg8ix3of3c]

Уроки класс! Но есть пожелание, добавить еще js для интерактивности, хотя бы какой то элементарный и простой.

[@Dmitrysib85]

Видео не зря называется - Верстка *** | HTML, CSS

[@dmitryts9093]

@@Dmitrysib85 А чел говорит было бы не плохо сделать - Верстка * | HTML, CSS, JS

[@shvetshorts]

Самый лучший учитель))) Продолжай)))

[@antonkonovalenko1493]

Спасибо за отличный урок. дём дальше )

[@mini8622]

спасибо большое!! очень нужную инфу для себя взяла во второй половине видео

[@alexandersulin1207]

урок супер спасибо ,жду следующий

[@KuKu_RuKu88]

Спасибо за урок !!! Полет нормальный )))

[@Yok_makarek]

Лайк, подписка, полет нормальный=) в основном если что то не сходится с видео это 100% ошибка в своём коде=)

[@diane7507]

Спасибо за эти уроки!!))

[@mushvigtenants3905]

класс мне очень нравиться твоя подача ) все четко и ясно

[@serene3d772]

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

[@Burovasofia]

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

[@user-he9bv4og9g]

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

[@forceward]

Спасибо за полезную информацию ✊

[@kpytou4utep]

Спасибо большое!!!! Очень классный урок

[@user-te1ut5ev8w]

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

[@shubor1091]

Огромное спасибо за такой контент!

[@EUC_Novak]

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

[@heavy3882]

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

[@user-oy5oc2rw1s]

Дмитрий спасибо! Отличное видео

[@vikogr200]

Как всегда - отлично

[@yuliapoida4108]

Спасибо Вам за уроки)

[@user-me7vz2xo1n]

снимаю шляпу, спасибо большое, все очень доступно

[@beldack5363]

Капец, хорошо объясняешь, оглавление сделал, остановился на нижней части слайда, таблички создаю))))) очень сильно затянуло, как игра но интереснее.

[@artem_ka3863]

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

[@donvanetti4270]

Просто бомба, спасибо большое!

[@user-qj7mq4pv8n]

шикарные уроки

[@RAFO.]

да как у вас еще не лям подписок то с таким контентом?)) эти уроки просто редкость в ютубе!

[@BrainsCloud]

Rafo столько людей увлекающихся версткой просто нет 😄

[@RAFO.]

@@BrainsCloud да вот у хауди хо столько народа) желаю и вам столько )

[@MrCrowleyA]

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

[@Rammzes1987]

Смотрю 1.2 выпуск досмотрел, капец прикольно и интересно! ( В хорошем смысле) подача автора разъяснения понятна даже не новичку, а нулю в этом деле. Меняем завод металлургический на сайты))))

[@westwest9997]

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

[@StepaAan_Official_youtube]

Я как новичек, много чего виучил из етих уроков!

[@user-co9ri8mp7v]

вы услышали мои пожелания! круто!)) спасибо большое за ваши труды. вопрос один-а зачем мы картинки в works позиционируем абсолютно?

[@VasiliyKolpaxidis]

Спасибо за видео. Интересно смотреть как работает настоящий профи. Но есть пара вопросов. Первый вопрос. Не удобнее будет использовать сокращенную запись? Пример: вместо ---> font-size: 14px; font-weight: 700; font-family: Arial; вот так ---> font: 700 14px Arial; у вас для всей вёрстки указан шрифт а потом он переопределяется. Но не легче для каждого блока не переопределять а указывать изначально. Второй вопрос. Не совсем понял зачем вместо тега ставить ? Не могли бы вы пояснить? Заранее благодарю.

[@JayQueezy-ry3om]

Дай бог тебе здоровья

[@elifas2012]

Неплохо сыграно.

[@user-jq6tr6rr8v]

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

[@kemranalievich7009]

Дмитрий, уроки просто шикарные, слов нет Респект тебе

[@bigsasiska3921]

Лайк поставил и подписался!!!

[@TheBaurak]

Спасибо!

[@user-dk6yv1bn7z]

А почему при размещении иконок с текстом в блоке features используется padding, а не margin?

[@user-he2ko5fr9x]

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

[@user-dq9mk5tz9f]

Спасибо мужик! 🤗

[@danilgordeev5551]

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

[@mak_whisk]

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

[@Alex-nu5pw]

Молодец, парень!!!!!!!!

[@laner4195]

Закончил эту часть, были ошибки с моей стороны, но рассказ и написание кода безупречное, так что быстро их зафиксил. Спасибо за выпуски!

[@alexruddi3036]

Суперское видео. У меня есть вопрос. Нужно ли в разделе works при наведении на фото работ, когда они краснеют - сделать, чтоб курсор менялся на pointer, как вы это сделали в первом видео с кнопкой Find Out More и кнопками навигации? Это же тоже ссылки или я ошибаюсь?

[@iddev6680]

Я подписался когда у канала был 23к подписчика ща Смотрю на те перевалило 100к 👍👍

[@ioji1476]

Круто!

[@MaxxxLism]

Отличный урок! Подскажите, при добавлении border-right: 1px solid элементы перестают умещаться и распределяются по 3 на строку, как это исправить, спасибо

[@half-life-tv]

Смотрю второй урок, нравится подача материала. У меня такой вопрос, при данной верстке мобильная версия будет смотреться нормально или её нужно будет еще отдельно корректировать @media (max-width 767px) ??

[@bestmdidi5949]

Спасибо !!!!

[@user-ej5re1lt5i]

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

[@seriousman109]

Thanks! I like your videos :-)

[@BrainsCloud]

Your are welcome :) glad to hear that!

[@seriousman109]

@@BrainsCloud Друг, я русский, просто раскладку влом переключать) Спасибо еще раз

[@ENTmath_]

Огромное спасибо за видео! Но, один момент: ведь в блоках works__img только у первой и пятой картинки (по счету с лева на право) отображаются их центральная часть, а у других уже слева идет отображение. для этого, сделал works__img1-5 класс для 1 и 5 картинки и works__img для остальных картинок(для этих картинок убрать top 50% left 50% и transform). code: .works__img1-5 { position: absolute; top: 50%; left: 50%; z-index: 1; transform: translate3d(-50%, -50%, 0); } .works__img { position: absolute; top: 0; left: 0; z-index: 1; }

[@Dedinside05]

Спасибо

[@user-rj9bj6iw4k]

Всем привет! Беда такая: У меня почему-то все( кроме 1 блока) сузились в контейнер шириной 1170px. То есть с блоками и отзывами зажат в 1170px, а должен быть на всю ширину страницы. Подскажите, как исправить?

[@yomzfka]

Круть )

[@user-kl6be1qp3g]

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