Верстка сайта на HTML5 и CSS3 за час! + Публикация на сервер
HTML-код
- Опубликовано: 12 сен 2018
- В ходе этого видео мы сделаем полноценный шаблон сайта на чистом 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
Спасибо, повторил и узнал пару фишек. Очень нравиться твои уроки по верстке, смотрю как любимый сериал.
То что нужно! Как раз занимаюсь вёрсткой
Честно, очень полезный ролик
Муа👌
не раз просматривал обучения по верстке
могу сказать твое видео лучшее
На редкость по-хорошему простая, внятная подача. Годно. Спасибо.
Круто! Очень круто! Спасибо большое.
афигеть, как кино посмотрела.
лайк, подписка
Супер все понятно идеально респект автору ❤
Топ видео.Спасибо большое! Наконец-то показали как сделать что то и вправду красивое новичку)))
Молодец! Твои видео очень интересные и полезные!!! Предлагаю продолжить эту идею и постепенно модернизировать этот сайт, добавляя новые плюшки!) Добавить серверную часть. Было бы интересно посмотреть...
Думаю для начинающих самый раз. Супер!
Боже, это так круто, спасибо что ты есть
Спасибо за проделанный труд и хороший контент :)
Классный подход к теме и понятно даже для новичков.
Вот тока скачать ваш пример не смог, что бы потренироваться самому..
ВСЕХ С ДНЁМ ПРОГРАММИСТА!)
и тебя братан
@@Amina-fm3vk ахххахаха орнул
спс
С днём цемента!
С днём плиты!!!
Здорово 👌 побольше бы таких уроков
это лучшее гайд-видео которое я видел
Спасибо большое! Все очень понятно и хорошо рассказали!
Спасибо за видео . Есть вопрос: для элемента header автор использовал float: left для элементa header шириной 100% (чёт я напутал, когда первый раз вопрос писал - слишком долго рассуждал, а стоит ли вообще писать)...
так же непонятно, зачем было использовать about > a для обозначения всех тегов а в классе about ведь и без > должно сработать и срабатывает...
ещё вопрос возник с a: hover { text-decoration: underline} - ведь это ссылки и они всегда подчёркнуты.
И сразу хочу оговориться, что ни в коем случае не придираюсь, просто интересно, есть в каком либо из этих действий реальный смысл? может для header он появится в версии на мобильные устройства?
Спасибо за офигенний туториал
Спасибо, очень хорошее видео!
Спасибо, круто всё, интересно повторять и потом менять...но одна просьба на будущее: когда пишешь код, не пиши его в самом низу! Я открываю два окна, редактор и ютуб. И вот когда смотрю в ютуб и ставлю на паузу, полоса видеоплеера вылазит и закрывает твой код, который в самом низу экрана! Терпимо, но было бы круто, если бы он повыше был)
Спасибо огромное, вы мне очень помогли😊👍
ооо наконец-то **) Спасибо Гоша * + 1 опыт + 1 макет в копилку ** лайк!
Основательная реклама хостинга и домена)))
Лайк!
Для новичков в фронтенде годно! А не мог бы ты снять для начинающих бэкэндяиков на пхп так же? Чтобы с 0 и понятно
В фронтенд это годно? Особенно для ньюби? Еще один клоун
@@surenosmikkillinang7615 Лесной советчик, иди-ка обратно)
@@surenosmikkillinang7615 такой же как и ты)
Спасибо что выпустил это видео, потому что я не мог поменять цвет. А когда я подключил CSS, ВСЁ ЗАРАБОТАЛО
Вобще на хтмл можно тоже менять цвета
Что блять? Никчем
Жаль, что никто из видеоблогеров не рассказывает об Livereload (для атома лучше atom-live-reload) хотя и понятно что на это времени нет, но это ОЧЕНЬ ВАЖНАЯ ВЕЩЬ. А то я не мог найти то что подходит когда писал "автообновление браузера при сохранинии кода". Только случайно увидел в видео об нескольких полезных плагинов для Sublime text...а когда уже хотел узнать как настроить этот Livereload, то так и написал "настройка (или подключение) Livereload". РЕБЯТ, ПРОЧИТАЙТЕ МОЙ КОММЕНТ, НАДЕЮСЬ ПРИГОДИТСЯ. ПРИГОДИТСЯ, ЕСЛИ ВАМ НАДОЕЛО ТЫКАТЬ f5 чтоб проверить изменения в браузере.
*Наконецто досмотрел* урок просто *супер*
Лучший программист блогер
Ещё больше узнал чем хотел. Лучший видеоурок. Но для кого непонятно, сначала посмотрите вступление в HTML и CSS, а потом уже пишите, что понятно, а что нет.
пф.. взрыв мозга. если еще чуть ускорить то будет верстка сайта за 30 минут блин )
Супер, у меня на просмотр часового видео ушло 1.5-2 часа.
фитипи конечно круто! до последнего думал, что это эфтипи.
Познавательно, спасибо
Урок просто бомба ! Спасибо!
Афигеть чувак ты лучший!
Спасибо огромное!
Смотрел на скорости 75%. А так очень полезно. Спасибо!
Это точно, по началу не успеваешь за ним))))
Верстал код в Atom(это тоже приложение что и у автора) но у меня function slowScroll не работает. В самом приложение весь код у меня серый, а на сайте при спуске вниз только линия серая. Можете помочь?
Супер)
полезное видео!
чувак 10 тысяч лайков тебе , помог мне сделать первый сайт!
Спасибо вам большое
Отлично!!!
Спасибо, очень классный урок!!!
Ребят не забывайте сбрасывать браузерные CSS, если чтобы у вас все было корректно. И старайтесь вместо div использовать смысловые теги header, footer, main, article, aside и т.д..
@Виктор Найдёнов а кто говорит? Где можно найти информацию по данному вопросу? Почему хреновое дело?
@Виктор Найдёнов удаление браузера? :=)
А что делать, если у меня header становится белым,когда я скролю вниз, а когда возвращаю,то он все равно остается белым?
Я полный чайник в программировании, но в школе задали создать лендинг. Объясните, пожалуйста, как второе окошко связать с первым?
Привет
Верстал по твоему гайду сайт и в моменте с преимуществами, где картинки и текст с ними, у меня просто картинки и все. Место с текстом просто черное. Там должна быть картинка фиолетового цвета, которая должна скролится красиво и текст. У меня просто чернота и если возле картинки начать выделять (просто как выделить текст) то текст начинает быть видным. Как быть, подскажи. Код такой же как у тебя, прям идентичный
Спасибо!
У меня не работает библиотека JQuery. Подключил все точно так, как на видео. Потом попробовал запихнуть подключение между тегами head - не помогло. Также попробовал скачать библиотеку и прописать путь к ней - проблемы не решило. В чем может быть причина неисправности ?
С java много работает.... а так видео супер!
А размеры картинок какие-то определенные надо брать?а то у меня все какие-то громадные и получилась какая-то жуть...или их тут в процессе как-то размер можно изменить?
Лучше оптимизировать размер картинок под сайт. Но можно и размер прописать она маштабируется
@@antresolweb спасибо кэп, там спросили КАК это сделать!
Спасибо за щедрость 😘
В точности скопировал , но почему то у меня id=,,about" было ниже названия сайта , и я не мог это исправить
А стооп! Я думал изучать html и css чтобы верстать. А как понять html 5 и css 3?. Это значить нужно изучать 5 и 3? Емаее. Я запутался подскажите пожалуйста)
5 и 3 это номера версий, html5 css3 это последние версии, поэтому их и надо учить, там в основном новые теги добавились, например в html5 добавились: header, footer, aside, video и т.д.
Георгий красавчик!!!👍🏻👍🏻👍🏻 Сейчас CSS изучаю, очень помог, конечно все равно учебник нужен, но в принципе все ясно! Зачем переплачивать TILDA, если за час можно самому все сделать😁.
Единственное не подскажешь как сделать, чтобы такие "движухи" как в TILDA (появление заголовков, выезжание рисунков, появление рисунков при скроле) сделать?
это 3 дэ изучать надо
и анимацию
Здраствуйте а можете сколько можно примерно зарабатывать на верстка? на работе или на фриланса?
Отличное видео для начинающих. Автору жирный лайк🤝👍💪 У меня тоже есть пример создания сайта в блокноте попроще конечно, но по шагам с исходником и коментами для скачивания. Кому интересно, забирайте.
Ничего не понятно, но очень интересно)
Спасибо
Класс+
Ты крут Гоша Дударь
Отличное видео!
Было бы интересно посмотреть как делать сайт с несколькими страницами
Sophia S. Точно так же,лол
Wordpress в помощь иначе сначала неплохо так намучешся)
Блин браток ты дышать успевал хотя бы
В блоке возможности прописываем class="text" ? заем если в css прописанный класс не используется и для него не прописанный стиль... путаница какай-то.. сорри просто хочу понять? я новичек в этом...
header #logo {
color:#fff;
cursor: pointer;
} но цвет не изменился что делать?
28:02 Lorem ipsum это не случайный текст. Его создали около 2000 лет назад
если прскролить вниз и прокликать ссылки в меню, то меню моргает.
а при клике на логотип такого не происходит.
да у меня тоже такое
Привет Гоша ты не мог бы помочь,скопировал одностраничник переделал под другой товар. На компе сайт смотрится нормально, а на мобильной версии фотографии которые были до переделки пробовал заменить остается тоже самое.
Такое ощущение что автор сам себе объясняет. На скорости 2000x
да я не выдержал и выключил
Нормально все объясняет те,кто хоть немножко разбираются поняли. А если бы он все разжёвывал то и 5 часов не хватило.
Мири Сеидов для той половины которая , повторюсь хоть немножко разбирается.
@Мири Сеидов *ну вообще-то видео сделано по вёрстки сайта, а для вёрстки, нужно знать хотя бы HTML5 и CSS! А для тех кто ничего не шарит, нах вообще тогда смотреть лол? Если вы просто будете переписывать код, при этом них😁я не зная, то вы ничего не сможете сделать, кроме того, что похвастаться перед корешами 😑*
@@user-yy7oz9ql7h +
топ!
В чем проблема ? Не распознает "nth-child" и эти картинки не становятся в два ряда друг под другом
у меня та же проблема(
Исправь пожалуйста или ссылку на github кинь (исправленную), чтобы мы посмотрели что не так
Очень классный урок!
Почему у него все работает, а у меня нет :/
жиза, у меня и шапка криво встала, и блоки не встали в столбик по 2
Привет все отлично работает
thanks
Как вы выровнили изображения по центру?
В принципе, норм.
что делать если "контакты ответы на вопросы возможности и преимущества " находяться слева сверху и никак не могу преместить их в сентер
При нажатии клавиши -tab- ничего не происходит, html код не разворачивается. Плагин emmet установлен , редактор так же Atom. В чем может быть проблема ?
поздновато наверное, но нужно тип документа html выбрать справа снизу :DDD
Спасибо за то что нас учишь ты мой кумир свой следующий сайт я сделаю на тему программирование
Очень интересное видео! После рассказа хочется только и делать что создавать такие вот офигенные сайты. Вот реально, просто нет слов, молодец. Спасибо за все видео, которые снимаешь!
Вы могли бы объяснить немного проще. Я не понял что за блоки маюн, топ. Объясните каждый шаг. Или я прослушал.
А где обработчик нажатия кнопки для обратной связи?
Спас мой диплом, низкий поклон
Жаль что такие дебики в вузах, принципиал тупые
Ребят такой вопрос при вёрстке элемент functlon никак не подсвечивается и на сайте не работает что делать
function, а не functlon
@@user-ho8dd2rj4v АХХАПХПА,как тебе не в падлу было это ему писать :DDDDDDD
@@ilnazgimazetdinov5833 а чё? может из-за этого ошибка и была
а можно сделать в начале ролика типо совета какие языки или другие вещи надо знать чтобы понять что тут твориться в общем) иначу трудно ориентироваться между уроками
На превью ролика есть языки, а вообще для верстки сайтов основные 3 языка: html, js, css
Привет
Очень познавательное видио
Я сделал всё как у тебя , но вот шапка не становиться белой при прокрутке
Можешь подсказать в чем дело или указать хотяб где могла возникнуть проблема
Заранее, спасибо)
Ошибка в том месте где шапка, не благодари!
Здравствуйте, решил попробовать делать сайты опыта вообще нет, это не слишком сложно?) Долго учиться этому?)
Все будет ппц как сложно, но это только по началу, года 2-3 поработаешь и норм. Сможешь проекты брать сложные по фрилансу и делать их в короткие сроки и зарабатывать с одного проекта 10-15 к. Но опять же в это дело нужно влить много времени и сил.
@@relaxplay9359 да я уже начал делать через конструктор)) все просто и быстро)
Здравствуйте! У меня возникла такая проблема, что после подключения библиотеки googleapis jquery, function не подсвечивается. Что делать? Заранее спасибо)
Mr.Corrob:/ Game проверь,поставил ли ; в конце предыдущих строк
Круто
Согласен
Эмммм.... А почему бы не использовать flexbox-ы например?
Когда ты почувствуешь себя дерьмом, просто вспомни, что я программирую на телефоне
*Нух😁я, я тоже на телефоне пишу код, и в этом нет ничего плохого лол.*
Что?
@@user-yy7oz9ql7h На чем пишешь?(язык)
@@step-1114 HTML5/CSS3
@@step-1114 напиши мне сюда: m.vk.com/id538946987
Есть хочешь что нибудь обсудить
Привет всем, пожалуйста любители яблок посоветуйте какой macbook в 2019 году взять для работы, желательно по дешевле)
Привет всем, мне очень понравился урок и я хотел спросить ,может кто знает, почему я не могу в атоме копировать и вставлять текст , я пытаюсь скопировать url но он не вставляется в атом и приходится писать вручную .Что мне делать и с чем это связано?
Отличное видео. Но у меня никак не получается выровнять изображения по центру. Кто нибудь подскажите пожалуйста как это сделать?
вроде все норм получилось, только текст под картинками съезжает на полном экране, вроде код проверил все одинакова...
Почему не Atom?) там тоже FTP есть.
скажите пожалуйста как подключить стилью, у меня только скелет а не как на видео пожалуйста помогите