Bootstrap верстка современного сайта за 45 минут!
Урок на сайте 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
✔ Начните зарабатывать на KZread - join.air.io/money_air
✔ Видео по заработку на KZread - goo.gl/RLPXV8
Помощь в развитии канала.
* Яндекс Деньги: 410014343706921
* Кошельки WebMoney:
- Доллар: Z331064341236
- Гривна: U386388718252
- Рубль: R214610220703
Пікірлер: 677
То чувство, когда есть люди, которые сайт за 45 мин делают, а ты за 45 часов.
@user-yi9zv6ek7o
7 жыл бұрын
RockSolo Не только ты чел(
@shved5753
7 жыл бұрын
RockSolo за 45 дней
@vault_dude
7 жыл бұрын
Я бы продолжил .. но вы поняли))
@fefe8106
7 жыл бұрын
За 45 лет
@jokeer3148
7 жыл бұрын
Верстка сайта быстрое дело, особенно если использовать FrameWork. Достаточно большое время занимает написание движка сайта. Но можно также брать FrameWork для php например Yii2
Лайк если перелистали конец видео , чтобы посмотреть конечный результат.
@bengann79
7 жыл бұрын
и разочароваться )
@RUSLANFOREX
6 жыл бұрын
Я так всегда делаю XD
@user-su1dq5qg9u
6 жыл бұрын
Доверяю этому автору, была уверена, что всё будет супер. Так что нет :)
@WindBOJIK
6 жыл бұрын
так для большего видео и не годится.
@yep.5572
6 жыл бұрын
*И тут лайк от Гоши Дударя)*
Я бы 45 минут тупил, какой шрифт выбрать
@EvgenOl
5 жыл бұрын
Ты глубоко ошибаешься, если думаешь, что создатель урока не тупил перед записью видео, что и как выбрать. Он всё сделал за 45 минут потому, что готовился к этому несколько дней. И скорее всего ради видоса прошёл этот процесс от начала до канца раз 5.
@kamonnful
3 жыл бұрын
ты бы не тупил а думал, нормальная скорость измеряется именно не в 45 минутах а в месяцах, а он просто лукавит и это спецы понимают...
Блин, чувак просто красавчик. Я конечно же не все понял, но прям загорелся желанием изучать дальше. Давай больше таких роликов)))
Если сейчас кто то делает сайт по этому видео , то знайте что для корректной работы этого кода нужен bootstrap версии 3.3.7
@alexc4329
4 жыл бұрын
Спасибо, братан, а то я думаю почему у меня нихера не получается
@_Fantom_.
4 жыл бұрын
Спасибо за подсказку, а то долго бы мучился в поисках ошибки..
@mustafo_designer
4 жыл бұрын
спасибааааааа! а я то думал почему это го#но не работает
@Samrddhi_samrat
4 жыл бұрын
Благодарю Тебя О Маг 80 LVL )))
@shagron0736
Жыл бұрын
Чувааак, огромное спасибо. Просто уйму времени сэкономил!
Ура! дождались!
Изумительный урок. Не думал, что так быстро можно сделать действительно годную страницу. Удачи каналу, автору и больше подписчиков
@denzeroneYT
Жыл бұрын
Можно, но если есть знания, а в противном случае будешь делать не 45 минут, а 45 часов минимум
СПАСИБО, ты классно объясняешь! Помогают твои уроки!
Отличный урок! Спасибо. Новичкам такое видео на вес золота :)
Гоша большое тебе спасибо за урок, наконец то сделал потрясающую веб-страницу.
Урок хорошо получился. Продолжайте в таком же духе!))
Лайк однозначно!!!! Спасибо за обзорчик, все по делу и без воды рассказано
Гоша ну ты жгешь! Молодца! Подписка!
Красавчик! Просто красавчик ! Приколюшка с rotate весьма впечатлила ! Спасибо тебе за твой труд ! Каналу успехов! Буду смотреть.
Спасибо, это было захватывающе, смотрел на одном дыхании.
Спасибо за то, что делишься опытом!
Лучший урок среди всех что я встречал
Круто!!!!! Очень понятно обьясняет человек и грамотно многим учиться и учиться!!!!
спасибо, Гоша! Отличное видео. Смог сделать адаптивное меню к своему сайту. Не нарадуюсь ))
Большое спасибо тебе, очень круто все сделал. Уже давно тусую в твоем канале и много полезной инфы набрался. Спасибо за знания))
Спасибо за проделанную работу!
Спасибо большое, отличный урок. Автору + к карме
Гоша, посмотрел данный урок, очень понравился! Продолжай в том же духе! Нюанс, чаще делай Live Preview, чтобы был виден результат в браузере, так как для новичков труднее воспринимается, а так все даже очень неплохо!
Спасибо большое за уроки!
Круть, чувак!!! Спасибо!
Гош, видео подобного рода(интенсивы) как по-мне гораздо лучше, продолжай в том же духе.
Ахеренно)! Автору спасибо !
Супер видео, полюблю верстку!;)))))
Как раз то, что я искал, сверстал сайт на отлично. Спасибо, за совет! Удачи.
Гений прост, ваще супермозг, спасибо)
вставьте это в #headerwrap и все элемент будут по центру ) display: flex; justify-content: center; align-items: center; А если хотите крутой эффект, то вместо background-attachment:relative сделайте background-attachment:fixed
@cymbionic8096
6 жыл бұрын
спасибо)
Спасибо большое, очень помогло!
Красавчииииик, ты Гоша!
Классный урок!
45 МИНУТ ПОЛЕЗНОЙ ИНФЫ - БОЛЬШАЯ РЕДКОСТЬ!!! ЛАЙК ЛАЙК ЛАЙК
Спасибо, за всё!
Годнота)
хорошо обьясняеш,спасибо за урок
Есть вопрос. Зачем использовали стиль "centered" если в bootstrap уже есть "text-center"?
@sat_tv
4 жыл бұрын
Да, 100%
@mustafo_designer
4 жыл бұрын
лол
@mustafo_designer
4 жыл бұрын
путь к Крембелю через Китай
@guestalex
4 жыл бұрын
то же самое хотел написать
когда чувак делает на все языки видео, либо он гений, либо он знает все поверхностно...
@vvv7220
5 жыл бұрын
Кто знает все , тот не знает ничего. Китайская народная мудрость)
Спасибо тебе, и тем кто тоже показывает примеры верстки! Для меня, как для начинающего, очень важно видеть примеры того, как верстают другие, узнаешь много интересного. Изучение только сухого html+css+js дает мало толка, хотя и тоже важно! давай еще чего нибудь подобного почаще)
Как ты в этом так хорошо разбираешься, и знаешь значения каждой строки? Я понимаю только немного, начал изучать только вчера. Как изучать html/css посоветуешь?
Не самая "чистая" верстка, зато быстро, доступно и без лишней болтовни
я человек простой, вижу Гошу Дударя - ставлю лайк
Лайк и подписка.помог очень
парень красава. все класс. недавно подписался и просмотрел все видео. есть просьба, добавляй ссылочки на сайты с файлами и программами. буду признателен. удачи.
@ScorpionYTS
6 жыл бұрын
NIGERITTO TV сам и пиши
@Yaros_Nefrit
6 жыл бұрын
Может ему для обучения на примере, я на примерах тоже обучаюсь быстрее
всегда думал бустрап это будет темный лес, спасибо. как ты упростил мне жизнь
всегда думал бустрап это будет темный лес, спасибо. как ты упрочтил мне жизнь
Видео хорошое, НО есть пару вопросов : 1) шрифты лучше в хедере подключать , так как импорт увеличивает время загрузки страницы 2) почему навигацию не обернуть в тег nav? Это же семантичней
Очень познавательное видео, мне нереально много чего открыло! Можно было бы поставить несколько лайков, поставил бы! Спасибо большое :)
Нифега ты бизменсмен)хотел файлы скачать ,а там подписка нужна,молодец.....)
@eclipsium_msk
6 жыл бұрын
Ну так бесплатно работать ты вряд-ли согласишься :D
@LobanovSpace
5 жыл бұрын
Хехе
@webcutter8239
5 жыл бұрын
@@DevoCry Но продает он с пояснениями, а не простой темплейт
@Romanych1415
5 жыл бұрын
За все в жизни нужно платить, привыкая к халяве станешь неудачником, чем больше за все будешь платить тем больше будешь зарабатывать
@DevoCry
5 жыл бұрын
@@Romanych1415 никто и не спорит, но воровать чужой контент, и продавать потом как свой... согласись это не правильно
Очень полезное видео
Супер !
Супер!!!
Спасибо Гоша ...
классный урок
Крутое. Спасиб.
Спасибо огромноее
And I See Every Your Videos , All Goods
Спасибо за годное видео. Судя по хейтам некоторых в коментах, нужно было тебе после ролика дать ссылку на "htmlbook" и видео, реально, не по поводу bootstrap, а практика с использованием bootstrap. По поводу платной подписки - забей на комменты, ибо ты тратишь время, энергию и даешь знания за... бесплатно? Лол. Я думаю, любой человек продумал бы систему доната за подобное обучение (лично я большинство знал с видео, но так же и немаловажно - я на многие вопросы тут получил ответы).
В общем очень не плохо
Очень полезный контент! Спасибо за видео) Все четко, быстро и по делу
офигенно! именно то что я искала, все четко и понятно, а главное без нужной тягомотины
Сижу я значит пишу и пишу и что то не сходиться мне даже кажеться что я дурак. Но оказалось что Автор видоса. Все писал на bootstap 3 c кодом 2013 года. По этому моии файлы которые я скачал с сайта бутстрап не работают, так как команды все изменились сейчас 2018 год. Так что сразу предупреждаю всех кто будет учиться по этому видосу. Или ставьте 3 бутстрап или ищите видосы по 4.1.
Спасибо отличное видео. Вы часто пользуетесь div тегом. Зачем section теги? Каждый разработчик сам решает, что ему удобнее и к чему привык? или есть какие то правила? можно использовать и то и другое? Благодарю если просветите..Я новичек не удивляйтесь, если глупый вопрос)))
крассава мужик можешь дать ссылку на вторую часть ?
То есть, если использовать свои стили( css файлы), то нужно качать bootstrap? а если нет то хватит и Bootstrap CDN? или можно использовать Bootstrap CDN с css фалами?
подписался на канал. пересмотрю все ролики.
К сожалению бутстрап хорош только тогда, когда у сайта нет дизайна (для всех устройств), если ты верстаешь по отрисованному шаблону в большинстве случаев этот фреймворк только мешает. Так что советую применять его обдуманно.
@user-vx1fx1nz7z
5 жыл бұрын
Как это нет дизаина?
Видео понравилось. Быстро и по существу. Подскажите, пожалуйста, перечень классов для Bootstrap 4. Для третьего есть, но как сильно они отличаются?
@Mr_DarkWolf
6 жыл бұрын
раз уж увеличена мажорная версия, то сильно. Там много чего переписано
Всем привет! Подскажите пожалуйста, почему возникает ошибка в 3 строке? Пытаюсь сделать меню в главном шаблоне, но браузер говорит "Notice: Undefined variable" 1
Парень, хочу сказать, что уже на bootstrap 3 никто сайты не делает. Сейчас flexbox рулит! Он настолько рулит, что bootstrap 4 будет на его основе. Плюс ко всему, уже давно нужно приучаться к sass - делать нормальную упорядоченную структуру и компилить это все дло в один css, например используя gulp
@user-nq8xw8fh3j
4 жыл бұрын
Я прям искал сие коммент)) Бутстрап нужно знать только для того, чтобы знать как поправить код на сайтах с бутстрапом. =)
Какой текстовый редактор используешь?
Не понял, зачем нужны эти в промышленных количествах, если один черт потом в css пишется padding?..
не знаю, или я не нашел, или нет. Твое мнение о использовании мака для разработки (back-end) в ближайшее время, хотелось бы перейти с Linux/Windows но все же в размышлениях)
качал тоже не помогло,но я уже разобрался. Зашёл на сайт с этим уроком,скопировал html код к себе вставил и заработало
Спрашивается, к чему тогда анонс "Как создать сайт на Bootstrap 4?", если описан Bootstrap 3? Стараемся втулить народу просроченный товар?
"Разработка сайтов на профессиональном уровне" - чот орнул
@neikst
3 жыл бұрын
Блин, я еще полный профан в frontend, но даже я понимаю, что это пздц, а не видео Хотя бы семантику соблюдал бы😭😭
@WindBOJIK
3 жыл бұрын
@@neikst значит, уже не полный!
Спасибо
Подскажите как в болоке где телефоны стоят сделать фон картинкой? через Css делаю не меняется.
Как сделать меняющиеся background картинки,подскажите пожалуйста и именно с кодом Гошы)
Показалось что Гошка сказал: "Тут у нас заголовок, аж один"😂😂😂 22:10
Добавляю свои картинки - не отображает. В чём может быть проблема? Может нужны определённого размера?
@SlavKoUa1996
7 жыл бұрын
Путь и названия прописаны правильно вроде бы
@YoungDR
7 жыл бұрын
попробуй написать (../ а там должно вылезти контекстное меню и там выберешь путь. у меня тоже не показывало пока не выбрал таким образом
@hiit1369
7 жыл бұрын
Такая функция есть не у всех редакторах кода
меня одного перебрасывает не на этот урок (по ссылке) ??
Гоша спасибо! Объясни, пожалуйста, почему в одном случае у тебя div class, а в другом случае div id, спасибо.
@jokeer3148
7 жыл бұрын
между id и class различий мало. Но для JS рекомендовано использовать id.
@BroVitosss
7 жыл бұрын
Между id и class разница фундаментальная, а то, что они оба являются селекторами - это всё, что их объединяет
@TiSAiK
7 жыл бұрын
Буду благодарен вам, если сможете ответить на мой вопрос.
@chex630
7 жыл бұрын
идентификатор может быть только один а в класс входят множество елементов,это не только в вебе.Например Кружка принадлежит к классу items,но твоя любимая кружка может быть одна имеет идентификатор favorite item,вторая твоя кружка просто красная имеет идентификатор red item но тоже принадлежит к классу items
@TiSAiK
7 жыл бұрын
Danil Chex спасибо
все супер, я вот только не поняла для чего подключалась jQuery)
Гоша объясни плз зачем ты используешь outline: 0;?
@eliseykravchuk5480
6 жыл бұрын
Cat Shannon чтобы подчёркивания ссылок не было
@user-zz8ju3ym1t
6 жыл бұрын
Подчеркивание ссылок убирается при помощи text-decoration: none; Разве нет?
Закрепляю знания, написал уже много сайтов, Георгий. padding: 15px 0; Не надо указывать отдельно топ и боттом. Еще заметил ошибку на 23:10 ../ возвращает в родительскую директорию, а не назад. Это очень важно, когда будете движки писать. И упс тоже раздражают) А так спасибо, интересно)
@kamtugeza
7 жыл бұрын
Зачем переопределять то что и так 0, только ради красоты?)
@KAPITANSW
7 жыл бұрын
если поставить padding:15px; без указания 0, то отступ будет относительно всех сторон. Обязательно нужно указывать 0.
@kamtugeza
7 жыл бұрын
KAPITANSW вы не поняли вопрос, я спрашиваю зачем указывать значение для всех 4 сторон, если необходимо изменить лишь для двух? В чем профит?)
@IIIu6ko
7 жыл бұрын
Если нужен отступ только для одной стороны, то использовать лучше конкретный отступ для этой стороны. Если больше одной, то уже комбинированное свойство.
@kamtugeza
7 жыл бұрын
... и в результате через время имеем тучи переопределений того что в целом не нужно было для решения поставленной задачи)
Ребята, по поводу картинок и т.д. Толку вам от видео, если вы тупо слизываете ВСЁ? Окей, вы повторите с его картинками его же сайт, и толку? Какой смысл вам лезть в веб-разработку, если для вас проблема "картинка"? Вы не думали о том, что веб-разработка включает в себя слово "разработка", что подразумевает создание чего-то? Не слизывания, а создание. Скачайте свои картинки, обработайте их в ps, возьмите с гугла свои шрифты, свой текст, свои цвета, свои размеры и всё. Необходимые ссылки автор видео предоставил для того, чтобы что-то самому сделать. Автор дал определенный скелет для того, чтобы вы уже сами могли что-то делать и в этом он молодец. Если вам непонятна какая-либо тут информация, то вместо того, чтобы тратить время на комменты "какой автор плохой" - лучше бы посмотрели другие видео, либо почитали бы литературу касательно вашим недопониманиям.
@Mr_DarkWolf
6 жыл бұрын
вообще-то чтобы что-то понять надо переписать готовое с полным разбором, это говорю как С++ разработчик, который в тысячи раз сложнее ваших html и css. Если он поставит не ту картинку и всё у него поплывет нахрен, это нихрена не учеба. Сначала нужно повторить в точности, а потом уже можно применять свои модификации, пробовать другие картинки, расширять меню. вот это уже обучение.
@sogorich
5 жыл бұрын
@@Mr_DarkWolf Не стоит сравнивать ЯП с языком разметки и языком стилизации.
@Mr_DarkWolf
5 жыл бұрын
@@sogorich где я сравниваю языки? Я говорю о принципе обучения. Читайте внимательно.
Вот бы научиться тоже так верстать
Рахмет
Начал смотреть, не понял, нафига font-smoothing, залез в комменты, передумал смотреть.
Подскадите пожалуйта. Как сделать изображение на заднем фоне темнее(без фотошопа), чтобы текст не сливался с ним
Спасибо! Однако мы сделали не сайт, а сверстали главную страницу :)
@yuriihaiduk2114
5 жыл бұрын
это называется лендинг
@LobanovSpace
5 жыл бұрын
Одностраничный)
@SergMirny_yt
5 жыл бұрын
ну тут достаочно информации для написания шаблона. А дальше все авно ххедер,футер одинаковый контент меняется, и того забиваем это в основной лайоут и только меняем секцию контента и получаем сайт.. Если так рассматривать - тут вообще не сайт - а только шаблон. Сам сайт долден еще рабочую логику иметь - это еще PHP
@kamonnful
3 жыл бұрын
@@SergMirny_yt php - это еще пару лет учебы))
padding-top: 70px; padding-bottom: 70px; я бы рекомендовал писать так padding: 70px 0; оптимизация кода)
У меня не подключаются стили. Как исправить проблему?
Вместо data-target=".navbar-collapse" по правилам ставится id. А ваша схема у меня не работает. Потратил полдня чтобы раскопать где ошибка.
@user-ev3bv2xh3d
7 жыл бұрын
подробнее скажи, что вместо этого написать? у меня тоже не робит
@akulik512
6 жыл бұрын
Можешь подробней по этому моменту пояснить?
@Creativeeart
6 жыл бұрын
data-target="#navbar-main"
@oliversmail1000
4 жыл бұрын
Есть совет у кого учиться ? А то тоже схема не срабатывает
ребята я хочу создать собсвенный сайт можете подсказать необходимую литературу чтоб начать с азов?
само ахуенное видео которое я когда либо видел!!!
@miku2293
5 жыл бұрын
значит ты видел всего одно видео
Ребят, то что он писал в class параметры это особенности Bootstrap?