Верстка сайта на HTML5 и CSS3 за час! + Публикация на сервер

  Переглядів 325,353

Гоша Дударь

Гоша Дударь

5 років тому

В ходе этого видео мы сделаем полноценный шаблон сайта на чистом HTML5 и CSS3. Дополнительно мы также поработаем с сервером и опубликуем наш сайт в Интернете на VDS сервер, используя панель VestaCP.
Ссылки из видео:
1) VDSina сервер: bit.ly/2N3Pucm
2) Макхост: mchost.ru/
3) VestaCP: vestacp.com/install/
4) Код и все материалы: itproger.com/course/one-lesso...
✔ Сообщество программистов: itproger.com/
✔ -------------
Вступай в группу Вк - prog_life 🚀
Группа FaceBook - goo.gl/XW0aaP
Instagram: / gosha_dudar
Telegram: t.me/itProger_official
Twitter - / goshadudar
- Уроки от #GoshaDudar 👨🏼‍💻
- Все уроки по хештегу #goshaLessons

КОМЕНТАРІ: 382
@dimaster5880
@dimaster5880 5 років тому
Спасибо, повторил и узнал пару фишек. Очень нравиться твои уроки по верстке, смотрю как любимый сериал.
@capy7773
@capy7773 5 років тому
То что нужно! Как раз занимаюсь вёрсткой
@artemiusz4314
@artemiusz4314 5 років тому
Честно, очень полезный ролик Муа👌
@hannelimpressions2308
@hannelimpressions2308 4 роки тому
Круто! Очень круто! Спасибо большое.
@senpai_san777
@senpai_san777 2 роки тому
не раз просматривал обучения по верстке могу сказать твое видео лучшее
@566JT
@566JT 4 роки тому
афигеть, как кино посмотрела. лайк, подписка
@maslo2058
@maslo2058 3 роки тому
Боже, это так круто, спасибо что ты есть
@enjoygaming9788
@enjoygaming9788 4 роки тому
Спасибо за офигенний туториал
@AI-kr1jf
@AI-kr1jf 2 роки тому
На редкость по-хорошему простая, внятная подача. Годно. Спасибо.
@user-mm1rl8dt9l
@user-mm1rl8dt9l 4 роки тому
Спасибо, очень хорошее видео!
@3dzbot
@3dzbot 5 років тому
Спасибо за проделанный труд и хороший контент :)
@user-jf5mf7zg3v
@user-jf5mf7zg3v 3 роки тому
Думаю для начинающих самый раз. Супер!
@redpill5384
@redpill5384 4 роки тому
Топ видео.Спасибо большое! Наконец-то показали как сделать что то и вправду красивое новичку)))
@NoName-tt5gf
@NoName-tt5gf 4 роки тому
Спасибо большое! Все очень понятно и хорошо рассказали!
@aleksejsd1340
@aleksejsd1340 5 років тому
Здорово 👌 побольше бы таких уроков
@user-yf5cs6ue1e
@user-yf5cs6ue1e 5 років тому
Молодец! Твои видео очень интересные и полезные!!! Предлагаю продолжить эту идею и постепенно модернизировать этот сайт, добавляя новые плюшки!) Добавить серверную часть. Было бы интересно посмотреть...
@nash_divnii_dom
@nash_divnii_dom Рік тому
Классный подход к теме и понятно даже для новичков. Вот тока скачать ваш пример не смог, что бы потренироваться самому..
@devid6367
@devid6367 5 років тому
Спасибо огромное!
@user-bu4my5vs7p
@user-bu4my5vs7p 2 роки тому
Спасибо огромное, вы мне очень помогли😊👍
@weak6506
@weak6506 4 роки тому
это лучшее гайд-видео которое я видел
@doctor91912
@doctor91912 5 років тому
Познавательно, спасибо
@rufatbilalov3268
@rufatbilalov3268 3 роки тому
Урок просто бомба ! Спасибо!
@ivanhuzyk138
@ivanhuzyk138 5 років тому
*Наконецто досмотрел* урок просто *супер*
@malazy4
@malazy4 4 роки тому
Спасибо что выпустил это видео, потому что я не мог поменять цвет. А когда я подключил CSS, ВСЁ ЗАРАБОТАЛО
@user-cp9hz8fo7o
@user-cp9hz8fo7o 3 роки тому
Вобще на хтмл можно тоже менять цвета
@surenosmikkillinang7615
@surenosmikkillinang7615 3 роки тому
Что блять? Никчем
@user-yf5cs6ue1e
@user-yf5cs6ue1e 5 років тому
ВСЕХ С ДНЁМ ПРОГРАММИСТА!)
@Amina-fm3vk
@Amina-fm3vk 5 років тому
и тебя братан
@user-vc6nm9ou9r
@user-vc6nm9ou9r 4 роки тому
@@Amina-fm3vk ахххахаха орнул
@user-yg1zf7om8s
@user-yg1zf7om8s 3 роки тому
спс
@NoName-vw2ki
@NoName-vw2ki 3 роки тому
С днём цемента!
@zicplay9811
@zicplay9811 3 роки тому
С днём плиты!!!
@zhakaluki833
@zhakaluki833 5 років тому
Для новичков в фронтенде годно! А не мог бы ты снять для начинающих бэкэндяиков на пхп так же? Чтобы с 0 и понятно
@surenosmikkillinang7615
@surenosmikkillinang7615 3 роки тому
В фронтенд это годно? Особенно для ньюби? Еще один клоун
@zhakaluki833
@zhakaluki833 3 роки тому
@@surenosmikkillinang7615 Лесной советчик, иди-ка обратно)
@FA-tu5ti
@FA-tu5ti 2 роки тому
@@surenosmikkillinang7615 такой же как и ты)
@fiftyfifty565
@fiftyfifty565 4 роки тому
Спасибо, круто всё, интересно повторять и потом менять...но одна просьба на будущее: когда пишешь код, не пиши его в самом низу! Я открываю два окна, редактор и ютуб. И вот когда смотрю в ютуб и ставлю на паузу, полоса видеоплеера вылазит и закрывает твой код, который в самом низу экрана! Терпимо, но было бы круто, если бы он повыше был)
@alibabayev4524
@alibabayev4524 5 років тому
Супер)
@nisto589
@nisto589 5 років тому
полезное видео!
@aishakuanishkyzy7228
@aishakuanishkyzy7228 2 роки тому
Спасибо вам большое
@WhiteBear141981
@WhiteBear141981 3 роки тому
Основательная реклама хостинга и домена))) Лайк!
@iatyt2268
@iatyt2268 5 років тому
ооо наконец-то **) Спасибо Гоша * + 1 опыт + 1 макет в копилку ** лайк!
@abdullaabdurashidov5057
@abdullaabdurashidov5057 3 роки тому
Лучший программист блогер
@woundwoort
@woundwoort 3 роки тому
Смотрел на скорости 75%. А так очень полезно. Спасибо!
@rongahan1869
@rongahan1869 2 роки тому
Это точно, по началу не успеваешь за ним))))
@ancient4526
@ancient4526 3 роки тому
Афигеть чувак ты лучший!
@user-fi1yy2mn8z
@user-fi1yy2mn8z 3 роки тому
Спасибо!
@shapelvm
@shapelvm 3 роки тому
фитипи конечно круто! до последнего думал, что это эфтипи.
@user-xg3er7dw8y
@user-xg3er7dw8y 5 років тому
Спасибо за видео . Есть вопрос: для элемента header автор использовал float: left для элементa header шириной 100% (чёт я напутал, когда первый раз вопрос писал - слишком долго рассуждал, а стоит ли вообще писать)... так же непонятно, зачем было использовать about > a для обозначения всех тегов а в классе about ведь и без > должно сработать и срабатывает... ещё вопрос возник с a: hover { text-decoration: underline} - ведь это ссылки и они всегда подчёркнуты. И сразу хочу оговориться, что ни в коем случае не придираюсь, просто интересно, есть в каком либо из этих действий реальный смысл? может для header он появится в версии на мобильные устройства?
@sviatoslav.hrabar
@sviatoslav.hrabar 4 роки тому
Жаль, что никто из видеоблогеров не рассказывает об Livereload (для атома лучше atom-live-reload) хотя и понятно что на это времени нет, но это ОЧЕНЬ ВАЖНАЯ ВЕЩЬ. А то я не мог найти то что подходит когда писал "автообновление браузера при сохранинии кода". Только случайно увидел в видео об нескольких полезных плагинов для Sublime text...а когда уже хотел узнать как настроить этот Livereload, то так и написал "настройка (или подключение) Livereload". РЕБЯТ, ПРОЧИТАЙТЕ МОЙ КОММЕНТ, НАДЕЮСЬ ПРИГОДИТСЯ. ПРИГОДИТСЯ, ЕСЛИ ВАМ НАДОЕЛО ТЫКАТЬ f5 чтоб проверить изменения в браузере.
@sevakvart1111
@sevakvart1111 5 років тому
Отлично!!!
@kantsevms
@kantsevms 2 роки тому
пф.. взрыв мозга. если еще чуть ускорить то будет верстка сайта за 30 минут блин ) Супер, у меня на просмотр часового видео ушло 1.5-2 часа.
@user-yf5cs6ue1e
@user-yf5cs6ue1e 5 років тому
топ!
@vladoscom
@vladoscom 4 роки тому
Ещё больше узнал чем хотел. Лучший видеоурок. Но для кого непонятно, сначала посмотрите вступление в HTML и CSS, а потом уже пишите, что понятно, а что нет.
@anandinidorogomilovamusic2873
@anandinidorogomilovamusic2873 3 роки тому
Спасибо, очень классный урок!!!
@lubaluba7624
@lubaluba7624 3 роки тому
Спасибо
@theFire-nx6pd
@theFire-nx6pd 4 роки тому
Спасибо за щедрость 😘
@andreyshevchenko5925
@andreyshevchenko5925 5 років тому
Класс+
@user-yj8zo9zk6z
@user-yj8zo9zk6z 5 років тому
Ребят не забывайте сбрасывать браузерные CSS, если чтобы у вас все было корректно. И старайтесь вместо div использовать смысловые теги header, footer, main, article, aside и т.д..
@user-yj8zo9zk6z
@user-yj8zo9zk6z 5 років тому
@Виктор Найдёнов а кто говорит? Где можно найти информацию по данному вопросу? Почему хреновое дело?
@user-yj8zo9zk6z
@user-yj8zo9zk6z 5 років тому
@Виктор Найдёнов удаление браузера? :=)
@user-oj1mo6fx5p
@user-oj1mo6fx5p 3 роки тому
чувак 10 тысяч лайков тебе , помог мне сделать первый сайт!
@user-is8sc5zd1o
@user-is8sc5zd1o Місяць тому
Ты крут Гоша Дударь
@lendelgalyna1042
@lendelgalyna1042 5 років тому
thanks
@sophias.464
@sophias.464 5 років тому
Отличное видео! Было бы интересно посмотреть как делать сайт с несколькими страницами
@sayrus
@sayrus 5 років тому
Sophia S. Точно так же,лол
@romashevskiyoleg4407
@romashevskiyoleg4407 5 років тому
Wordpress в помощь иначе сначала неплохо так намучешся)
@user-zv7tl4hj4t
@user-zv7tl4hj4t 4 роки тому
В принципе, норм.
@Daimonkl_666
@Daimonkl_666 3 роки тому
Спас мой диплом, низкий поклон
@surenosmikkillinang7615
@surenosmikkillinang7615 3 роки тому
Жаль что такие дебики в вузах, принципиал тупые
@Money_Hub777
@Money_Hub777 2 роки тому
гений
@user-rd9xo9ul5k
@user-rd9xo9ul5k 4 роки тому
Круто
@user-rd9xo9ul5k
@user-rd9xo9ul5k 4 роки тому
Согласен
@RadioUnit
@RadioUnit 3 роки тому
Георгий красавчик!!!👍🏻👍🏻👍🏻 Сейчас CSS изучаю, очень помог, конечно все равно учебник нужен, но в принципе все ясно! Зачем переплачивать TILDA, если за час можно самому все сделать😁. Единственное не подскажешь как сделать, чтобы такие "движухи" как в TILDA (появление заголовков, выезжание рисунков, появление рисунков при скроле) сделать?
@freshlemon4410
@freshlemon4410 2 роки тому
это 3 дэ изучать надо
@freshlemon4410
@freshlemon4410 2 роки тому
и анимацию
@antresolweb
@antresolweb 2 роки тому
Отличное видео для начинающих. Автору жирный лайк🤝👍💪 У меня тоже есть пример создания сайта в блокноте попроще конечно, но по шагам с исходником и коментами для скачивания. Кому интересно, забирайте.
@timurivanov457
@timurivanov457 4 роки тому
С java много работает.... а так видео супер!
@mrcat7260
@mrcat7260 5 років тому
Очень интересное видео! После рассказа хочется только и делать что создавать такие вот офигенные сайты. Вот реально, просто нет слов, молодец. Спасибо за все видео, которые снимаешь!
@MashaRupich
@MashaRupich 2 роки тому
Ничего не понятно, но очень интересно)
@user-lj7hn3xn3j
@user-lj7hn3xn3j 4 роки тому
Спасибо за то что нас учишь ты мой кумир свой следующий сайт я сделаю на тему программирование
@sasha1288
@sasha1288 4 роки тому
Верстал код в Atom(это тоже приложение что и у автора) но у меня function slowScroll не работает. В самом приложение весь код у меня серый, а на сайте при спуске вниз только линия серая. Можете помочь?
@jamshidy.ubaydulloyev37
@jamshidy.ubaydulloyev37 3 роки тому
Блин браток ты дышать успевал хотя бы
@em1rates23
@em1rates23 5 років тому
а можно сделать в начале ролика типо совета какие языки или другие вещи надо знать чтобы понять что тут твориться в общем) иначу трудно ориентироваться между уроками
@Error-vg4wh
@Error-vg4wh 4 роки тому
На превью ролика есть языки, а вообще для верстки сайтов основные 3 языка: html, js, css
@nurumnii
@nurumnii 4 роки тому
Я полный чайник в программировании, но в школе задали создать лендинг. Объясните, пожалуйста, как второе окошко связать с первым?
@user-ts5bz5xr5z
@user-ts5bz5xr5z 4 роки тому
Привет Верстал по твоему гайду сайт и в моменте с преимуществами, где картинки и текст с ними, у меня просто картинки и все. Место с текстом просто черное. Там должна быть картинка фиолетового цвета, которая должна скролится красиво и текст. У меня просто чернота и если возле картинки начать выделять (просто как выделить текст) то текст начинает быть видным. Как быть, подскажи. Код такой же как у тебя, прям идентичный
@SHIRZA1
@SHIRZA1 3 роки тому
Очень классный урок!
@lubbutel_porrjaty172
@lubbutel_porrjaty172 3 роки тому
28:02 Lorem ipsum это не случайный текст. Его создали около 2000 лет назад
@gameover0336
@gameover0336 5 років тому
В точности скопировал , но почему то у меня id=,,about" было ниже названия сайта , и я не мог это исправить
@mn4769
@mn4769 Рік тому
Как вы выровнили изображения по центру?
@IgorVetruk
@IgorVetruk 5 років тому
Давай уже сделаем полноценный PWA
@kamolsultanov3651
@kamolsultanov3651 4 роки тому
Здраствуйте а можете сколько можно примерно зарабатывать на верстка? на работе или на фриланса?
@zagorodnyaya4937
@zagorodnyaya4937 3 роки тому
А что делать, если у меня header становится белым,когда я скролю вниз, а когда возвращаю,то он все равно остается белым?
@edgarvakhitov9366
@edgarvakhitov9366 4 роки тому
Такое ощущение что автор сам себе объясняет. На скорости 2000x
@theamericanjokes9560
@theamericanjokes9560 4 роки тому
да я не выдержал и выключил
@user-vs2su2mw3c
@user-vs2su2mw3c 4 роки тому
Нормально все объясняет те,кто хоть немножко разбираются поняли. А если бы он все разжёвывал то и 5 часов не хватило.
@user-vs2su2mw3c
@user-vs2su2mw3c 4 роки тому
Мири Сеидов для той половины которая , повторюсь хоть немножко разбирается.
@user-yy7oz9ql7h
@user-yy7oz9ql7h 4 роки тому
@Мири Сеидов *ну вообще-то видео сделано по вёрстки сайта, а для вёрстки, нужно знать хотя бы HTML5 и CSS! А для тех кто ничего не шарит, нах вообще тогда смотреть лол? Если вы просто будете переписывать код, при этом них😁я не зная, то вы ничего не сможете сделать, кроме того, что похвастаться перед корешами 😑*
@si0era
@si0era 3 роки тому
@@user-yy7oz9ql7h +
@zhasik_mrx
@zhasik_mrx 3 роки тому
А стооп! Я думал изучать html и css чтобы верстать. А как понять html 5 и css 3?. Это значить нужно изучать 5 и 3? Емаее. Я запутался подскажите пожалуйста)
@andersonz2527
@andersonz2527 3 роки тому
5 и 3 это номера версий, html5 css3 это последние версии, поэтому их и надо учить, там в основном новые теги добавились, например в html5 добавились: header, footer, aside, video и т.д.
@frojeri8583
@frojeri8583 5 років тому
Исправь пожалуйста или ссылку на github кинь (исправленную), чтобы мы посмотрели что не так
@radada3660
@radada3660 2 роки тому
А размеры картинок какие-то определенные надо брать?а то у меня все какие-то громадные и получилась какая-то жуть...или их тут в процессе как-то размер можно изменить?
@antresolweb
@antresolweb 2 роки тому
Лучше оптимизировать размер картинок под сайт. Но можно и размер прописать она маштабируется
@Vasiliy828
@Vasiliy828 2 роки тому
@@antresolweb спасибо кэп, там спросили КАК это сделать!
@Litt1eAnge1
@Litt1eAnge1 3 роки тому
Почему у него все работает, а у меня нет :/
@deltaradune8409
@deltaradune8409 3 роки тому
жиза, у меня и шапка криво встала, и блоки не встали в столбик по 2
@motivationyou97
@motivationyou97 3 роки тому
Привет все отлично работает
@SeXYDaSh
@SeXYDaSh 3 роки тому
header #logo { color:#fff; cursor: pointer; } но цвет не изменился что делать?
@GameChaneelImpossible
@GameChaneelImpossible 5 років тому
Почему не Atom?) там тоже FTP есть.
@radionrusnak
@radionrusnak 4 роки тому
Привет всем, пожалуйста любители яблок посоветуйте какой macbook в 2019 году взять для работы, желательно по дешевле)
@tanya_u_tube
@tanya_u_tube 3 роки тому
Привет Очень познавательное видио Я сделал всё как у тебя , но вот шапка не становиться белой при прокрутке Можешь подсказать в чем дело или указать хотяб где могла возникнуть проблема Заранее, спасибо)
@EndlessPloex
@EndlessPloex 2 роки тому
Ошибка в том месте где шапка, не благодари!
@arturhaiduk4480
@arturhaiduk4480 4 роки тому
У меня не работает библиотека JQuery. Подключил все точно так, как на видео. Потом попробовал запихнуть подключение между тегами head - не помогло. Также попробовал скачать библиотеку и прописать путь к ней - проблемы не решило. В чем может быть причина неисправности ?
@botakozalina3350
@botakozalina3350 3 роки тому
Автор это сайт одно страничник?
@d4rks1ze
@d4rks1ze 2 роки тому
Спасибо большое, очень помог с главной страницей, теперь я делаю 2 страницу своего сайта, только траблы с тем, что взял я начало кода из главной страницы и перекинул на 2 страницу, и он не работает, бред какой-то, перепробовал все возможные варианты, которые знаю, не помогло никак...(
@YoutubeAitishnik
@YoutubeAitishnik Рік тому
Привет, спасибо автору за тему. Еще короткие видео для начинающих у меня на канале!)
@Ivan-rc4it
@Ivan-rc4it 5 років тому
Хорошее видео, поставил лайк. Но нашел недостаток, Гоша в уроке не показал привязку меню к разделам, т.е. когда вверху щелкаешь по разделам должно сразу перекидывать в соответствующий раздел. Но это не тяжело сделать самому.
@olegruspro8877
@olegruspro8877 3 роки тому
Привет Гоша ты не мог бы помочь,скопировал одностраничник переделал под другой товар. На компе сайт смотрится нормально, а на мобильной версии фотографии которые были до переделки пробовал заменить остается тоже самое.
@imintegralmusic5501
@imintegralmusic5501 5 років тому
если прскролить вниз и прокликать ссылки в меню, то меню моргает. а при клике на логотип такого не происходит.
@musx5127
@musx5127 3 роки тому
да у меня тоже такое
@welcom3164
@welcom3164 Рік тому
Вы могли бы объяснить немного проще. Я не понял что за блоки маюн, топ. Объясните каждый шаг. Или я прослушал.
@-life6602
@-life6602 5 років тому
Я фигею,что я тут забыл
@user-yy7oz9ql7h
@user-yy7oz9ql7h 4 роки тому
*Я фигею, что ты тут забыл...*
@andreyn6794
@andreyn6794 4 роки тому
А где обработчик нажатия кнопки для обратной связи?
@Emili_live
@Emili_live Рік тому
В блоке возможности прописываем class="text" ? заем если в css прописанный класс не используется и для него не прописанный стиль... путаница какай-то.. сорри просто хочу понять? я новичек в этом...
@apelsinka224
@apelsinka224 3 місяці тому
что делать если "контакты ответы на вопросы возможности и преимущества " находяться слева сверху и никак не могу преместить их в сентер
@pivrock913
@pivrock913 4 роки тому
Сколько будет стоить изготовка такого сайта? Ну то есть сколько автор сможет получить за эту работу?
@user-wp8fm7qz6t
@user-wp8fm7qz6t 4 роки тому
+-100$
@wyrmeforge
@wyrmeforge 3 роки тому
А где макет взять)?
@user-fs9th3sr9g
@user-fs9th3sr9g 3 роки тому
Гоша привет у тебя есть видео по медиа запросам
@Zarich_q
@Zarich_q 5 років тому
В чем проблема ? Не распознает "nth-child" и эти картинки не становятся в два ряда друг под другом
@pizzapepperoni4819
@pizzapepperoni4819 3 роки тому
у меня та же проблема(
@user-dx9lz5rm6t
@user-dx9lz5rm6t 3 роки тому
Здравствуйте, решил попробовать делать сайты опыта вообще нет, это не слишком сложно?) Долго учиться этому?)
@relaxplay9359
@relaxplay9359 3 роки тому
Все будет ппц как сложно, но это только по началу, года 2-3 поработаешь и норм. Сможешь проекты брать сложные по фрилансу и делать их в короткие сроки и зарабатывать с одного проекта 10-15 к. Но опять же в это дело нужно влить много времени и сил.
@user-dx9lz5rm6t
@user-dx9lz5rm6t 3 роки тому
@@relaxplay9359 да я уже начал делать через конструктор)) все просто и быстро)
Верстка сайта основные ошибки начинающих
7:40
The World's Fastest Cleaners
00:35
MrBeast
Переглядів 99 млн
1 класс vs 11 класс (рисунок)
00:37
БЕРТ
Переглядів 3,9 млн
ChatGPT Рабочий Сайт за 3 МИНУТЫ
4:19
Аве Кодер
Переглядів 156 тис.
Объяснение Вёрстки Простого Сайта HTML+CSS
53:56
Сергей Дмитриевский
Переглядів 150 тис.
[2023] Основы верстки сайта с нуля! HTML5 и CSS3 - верстка макета
1:06:37
WAYUP & Андрій Гаврилов
Переглядів 732 тис.
Responsive web design in 37 minutes + layout. You don’t need Bootstrap!
36:44
Фрілансер по життю
Переглядів 1 млн
Верстка сайта онлайн. Подробно с объяснениями для новичков. HTML, CSS, JS
3:18:50
6 полезных свойств CSS за 10 минут!
10:19
PurpleSchool | Anton Larichev
Переглядів 22 тис.
The World's Fastest Cleaners
00:35
MrBeast
Переглядів 99 млн