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

Подписаться 177 тыс.

Просмотров 125 тыс.

50% 1

Продолжаем наш курс по верстке сайта с нуля для начинающих! В этом видео заканчиваем основную HTML верстку сайта и впереди нас ждет адаптивная верстка данного PSD макета.
------------------------------------------------
Основы HTML и CSS для начинающих: brainscloud.ru/landing/html-css
Верстка сайта транспортной компании: brainscloud.ru/landing/logist...
Файлы урока: files.brainscloud.ru/file/mog...
Главы видео:
00:00 - Верстаем блог
20:30 - Верстаем карту
28:28 - Верстаем подвал сайта
------------------------------------------------
Меня зовут Дмитрий Валак. Я занимаюсь разработкой сайтов уже много лет, специализируюсь больше на front-end разработке и верстке сайтов, но и программирование тоже изучаю. Здесь буду делиться с вами информацией на разные темы по веб-разработке - HTML, CSS, Javascript, JQuery, Vue, PHP, MySQL, React, Gulp и тд.
На сайте проекта brainscloud.ru вы найдете много полезных закрытых материалов, а так же сможете поработать со мной лично, при наличии такого желания.
------------------------------------------------
Мой ВК - odimaz
Группа BC - brainscloud
Мой Instagram: / dmitryvalak
#верстка #версткасайта #html #css #css3

Опубликовано:

3 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 257

@BrainsCloud 5 лет назад

"00:22" - Верстаем блог "20:30" - Верстаем карту "28:28" - Верстаем подвал сайта

@lerwoc Год назад

Ты весь видео говоришь фразы - "Как-то так", "Ну как-то то так", "В общем как-то то так* 😂😂😂👍🏼

@user-dy7fj6xn3q 4 года назад

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

@helloi_fret7747 4 года назад

Сюда дошли лишь единицы)) просто офигительный материал, спасибо огромное!!!

@StepaAan_Official_youtube 2 года назад

Да, но впереди еще путь, из 4-рех уроков...

@aliaksandrtarashkevich3048 4 года назад

40 Минута "Я устал, нужно заканчивать" И пишет еще почти столько же :D Спасибо огромное за урок!

@abrorabdulkasimov Год назад

хахаахха понимаю тебя

@yurisamarin8200 4 года назад

*это первый сайт который я сверстал в ХТМЛ* спасибо учитель...

@trayderonelove4167 4 года назад

*так же я вырезал всех клиентов* :D

@user-es3bq8fs9n 5 лет назад

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

@justrats4749 3 года назад

Спасибо за урок! Мне очень понравилось, огромное спасибо что даёте нам возможность развиваться! Мне всего 10 лет, но Вы рассказываете так понятно, что даже у меня не возникло никаких ошибок! Поставила лайки на все видео этой серии, и подписалась в знак благодарности, ещё раз спасибо!

@channelofmaks9505 2 года назад

сейчас мне 11 но начал я это в тоже в 10 к моему большому сожалению я это бросил и вот спустя год я снова этим занимаюсь. надеюсь ты не бросил это и сейчас уже человек с большим опытом в программировании

@bambimbambas 3 года назад

Ребят, я за эту серию видео понял верстку на практике больше, чем на курсах, больше чем по самоучителю. Да, много моментов еще не понятны до конца, или вообще не понятны) Но насколько это было круто))) Однозначно 1000/100 балов. Голос очень приятный - не бОтанский. Парень говорит всё только по существу!!! Спасибо, здоровья тебе и твоим близким, не болей !))) P.S. Хотелось бы в таком формате вместе с вами изучать Bootstrap)

@bambimbambas 3 года назад

Я вчера всю ночь просидел просидел за версткой) Одно ваше видео получасовое я прохожу часа за 1.5-3. В школу пошёл, поспавши час всего. Но это того стоило

@mironov4056 Год назад

Как успехи?)

@user-vw1bp9xk9v 7 месяцев назад

@@mironov4056 Где-то под Бахмутом удобряет землю Русскую.

@Mykhailo_Vdovychenko 5 лет назад

Самый длинный урок, со всех (те были до 40 мин), но на столько интересен, что реально время очень быстро прошло. СПАСИБО!

@annasmaglo1312 4 года назад

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

@BrainsCloud 4 года назад

я рад что вам понравилось!

@Den_camrad 3 года назад

Спасибо, еле "добил" урок после 12 часовой смены на заводе!

@user-ml9lh7zn7d 3 года назад

респект таким

@user-ku4nk7sf1j Год назад

