Верстка сайта на HTML5 и CSS3 за час! + Публикация на сервер
ฝัง
- เผยแพร่เมื่อ 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
![CAMPปลิ้น | EP.76[1/2] โจโฉเปิดป่าโหดรับโอ๊ต-ป๊อบ รอบนี้พี่เอาจริง!](http://i.ytimg.com/vi/pNg5O7Pf-a0/mqdefault.jpg)
Спасибо, повторил и узнал пару фишек. Очень нравиться твои уроки по верстке, смотрю как любимый сериал.
То что нужно! Как раз занимаюсь вёрсткой
Честно, очень полезный ролик
Муа👌
ВСЕХ С ДНЁМ ПРОГРАММИСТА!)
и тебя братан
@@Amina-fm3vk ахххахаха орнул
спс
С днём цемента!
С днём плиты!!!
не раз просматривал обучения по верстке
могу сказать твое видео лучшее
Круто! Очень круто! Спасибо большое.
афигеть, как кино посмотрела.
лайк, подписка
На редкость по-хорошему простая, внятная подача. Годно. Спасибо.
Думаю для начинающих самый раз. Супер!
Боже, это так круто, спасибо что ты есть
Спасибо за проделанный труд и хороший контент :)
Супер все понятно идеально респект автору ❤
Топ видео.Спасибо большое! Наконец-то показали как сделать что то и вправду красивое новичку)))
Здорово 👌 побольше бы таких уроков
Спасибо большое! Все очень понятно и хорошо рассказали!
Спасибо за офигенний туториал
это лучшее гайд-видео которое я видел
Для новичков в фронтенде годно! А не мог бы ты снять для начинающих бэкэндяиков на пхп так же? Чтобы с 0 и понятно
В фронтенд это годно? Особенно для ньюби? Еще один клоун
@@surenosmikkillinang7615 Лесной советчик, иди-ка обратно)
@@surenosmikkillinang7615 такой же как и ты)
Классный подход к теме и понятно даже для новичков.
Вот тока скачать ваш пример не смог, что бы потренироваться самому..
Спасибо, очень хорошее видео!
Молодец! Твои видео очень интересные и полезные!!! Предлагаю продолжить эту идею и постепенно модернизировать этот сайт, добавляя новые плюшки!) Добавить серверную часть. Было бы интересно посмотреть...
*Наконецто досмотрел* урок просто *супер*
Спасибо огромное, вы мне очень помогли😊👍
Спасибо что выпустил это видео, потому что я не мог поменять цвет. А когда я подключил CSS, ВСЁ ЗАРАБОТАЛО
Вобще на хтмл можно тоже менять цвета
Что блять? Никчем
Основательная реклама хостинга и домена)))
Лайк!
Познавательно, спасибо
Спасибо за видео . Есть вопрос: для элемента header автор использовал float: left для элементa header шириной 100% (чёт я напутал, когда первый раз вопрос писал - слишком долго рассуждал, а стоит ли вообще писать)...
так же непонятно, зачем было использовать about > a для обозначения всех тегов а в классе about ведь и без > должно сработать и срабатывает...
ещё вопрос возник с a: hover { text-decoration: underline} - ведь это ссылки и они всегда подчёркнуты.
И сразу хочу оговориться, что ни в коем случае не придираюсь, просто интересно, есть в каком либо из этих действий реальный смысл? может для header он появится в версии на мобильные устройства?
Урок просто бомба ! Спасибо!
Спасибо огромное!
Смотрел на скорости 75%. А так очень полезно. Спасибо!
Это точно, по началу не успеваешь за ним))))
Жаль, что никто из видеоблогеров не рассказывает об Livereload (для атома лучше atom-live-reload) хотя и понятно что на это времени нет, но это ОЧЕНЬ ВАЖНАЯ ВЕЩЬ. А то я не мог найти то что подходит когда писал "автообновление браузера при сохранинии кода". Только случайно увидел в видео об нескольких полезных плагинов для Sublime text...а когда уже хотел узнать как настроить этот Livereload, то так и написал "настройка (или подключение) Livereload". РЕБЯТ, ПРОЧИТАЙТЕ МОЙ КОММЕНТ, НАДЕЮСЬ ПРИГОДИТСЯ. ПРИГОДИТСЯ, ЕСЛИ ВАМ НАДОЕЛО ТЫКАТЬ f5 чтоб проверить изменения в браузере.
Спасибо, круто всё, интересно повторять и потом менять...но одна просьба на будущее: когда пишешь код, не пиши его в самом низу! Я открываю два окна, редактор и ютуб. И вот когда смотрю в ютуб и ставлю на паузу, полоса видеоплеера вылазит и закрывает твой код, который в самом низу экрана! Терпимо, но было бы круто, если бы он повыше был)
фитипи конечно круто! до последнего думал, что это эфтипи.
Супер)
полезное видео!
Лучший программист блогер
ооо наконец-то **) Спасибо Гоша * + 1 опыт + 1 макет в копилку ** лайк!
Афигеть чувак ты лучший!
пф.. взрыв мозга. если еще чуть ускорить то будет верстка сайта за 30 минут блин )
Супер, у меня на просмотр часового видео ушло 1.5-2 часа.
А что делать, если у меня header становится белым,когда я скролю вниз, а когда возвращаю,то он все равно остается белым?
Верстал код в Atom(это тоже приложение что и у автора) но у меня function slowScroll не работает. В самом приложение весь код у меня серый, а на сайте при спуске вниз только линия серая. Можете помочь?
Отлично!!!
Спасибо вам большое
В точности скопировал , но почему то у меня id=,,about" было ниже названия сайта , и я не мог это исправить
Я полный чайник в программировании, но в школе задали создать лендинг. Объясните, пожалуйста, как второе окошко связать с первым?
Ещё больше узнал чем хотел. Лучший видеоурок. Но для кого непонятно, сначала посмотрите вступление в HTML и CSS, а потом уже пишите, что понятно, а что нет.
А стооп! Я думал изучать html и css чтобы верстать. А как понять html 5 и css 3?. Это значить нужно изучать 5 и 3? Емаее. Я запутался подскажите пожалуйста)
5 и 3 это номера версий, html5 css3 это последние версии, поэтому их и надо учить, там в основном новые теги добавились, например в html5 добавились: header, footer, aside, video и т.д.
Спасибо!
У меня не работает библиотека JQuery. Подключил все точно так, как на видео. Потом попробовал запихнуть подключение между тегами head - не помогло. Также попробовал скачать библиотеку и прописать путь к ней - проблемы не решило. В чем может быть причина неисправности ?
Спасибо, очень классный урок!!!
если прскролить вниз и прокликать ссылки в меню, то меню моргает.
а при клике на логотип такого не происходит.
да у меня тоже такое
header #logo {
color:#fff;
cursor: pointer;
} но цвет не изменился что делать?
Почему у него все работает, а у меня нет :/
жиза, у меня и шапка криво встала, и блоки не встали в столбик по 2
Привет все отлично работает
Класс+
Ребят не забывайте сбрасывать браузерные CSS, если чтобы у вас все было корректно. И старайтесь вместо div использовать смысловые теги header, footer, main, article, aside и т.д..
@Виктор Найдёнов а кто говорит? Где можно найти информацию по данному вопросу? Почему хреновое дело?
@Виктор Найдёнов удаление браузера? :=)
Здраствуйте а можете сколько можно примерно зарабатывать на верстка? на работе или на фриланса?
топ!
Привет
Верстал по твоему гайду сайт и в моменте с преимуществами, где картинки и текст с ними, у меня просто картинки и все. Место с текстом просто черное. Там должна быть картинка фиолетового цвета, которая должна скролится красиво и текст. У меня просто чернота и если возле картинки начать выделять (просто как выделить текст) то текст начинает быть видным. Как быть, подскажи. Код такой же как у тебя, прям идентичный
Как вы выровнили изображения по центру?
Такое ощущение что автор сам себе объясняет. На скорости 2000x
да я не выдержал и выключил
Нормально все объясняет те,кто хоть немножко разбираются поняли. А если бы он все разжёвывал то и 5 часов не хватило.
Мири Сеидов для той половины которая , повторюсь хоть немножко разбирается.
@Мири Сеидов *ну вообще-то видео сделано по вёрстки сайта, а для вёрстки, нужно знать хотя бы HTML5 и CSS! А для тех кто ничего не шарит, нах вообще тогда смотреть лол? Если вы просто будете переписывать код, при этом них😁я не зная, то вы ничего не сможете сделать, кроме того, что похвастаться перед корешами 😑*
@@user-yy7oz9ql7h +
В блоке возможности прописываем class="text" ? заем если в css прописанный класс не используется и для него не прописанный стиль... путаница какай-то.. сорри просто хочу понять? я новичек в этом...
В чем проблема ? Не распознает "nth-child" и эти картинки не становятся в два ряда друг под другом
у меня та же проблема(
Спасибо
Спасибо за щедрость 😘
А где обработчик нажатия кнопки для обратной связи?
чувак 10 тысяч лайков тебе , помог мне сделать первый сайт!
Георгий красавчик!!!👍🏻👍🏻👍🏻 Сейчас CSS изучаю, очень помог, конечно все равно учебник нужен, но в принципе все ясно! Зачем переплачивать TILDA, если за час можно самому все сделать😁.
Единственное не подскажешь как сделать, чтобы такие "движухи" как в TILDA (появление заголовков, выезжание рисунков, появление рисунков при скроле) сделать?
это 3 дэ изучать надо
и анимацию
Исправь пожалуйста или ссылку на github кинь (исправленную), чтобы мы посмотрели что не так
А размеры картинок какие-то определенные надо брать?а то у меня все какие-то громадные и получилась какая-то жуть...или их тут в процессе как-то размер можно изменить?
Лучше оптимизировать размер картинок под сайт. Но можно и размер прописать она маштабируется
@@antresolweb спасибо кэп, там спросили КАК это сделать!
Отличное видео!
Было бы интересно посмотреть как делать сайт с несколькими страницами
Sophia S. Точно так же,лол
Wordpress в помощь иначе сначала неплохо так намучешся)
Блин браток ты дышать успевал хотя бы
thanks
Ничего не понятно, но очень интересно)
Отличное видео для начинающих. Автору жирный лайк🤝👍💪 У меня тоже есть пример создания сайта в блокноте попроще конечно, но по шагам с исходником и коментами для скачивания. Кому интересно, забирайте.
С java много работает.... а так видео супер!
Ты крут Гоша Дударь
что делать если "контакты ответы на вопросы возможности и преимущества " находяться слева сверху и никак не могу преместить их в сентер
Привет всем, пожалуйста любители яблок посоветуйте какой macbook в 2019 году взять для работы, желательно по дешевле)
Я фигею,что я тут забыл
*Я фигею, что ты тут забыл...*
Ребят такой вопрос при вёрстке элемент functlon никак не подсвечивается и на сайте не работает что делать
function, а не functlon
@@user-ho8dd2rj4v АХХАПХПА,как тебе не в падлу было это ему писать :DDDDDDD
@@ilnazgimazetdinov5833 а чё? может из-за этого ошибка и была
Почему у меня меню под логотипом ведь все скопировал
Привет всем, мне очень понравился урок и я хотел спросить ,может кто знает, почему я не могу в атоме копировать и вставлять текст , я пытаюсь скопировать url но он не вставляется в атом и приходится писать вручную .Что мне делать и с чем это связано?
А почему не могу сделать чтобы сверху были написаны контакты
В принципе, норм.
Привет Гоша ты не мог бы помочь,скопировал одностраничник переделал под другой товар. На компе сайт смотрится нормально, а на мобильной версии фотографии которые были до переделки пробовал заменить остается тоже самое.
Привет
Очень познавательное видио
Я сделал всё как у тебя , но вот шапка не становиться белой при прокрутке
Можешь подсказать в чем дело или указать хотяб где могла возникнуть проблема
Заранее, спасибо)
Ошибка в том месте где шапка, не благодари!
При нажатии клавиши -tab- ничего не происходит, html код не разворачивается. Плагин emmet установлен , редактор так же Atom. В чем может быть проблема ?
поздновато наверное, но нужно тип документа html выбрать справа снизу :DDD
скажите пожалуйста как подключить стилью, у меня только скелет а не как на видео пожалуйста помогите
Эмммм.... А почему бы не использовать flexbox-ы например?
$(document).on("scroll", function ()) ошибка Uncaught ReferenceError: $ is not defined
Emomali Sharifov Подключи jQuery 😏
через id top не могу установить background image почему?
есть готовый код? Допустил ошибку, не пойму где
Круто
Согласен
Спасибо за то что нас учишь ты мой кумир свой следующий сайт я сделаю на тему программирование
Очень классный урок!
Давай уже сделаем полноценный PWA
Вы могли бы объяснить немного проще. Я не понял что за блоки маюн, топ. Объясните каждый шаг. Или я прослушал.
Здравствуйте! У меня возникла такая проблема, что после подключения библиотеки googleapis jquery, function не подсвечивается. Что делать? Заранее спасибо)
Mr.Corrob:/ Game проверь,поставил ли ; в конце предыдущих строк
Отличное видео. Но у меня никак не получается выровнять изображения по центру. Кто нибудь подскажите пожалуйста как это сделать?
Спас мой диплом, низкий поклон
Жаль что такие дебики в вузах, принципиал тупые