#2 ActiveBox - Верстка сайта с нуля для начинающих | HTML, CSS
Вставка
- Опубліковано 13 чер 2024
- Продолжаем практиковаться в верстке сайтов на 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.ru/landing/logistic-html
*Хостинг Timeweb* - bit.ly/2Kms8Lf
*Бонусы* доступны после оплаты тарифа Optimo+ на год. Для активации нужно открыть раздел "Бонусы и промокоды" в Панели управления и ввести промокод.
*brainscloud* - плюс 1 месяц бесплатного хостинга
*brainscoud2* - услуга "Ускоритель сайтов"
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
Продолжаем верстать. Лайк поставил?)
Лайка поставил, продолжай в том же духе👍
можно вопрос
почему в 1 уроке мы фоновое изображение использовали как "div" вместо того чтобы просто применить его к секции header???
@@submefitosubmefito4905 потому что header это совсем другой блок.
Установлен photoshop cc2019,но стоит только мне посмотреть шрифт,то фш сразу ругается ,то что у меня не установлен данный шрифт,а устанавливать каждый раз с инета не хочется,подскажите что мне нужно сделать для устранения такой неприятности?
@@danilrakhmatullin5372 сделать то что вам не хочется
Когда автор затрагивает моменты, которые ты уже более менее понял: "Тормози, я в этом шарю.". Жмешь на паузу и начинаешь верстать, играясь с css :D А когда видишь что получается - чувствуешь себя магом 80-го лвла :D
А когда не получаеться дебилом 10000 уровня
люди, у кого 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
--------------------------------------------------------------------------------------------------
Огромное Вам СПАСИБО!!!!
сам бог послал тебя, спасибо бро
Наверное лучший гайд из тех что есть на ютьюб. Спасибо и продолжай пожалуйста, хотелось бы увидеть побольше адаптивной верстки(с фреймворками) и минимального js для новичков.
Вижу видео от этого мастера, ставлю лайк не раздумывая.
П.С. Большое спасибо Тебе за Твой труд! Уроки замечательные.
HookahEl спасибо!
Для новичков - самое то. Отработал все 9 уроков по 2 раза. Хорошая подача материала, затронуты все важные моменты. Спасибо автору.
Доступно и понятно , всё показывается и объясняется на понятном языке для новичков. Верстал макет вместе с ним во всех видео,могу сказать что моя копилка знаний расширилась,и обучился чему-то новому,ждем гайд по JS для новичков,точно на таком же понятном языке :))
Хочу выразить огромную благодарность, видимо у вас педагогический талант!Все доступно и понятно. Желаю энтузиазма и отдачи!
Здравствуйте, хотел бы сказать, что вы один из немногих кто умеет хорошо рассказывать. Спасибо вам за ваш труд. И хотелось бы увидеть вёрстку интернет магазина или много страничный сайт и отметить то, что хотелось бы увидеть как соединяются страницы.
Спасибо Дмитрий за столь мелкое разжевывание каждого блока. Мне английский язык дается с трудом, но тут задействованы самые простые слова, так что за пару недель уже стало понятно откуда , как и что нужно написать, чтоб все заработало. Спасибо за Ваши старания, жду новых видео
Вы объясняете, как боженька!!! Спасибо Вам за это!! Ждем новые видео-уроки!
спасибо что услышал наши пожелания и снимаешь курс, смотрю
Такой труд достоин уважения! Продолжаю верстать по этому курсу и кайфую)
Из сотен обучающих видео для новичков - эти самые полезные. Все понятно, информативно, повествование доступным языком. Верстала по видео, все получилось. Многие фишки, что не получались до этого, с этими уроками поняла. Рассказчику - огромное спасибо!
для меня как начинающего очень классно! спасибо! все структурированно и с объяснениями, а то кто-то только пишет со скоростью света и ни слова пояснений, кто-то говорить вообще не умеет, а тут всего в меру и в адекватном темпе
13:46 По умолчанию отображается в in а не в px. Может не все знают но поменять единицу измерение в Photoshope можно Ctrl + K -> Units & Rulers -> Type
Огромное спасибо за проделанную работу! Ты даже не представляешь как много даешь людям
не знаю, ведете ли вы свой канал или уже забросили, но видео просто пушка!!!помогают понять принципы работы всех инструментов. спасибо!!!
Дима, спасибо большое за этот подробный урок и легкий для понимания макет!
Большое спасибо за курс. Голос приятный и все доходчиво объясняешь.
Подробный и професиональный урок по верстке! Спасибо)
Действительно очень доходчиво, сколько не искал, толком не мог найти подобного видео
Лучший преподаватель, спасибо за время 😊
Я учусь постепенно, рад что всё понимаю на практике. Лайк поставил ❤️
У Вас реально классные уроки, залетают на одном дыхании)
Отличный урок! Большое спасибо!
Спасибо большое за Ваши уроки. Особенно за бесплатные файлы урока.
За материалы курса отдельно спасибо - все четкое и удобно! М О Л О Д Е Ц !
Очень жалко, что такие видосы собирают так мало лайков и просмотров(( Ты заслуживаешь уважения, потому что такого качественного контента действительно мало, на русскоязычном ютубе.
Огромнейший респект и фура лайков ^_^
Да я тоже заметил, а вот как пожарить яйца птеродактеля выходят в тренд...(
Потому что информация подаётся скрупулёзно и со всеми разъяснениями. Большинству нравятся ролики типа КАК СТАТЬ СУПЕРПРОГРАМИСТОМ ЗА 1 ЧАС!!!
@@user-co7nl8pf4p потому что программистами хотят стать не вся россия, поэтому в тренды не попадает , из за того, что аудитория узконаправленная. если бы все в россии пытадись стать прогерами, то и в тренды бы подобные видосы попадали
Спасибо! Отличный урок!
Спасибо. За бесценный опыт и знания. И еще одну работу в портфолио)
Ну очень доходчивый практикум для новичка. Класс ;)
Спасибо. Доступно, понятно и по сути
урок класс
сделайте такие верстки
очень понравилось!!!
Красавчик, смотрел на одном дыхании!
Димон))) ты супер!!!!!с уважением твой благодарный слушатель и ученик!!!!))
спасибо тебе огромное))
все так доходчиво...
а голос просто нечто! 😍
Ты профи своего дела, продолжай в том же духе, рад смотреть твои видео и верстать вместе :)
Учу Java и данный урок по использованию CSS просто все расставил на свои места. Пошел дальше 3 видео смотреть и заодно эти видео добавил в свой плейлист по веб разработке. Ну и подписаться чуть было не забыл.
Дмитрий, это просто бомба.
Спасибо!
Вау ..... Я не думал что вы мне так понятно научите.....я всегда считал себя дураком которое вапще не понимает 🤯афигеть спасибо вам огромное...я оч многооо научился.....спасибооо еще раз♥️❤️
Уроки класс! Но есть пожелание, добавить еще js для интерактивности, хотя бы какой то элементарный и простой.
Видео не зря называется - Верстка *** | HTML, CSS
@@Dmitrysib85 А чел говорит было бы не плохо сделать - Верстка * | HTML, CSS, JS
Спасибо за отличный урок. дём дальше )
Самый лучший учитель))) Продолжай)))
спасибо большое!! очень нужную инфу для себя взяла во второй половине видео
урок супер спасибо ,жду следующий
Спасибо за урок !!! Полет нормальный )))
Лайк, подписка, полет нормальный=) в основном если что то не сходится с видео это 100% ошибка в своём коде=)
Спасибо за эти уроки!!))
класс мне очень нравиться твоя подача ) все четко и ясно
спасибо за отличные уроки!
спасибо за урок, Вы прекрасно объясняете !!!! все получилось, чему безумно рада.
Большое спасибо за уроки!
Спасибо за полезную информацию ✊
Спасибо большое!!!! Очень классный урок
Здравствуйте! Благодарю за видео!
Огромное спасибо за такой контент!
🌟🌟🌟🌟🌟 *Спасибо за очень полезный и понятный урок!!!* 🌟🌟🌟🌟🌟
Красота!
спасибо!
Дмитрий спасибо! Отличное видео
Как всегда - отлично
Спасибо Вам за уроки)
снимаю шляпу, спасибо большое, все очень доступно
Капец, хорошо объясняешь, оглавление сделал, остановился на нижней части слайда, таблички создаю))))) очень сильно затянуло, как игра но интереснее.
Спасибо за годный контент!!!
Просто бомба, спасибо большое!
шикарные уроки
да как у вас еще не лям подписок то с таким контентом?)) эти уроки просто редкость в ютубе!
Rafo столько людей увлекающихся версткой просто нет 😄
@@BrainsCloud да вот у хауди хо столько народа) желаю и вам столько )
Спасибо за урок
Смотрю 1.2 выпуск досмотрел, капец прикольно и интересно! ( В хорошем смысле) подача автора разъяснения понятна даже не новичку, а нулю в этом деле. Меняем завод металлургический на сайты))))
Спасибо за урок)))
Я как новичек, много чего виучил из етих уроков!
вы услышали мои пожелания! круто!)) спасибо большое за ваши труды. вопрос один-а зачем мы картинки в works позиционируем абсолютно?
Спасибо за видео. Интересно смотреть как работает настоящий профи.
Но есть пара вопросов.
Первый вопрос. Не удобнее будет использовать сокращенную запись?
Пример:
вместо ---> font-size: 14px; font-weight: 700; font-family: Arial;
вот так ---> font: 700 14px Arial;
у вас для всей вёрстки указан шрифт а потом он переопределяется. Но не легче для каждого блока не переопределять а указывать изначально.
Второй вопрос.
Не совсем понял зачем вместо тега ставить ? Не могли бы вы пояснить?
Заранее благодарю.
Дай бог тебе здоровья
Неплохо сыграно.
Спасибо большое!
Дмитрий, уроки просто шикарные, слов нет
Респект тебе
Лайк поставил и подписался!!!
А почему при размещении иконок с текстом в блоке features используется padding, а не margin?
Спасибо!
Ты стили для текста или заголовков можешь найти в фотошопе в слоях правой кнопкой мыши и копируешь css и вставляешь где-нибудь и выбираешь,что тебе нужно.
Спасибо мужик! 🤗
Добрый день, как сделать чтобы каждая карточка в блоке features не разъезжалась, а размер каждой увеличивался если например мы увеличиваем длину текста в заголовке
Cпасибо большое
Молодец, парень!!!!!!!!
Закончил эту часть, были ошибки с моей стороны, но рассказ и написание кода безупречное, так что быстро их зафиксил. Спасибо за выпуски!
Суперское видео. У меня есть вопрос. Нужно ли в разделе works при наведении на фото работ, когда они краснеют - сделать, чтоб курсор менялся на pointer, как вы это сделали в первом видео с кнопкой Find Out More и кнопками навигации? Это же тоже ссылки или я ошибаюсь?
Я подписался когда у канала был 23к подписчика ща Смотрю на те перевалило 100к 👍👍
Круто!
Отличный урок! Подскажите, при добавлении border-right: 1px solid элементы перестают умещаться и распределяются по 3 на строку, как это исправить, спасибо
Смотрю второй урок, нравится подача материала. У меня такой вопрос, при данной верстке мобильная версия будет смотреться нормально или её нужно будет еще отдельно корректировать @media (max-width 767px) ??
Спасибо !!!!
Спасибо за видос
Thanks!
I like your videos :-)
Your are welcome :) glad to hear that!
@@BrainsCloud Друг, я русский, просто раскладку влом переключать) Спасибо еще раз
Огромное спасибо за видео! Но, один момент: ведь в блоках 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;
}
Спасибо
Всем привет! Беда такая:
У меня почему-то все( кроме 1 блока) сузились в контейнер шириной 1170px.
То есть с блоками и отзывами зажат в 1170px, а должен быть на всю ширину страницы.
Подскажите, как исправить?
Дмитрий, а подскажите пожалуйста ,как сделать чтобы при resize окна,например, уменьшения, картинки также были на всю ширину , чтобы не появлялись пробелы между ними?
Круть )