Хотелось бы обратить внимание на следующее. У этого ролика больше 90 тыс. просмотров и только 3 тыс. лайков. Труд, проделанный автором ролика, однозначно заслуживает большего. Давайте уважать друг друга и тех, кто для нас делает большое и важное дело. Дмитрий делится с нами своими знаниями и формирует у нас практические навыки, которые для некоторых возможно станут профессиональными. Всем добра.

@EpicKeyz 5 лет назад

Огромнейшее спасибо за видеоролики! Это просто мощнейший старт для меня. Местами не хватает подробного объяснения некоторым CSS-функциям, но ничего страшного, буду гуглить.

@korotun_nadi 4 года назад

Вы просто гениальны! Ваши уроки великолепны! Учиться по ним одно удовольствие. Огромное вам спасибо за вашу работу. Будем ждать новых видео с нетерпением)

@Dean-nh3ms 5 лет назад

Сверстал макет вместе с тобой) переходим к адаптации)

@BrainsCloud 5 лет назад

Отлично!

@user-zf6hg2vj7g 4 года назад

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

@BrainsCloud 4 года назад

welcome )

@user-xp7et2oj8b 2 года назад

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

@dmitriylazarev1550 3 года назад

Спасибо за урок! Это 2-й сверстаный мной макет и на это занятие у меня ушло не 1.10 , а полтора дня )) Что мне понравилось, так это перенимать способ мышления по продумыванию структуры. Подписался и ставлю лайки на все твои видосы!

@user-lt2bn4nv4j 2 года назад

Я больше недели это верстаю... 🥴

@dmitriylazarev1550 2 года назад

@@user-lt2bn4nv4j терпение и труд все перетрут. Уже почти год прошел как оставил комент и почти год как устроился на работу и теперь делаю что-то подобное по 8 часов в день. Скажу, что прогресс в развитии ощущается когда возвращаешься к опыту, который был раньше)

@aleksandrkedria4024 5 лет назад

В восторге от подачи материала! Так держать.

@clydegriffiths4085 4 года назад

Дмитрий, спасибо Вам за Ваш труд,это просто неоценимо

@Vikosha123 5 лет назад

Ух, насыщенный урок! Спасибо!

@BahtiyarBasharov 4 года назад

Лучшие уроки на RU-vid что видел по HTML. (До новых еще не дошел) Этот урок реально тяжко прошел )))) Спасибо большое!

@user-rp9po1ev5r 2 года назад

Урааа! Я это сделала! Свой первый сайт) Спасибо большое. Осталось до конца разобраться с фотошопом😬😑, копировать текст не пойму как оттуда, но выкрутилась в конце, значек кооперайт нашла в иконках и добавила😄✌️. Может кому то и будет смешно, но для меня это победа, я собой горжусь😁😜

@olegtsimfer455 4 года назад

О, это самый-самый тяжелый урок) Не то, чтобы сложный, за тобой очень легко повторять, но тоже под конец вымотался. Очень круто, спасибо огромное!)

@rebalka4536 3 года назад

Огромное спасибо автору, это самый подробный видеоурок, который я когда либо видел!!!

@user-ci2rv2re2z 5 лет назад

Огромное спасибо за ваши уроки!

@dolfbabun4323 2 года назад

Дима, какой же ты умничка) Под конец сидела смеялась уже, устал так))) ОЧень крутая серия уроков. Спасибо тебе большое за твой труд)

@dehydrogena 3 года назад

Шикарные уроки, спасибо, Дмитрий!

@stasfirsov 2 года назад

Спасибо большое за эти уроки! Очень крутой формат. Прям с каждым уроком растет скил

@user-bo2fn9ye6b 3 года назад

Хороший урок с хорошей подачей. И целый час можно усилено пописать.

@whatisloveel 4 года назад

К 6-7 уроку появилось понимание , и уже для теста сделал два других макета сам, спасибо!

@kirillguryanov312 2 года назад

Большое спасибо за эту серию роликов!!!В 2021 все также актуально и максимально полезно!!!

@user-yb9uf8uz8k 4 года назад

Урок и правда был объёмный, делал его за два раза, времени в общем вышло часов 5. Большое спасибо!

@pepega_blue 2 года назад

Дмитрий, спасибо. Я вам безмерно благодарен за эту серию видеоуроков. Вы прекрасный специалист и мы (зрители-новички в вёрстке) мечтаем быть похожими на вас. Ваш труд характеризуется русской поговоркой "дело мастера боится". Удачи вам во всех начинаниях и побольше отдыха от работы 🔥

