#1 ActiveBox - Верстка сайта с нуля для начинающих | HTML, CSS, уроки верстки
Вставка
- Опубліковано 6 чер 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...
Brackets: brackets.io/
Урок по Brackets: • Brackets - настройка, ...
Главы видео:
00:00 - 01:30 - Введение
01:30 - Начинаем работу
14:20 - Верстка шапки сайта
30:38 - Верстка блока intro
// О проекте =================
Меня зовут Дмитрий Валак. Я занимаюсь разработкой сайтов уже много лет, специализируюсь больше на front-end разработке и верстке сайтов, но и программирование тоже изучаю. Здесь буду делиться с вами информацией на разные темы по веб-разработке - HTML, CSS, Javascript, JQuery, Vue, PHP, MySQL, React, Gulp и тд.
На сайте проекта brainscloud.ru вы найдете много полезных закрытых материалов, а так же сможете поработать со мной лично, при наличии такого желания.
// Соц. сети =================
Мой ВК - odimaz
Группа BC - brainscloud
Мой Instagram: / dmitryvalak
#верстка #версткасайта #созданиесайта #html #css
*Важно!* Если у вас не отображается фон после написания / cover, попробуйте поменять значения center no-repeat местами. Должно получится так: url(...) no-repeat center / cover; Или просто укажите background-size: cover; отдельным правилом.
У меня не поддерживает
Что делать?
@@stanislavtvs в комментарии написано же
У кого тоже фон не подключается в css , просто перед img пропишите ../ . Css не может путь найти к картинке))
background: #31344e url("../img/intro-bg.jpg") center no-repeat / cover;
@Сервис ИКС background: url(/img/bacground-intro.jpg) no-repeat center / cover;
Дмитрий, спасибо за отличные уроки!
Огромное спасибо за то ,что вы делаете такой контент!
Все больше мотивируюсь после ваших роликов :)
Все стало легче и понятнее !
Спасибо за уроки. Настолько доступно и с душой еще нигде не видел что бы преподносили
Красавчик!!! Столько интересных нюансов узнаю!!! Спасибо большое!!!!
Канал прям растет на глазах) Молодец Дмитрий) Так держать!!!
КЛААААААААААССС!!! Вот этого очень не хватало. Чувствую эта рубрика зайдет очень сильно.
Все чётко, понятно, и главное без воды. Большое спасибо.
я плакаль! это самый офигенный урок для новичка!
Это потрясающе. Огромное спасибо за ваш труд, мне кажется, я тут узнала больше, чем на пяти разных курсах!
после таких видео нажал на колокольчик канала!!! Как только увижу новый контент, сразу ставлю лайк без замедления. Это Вам за ваши труды!!! Спасибо оогромное :))
Доброго дня!!! Изучаю html и css и всё остальное что требуется для фронтенда. Очень приятно слушать полное объяснение всей верстки сайта. Спасибо автору за старанее.
Очень классно, что поддерживаете обратную связь с аудиторией. После серии прошлых видео "Верстка для начинающих" вы действительно стали более подробно объяснять некоторые моменты. Однозначно лайк.
Спасибо Добрый Человек! Уроки Супер!!!!
Классный ролик, особенно когда у тебя уже есть небольшие знания в вёрстке. Помогает закрепить то что уже знаешь и чему-то подучиться. Спасибки
Спасибо большое, не какой воды все по делу + за объяснения отдельное благодарность очень помогают в изучении)
Друг, большое спасибо за старания, на русскоязычном ютубе мало внятных уроков по версте сайтов с нуля, очень благодарен тебе)
Если не сложно, замути как нибудь пошаговую верстку в плане сложности верстки. К примеру небольшого многостраничного интернет-магазина на html/css/js)
Уверен, многие это хорошо оценят, ибо на русскоязычном именно такого очень мало, тем более с такой озвучкой и объяснениями.
Спасибо за данный урок)
+++
Спасибо за видосы, особенно с таким объяснением, для таких зелёных как я это очень важно)
Фрилансер по жизни для тебя шутка ? Лучше уроков чем у него, я еще не видел.
БОСС это круто ) за объяснения отдельный лайк) ибо голос у тебя приятный и микро шик,так почему бы не по объяснять) ,так что тут ты попал в точку спасибо большое
Спасибо! То, что нужно для начинающего front-end developer.
Божественный курс, делал первый блок вместе с вами, просто супер
Благодаря твоим урокам многие здвинулись с мертвой точки! Это то, что я искал, что бы показали то, чем я буду заниматься. Спасибо за труды.
Вы, единственный человек, объяснения которого понимаю! Спасибо за Ваши уроки😍👏👏👏👏👏👏👏👏
Спасибо, вы единственный человек на ютубе, который помог мне. Очень хорошо обьясняете! Надеюсь ваш канал будет ещё больше продвигаться в плане популярности!
я по вашим урокам усвоил html и css за месяц)))) спасибо. Вы лучший!!!
Спасибо большое за уроки. Очень доступно и последовательно все объясняете. В общем, учим с надеждой на лучшее ✌️ Удачи!
Это пожалуй лучшие уроки по верстке! Все по делу, без воды, и голос приятный. Спасибо вам большое!
Дмитрий, спасиБо большое за четкую и лаконичную подачу материала. Отличная работа!
Очень полезные и понятные уроки у Вас получаются. Спасибо большое!!!
Огромное спасибо за чистую вёрстку без фреймворков и js'а. Искал пару часов и среди кучи воды наткнулся на твои полезные ролики.
Все повторял за тобой, и считай с нуля - уже что то знаю) спасибо )
Очень благодарен брату из бывшей Союзной Республики!!! Спасибо за качественный урок. Много нового вынес из данного мастер-класса.
Лучший преподаватель, спасибо за время 😊
Я учусь постепенно, рад что всё понимаю на практике.
Как же мне нравится как он объясняет, на доступном понятном языке для новичков. Продолжай в том же духе, то что ты делишься своим опытом , для меня имеет очень огромное значение, впитываю как губка ))))
Дмитрий, спасибо вам большое за отличные уроки🤗
Чтоб у вас в жизни все было отлично...
Просто суперская подача и объяснения, все четко и понятно. Сразу же подписался, других учителей для новичка и не надо. Удачи тебе и твоему каналу, буду постоянным зрителем.
Сначала сверстал сайт сам, а потом по видео...Очень понятная и приятная подача материала, многое почерпнул для себя нового, спасибо!
Дмитрий огромнейшее спасибо вам за ваши труды ,всё на высшем уровне.Хотелось бы что вы записали видеокурс с нуля сверстать многостраничный сайт и посадить его на движок Wordpress ,было бы вообще супер 👍👍
блин ну опять ты красавец Спасибо за уроки Каналу расти и процветать
Три часа, проведенные с кайфом) Спасибо, есть желание продолжать верстать данный макет!
Не ну реально, молодец!Хотел идти спать час назад, начал смотреть и не мог остановиться))
Хорошо, чётко ..
Я два месяца как учу html css и мне всё понравилось. Так держать.
Подписан!!!)
в следующих уроках расскажи, пожалуйста, больше про flex-боксы.
«У меня хрустнул... стул...»
Улыбнуло)
Прекрасный курс. Закончил HTML, не начал CSS, но понимаю что вы делаете. Это надо уметь. Спасибо Вам!
Очень крутой видеоматериал! Смотрю и не верю, что это бесплатно. Доходчиво, с объяснениями, наглядно. Очень рад, что наткнулся на этот ролик. Лайк и подписка само собой. Автору всех благ и очень-очень много конфеток.
Очень приятно что вы сделали видео ролик такого формата !
34:40 У кого не работает, пишите так:
.intro {
height: 800px;
background-image: url("...");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-color: #...;
}
Спасибо тебе, добрый человек! Заработало теперь!
Сенкю бро :)
спасибо огромное
Оо, спасибо чувак)
скажите почему не работало так как сказано у видео ?
Всегда парился с выравниванием по центру по вертикали, спасибо за урок
Отличнейший урок, в нете очень мало так подробно объясняют по пунктам (а я видео уроков, курсов, пересмотрел туеву хучу:)). Однозначно подписка и лайк)))
Настолько качественного изложения материала я еще не видел. Спасибо тебе огромное за этот курс
С прошлого курса научился отлично верстать. Не помешает еще раз пройти. Спасибо за качественные видео.
Пожалуйста!
Это реально круто. Твои приемы в верстке и то, как ты читаешь макет. Это вдохновляет и завораживает. Сразу видно разбирающегося специалиста. Мне очень нравится такой формат видео. Я посмотрел и сверстал руками твой прошлый проект, после чего взялся сам за свою работу. Было бы круто, если бы ты сделал, возможно, обзор сайтов твоих подписчиков или что-то подобное. Я, да и думаю, не только я), будем рады такому формату. Я бы с удовольствием выслушал критику и получил feedback от такого гуру верстки как ты. Спасибо тебе огромное.
У нас такой формат есть. Иногда я провожу онлайн-трансляции с разбором верстки подписчиков. Жмите колокол, чтобы не пропустить следующий стрим ;)
качественные уроки, наверное, лучшее что можно найти по курсам для начинающих.
Огромное спасибо тебе! Все понятно и разобрано! Мало видосов с таким форматом разбора!🙋
Спасибо за то что Вы делаете! Хочу очень научиться верстке. Ваши видео действительно помогают!
Ну как научились? Два года прошло
@@Aziiim а у вас как? Уже месяц позади
Если у тебя один ролик занял один час, то у меня на его реализацию ушло около двух). Большое спасибо, все больше и больше начинаю углубляться в данную тему)
у меня вообще дня 2 ушло, потому что никак не мог догнать, как вырезать бекграунд и актив бокс
Спасибо за урок! Много фишечек которых не увидишь на других уроках, очень познавательно.
Добрый день.Хочу выразить вам свою большую благодарность.Все по делу и очень доходчиво рассказываете.Большое вам спасибо.
Лучше чем ты на русском ютуб еще никто не объяснял За это лайк и подписка. Спасибо большое продолжай тагже
Ребят скажу так появилась проблема, свойство display: flex; не работало оказалось я криво написал класс в css и html, и знаете минут 30 искал решение пока сам не решил и даже когда решаешь такие тупые трудности становится приятно, решайте трудности и бейтесь до последнего! А автору удачи в развитии контента:)
Автор несколько раз показывал просмотр кода веб страницы(Ctrl+Shift+I), я тоже допустил такую ошибку 1 раз, но потратил 3~ минуты на её исправление, потому что в просмотре кода показывается почему код не заработал (я забыл ; поставить) ) Всем советую почаще смотреть туда)
@@Alexey_Pe А где там показывает почему код не заработал?
Верь, не верь, аналогичная ситуация, прям все точь в точь, сижу и злюсь и не понимаю , почему ничего не выходит. -100 к внимательности
знакомая тема, бывает какая то фигня происходит при верстке , ищу ошибку в коде до тех пор пока не найду, бывало до 2 часов ночи сидел искал ошибку, а там оказывается точку лишнюю поставил или букву не так написал класса в css
СУПЕР! Большое спасибо за ваш труд! Успехов и всего наилучшего!
Даже добавить нечего. Проходил курсы по верстке 3 года назад так и не закончил по многим причинам, а тут на тебе с ноля хоть вспомнил как оно. Спасибо огромное жду продолжения.
34:40 background-size: cover;
о спасибо
А почему через слеш не работает, как на видео ?
Спасибо,а то сидел минут 10 , а почему через слеш не работает?
@@dmitryts9093 работает только на макос.
@@alexeyzemsky Интересно ты придумал
Очень хотелось бы увидеть ролик с советами о том, как настроить фотошоп перед вёрсткой сайтов!!!
Большое спасибо за столь внятную и грамотную подачу материала.
Просто ВАУ контент в своем роде , очень нравится подача материала !
Спасибо огромное за урок. Все предельно ясно, за исключением Флекс боксов. Гугл у меня не сломался, он работает, только я никак не могу д конца догнать где и как лучше их использовать. Если есть возможность, пожалуйста, сделай отдельный урок по флексу. Спасибо ещё раз за урок
обоже, бочик потик, годный плейлист
Дмитрий спасибо за суперский контент !!! Я начинаю изучать верстку )) Одновременно смотрю тебя очень интересно и главное понятно !!!В дополнении ты еще добавляешь знания о дизайне !!!! Спасибо огромное !!! 👍👏
СПАСИБО ОГРОМНОЕ!!! ТЫ ПОКАЗАЛ АКТУАЛЬНЫЕ МЕТОДЫ В ВЕРСТКЕ САЙТОВ. И мне это очень помогло.
СПАСИБО!!!
"У меня хрустнул стул." 🪑 🙈😂😂😂😂 (очень надеюсь с вашим стулом всё в порядке 47:57)Успехов вам, а у нас учёба на карантине продолжается👍🏻🧻🧻😁☺️😍😍😭🤪🤯😱😷
Вообщем, посмотрел бесплатные - вдохновился. Купил курс. Теперь думаю стать front-end разработчиком. Без Дмитрия бы ничего не вышло. Очень тебе благодарен, это не просто мастер класс, это мотивация.
Добрый день. И как у Вас успехи в обучении на платном курсе?
@@user-irbidДобрый!) Ну, платный курс я уже прошел как 6 месяцев назад, курс отличный
После курса начал учить JS, теперь уже постигаю React, пытаюсь попасть на стажировку в аутсорс компанию
В целом, потихоньку движемся
После этого курса я больше по верстке ничего не смотрел - занимался только JS, верстки мне вполне хватает и до сих пор
@@diamaxel А может можно с Вами немного пообщаться на другой платформе, так сказать пару уточняющих вопросов по спрашивать.
@@user-irbid Не получается отправить ссылку на tg - можете написать мне в личку?
pushAndGrab tg
Спасибо большое за такой подробный урок!!!! Не могла оторваться ! И результат обрадовал !!!
Спасибо Вам! Вы мастер своего дела, все доходчиво объяснили!
Я не понял......, что за два придурка поставили "дизлайк". Отличное видео, доступно излагаемый материал! Автору профессионального развития и финансового благополучия!
У кого не работает background url, делаем так:
.intro {
height: 750px;
background-image: url("../img/Intro-bg.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-color: #2a2e48;
}
добрый человек дай бог тебе здоровье сколько часов м мучился с интро бусурманским только твой коментарий помог мне
благодарОчка
бля, огромное спасибо! А почему собственно не получалось как на видео?
@@mancekage3165 вот мне тоже интересно почему не работает так как на видео
спасибо дружище
Смотрел этот курс сначала просто повторяя написание кода. А после, начал пересматривать для наглядного примера по различным элементам уже в просто изучении и понимании как это устроено. Спасибо за подробность проделанных действий.
Прекрасная работа! С удовольствием сижу и верстаю параллельно с тобой, спасибо!
47:42 Подскажите, почему кнопку сделали inline-block, если можно было просто block и margin 0 auto для центрирования? Спасибо
47:52 ахах)) момент заставил поставить на паузу и улыбнуться))
уверенна, у него новый стул 🪑 😁
Дмитрий спасибо за Ваш труд. Здоровья Вам.
Спасибо огромное за уроки! Супер подача материала! Все предельно ясно, понятно! занималась web-desing, рисовала иллюстрации, но в какой-то момент захотелось сверстать себе что-то и .... у меня все получается!! (почему такая радость? потому как мне 45+ и, к сожалению, мозги уже не такие шустрые. Но, с вами все очень легко! ) Спасибо большое!
Делал всё точка в точку, но иногда не работает. Пришлось например кнопку самому прописывать через button вместо , она не выравнивалась по центру. Может ли влиять версия винды или редактора кода? В целом очень полезно для обучения.
Сам занялся программированием ради интереса две недели назад и меня это поглотило целиком. Работа есть, пенсия тоже (ушел в 40 лет), захотелось научиться чему то в этой области и всё тут. Спасибо автору, делится знаниями и опытом задаром, бери не хочу.
Ни винда, ни редактор кода не влияют. Скорее всего где-то ошибка. Нужно проверить структуру вложенности (там кажется был дополнительный контейнер) и проверить css свойства: justify-content: center; и text-align: center;. если всё в порядке, то ошибка возможна в типе элемента: блочный или строчный (display: inline-block) или позиционирование display: flex забыл поставить (Column).
@@kirillkononov5094 Ломал голову, оказалось я просто увеличил масштаб страницы.....................
Привет. Как ты? Поверстаем немного?)
Купил твой курс за 30$, но даже его не открывал. Прост хотел тебя поблагодарить за уже проделанный твой труд и за будущую твою работу. Спасибо тебе
@@elitech3339 Спасибо)
Да)
@@elitech3339 Я тоже купил!) И всем рекомендую уроки Дмитрия (не реклама) а совет! При прохождении курса были кое какие трудности с установкой gulp. Дмитрий подсказал как и что делать. Но не это даже самое главное (хотя для новичка это немаловажный аспект), а главное что подача материала у него четкая, понятная и полная! Рекомендую! Профессионал! Ах да еще, Дмитрий ждем уроки с макетом ХD...по js не помешало бы)))
@@slava_po Полностью согласен!
Это самый лучший практический тренажёр который можно представить
Нужно повторение ( мать учения)
И практика практика практика
Респект автору!!!)))
Спасибо. Действительно, надо было начинать с этого урока, а потом идти дальше.
Почему не юзаешь Avacode?
47:08 у себя в редакторе один в один то же писал, но когда добавил кнопку, она была прижата к левому краю intro__inner'a смотрел и думал что не так, потом так и не нашёл и исправил это тем, что дал в intro__inner "display: flex, flex-direction: column, align-items: center", Не понимаю, почему кнопка у тебя была по центру, а не как у меня возле левого края, потому что до этого дисплей флекс и его параметры были только у intro и для его дочерних элементов, а выравнивания по центру не было для элементов внутри intro__inner
Очень помог, спасибо))
Как обычно - чётко, ясно и по делу. 5+.
Спасибо большое за БОЛЕЕ детальное пояснение мелочей, за хоткеи в IDE, за какие-то добавочные мысли по поводу тегов и
34:40 Почему у меня не подгружается фон, кто может подсказать?
такая же фигня,
спасибо за -webkit-font-smoothing: antialiased;
Жаль что работает только на MacOS
Оставляю уже второй комментарий...Как и писал ранее о намерении повторить, я сделал это) Всё получилось, для саморазвития полезно, кто то может даже переучиться с другой профессии решит.
Итог: доступный урок даже для человека из другой сферы как я, который вообще ничего не знает и не слышал о программировании! БРАВО!
Спасибо огромное за ваш труд, видео отличные и очень мне как новичку помогают!
Не было мысли записать как-нибудь подробный разбор flexbox?)
пока нет
Озвучка: - "У меня хрустнул стул" ))))))))
Спасибо большое за уроки. Очень доступно и последовательно все объясняете. В общем, учим с надеждой на лучшее ️ Удачи!
Дмитрий, спасибо вам большое за отличные уроки!
Это что, нормальное видео с нормальным звуком??? Я его нашел !!
Кто решил выучить html и css на карантине?
Я, для меня пока это вода. Но думаю если буду смотреть BrainsCloud то научусь)
Учись на практике
Я думаю что вариант лучше чем страдать не понятно чем я вас подержу
html выучил, сейчас учу css:)
✋
Только закончил тот сайт верстать и на следующий день выходит этот курс, спасибо кабас
Очень крутые уроки, огромное спасибо за них! Я дизайнер, хотелось бы освоить верстку на хорошем уровне, чтобы было меньше боли для верстальщиков ))