#1 Верстка сайта с нуля для начинающих | HTML, CSS
ฝัง
- เผยแพร่เมื่อ 16 ก.ค. 2024
- В этом видео начнем верстать сайт с нуля. Верстка сайта это процесс создания сайта из макета, который нарисовал дизайнер. Видео для начинающих, в нем не будет препроцессоров, сборщиков и каких-либо инструментов, только HTML и CSS!
------------------------------------------------
Основы HTML и CSS для начинающих: brainscloud.ru/landing/html-css
Верстка сайта транспортной компании: brainscloud.ru/landing/logist...
Файлы урока: files.brainscloud.ru/file/mog...
Главы видео:
00:00 - 03:10 - Подготовка к работе
03:10 - Создаем проект
05:35 - Шрифты
09:30 - Can I use?
11:50 - Начинаем верстать главный блок
16:30 - Верстаем шапку
25:40 - Верстаем заголовки
33:30 - Совет и ошибки начинающих
34:40 - Верстаем кнопку
39:00 - Верстаем нижнюю часть
------------------------------------------------
Меня зовут Дмитрий Валак. Я занимаюсь разработкой сайтов уже много лет, специализируюсь больше на front-end разработке и верстке сайтов, но и программирование тоже изучаю. Здесь буду делиться с вами информацией на разные темы по веб-разработке - HTML, CSS, Javascript, JQuery, Vue, PHP, MySQL, React, Gulp и тд.
На сайте проекта brainscloud.ru вы найдете много полезных закрытых материалов, а так же сможете поработать со мной лично, при наличии такого желания.
------------------------------------------------
Мой ВК - odimaz
Группа BC - brainscloud
Мой Instagram: / dmitryvalak
#верстка #версткасайта #html #css #css3
Он как математичка, только на 1 секунду отвернулся и уже все расписана
отвернулся еще раз на секунду - она уже все стерла с доски)
🤣🤣🤣да. Парень толковый, но я, видимо, плохой ученик. Мне нужен офлайн.
@@daniil__kryuchkov Еще раз отвернулся на секундочку, затрещина и предков вызвали...
Вот по этому я пересмотрю все эти серии раз 20 что бы не упустить нечего
@@evatayga305 Не в этом дело, дело в том что он просто пишет, не объясняя, что это, как оно работает, почему именно это мы используем, он просто пишет, а че зачем и как думай сам
случайно наткнулся и похоже это лучшее из подобного. без воды, с нормальным микро. и голос не унылый и не гнусавый. а то от некоторых уроков в сон тянет
@misha очень кстати
Гнусавый? 😄 Убили. 😂 Я тоже не могу смотреть видео если у автора противный голос. Но Дмитрий конечно нас поразил. Досмотрела видео до конца с умным видом, хотя я в этих делах вообще ни бум-бум.
@misha ахаххахах, ну-ну, улыбнул
БОже, сейчас 2021, почему я только сейчас нашёл этот канал
BRO, мне 35, я локти кусаю что не нашел на просторах Net'а этого человека раньше...
@Wilmer Zhou В точку!!!
Ага
на дворе 2024г смотрю курсы по фронтенду.
на дворе 2024. через пол года после того как я оставил этот комментарий я нашел работу в небольшой веб студии на vuejs, спустя еще полгода перешел в более престижную компанию на ту же позицию, в которой работаю уже почти 2 года. Спасибо за такой хороший ресурс, который помог мне в начале моего карьерного пути.
Как же это прекрасно - смотреть , как специалист творит легко и непринуждённо!
@Weather Forecast вот вот , просто пишет, а мы списываем как с гдз) Понимая, но не все, просто лепит как на собесе
Я охерел просто. Однозначно лайк и подписка. Увидел, как в живую все это верстается, завораживает, как автор умело быстро пишет код. Есть чему поучиться, спасибо)
Я горозда быстрее пищу код чем у автора
И у него есть несколько ошибку
@@thebestgoals.intheworld6363 у тебе тоже
@@thebestgoals.intheworld6363 Ну тогда пили видосы! думаю проблема в скорости связаны с тем что в видео указанно"для начинающих" как я как человек который решил веб программирование только начать изучать, и так еле поспевал отматывал в определенных таймингах, тут дело не в скорости, не профессионализме, а в том чтобы донести информацию, о том как это работает, понятно что теги и всю мелочь разжёвывать не нужно, каждый сам должен разобраться! ну это как после вуза прийти на работу по специальности, вроде бы ты учился и все понятия знаешь, но на деле ты н..на не понимаешь и неделю другую начинаешь осваиваться!
В общем! Глупая претензия с моей субъективной точки, но если можешь лучше! Пили гайды!
Автору видео лайк подписка!
@@dimaholiaka4762 ага
Без воды, сразу к делу
В топы в общем
поставил 392 лайк.
поставил 560 лайк.
Недавно начал заниматься изучением HTML и CSS,боже твои уроки просто бесценны,уровень знаний зашкаливает.Единственное НО,слишком быстро всё делаешь,чуть помедленнее,я думаю что новичкам тоже очень тяжело с такой скоростью воспринимать информацию.Огромное спасибо тебе!)
Я смотрю с замедленной скоростью )))
как успехи? спустя 3 месяца?
@@strazik такой же вопрос :)
Добился чего нибудь за это время?))
@@user-qd9us8bd1t работает грузчиком этой мой друг
Круто! Новичкам очень полезно в живую смотреть, как это происходит с нуля.
Ничеси уже лям просмотров, ю ноу!
ое, я как раз только зашел, чтоб поучиться по этому видеоуроку
^_^
@@user-ms4ro2dx5o +, видос топчик)
Полезное видео для начинающих, сам по нему учусь верстать))
просмотров 200 я сделал, а может и больше)
@@nikrybkin согласен))
Пожалуй самый лучший гайд на ютубе. Отличный микрофон, хорошая подача и речь. Ничего лишнего - только нужная информация. Автору огромное спасибо!
Спасибо тебе большое!!! Раньше такое обучение бесплатно фиг где найдёшь, а тут все! Дай бог тебе здоровья!
Автору большой респект! Мало сейчас кто так подробно и без воды объясняет!
плиз донт стап Внятная грамотная речь Если можно чуть больше пояснений по конкретным свойствам и значениям Почему рациональней применить именно это Удачи тебе и каналу))
Пожалуй , это самый информативный канал из всех. Все максимально разжёвано и понятно
Плейлист по верстке с этим сайтом первое с чего я начал учить программирование, сейчас подучив все что я хотел я решил вернуться подтянуть и попрактиковаться с Html и Css именно по этим урокам. По тому что сколько я разных роликов и уроков не смотрел, лучше разбора и объяснений действий я не находил, хорошая подача, и объяснение каждого шага дают написать этот сайт реально с нуля.
Спасибо Дмитрий за твои уроки верстки!
Я думаю разбор какого то большого интересного сайта с Figma был бы интересен зрителям, продолжай снимать ролики, у тебя отлично получается объяснять!
Ура, Дима вернулся! Хотелось бы увидеть продвинутые уроки по джаваскрипту
Super!!!! Ждём продолжения, уроки Дмитрия одни из лучших))))))
Спасибо огромное, отличная работа, чувствуется рука специалиста. Давайте ещё видео по этой теме!
Спасибо большое за данную вёрстку, оч приятно слушать и вникать 👍👍👍
Очень классно, без лишней воды и как раз то что я искал, продолжай в том же духе!
Давно видео твоих не было. Спасибо, продолжай!
спасибо за прекрасный урок!!! Верстала ActiveBox с вами и благодаря Вам поняла как вообще верстать. Потом сверстала сама по бесплатному макету, когда начала верстать постоянно возвращалась к видео ActiveBox, но к середине верстки уже все делала сама ну и гуглила естественно некоторые моменты. Сейчас начала верстать MoGo с вами. Спасибо за ваш труд и возможность учиться у Вас!!!
Очень полезно и интересно посмотреть новичку вроде меня. Всё объясняется и можно наглядно увидеть реальную работу. Круто!
так как я только начал учит HTML и CSS,у меня сейчас просто взрыв мозга.Однозначно лай и подписка
Я html и css учу 2меcяца c перерывами , я уже очень много екcперементировал и теперь мне понятно это все , ты главное пробуй делать легкие сайты На чистом html и css , не лезь покачто в буcтрап и ему подобных.
Извиняюсь, что вклинаваюсь в беседу, но я вот тоже начала узучать.Делала курсач и копирую стили+немного изменяя параметры думала что все легко.Сейчас от теории в шоке немного, а это еще препроцессоры, флекс и грид не трогала.
N-Fix мне тоже один мой знакомый который создавал раньше сайты для всяких магазинах и салонов сказал что главное,много пробовать и тренироваться,експериментировать другими словами
N-Fix чел я благодаря этому видео научился верстать сайт почему ты считаешь что не надо лесть в бустрап?
Не помешало бы ещё русский подтянуть прежде чем за программирование браться
Блин, да конечно интересно как это делать, полностью весь сайт! Спасибо, очень информативно. Побольше бы таких видео на просторах ютуба.
Хочу сказать, раз уж этот курс для новичков, следовало бы в начале прям точно объяснять для чего и что делает эта команда, а то иногда не совсем понятно :)
++++
htmlbook в помощь
@@MiklashBLITZ подскажите пожалуйста несколько хороших и понятных (если можно то на русском) сайтов с html и css
@@akihiro___ раджу вивчити англійську для програмування. і буде легше жити
@@ukrainian_emperor Спасибо конечно, но мог бы уже и не отвечать...
Так как новичок(прям чайник) очень быстро объясняет автор, и коды конечно объяснить нужно. За видео спасибо. Думаю по образцу сделаю. Буду пробовать
Спасибо, есть, чему поучиться. Продолжай в том же духе.
Ты прекрасен! Спасибо! Чётко, ясно и по-делу. А главное, чисто и без сакры
Супер, спасибо за работу! и за прикрепленный файл урока)
Как приятно слушать человека с хорошим голосом и понятной и интересной подачей
Спасибо за супер подробное видео! Это то что нужно новичку. Изучаю html и css всего 2 недели и уже с твоей помощью понимаю, что происходит)))
сижу, переписываю код, и радуюсь как дурак от того что, что-то та получается
Интересное видео!
Благодарность за Вашу работу для нас!
Спасибо Вам большое :) Вы - такой молодец :) Отлично все объясняете, спокойно :) Все понятно :)
Огромное спасибо! Интересно, информативно, профессионально. Очень приятный стиль изложения и голос. Ты крут!
красавчик, после твоего видео стал понимать, что такое верстка
Очень круто! Я до этого просто теги учил и если честно интерес стал пропадать, непонятно было нафига я вообще это делаю. А тут на живом примере видно что и куда я тыкаю и что из этого получается. Конечно я просто повторял но это очень помогает лучше усвоить информацию, к тому же допуская ошибки даже в повторении того что было в видео и посидев подумав что я сделал не так я чуть лучше стал понимать структуру кода и что к чему относится. Спасибо большое за урок!
Хорошая подача, все просто и по теме, минимум воды. Спасибо за ролик!
Весьма благодарен, Димок.
Дай бог тебе здоровья на 1000 лет.
Очень помог.😘
Спасибо)часовой урок выполняю 2 дня)с учетом того что просто делаю как показываете)
Отличное видео! Посмотрел, сверстал, прикрутил к CMS и выложил на хостинг. Все работает!
Однозначно лайк и подписка, материал по верстке подан в наилучшем виде, останется как никак важные знания в голове (думаю совсем скоро пригодятся) :)
49:00 минуте, "-сейчас вы все поймёте для чего это все делается", я по специальности автослесарь 4 разряда)) Чувак ты крут🤙))!
я учусь на слесаря, потом на прогера иду :D
@@heshpix_7057 Я 13 в гос. службе отработал. Лучше бы я на слесаря пошел...
Это реально круто! Всё по делу и понятно. Главное всё в рамках практики, без лишней инфы и не затянул на 7 часов как некоторые делают. То что разбил на несколько видосов тож +. Спасибо тебе)
Благодарю, я только начинаю изучать HTML и CSS, а ты сэкономил мне кучу времени, уверен, что буду возвращаться к данному видео снова и снова.
а во сколько лет ты начал(а) изучать? просто интересно
🌟🌟🌟🌟🌟 *Спасибо за очень полезный и понятный урок!!!* 🌟🌟🌟🌟🌟
отличное видео... многому так можно научиться! СПАСИБО АВТОРУ
Это видео то что я искал, спасибо))
Я просто в шоке 🙀!!! Спасибо за видос, спасибо за ваш труд. Просто супер💯👏
На самом деле я как человек с нулём опыта и познаний в этом зашедший на видео посмотрев почти половину могу сказать то, что я абсолютно ничего не понял. Если конкретно хочется тематику обучения вести, стоило бы объяснять каждое действие максимально подробно. Какие-то правила, after не after, после буквально каждого слова шёл гуглить но тоже почти ничего не находил))
Спасибо, что делаешь это бесплатно! Редко можно найти того, кто выложит видео и предоставить материалы без круглой суммы! Очень классно! Надеюсь, что ты будешь порой давать классные фишечки. Однозначно, подписка! Сегодня буду пробовать сверстать первый сайт! Продолжай в том же духе! Успехов тебе, добрый и бескорыстный человек! 😉👍🏻🧚🏻
как успехи?)
@@user-fz5hx1us7g отлично) сверстала за пару дней, уделяя до 5-6 часов. Крутой опыт. С абсолютного нуля. Теперь база обеспечена)
@@user-fz5hx1us7g а у вас
Ауу
@@herosapiens1865 честно говоря я откладываю все в долгий ящик,типо знаю основу пайтона,а дальше перестал развиваться.Думаю в скором времени продолжить обучение
Потрясающе. коментирование во время работы очень умело сделано.
Зашла по другому вопросу - залипла на 50 минут. Просто супер, как залипательно)
До этого видоса смотрел уроки и чуть не засыпал, а здесь всё интересно и понятно а главное не нудно красава
Вау, очень круто, что бесплатно и так информативно!
Я верстал в VS code, к нему как то больше привык) побольше б таких информативных как ты!
Спасибо огромное за видео. Хоть кто-то показывает на практике, причем профессионально.
Не думал, что есть человек, который на столько информативно и без воды говорит..
Круто! Нет слов...зависла на этом видео...перематываю - записываю, перематываю - пробую повторить...кайф...лайк и подписка плюс 100500 в карму!!!
спасибо. Благодаря вам закончил свой университетский
проект
Спасибо тебе , что так постарался для нас, ты лучший!)
чувак спасибо тебе, я только начинаю этот путь, и буду стремиться к твоему уровню знаний!
Спасибо большое автору за видео. Пусть и не отношусь по профессии никак к сайтам, одним из заданий нового информатика было написать сайт. За двое суток. Когда даже нас не обучали ничему толком.
Эти видео стало спасением и наглядным примером того как вообще что должно работать.
Помедленней. Я записываю :)
Кто смотрит в 2020?
я смотрю в 2020
Я смотрю )
)
Vlad Danilov хай )
А что это не новое видео?
Огромное спасибо, благодаря вам я нашёл свой путь.
Всё понятно показано, спасибо большое. По примеру видео верстала свой действительно самый первый сайт из-за этого не хватило чуточку объяснений, но в практическом плане всё супер !🤩
Благодарю. Сам учусь на тестировщика, очень полезный урок. Год назад когда просто решил попробовать ничего не понял и не получилось. Но если раздуплится с самого нуля, понять что такое те же классы, отступы, как они работают то все отлично. Рекомендую людям смотрящим урок немного переделать ПСДшку под свой какой-то сайт, так даже интереснее и появляются задачки вне урока. Можно пробовать, игратся.
Блин, афигенно! Все повторил! Все получилось! Еще я вспоминал верстку, которую на степике учил. Сэнкс. Просто афигенно учишь. Особенно мне нравится, как ты классы именуешь и порядок там наводишь.
этот стиль называется БЭМ
@@omcg33 типо БЭЭЭЭЭЭЭЭЭЭЭЭЭМ
какой же голос релаксовый, могу слушать вообще что угодно
😂😜😘😘😘😘
я уснул
Обучаюсь на специалиста по информационным система, начали проходить html, ваше видео выпало в рекомендациях, сижу глаз не свожу! Как это все таки интересно, после вашего видео хочется открыть vs code и сидеть верстать что-нибудь, но пока знания не позволяют( Дело времени! А с меня подписка и лайк!
Я только начал изучать язык программирования)! Автору канала огромное спасибо за контент😎
Без воды, все четко по делу. Мотивирует изучать язык) У тебя хорошая подача) А то посмотришь на некоторых, аж желание отпадает изучать что-либо, а тут прям завораживает!)
HTML и CSS это не языки программирования
@@Dark_._Knight Он не сказал, что это языки программирования, гений
Лайк подписка автоматом! Ждём продолжения!)
Отличное видео работы.
Намного лучше заходит, когда уже что-то знаешь по теме верстки. Полгода назад я его смотрел с мыслями "Где я?"
ваш канал находка)
методичность
голос
скорость работы
вау
Чувак очень интересно, продолжай но по медленнее и больше рассказывай о том что именно делаешь и как ещё можно )) мне лично понравилось
спасибо большое за такие подробные и интересные видео (50 минут на одном дыхании) а то есть те у кого продолжительность 15-30 мин и их не возможно слушатью с меня лайк и подписка
100к, поздравляю 👌🏻👌🏻
Вообще класс!!!Очень завораживает как ты пишешь код,спасибо большое очень многому научился такие уроки на вес золото!Спасибо автор!
Спасибо, помог сделать сайт для защиты. Дай Бог здоровья
автор привет!, Спасибо за урок, все понятно и без воды!, Не забрасывай канал:) пусть будет твоим хобби который(через время) будет приносить тебе прибыль:) Удачи
Отлично, пища на вечер
Первый раз верстал и я не прогадал с выбором видеоурока, автору большое спасибо!
Лайк не задумываясь!)
Классно доносишь информацию, легко и понятно. Спасибо.
Одно замечание есть по структуре:
Заголовок h2 ОЧЕНЬ не желательно ставить перед h1.
В этом случае лучше заменить на , или .
Это с учетом по дальнейшему SEO продвижению.
Здравствуйте, подскажите а вы в этом разберитесь ? Хотела попросить помощи 🥹
Так є фах в seo, якщо треба звертайтесь
Супер!!! Красава! Лучший канал для обучения!!!
Дружище привет)Спасибо все четко и понятно)👍
Отличное видео, все по делу, все понятно, так как я уже с определенным багажом знаний смотрю видео, и каждое действие понимаю. Для тех, кто не понимает, хочу сказать, что это нормально, посмотри я это видео месяц назад без определенных знаний, я бы тоже ничего не понял. Так что это не совсем урок, я бы сказал. Это, скорее визуализация полученной теории в практике. Было очень интересно наблюдать за работой. Спасибо за видео.
А где до этого видео учил верстку?
Решил подучить frontend. Это мой первый практический урок по вёрстке и, я очень рад, что попался этот ролик. Отличная подача и голос, автор всё объясняет до мелочей. Лайк и подписка. Буду учиться по видео с этого канала дальше. Автору большое спасибо, так как в видео вложено много работы(это не тиктоки снимать).
Как успехи?
Спасибо,друг!Начинаю учить язык благодаря тебе. Все очень легко и понятно.
И толку ?
Спасибо за качественный и полезный контент!
Чувак ты крутой, профи. Все классно получилось в итоге, у меня все отлично сверсталось, но говоришь слишком быстро, я даже делаю скорость видео в настройках меньше. Хотелось бы также услышать немного теории, почему так, что мы делаем и т.д.
Слишком быстро для новичков в верстке *
Чмок ;*
Я - наоборот, скорость на 1.25-1.5
@misha вроде это видео для этого и создано. Тут, кажется, написано "для начинающих", а не "верстка с нуля до заливки на хостинг за час на бутстрапе".
Автору спасибо, понятно объяснил, показал, научил.
misha не поспоришь
misha согласен
Viktoria Vatuleva Только хотел это написать и решил поискать эту идею в комментах. Ты в css что-то если используешь, можешь пояснять, что это, как работает, что делает и тд.
Спасибо Вам большое. Я поняла, что никогда не смогу этим заниматься))А Вы невероятны
Эй эй эй, только не опускать руки! Можно перестать заниматься чем-то, только если хотябы начал или попробовал! Попробуйте, может это как раз то чем вы и хотите заниматься в глубине души! Советаю посмотреть ролик html с нуля, тогда все станет проще, в этом видео
Да, это относительно для новичков, на самом деле верстка ,как в видосе - чуть выше уровеня новичка)
А толку ? Зарплата 1000 долларов, это делают студенты за пачку чипсов@@foti444
Блин учусь в скилбоксе и приходится пересматривать уроки, ничего не понятно бывает, а тут все наглядно!!🔥 Лайк/подписка
Быстро за полгода изучали верстку. Не особо успевал что-то осмыслить. Делал все через грид и как-то через костыли пытался расставить объекты на места. Решил поискать видео, чтобы все заново повторить. Благодарю за видеоролик, очень полезно было. Пойду дальше изучать основы верстки!
Спасибо большое. Мне помогло. Ты красавчик))
Дмитрий, спасибо. Я вам безмерно благодарен за эту серию видеоуроков. Вы прекрасный специалист и мы (зрители-новички в вёрстке) мечтаем быть похожими на вас. Ваш труд характеризуется русской поговоркой "дело мастера боится".
Удачи вам во всех начинаниях и побольше отдыха от работы
🔥
Прошло пол года с момента, как решил начать изучать и теперь подрабатываю на фрилансе благодаря твоим видео, плюс дополнительно статьям
Дмитрий, спасибо!) Важная и полезная инфа!