@verdere5679 4 года назад

Очень интересно, почему то до этого меня не хватало до конца дотянуть, а тут вообще нормально идет. Еще пару дней и сам попробую собрать легкий сайтик)) Но дальше буду на все видосы ходить.

@pogios 3 года назад

Браво! урок был долгим но оооочень познавательным! спасибо за урок!!!

@user-gl9lm2zn8l 4 месяца назад

Спасибо Вам большое за Ваши уроки!

@Burovasofia Год назад

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

@MrZorg23 5 лет назад

Спасибо за урок! Хороший сайт получился для будущих экспериментов с js: и слайдеры, и аккордеон, и галерея, и карта!

@flab3rt 3 года назад

Спасибо за старания!) Знания сами заходят в голову!) Еще бы js с такой же легкостью понять)))

@Sinare Год назад

Спасибо за уроки,мне ,как новичку было очень полезно пройти через этот путь. Очень понравилось

@NeedForHeavyMetal 2 года назад

Продолжаю марафон! Спасибо за урок, лайк автоматом!

@sprutgym2001 3 года назад

классные уроки.особенно реализация разными способами. реально топчик.

@sevakvart1111 4 года назад

круто! раз несколько этот шаблон сверстать, никакие курсы не нужны, 5+!

@mayke8623 3 года назад

Урааа я сверстал наконец!!!)))) Неделю верстал. Я даже и не заметил как запомнил CSS и HTML! Спасибо огромное автору!

@bellatrisamankieva1289 Год назад

Спасибо тебе большое за такой прекрасный контент. Я прошла полностью все этапы первых азов верстания сайтов! Без вашей помощи я бы ни за что не справилась. Думала что я никогда не смогу ничего сделать сама, оказывается что то умею. Это отличный шаг для тех, кто хочет начать свое погружение в мир IT. Продолжай в том же духе! Спасибо еще раз🙏🏻💜

@user-rp6tw7hb7q 3 года назад

Большое спасибо за труды. Верстал впервые, очень понравилось)

@romanro8630 3 года назад

Огромное спасибо за этот "коротенький" урок )))))

@user-nv1cs5vd3j 4 года назад

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

@user-zk3fu1tr7e 3 года назад

Классно рассказываешь. И главное что все понятно и интересно)

@zailoodin 2 года назад

круто! Спасибо вашу терпения! очень был полезнее.Супер просто

@Sun2rw Год назад

Привет. Спасибо за курс. Просмотрел и всё повторил. Всё было очень круто. Лайк, подписка, однозначно.

@threehundredbucks3212 2 года назад

верстаю за тобой после работы, дико рубит спать и устал, но твердо решил закончить этот урок и как же я тебя понимаю в конце видоса ))))))

@lvbffd4522 3 года назад

Автор большое спасибо за труд.

@madalinamanole5124 4 года назад

Спасибо вам большое за старания !

@user-xo8pr1hf8p 4 года назад

Действительно годнота как по мне) Сложно только с тегами div, ну не то чтобы сложно, просто запутаться можно, а так огонь для новичка(меня). Краем глаза увидел что js задействуешь, вообще песня)

@viktoriavatuleva5517 5 лет назад

Спасибо! Сверстала вместе с вами весь сайт!

@BrainsCloud 5 лет назад

Отлично!

@lawdriver88 Год назад

Очень круто. Спасибо

@diasdamen1346 4 года назад

Спасибо Вам огромное за урок!

@chestbo2438 2 года назад

Спасибо большое за все эти уроки досмотрел все 7 сделал все правильно очень рад было не легко начинаю только заниматься этим делом)

@dimatagaev5398 4 года назад

Когда он сказал "Я вырезал клиентов" мне стало не по себе.

@user-dv2hq2sg7r 3 года назад

Какой-с, вы, однако-с пугливый, шалунишка.

@user-kw7tw2yo4x 4 года назад

Супер! Спасибо вам огромное! +100000 лайков!

@dinir1000 4 года назад

Спасибо тебе дружище огромное) это реально трудно вести такие онлайн уроки, очень утомляет. Продолжай в том же духе, я учусь на твоих уроках, Мы учимся)

@user-xu1bx4lj7m 4 года назад

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

@user-xf7xp8kv9q 3 года назад

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

@ruslanvybornov1237 4 года назад

спасибо огромное!) Вы лучший!

@AleksUkraine413 4 года назад

