#2 Верстка сайта с нуля для начинающих | HTML, CSS
Vložit
- čas přidán 21. 06. 2024
- В этом видео продолжаем верстать сайт. Сверстаем следующие два блока, поработаем с флексами и трансформацией!
------------------------------------------------
Основы HTML и CSS для начинающих: brainscloud.ru/landing/html-css
Верстка сайта транспортной компании: brainscloud.ru/landing/logist...
Файлы урока: files.brainscloud.ru/file/mog...
Главы видео:
00:00 - Верстаем шапку для блоков
09:10 - Верстаем блок с карточками
19:05 - Трансформация элементов
26:00 - Верстаем блок статистики
------------------------------------------------
Меня зовут Дмитрий Валак. Я занимаюсь разработкой сайтов уже много лет, специализируюсь больше на front-end разработке и верстке сайтов, но и программирование тоже изучаю. Здесь буду делиться с вами информацией на разные темы по веб-разработке - HTML, CSS, Javascript, JQuery, Vue, PHP, MySQL, React, Gulp и тд.
На сайте проекта brainscloud.ru вы найдете много полезных закрытых материалов, а так же сможете поработать со мной лично, при наличии такого желания.
------------------------------------------------
Мой ВК - odimaz
Группа BC - brainscloud
Мой Instagram: / dmitryvalak
#верстка #версткасайта #html #css #css3
*Верстка сайта транспортной компании:* brainscloud.ru/landing/logistic-html
*Хостинг Timeweb* - bit.ly/2Kms8Lf
*Бонусы* доступны после оплаты тарифа Optimo+ на год. Для активации нужно открыть раздел "Бонусы и промокоды" в Панели управления и ввести промокод.
*brainscloud* - плюс 1 месяц бесплатного хостинга
*brainscoud2* - услуга "Ускоритель сайтов"
Как вы думаете правильно ли мы верстали макет с точки зрения семантики? Почему не используете и когда делали блок "statistics"? К слову, мне тоже нравится всё заворачивать в див и придавать им классы, но правильно ли это? Буду благодарен, если ответите на мой вопрос
Подскажите пожалуйста, возникла такая проблема. У меня из предыдущего урока слайдер залазил на кнопку и я долго не мог понять в чем дело потому что повторял за вами символ в символ. Немного покопавшись оказалось что у меня в настройках Windows 10 дефолтное масштабирование было выставлено как 125%, я изменил его на 100% и верстка стала как у вас, но возник вопрос, во первых мне со 100% масштабированием не очень удобно, потому что все слишком мелкое, и у клиента или посетителей сайта может быть такая же проблема. Было бы очень здорово услышать от вас как выйти из этой ситуации.
@@Penat_Vilikirentiy нужно иметь нормальный монитор.
@@alexeyzemsky Заказчику тоже так скажете?
@@Penat_Vilikirentiy я думаю нужно размеры писать не в пикселях а в % ,да это сложное но я считаю что у каждко разное разрешение и по пикселем не особо корректно будет отображаться (
Если я не прав поправьте меня )
Это лучшие уроки по верстке полноценных макетов, что я видел на ютубе! Спасибо.
Приятно! Пожалуйста!
Поставлена речь , приятный голос , хорошая подача материала и самое главное очень полезная инфа. Спасибо тебе за отличные видео , я в восторге.
Я рад что вам нравится )
не забывай про супер шутки
Автор молодец! Кому тяжело даются данные уроки, то для начала советую посмотреть побольше обучающих роликов по css/html (а в
идеале параллельно читать книгу. Как пример : "Большая книга по CSS"). Тогда понимание изложенного будет более систематичным и без неразберихи. Всем удачи в начинаниях!
Я в шоке от того, что у кого-то могла подняться рука поставить дизлайк такому видео!?! Для таких же новичков как и я - это просто бесценное видео. Даже выучив огромное количество сухого материала, без таких вот примеров верстки новичку научиться грамотно писать код будет очень сложно. Так что автору просто низкий поклон за все его видео. Огромнейшее спасибо!!!
Поддерживаю комментаторов ниже - побольше таких уроков! Реальная помощь в изучении и применении. Спасибо
"0:58" - Верстаем шапку для блоков
"9:10" - Верстаем блок с карточками
"19:05" - Трансформация элементов
"26:00" - Верстаем блок статистики
Вопрос: после верстки при масштабировании блоки налазиют друг на друга? Чем решить или как правильно располагать блоки?
У меня вообще картинки не показывает! Думал не правильно вырезал и там ошибка посмотрел все правильно не вышло, переписал весь код в ксс /*about*/ все равно. А при просмотре кода показывает что есть блок
@@rakhat522 а ты как у автора две точки впереди ставил типо как ../about/img/ и так далее
@@user-le5cu5fn9z Бывает забываешь про две точеи - переход на папку назад, - так как отчет ведется от папки в которую помещен фаил - index.html
@@rakhat522 если всё как у автора делаешь и папка assets лежит у тебя там же, где и индексный файл, то ни точек, ни слеша не должно быть в начале assets/images/about/1 Я делал неправильно слеш впереди ставил перед assets, картинки не показывало.
Лучший контент по вёрстке ever)
Спасибо )
@@BrainsCloud Тебе спасибо 👍👍👍
Самое интересное что каждое следущее видео набирает меньше просмотров) на последнем уже будут готовые верстальщики)
Скорее отфильтровались, кому непонятно ничего)
@@sergeyserdex6410 Жестокая правда, даже азы не всем даются
А казалось бы.. ничего сложно)
@@osayo3324 с такими объяснениями никто не захочет учиться
@@DavidFunable мне так жаль.. 😞
Это единственные видео уроки, которые повторяются учеником с первого раза без ошибок-раз
Очень полезная информация-два
Спасибо огромное-три
Очень круто изложено, профессионализм, и конечно же хорошая дикция. Приятно смотреть!!! Качественный контент на просторах ютуба! Спасибо большое!))))
Дмитрий, спасибо. Я вам безмерно благодарен за эту серию видеоуроков. Вы прекрасный специалист и мы (зрители-новички в вёрстке) мечтаем быть похожими на вас. Ваш труд характеризуется русской поговоркой "дело мастера боится".
Удачи вам во всех начинаниях и побольше отдыха от работы
🔥
Очень годно! без воды, много интересных решений, всем советую
Я за один твой урок узнал больше, чем за 7 лет урока информатики)
Это лучшие уроки по верстке полноценных макетов, спасибо что делаешь эти видео!
Очень круто! Смотрю как любимый сериал)
Видео супер!!! очень доходчиво объясняет, побольше таких уроков!
Актуально и в 2020, приятный голос, дикция, грамотная подача материала. Огромный плюс, что не разжевываешь каждую тему и показываешь только практику. Однозначно подписка!
Всегда лайки ставлю, приятно, понятно, в легкой манере!!!
Один из лучших уроков по верстке! Спасибо большое!
Просто лучший, отличные уроки для начинающих, чтобы прямо на практике понимать что и как правильно писать.
Красава... Все быстро и понятно... Ничего лишнего... С удовольствием смотрю его верстку...
Спасибо 😉
Для тех кто только-только начинает верстать, это один из лучших каналов на CZcams.
Пожалуйста не останавливайся 👍
Крутой контент, очень полезно для тех, кто начинает свой путь в веб-разработке. Спасибо!
ТОП уроки для СНГ сегмента! Спасибо!
супер уроки, по 2 раза пересматриваю
2020,этому видео год, оно все еще годно и актуально, топ канал.
Отличный плейлист
Огромнейшее спасибо. Это лучший контент по вёрстке, просто нет слов.
Спасибо огромное, вы очень помогаете в изучении верстки! Пожалуйста, делайте побольше уроков!)) Лучи добра вам и всем подписчикам😊
Прервал просмотр на моменте окончания работы с градиентами и пишу коммент-для меня как для новичка это чудеса какие-то) Спасибо за ясную подачу и интересный материал!
я в восторге! Дмитрий, спасибо Вам :)
Спасибо за подробные видео. Обучаюсь с удовольствием
Круто когда столько ховеров,и псевдно элементов, быстрее выучить можно
Спасибо!
Всё как всегда круто, понятно и приятно))
начал изучать вёрстку, и думал уже что много знаю, но оказалось показалось))) благодаря твоим урокам понимаю лучше как можно пользоваться HTML CSS и открываю новые возможности для себя, спасибо тебе большое
Просто супер! Идем дальше :)
Дмитрий,лучшие уроки по верстке сайтов,верстаю вслед за тобой,особенно спасибо за пояснение кождого свойства...
Спасибо за урок !!! Очень радует как подаете !!!
Огромнейшее спасибо за эти видео. Лучшее, что я видела
Очень круто! Спасибо Вам огромное! Я рада, что нашла ваши уроки на ютуб! Успеха Вам!)))
Просто отлично, после базового курса то, что нужно, чтобы набраться фишечек и набить руку. Спасибо.
Спасибо за урок, прям радостно что что-то получается)
Спасибо. Отличные уроки
Это лучшие уроки на Ютубе по верстке! Всегда не хватает информации и понимания, КАК ДЕЛАТЬ ПРАВИЛЬНО, хотя бы отталкиваться от чего-то. Подписалась на канал, восторг!
Очень понятные уроки !!! Спасибо продолжайте в том же духе , а мы будем верстать вместе с Вами!!!
Очень хорошая подача и полезная инфа.Спасибо тебе большое)
Когда смотрю эту рубрику, благодаря настолько качественной подаче, намного легче запомнить те или иные теги.. Красивый голос, правильно поставленная дикция, разговор исключительно по теме.. Спасибо за такой качественный контент! 0👎 свидетельствует о многом...
Ждем продолжения!
Супер, спасибо огромное за работу!
Просто батя верстки, спасибо за контент !
Отличные, супер видео уроки!
Спасибо больше, очень доступно всё объясняешь.
Красавчик! Здесь та информация, которая нужна была мне.
Спасибо большое.
Коротко, ясно и по делу!
Я вам признателен за ваши уроки .
Спасибо за качественный урок! Как начинающему, мне нравится такая практика. Буду рад видеть подобный материал в будущем!
Желаю успехов!
Да, крутой блок с фотографиями и градиентом, все получилось легко. Интересно очень иду к 3-му уроку!
Спасибо за подачу!Очень качественно
Большое спасибо за проделанную работу. Очень рад, что наткнулся на твои видео уроки. Подписка однозначно!!!!!!!!!!!!!!
Вы лучшие! Безмерно благодарен!!!!
Большое спасибо за крутые уроки!
большое спасибо за подобные видео.Вы очень доходчиво обьясняете все!
Большое спасибо! Очень интересно и познавательно
Спасибо! Сделала, все получилось! Такие ролики очень нравятся.
Отлично!
Cпасибо большое за отличный урок!
Спасибо!
Как всегда круто!
Спасибо за весь материал!
Дмитрий, большой поклонник Вашего канала. Просто и доступно. Я хотел, что бы Вы записали уроки по разработке интернет-магазина.
Дякую за корисні та цікаві відео:)
Оооооочччччеьььььь круто, спасибо тебе большое!!!!!!!
6 утра, а я с тобой Braun, сделал круто сайт, на которую смотрю и улыбаюсь от радости)) Благодарю тебя)
Мужик ты такой жесткий, ты просто ппц какой жесткий, спасибо тебе за уроки. Благодаря тебе я понимаю что я дно )). Учусь страюсь, успехов тебе
Спасибо, очень полезная информация!
Изучил html и css и решил начать верстать макеты. Понял что не в состоянии применить теорию на практике. Ваши видео меня спасли! Спасибо огромное за ваш труд!!)
Автору огромный респект!!!
из 1,5кк человек до второго видоса дошло 200к, будем смотреть дальше.
Спасибо автору. Ждем нового контента)
Очень приятно и полезно!
Спасибо большое за труд! Мне как начинающему мастеру)) такой контент просто как подарок!! Успехов во всем и God bless you)
Блин просто отлично. Продолжай в том же духе!) Успехов во всем!)
Спасибо!
Вдохновили твои видео на веб-программирование. Что может быть лучше вёрстки для начинающего 😀😀😀
Спасибо автору, начал изучать html и css по Вашим урокам, пока все получается, надеюсь про адаптацию сайта под мобильные устройства тоже в дальнейшем расскажите)
10Q !
Очень нравится такой формат!
Спасибо большое за уроки!!!
html css ничего лишнего все доступно и понятно СПАСИБО
Хорошее видео. Спасибо!
Это просто ВЕЛИКОЛЕПНО! Вчера увидел первое видео данной верстки и сражу же лайк и подписка! Спасибо, Вам за такие чудесные уроки!
пожалуйста!
Отличный ролик !
С двух аккаунтов кидаю лайки!!! Ловлю кайф от того что получается)!!!
Привет. Спасибо за курс. Просмотрел и всё повторил. Всё было очень круто.
ПРОСТО БОМБА!)
Спасибо ! .. ыт круто обясняешь!
Полезный и качественный контент
фууух мозг разрывается от информации)но круто и понятно,идем дальше)
Дмитрий, хотелось бы вам выразить огромную благодарность за ваши видео!
Спасибо вам за проделанную работу!
Уверен, что повышение подписчиков, просмотров и т.д. не заставит себя долго ждать!
У вас прекрасный контент.
Спасибо и вам за добрые слова! Рад что вам нравятся видео
Спасибо!!! Слушаю и выполняю все с интересом) Вы отличный наставник.Миллион лайков хочется поставить. Вот что такое настоящий качественный контент))
Отличные уроки)
Хорошо прорядилась команда начинающих)
Спасибо за урок.
Спасибо за отличное видео!