Bootstrap верстка современного сайта за 45 минут!
HTML-код
- Опубликовано: 29 мар 2017
- Урок на сайте itProger: itproger.com/course/one-lesson/3
Как создать сайт на Bootstrap 4? В этом видео мы с вами создадим полноценный адаптивный сайт на Bootstrap всего за 45 минут. Верстка сайта дело несложное, поэтому вы научитесь делать отличные сайты всего за 45 минут!
✔ Основной сайт: itproger.com/
✔ -------------
Группа Вк - prog_life
Группа FaceBook - goo.gl/XW0aaP
Instagram: / gosha_dudar
Я в Google+ - goo.gl/Tqt9W0
Страничка Twitter - / goshadudar
Страничка Вк - codi999
✔ Начните зарабатывать на RUclips - join.air.io/money_air
✔ Видео по заработку на RUclips - goo.gl/RLPXV8
Помощь в развитии канала.
* Яндекс Деньги: 410014343706921
* Кошельки WebMoney:
- Доллар: Z331064341236
- Гривна: U386388718252
- Рубль: R214610220703
![Roddy Ricch - Survivors Remorse [Official Music Video]](http://i.ytimg.com/vi/J5IeFzr2GgE/mqdefault.jpg)
Лайк если перелистали конец видео , чтобы посмотреть конечный результат.
и разочароваться )
Я так всегда делаю XD
Доверяю этому автору, была уверена, что всё будет супер. Так что нет :)
так для большего видео и не годится.
*И тут лайк от Гоши Дударя)*
То чувство, когда есть люди, которые сайт за 45 мин делают, а ты за 45 часов.
RockSolo Не только ты чел(
RockSolo за 45 дней
Я бы продолжил .. но вы поняли))
За 45 лет
Верстка сайта быстрое дело, особенно если использовать FrameWork. Достаточно большое время занимает написание движка сайта. Но можно также брать FrameWork для php например Yii2
Я бы 45 минут тупил, какой шрифт выбрать
Ты глубоко ошибаешься, если думаешь, что создатель урока не тупил перед записью видео, что и как выбрать. Он всё сделал за 45 минут потому, что готовился к этому несколько дней. И скорее всего ради видоса прошёл этот процесс от начала до канца раз 5.
ты бы не тупил а думал, нормальная скорость измеряется именно не в 45 минутах а в месяцах, а он просто лукавит и это спецы понимают...
Блин, чувак просто красавчик. Я конечно же не все понял, но прям загорелся желанием изучать дальше. Давай больше таких роликов)))
Если сейчас кто то делает сайт по этому видео , то знайте что для корректной работы этого кода нужен bootstrap версии 3.3.7
Спасибо, братан, а то я думаю почему у меня нихера не получается
Спасибо за подсказку, а то долго бы мучился в поисках ошибки..
спасибааааааа! а я то думал почему это го#но не работает
Благодарю Тебя О Маг 80 LVL )))
Чувааак, огромное спасибо. Просто уйму времени сэкономил!
Изумительный урок. Не думал, что так быстро можно сделать действительно годную страницу. Удачи каналу, автору и больше подписчиков
Можно, но если есть знания, а в противном случае будешь делать не 45 минут, а 45 часов минимум
Гош, видео подобного рода(интенсивы) как по-мне гораздо лучше, продолжай в том же духе.
Гоша большое тебе спасибо за урок, наконец то сделал потрясающую веб-страницу.
Гоша, посмотрел данный урок, очень понравился! Продолжай в том же духе! Нюанс, чаще делай Live Preview, чтобы был виден результат в браузере, так как для новичков труднее воспринимается, а так все даже очень неплохо!
вставьте это в #headerwrap и все элемент будут по центру )
display: flex;
justify-content: center;
align-items: center;
А если хотите крутой эффект, то вместо background-attachment:relative сделайте background-attachment:fixed
спасибо)
Отличный урок! Спасибо. Новичкам такое видео на вес золота :)
Красавчик! Просто красавчик ! Приколюшка с rotate весьма впечатлила ! Спасибо тебе за твой труд ! Каналу успехов! Буду смотреть.
Гоша ну ты жгешь! Молодца! Подписка!
СПАСИБО, ты классно объясняешь! Помогают твои уроки!
Ура! дождались!
Лучший урок среди всех что я встречал
спасибо, Гоша! Отличное видео. Смог сделать адаптивное меню к своему сайту. Не нарадуюсь ))
Спасибо, это было захватывающе, смотрел на одном дыхании.
Спасибо большое, отличный урок. Автору + к карме
Как раз то, что я искал, сверстал сайт на отлично. Спасибо, за совет! Удачи.
Лайк однозначно!!!! Спасибо за обзорчик, все по делу и без воды рассказано
Урок хорошо получился. Продолжайте в таком же духе!))
Круто!!!!! Очень понятно обьясняет человек и грамотно многим учиться и учиться!!!!
Не самая "чистая" верстка, зато быстро, доступно и без лишней болтовни
45 МИНУТ ПОЛЕЗНОЙ ИНФЫ - БОЛЬШАЯ РЕДКОСТЬ!!! ЛАЙК ЛАЙК ЛАЙК
Спасибо за проделанную работу!
Спасибо за то, что делишься опытом!
Большое спасибо тебе, очень круто все сделал. Уже давно тусую в твоем канале и много полезной инфы набрался. Спасибо за знания))
Спасибо тебе, и тем кто тоже показывает примеры верстки! Для меня, как для начинающего, очень важно видеть примеры того, как верстают другие, узнаешь много интересного. Изучение только сухого html+css+js дает мало толка, хотя и тоже важно! давай еще чего нибудь подобного почаще)
Спасибо большое за уроки!
Есть вопрос. Зачем использовали стиль "centered" если в bootstrap уже есть "text-center"?
Да, 100%
лол
путь к Крембелю через Китай
то же самое хотел написать
Круть, чувак!!! Спасибо!
я человек простой, вижу Гошу Дударя - ставлю лайк
Видео хорошое, НО есть пару вопросов :
1) шрифты лучше в хедере подключать , так как импорт увеличивает время загрузки страницы
2) почему навигацию не обернуть в тег nav? Это же семантичней
Гений прост, ваще супермозг, спасибо)
Ахеренно)! Автору спасибо !
Спасибо большое, очень помогло!
Как ты в этом так хорошо разбираешься, и знаешь значения каждой строки? Я понимаю только немного, начал изучать только вчера. Как изучать html/css посоветуешь?
Красавчииииик, ты Гоша!
всегда думал бустрап это будет темный лес, спасибо. как ты упростил мне жизнь
всегда думал бустрап это будет темный лес, спасибо. как ты упрочтил мне жизнь
Сижу я значит пишу и пишу и что то не сходиться мне даже кажеться что я дурак. Но оказалось что Автор видоса. Все писал на bootstap 3 c кодом 2013 года. По этому моии файлы которые я скачал с сайта бутстрап не работают, так как команды все изменились сейчас 2018 год. Так что сразу предупреждаю всех кто будет учиться по этому видосу. Или ставьте 3 бутстрап или ищите видосы по 4.1.
хорошо обьясняеш,спасибо за урок
Супер видео, полюблю верстку!;)))))
парень красава. все класс. недавно подписался и просмотрел все видео. есть просьба, добавляй ссылочки на сайты с файлами и программами. буду признателен. удачи.
NIGERITTO TV сам и пиши
Может ему для обучения на примере, я на примерах тоже обучаюсь быстрее
Классный урок!
Всем привет! Подскажите пожалуйста, почему возникает ошибка в 3 строке? Пытаюсь сделать меню в главном шаблоне, но браузер говорит "Notice: Undefined variable"
1
Спасибо за годное видео. Судя по хейтам некоторых в коментах, нужно было тебе после ролика дать ссылку на "htmlbook" и видео, реально, не по поводу bootstrap, а практика с использованием bootstrap.
По поводу платной подписки - забей на комменты, ибо ты тратишь время, энергию и даешь знания за... бесплатно? Лол. Я думаю, любой человек продумал бы систему доната за подобное обучение (лично я большинство знал с видео, но так же и немаловажно - я на многие вопросы тут получил ответы).
Спасибо, за всё!
То есть, если использовать свои стили( css файлы), то нужно качать bootstrap? а если нет то хватит и Bootstrap CDN? или можно использовать Bootstrap CDN с css фалами?
Очень познавательное видео, мне нереально много чего открыло! Можно было бы поставить несколько лайков, поставил бы! Спасибо большое :)
Нифега ты бизменсмен)хотел файлы скачать ,а там подписка нужна,молодец.....)
Ну так бесплатно работать ты вряд-ли согласишься :D
Хехе
@@DevoCry Но продает он с пояснениями, а не простой темплейт
За все в жизни нужно платить, привыкая к халяве станешь неудачником, чем больше за все будешь платить тем больше будешь зарабатывать
@@Romanych1415 никто и не спорит, но воровать чужой контент, и продавать потом как свой... согласись это не правильно
когда чувак делает на все языки видео, либо он гений, либо он знает все поверхностно...
Кто знает все , тот не знает ничего. Китайская народная мудрость)
качал тоже не помогло,но я уже разобрался.
Зашёл на сайт с этим уроком,скопировал html код к себе вставил и заработало
Спасибо отличное видео.
Вы часто пользуетесь div тегом. Зачем section теги?
Каждый разработчик сам решает, что ему удобнее и к чему привык?
или есть какие то правила?
можно использовать и то и другое?
Благодарю если просветите..Я новичек не удивляйтесь, если глупый вопрос)))
Не понял, зачем нужны эти в промышленных количествах, если один черт потом в css пишется padding?..
Спрашивается, к чему тогда анонс "Как создать сайт на Bootstrap 4?", если описан Bootstrap 3? Стараемся втулить народу просроченный товар?
Парень, хочу сказать, что уже на bootstrap 3 никто сайты не делает. Сейчас flexbox рулит! Он настолько рулит, что bootstrap 4 будет на его основе. Плюс ко всему, уже давно нужно приучаться к sass - делать нормальную упорядоченную структуру и компилить это все дло в один css, например используя gulp
Я прям искал сие коммент))
Бутстрап нужно знать только для того, чтобы знать как поправить код на сайтах с бутстрапом. =)
Лайк и подписка.помог очень
крассава мужик можешь дать ссылку на вторую часть ?
не знаю, или я не нашел, или нет.
Твое мнение о использовании мака для разработки (back-end)
в ближайшее время, хотелось бы перейти с Linux/Windows но все же в размышлениях)
классный урок
Годнота)
Показалось что Гошка сказал: "Тут у нас заголовок, аж один"😂😂😂 22:10
Очень полезное видео
офигенно! именно то что я искала, все четко и понятно, а главное без нужной тягомотины
And I See Every Your Videos , All Goods
padding-top: 70px;
padding-bottom: 70px;
я бы рекомендовал писать так
padding: 70px 0;
оптимизация кода)
А почему у меня при наличии сайт весь не адаптируется, а только иконка телефона.....??? Как сделать весь сайт адаптивным ???? И вообще, Гоша, где с вами можно пообщаться !???? Спасибо за видео !!!!
Как сделать меняющиеся background картинки,подскажите пожалуйста и именно с кодом Гошы)
Крутое. Спасиб.
Спасибо огромноее
Спасибо Гоша ...
Подскажите как в болоке где телефоны стоят сделать фон картинкой? через Css делаю не меняется.
Супер!!!
Видео понравилось. Быстро и по существу.
Подскажите, пожалуйста, перечень классов для Bootstrap 4. Для третьего есть, но как сильно они отличаются?
раз уж увеличена мажорная версия, то сильно. Там много чего переписано
К сожалению бутстрап хорош только тогда, когда у сайта нет дизайна (для всех устройств), если ты верстаешь по отрисованному шаблону в большинстве случаев этот фреймворк только мешает. Так что советую применять его обдуманно.
Как это нет дизаина?
Супер !
меня одного перебрасывает не на этот урок (по ссылке) ??
Закрепляю знания, написал уже много сайтов, Георгий.
padding: 15px 0; Не надо указывать отдельно топ и боттом.
Еще заметил ошибку на 23:10 ../ возвращает в родительскую директорию, а не назад. Это очень важно, когда будете движки писать.
И упс тоже раздражают) А так спасибо, интересно)
Зачем переопределять то что и так 0, только ради красоты?)
если поставить padding:15px; без указания 0, то отступ будет относительно всех сторон. Обязательно нужно указывать 0.
KAPITANSW вы не поняли вопрос, я спрашиваю зачем указывать значение для всех 4 сторон, если необходимо изменить лишь для двух? В чем профит?)
Если нужен отступ только для одной стороны, то использовать лучше конкретный отступ для этой стороны. Если больше одной, то уже комбинированное свойство.
... и в результате через время имеем тучи переопределений того что в целом не нужно было для решения поставленной задачи)
Какой текстовый редактор используешь?
На моем компьютере в папке с сайтом лежат файлы с сайтом при запуске все работает. Как только я копирую данную папку на другой комп функционал сайта перестает работать. Подскажите в чем может быть причина?
Подскадите пожалуйта.
Как сделать изображение на заднем фоне темнее(без фотошопа), чтобы текст не сливался с ним
Добавляю свои картинки - не отображает. В чём может быть проблема? Может нужны определённого размера?
Путь и названия прописаны правильно вроде бы
попробуй написать (../ а там должно вылезти контекстное меню и там выберешь путь. у меня тоже не показывало пока не выбрал таким образом
Такая функция есть не у всех редакторах кода
Ну блин ребята и Гоша ошибаешься много. Я в этом шарю много кого смотрю и знаю. Ну такое. Но результат крутой! Все равно тебе respect+
В общем очень не плохо
Как создать новую ссылку (про нас) это нужно ещё один файл html создавать?
Вместо data-target=".navbar-collapse" по правилам ставится id. А ваша схема у меня не работает. Потратил полдня чтобы раскопать где ошибка.
подробнее скажи, что вместо этого написать? у меня тоже не робит
Можешь подробней по этому моменту пояснить?
data-target="#navbar-main"
Есть совет у кого учиться ? А то тоже схема не срабатывает
Интересно, если не секрет сколько реального времени заняло у тебя, чтобы сделать такой сайт, уж точно не 45 мин? Обычно аналогичный сайт я делаю с помощью adobe suite и не парюсь, нужное сам допиливаю.
все супер, я вот только не поняла для чего подключалась jQuery)
Знающие, подскажите, в 2018 Bootstrap еще популярен и актуален?
А так, нормальный урок для новичков, которые не боятся лезть в документацию и гуглить нужные подробности. Я теперь имею базовое представление, зачем нужен Bootstrap и как с ним работать, так что это определенно не бесполезно проведенное время.
Спасибо
Начал смотреть, не понял, нафига font-smoothing, залез в комменты, передумал смотреть.
Hазвание классов:
r, w, f
Says a lot!
Ребят, то что он писал в class параметры это особенности Bootstrap?
есть ли разница когда мы не скачиваем Bootstrap, а используем CDN?
Вот бы научиться тоже так верстать
ребята я хочу создать собсвенный сайт можете подсказать необходимую литературу чтоб начать с азов?
спасибо автору за урок, но помогите с вопросом: почему у него список ul (про нас, сервисы и тд) горизонтально, а у меня только вертикально получается?
уменьши окно
А названия классов, типов откуда брать? из документации на bootstrap?