Ух, похоже вы делали несколько уроков подряд, потому что я уже тихо сидел и повторял за вами... ошибки)))) Но всё получилось, большое спасибо! Продуктивность у вас на высоком уровне: ну давайте ещё иконки вставим! ))))

@Proshkin47 3 года назад

Никогда не оставлял комментарий, но ты чувак заслужил, вместе с тобой все прохожу, прекрасная работа Дмитрий ^_^

@nilsen1879 3 года назад

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

@PiterProduction Год назад

Спасибо!) как всегда супер)

@maxkalashnyk3378 3 года назад

Топ!!!! Я ащутил себя верстальщиком!!!

@matweyptushkin7697 4 года назад

54:20 сделаем марджин боттом, давайте посмотрим.. хм.. посмотрим.. ничего же нет :D

@pavlov220984 2 года назад

Дима, спасибо тебе!!!

@user-dw2gf9wl7s 5 лет назад

спасибо большое за такие видео!!!!!!!!!

@mishkav847 3 года назад

1:07:39 :Копирую , сохраняем, вставляем, сохраняем, вставляем, обнoвляем ,получаем --- неплохой рэпчик :D Спасибо тебе за уроки!!!

@kayaosato9289 Год назад

автор красава) видно что выкладывается для юных падаванов

@kirkir2297 5 лет назад

Огромное спасибо🙏💕

@d.s.korochkin9238 5 лет назад

Отличные уроки) теперь адаптация впереди)

@BrainsCloud 5 лет назад

Так держать )

@ivanaevsky 3 года назад

Ооочень ооочень круто. Огромное спасибо!

@appleworm6507 4 года назад

Так сильно понравилось, что нажала дважды на лайк.

@BrainsCloud 4 года назад

Получается, что я остался без лайка?)

@Yakyzzza93 3 года назад

10Q!=) Урааа, товарищи) вот и первый сайт. было очень интересно, думаю дальше будет еще круче) Если бы не уроки Дмитрия, то хз когда я бы это начал)

@user-vf6tr9wc3k 3 года назад

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

@user-pl2bb9zu2o 3 года назад

Спасибо Вам огромное! вы мой первый учитель!)))) Запомню вас на всю жизнь, кину донат с первого дохода!!!))))

@user-sf2zj6ge6v 3 года назад

У Вас получилось на Map поставить иконку, у меня чет не появляется?

@above_goals626 4 года назад

Жаль что можно только один лайк поставить... Спасибо огромное!!!

@orunbayjanibekov Год назад

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

@daeriofrixell199 3 года назад

У вас прошел час, а у меня этот урок длился 7 часов или 38 дней. xD Это было долго, конечно. Спасибо. Настало время адаптива. До 15го уже закончу наверн весь сайт xD

@user-eu4zu7wf5i 3 года назад

Как успехи?

@daeriofrixell199 3 года назад

@@user-eu4zu7wf5i остался 1 урок по адаптиву, но я начал свои кейсы делать уже. Мб досмотрю как нибудь:D

@bulletsFly 3 года назад

Ребят, у кого иконки не подключаются к проекту то регаемся на font awesome, потом кидаем скрип js которые даются на почте в head и уже потом подключаете через тег

@mgyoda6400 2 года назад

Спасибо за уроки, есть вопрос, не могу разобраться, в блоге "Last blog" на видео уроке вы поменяли картинки, но текст не меняли и даты в квадрате , если изменить текст, а там две строки получается, то полоска между текстом и статистикой просмотров и комментариев смещается, сам не могу найти решение, что бы выровнить эту полоску под 2-3 фото относительно первой, подскажите пожалуйста, соглашусь с многими , с помощью ваших уроков стал больше понимать чем от курса, вы очень большую пользу приносите в развитие

@user-kx3eg6zl6h 2 года назад

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

@sergsergey4251 4 года назад

Спасибо! всё получилось)

@dzundzanify 4 года назад

Спасибо огромное) всё ясно и понятно) лови подписку)

@pathematic2221 3 года назад

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

@smirnovroman7431 2 года назад

материал пушка)

@w1kens 2 года назад

Топовые уроки, спасибо! Добавил ещё по макету в footer'e в колонке с инстаграмом ссылку "View more photos", в уроке нету. Вот если что код HTML: View more photos Вот CSS: .instagram__href { display: flex; padding-top: 20px; text-decoration: none; font-size: 12px; font-weight: 300; font-family: 'Roboto', sans-serif; font-style: italic; color: #333; } .instagram__href:hover { text-decoration: underline; }