#5 ActiveBox - Верстка сайта с нуля для начинающих | Адаптивная верстка
HTML-код
- Опубликовано: 26 май 2019
- Продолжаем практиковаться в верстке сайтов на HTML и CSS. В этом видео научимся работать с медиа запросами (media queries) и начнем делать адаптивную верстку сайта.
// Ссылки =================
Основы HTML и CSS для начинающих: brainscloud.ru/landing/html-css
Материалы урока: files.brainscloud.ru/file/act...
// О проекте =================
Меня зовут Дмитрий Валак. Я занимаюсь разработкой сайтов уже много лет, специализируюсь больше на front-end разработке и верстке сайтов, но и программирование тоже изучаю. Здесь буду делиться с вами информацией на разные темы по веб-разработке - HTML, CSS, Javascript, JQuery, Vue, PHP, MySQL, React, Gulp и тд.
На сайте проекта brainscloud.ru вы найдете много полезных закрытых материалов, а так же сможете поработать со мной лично, при наличии такого желания.
// Соц. сети =================
Мой ВК - odimaz
Группа BC - brainscloud
Мой Instagram: / dmitryvalak
#верстка #версткасайта #созданиесайта #html #css
![Moneybagg Yo - WHISKEY WHISKEY [feat. Morgan Wallen] (Official Audio)](http://i.ytimg.com/vi/kJamyq0WplE/mqdefault.jpg)
более интересных уроков и практики я не видел ни у кого.
время идет, а вы все равно остаетесь лучшим учителем, спасибо!
блинн самое лучшое видео !по верстке, по медия запросам спасибо вам большое !
Спасибо, очено помог))
Делай по больше таких видео)
Хотелось б и JS для начинающих!)
Дмитрий, большое человеческое спасибо!
Очень полезные уроки и понятные. Спасибо. Долго искал такой контент
БРО - ты лучший! Спасибо за контент ;)
Принцип зрозумілий, дякую за пояснення.
боже этот человек делает слишком полезные уроки! однозначно респект и подписка!!
Мне как новичку очень помогли уроки в понимании верстке...очень благодарен.
Класс,круто, как и всегда!) Просьба есть, выпустить видео по поводу display и position, чтобы было больше понимания. Спасибо за труд!)
Очень круто, спасибо большое!! от тебя узнаю то, что другие не рассказывают!
Отличный урок! Все предельно понятно! Спасибо огромное, вы - лучший! Успехов!
*Cпасибо большое за урок. Понятно, доступно, а главное полезно*
Спасибо за детальные объяснения, очень нравится смотреть ваши видео 🔝
Вы помогаете понять саму суть вёрстки,спасибо большое.
Надо бы придумать html6 с тегом , чтоб перестать на костылях выдумывать эти меню )))
А вы правильно медиа прописали? Он начинает быть виден с брейкпоинта. Может в этом дело?
Да, вы лучший преподаватель ❤️ лайкать одно удовольствие
Спасибо за труд ! Успехов в развитии канала !
спасибо!
Дмитрий, спасибо большое. очень полезные материалы и самое главное, перестаешь всего этого бояться, хотя поначалу думал "куда же я попал, и как же это все работает ? никогда не разобраться!"
крутяк просто нет слов!!
когда читаю материал даже близко так не понимал как щас! жилание учить от ваших уроков только растет! лайк + подписака 100%
Спасибо огромное за курс) все по полочкам раскладываешь, просто цены тебе нет)
Отличный урок! Большое спасибо!
Спасибо за подробный обзор, все супер !!!
спасибо за отличные уроки!
Если я и буду выполнять заказы на вёрстку сайтов, то делать я это буду для людей, а не для пользователей Internet.Explorere , единственное для чего он нужен, это скачать нормальный браузер.
Здравствуйте! Благодарю за видео!
🌟🌟🌟🌟🌟 *Спасибо за очень полезный и понятный урок!!!* 🌟🌟🌟🌟🌟
Да все понятно!! Спасибо за Видео!!!!
Очень круто, очень удобно))
С самого начала изучения css не покидала мысль, как делается сайт адаптивным для мобилок. Твои уроки это просто нечто.
СенкЮ соу Мач ＼(￣▽￣)／
Спасибо за годный контент!!!
Классный урок!
В 4 уроке ещё так написал, background-size: cover, так как через слэш в хроме не работает
И-де-аль-но!
Спасибо!
Просто магия какая-то!
BEST OF THE BEST!!!!
Очень доходчиво)
Сделай, пожалуйста, отдельное видео по JS, некое обучение, и в чем отличие между JS and JQ
спасибо огромное за урок!!!!
Спасибо.
Лайк.
Спасибо большое Дим!!
Захожу, сразу ставлю лайк, потом - смотрю.
ООООООО сегодня сверстал этот сайт, теперь могу посмотреть как это делает профи)
Спасибо за видео.
Большое спасибо!
Спасибо большое!
Спасибо большое
Отлично!
Благодарю!
Спасибо!
отлично!
Лучший!
Thanks Boss
Крутой чел )
🔥🔥🔥🔥🔥🔥
Вместо background-size: cover так же работает object-fit: cover
Немного муторно с размерами шрифтов в медиа запросах. Как вариант можно указать в body в px, а далее в rем (использовать калькулятор). Тогда не придется указывать размеры в медиа, т.е. писать меньше кода + сменив значение размера шрифта в body, мы меняем его везде, одним легким движением курсора)
он же делает обучение не для профи
@@dimadiv6583 Ты же лучше меня понимаешь, что кроме видосиков нужно читать мануалы. А rem понять можно буквально минут за 10, ничего сложного.
Очень крутые уроки))
Но Дмитрий а не проще заместь SVG logo делать через fontawasome???
спасибо
Уже давно использую запись для background через / cover и все корректно работает во всех браузерах, в том числе и мозилле
Столкнулся с такой проблемой, что тег в css как .nav стили не работают, так же как и под адаптивную верстку( тоесть как у тебя делаю не работает: стили шрифта и в принципе не скрывается при дислей нон). Решил проблему таким образом- в css прописал не .nav , а просто nav и всё заработало( как для десктопной версии- все стили заработали, так и при адапнтивной скрывается при разширении экрана)
1:22
center no-repeat / cover - в хроме тоже самое. Но, как написал человек в комментах:
"просто нужно писать, по правильному порядку "center / cover no-repeat" а не "center no-repeat / cover"
Либо как в ролике:
background: 44475e url(img/intro-bg.jpg) center no-repeat;
background-size: cover;
background: #31344e url(../img/intro.jpg) center no-repeat / cover; - данный стиль у меня не работал даже в хроме. Как мне подсказали, у меня была ошибка в синтаксисе, т.е. размер задается после позиции через слеш - background: #31344e url(../img/intro.jpg) no-repeat center / cover;
Короче, говоря, no-repeat и center надо было поменять местами, после этого у меня заработало.
Дмитрий, объяснения адаптации замечательные, ты молодец, всё кристально ясно и понятно. Должен лишь заметить что логотип всегда и на всех сайтах является ссылкой на главную страницу и странно что у тебя он просто картинка - это просто ломает весь привычный мне мир, так что у себя я ссылкой прописал.
Алексей Гундин так это ж лендос, других страниц нет
@@BrainsCloud тоже верно! Ещё раз спасибо за урок - этот особенно понравился :-)
Проверил в Мозиле, Хроме, Опере, ИЕ11 и Эдге. В Эдге фоновая картинка не появилась даже после исправления. Пришлось создавать по отдельности все правила: бгк, бгп, бгр, бгс, бги. Только тогда появилась. Даже в ИЕ11 лучше поддерживается. И еще заметил что Мс браузерах в самом низу стр. есть какая то полоска белая в 1пкс.
все интересно и понятно. автор спасибо. только почему у меня при повторении этих же действий, в адаптиве появляется нижний горизонтальный скролл?? то есть заголовок h1 выпирает из блока, закоментировал burger - и все норм!! где ошибка?
Слишком долго делал бургер меню проста оставил б эту кмонду (̈)между тегами без скобок ! И бургер появился б сам атак урок суппер
а ничего что некоторыми блоками work_content есть отступ, во всех браузерах кроме оперы?
Здравствуйте, зачем вы используете элемент span для burger__item, потом же все равно задаёте ему display: block?
Скажи, пожалуйста, какие есть сервисы для проверки своего сайта на разных браузерах.
P.S.: Просто не очень хочется засорять комп разными и ненужными браузерами.
Можно для медиа подключать второй css? Если можно, то это будет удобно и быстрее писать
Можно. Только подключать media.css надо ниже style.css.
В Internet Explorer title and subtitle 'у в блоке intro просто poxyu на контейнер, она вылазит за него и в одну сточку стоит, как это пофиксить, чтобы адаптивно было?
скорее всего стоит конкретная ширина у где то
либо высота
При уменьшении размера екрана у меня появляється белая полоса, которая закрывает справа кусочек сайта, это я в коде напартачил?
Уроки реально крутые, очень интересно смотреть, плюс возникает некоторое понимание что и с чем едят. Вопрос автору и всем участникам: Кто-нибудь знает что-то за этот сервис Eternalhost? Просто данную рекламу я увидел непосредственно на этом канале, вот и подумал возможно сам автор в курсе что это за хостинг, и как там дела обстоят со стабильностью работы.
А выносить media.css в отдельный файл будет норм? Если в html подключить его после основного .css файла
Ну такое. Я раньше так работал и пришел к выводу что это не очень удобно. Попробуйте.
что если в режиме разработчика в стиле мобильного телефона не курсор, а кружочек, тогда как понять текстурку блока при наведении?
Помоги пожалуйста, адаптив во всех браузерах работает отлично, кроме Хрома. Внизу появляется скролбар. Как исправить, в чем может быть проблема? Уже не знаю что делать...
Firefox потдерживает " / cover " просто нужно писать, по правильному порядку "center / cover no-repeat" а не "center no-repeat / cover"
no-repeat center / cover; - уже и так пашет
up
кавоо?
крутые уроки, все понятно и ясно, лайк + подписка (нужна помощь: при уменьшении там для телефонов и тд в не парных блоках по нумерации справа появляется белое поле которое увеличивается по мере уменьшения самого сайта (для телов айпадов и тд), и у каждого парного блока(второй четвертый и тд) такое же поле только слева - как можно это убрать?)
Возможно после полной адаптации оно пропадет?! этого я не знаю, подскажите пж
Народ, никак не могу понять, почему в некоторых браузерах в блоке reviews, фиолетовый фон выходит слева за фото, а в некоторых нет.
Как это исправить? Чтобы слева чётко была фотка, а справа текст в фиолетовом фоне.
А еще на 13.18, когда препод выбирает iPad почему у меня содержимое макета не полностью позиционируется на iPad?
То есть я могу зажать мышкой и подвигать влево, вправо и т.д
Привет!
Спасибо за твой контент, очень помогаешь)
Ответь пожалуйста, есть ли какой-нибудь список, наподобие обнуления свойств в css, чтобы адаптировать все свойства сразу под все браузеры( я не про медиа)
Посмотрите normalize.css, reset.css
@@BrainsCloud уже смотрел, ввожу в css файл и не помогает, как не воспринимал эксплоер, так и сейчас тоже
@@BrainsCloud может вы подскажите, есть ли расширение для хрома, чтобы тестировать поддержку разных браузеров?
Может кто сможет подсказать? Как изменить курсор при просмотре кода в хроме? (У меня вместо обычной стрелочки какой-то кружочек, изза этого не могу посмотреь работает ли cursor pointer)?????
подскажите почему не показывает фоновое изображение в EDGE хотя в остальных браузерах все ок.
если кому понадобится, сам разобрался, не терпит если изначально написан цвет а потом фоновое изображение
а сколько будет стоить такой лендинг написанный ручками с нуля?
еще на первом уроке заметил, что при "cover" в Бэкраунде, у меня в опере тоже ничего не отображалось, думал глюк именно моей системы, а оно воно-как.
Кстати, у меня из-за cover в блоке intro фон пропадал даже в хроме. Поэтому я его вообще убрала и даже забыла о нем. Сейчас проверила все браузеры и у меня фон не пропадет, хотя cover по прежнему не прописан. Почему у меня в хроме пропадал фон из-за covera, а у тебя, Дмитрий, на маке нет??))
Я хотел бы поинтересоваться, так как я начинающий веб дев.
Зачем для бургера был указан z-index: 1; ?
Я тоже начинающий и, насколько я знаю, элемент с z-index больше чем у другого элемента, перекроет второй, например, у хедера страницы мы ставили индекс 1000, чтобы в будущем, если понадобится, он мог при скролле оставаться прижатым к верху с помощью fixed позиционирования и отображаться поверх всех других элементов
А какие самые популярные контрольные точки на сегодняшний день?
в chrome и других браузерах адаптация работает отлично , а вот с mozila проблемы. не понимаю почему
Ребята, может кто-то знает, прописала мета тег, но сайт не вписывается в размер устройства. Почему такое может быть?
ответь пожалуйста, если узнаешь)
Помогите, пожалуйста.
Все делал как у вас, но у меня почему-то полоска бургера ,которая посередине, немножко с размытией, а 2 другие полоски , которые я делал как before и after, стоят нормально.Можнт быть это связано с z-index'ом?
.burger__item{
display: block;
width: 30px;
height: 3px;
background-color: #000;
position: relative;
}
.burger__item::before,
.burger__item::after{
background-color: #000;
position: absolute;
left: 0;
z-index: 1;
content: '';
width: 100%;
height: 100%;
}
.burger__item::before{
top: -8px;
}
.burger__item::after{
top: 8px;
}
У меня вопрос из прошлых уроков для тех кто еще тут. Когда svg иконки в Sprite делали для team у меня все отлично заработало. За одним моментом только. Внутри иконки рядом с логотипом фейсбука, твитера и ln появилась стрелка вправо с нижним подчеркиванием. При чем она отображается как консольная, независимая ни от чего кроме границ самой иконки. И html документ, и CSS пролистал от первой скобки до последней на несколько раз. Сравнил свой код с кодом коуча - один в один. Не могу понять че за фигня. Может сталкивался кто с таким?
проверила через оперу, фокса, хром всё ок. Но эксплорер что-то с чем-то выдаёт. Всё в один ряд, фон съехал.. Пока не пробовала исправлять, этим раритетом наверное уже никто не пользуется)
Добрый день! Спасибо за полезный контент! Вопрос не по теме, но может быть подскажете как реализовать на сайте функцию подмены номера телефона и адреса в зависимости от выбранного посетителем города. Такая функция реализована на сайте банковского советника banksovetnik.ru и мне нужно сделать что-то подобное на своем сайте. Я понял, что используется выпадающий список с присвоенными через css data-city и data-phone, которые подменяют адрес и телефон. Однако, я плохо разбираюсь в javascript и воспроизвести подобное не получается. Можете что-нибудь посоветовать?
Используйте готовые библиотеки, их много, например: unmanner.github.io/imaskjs/
Думал, что это последнее видео и Вы забросили канал, как это обычно бывает со многими уроками на ютубе. Но когда увидел вчерашнюю дату, обрадовался. Как скоро ждать новые уроки на эту тему?)
приболел, поправлюсь - продолжу
@@BrainsCloud выздоравливайте)
@@CobraTMs22 спасибо!
@@BrainsCloud есть ли принципиальные отличия от курса на сайте (11 видео уроков) и этой серии видео-уроков? Что лучше?
CobraTMs22 в этой серии больше объяснений
Привет,можешь сказать ,как работается на Mac OS , лучше чем на windows?
В целом для работы мак хорош, мощная батарея, своя система с обновлениями, удобно, быстро и никаких головняков. Если кроме работы ничем не планируете заниматься то хороший вариант.
Ну есть и минусы, например его стоимость и своего рода изоляция. Я думаю перейти обратно на винду, так как есть необходимость обновить рабочую лошадку, а за деньги, которые стоит новый мак, можно собрать очень мощный пк. Надо пробовать, каждому свое, как говорится.
BrainsCloud - уроки веб-разработки , ну во-первых, деньги не проблема, во-вторых,необязательно брать новый,а так спасибо за ответ
Как обучаться? Просто много верстать и учить теги?
Хотелось бы видео по тегам и атрибутам
Mrx на верстку этого то сайта у меня 12 часов ушло) пока теги все загуглить пока вдуплить, а там ещё вебкит какой оставит и пиши пропало
4:00
У меня / cover и в хроме не работал) я просто без него оставил, вроде работало все
Дмитрий, такой вопрос. Делала верстку у Винтика и он предлагал "обнулять" особенности разных браузеров с помощью заранее подготовленного сss файла, ссылку на который ставится в начале css, для того чтобы на всех браузерах сайт отображался одинаково. Это верное решение? По идее так проще, тк не надо каждый браузер перепроверять.
вот так этот код выглядит, если интересно:
/* meyerweb.com/eric/tools/css/reset/
v2.0-modified | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, ,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* make sure to set some focus styles for accessibility */
:focus {
outline: 0;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration,
input[type=search]::-webkit-search-results-button,
input[type=search]::-webkit-search-results-decoration {
-webkit-appearance: none;
-moz-appearance: none;
}
input[type=search] {
-webkit-appearance: none;
-moz-appearance: none;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
textarea {
overflow: auto;
vertical-align: top;
resize: vertical;
}
/**
* Correct `inline-block` display not defined in IE 6/7/8/9 and Firefox 3.
*/
audio,
canvas,
video {
display: inline-block;
*display: inline;
*zoom: 1;
max-width: 100%;
}
/**
* Prevent modern browsers from displaying `audio` without controls.
* Remove excess height in iOS 5 devices.
*/
audio:not([controls]) {
display: none;
height: 0;
}
/**
* Address styling not present in IE 7/8/9, Firefox 3, and Safari 4.
* Known issue: no IE 6 support.
*/
[hidden] {
display: none;
}
/**
* 1. Correct text resizing oddly in IE 6/7 when body `font-size` is set using
* `em` units.
* 2. Prevent iOS text size adjust after orientation change, without disabling
* user zoom.
*/
html {
font-size: 100%; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */
-ms-text-size-adjust: 100%; /* 2 */
}
/**
* Address `outline` inconsistency between Chrome and other browsers.
*/
a:focus {
outline: thin dotted;
}
/**
* Improve readability when focused and also mouse hovered in all browsers.
*/
a:active,
a:hover {
outline: 0;
}
/**
* 1. Remove border when inside `a` element in IE 6/7/8/9 and Firefox 3.
* 2. Improve image quality when scaled in IE 7.
*/
img {
border: 0; /* 1 */
-ms-interpolation-mode: bicubic; /* 2 */
}
/**
* Address margin not present in IE 6/7/8/9, Safari 5, and Opera 11.
*/
figure {
margin: 0;
}
/**
* Correct margin displayed oddly in IE 6/7.
*/
form {
margin: 0;
}
/**
* Define consistent border, margin, and padding.
*/
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
/**
* 1. Correct color not being inherited in IE 6/7/8/9.
* 2. Correct text not wrapping in Firefox 3.
* 3. Correct alignment displayed oddly in IE 6/7.
*/
legend {
border: 0; /* 1 */
padding: 0;
white-space: normal; /* 2 */
*margin-left: -7px; /* 3 */
}
/**
* 1. Correct font size not being inherited in all browsers.
* 2. Address margins set differently in IE 6/7, Firefox 3+, Safari 5,
* and Chrome.
* 3. Improve appearance and consistency in all browsers.
*/
button,
input,
select,
textarea {
font-size: 100%; /* 1 */
margin: 0; /* 2 */
vertical-align: baseline; /* 3 */
*vertical-align: middle; /* 3 */
}
/**
* Address Firefox 3+ setting `line-height` on `input` using `!important` in
* the UA stylesheet.
*/
button,
input {
line-height: normal;
}
/**
* Address inconsistent `text-transform` inheritance for `button` and `select`.
* All other form control elements do not inherit `text-transform` values.
* Correct `button` style inheritance in Chrome, Safari 5+, and IE 6+.
* Correct `select` style inheritance in Firefox 4+ and Opera.
*/
button,
select {
text-transform: none;
}
/**
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
* and `video` controls.
* 2. Correct inability to style clickable `input` types in iOS.
* 3. Improve usability and consistency of cursor style between image-type
* `input` and others.
* 4. Remove inner spacing in IE 7 without affecting normal text inputs.
* Known issue: inner spacing remains in IE 6.
*/
button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button; /* 2 */
cursor: pointer; /* 3 */
*overflow: visible; /* 4 */
}
/**
* Re-set default cursor for disabled elements.
*/
button[disabled],
html input[disabled] {
cursor: default;
}
/**
* 1. Address box sizing set to content-box in IE 8/9.
* 2. Remove excess padding in IE 8/9.
* 3. Remove excess padding in IE 7.
* Known issue: excess padding remains in IE 6.
*/
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
*height: 13px; /* 3 */
*width: 13px; /* 3 */
}
/**
* 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
* 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
* (include `-moz` to future-proof).
*/
input[type="search"] {
-webkit-appearance: textfield; /* 1 */
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box; /* 2 */
box-sizing: content-box;
}
/**
* Remove inner padding and search cancel button in Safari 5 and Chrome
* on OS X.
*/
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* Remove inner padding and border in Firefox 3+.
*/
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
/**
* 1. Remove default vertical scrollbar in IE 6/7/8/9.
* 2. Improve readability and alignment in all browsers.
*/
textarea {
overflow: auto; /* 1 */
vertical-align: top; /* 2 */
}
/**
* Remove most spacing between table cells.
*/
table {
border-collapse: collapse;
border-spacing: 0;
}
html,
button,
input,
select,
textarea {
color: #222;
}
::-moz-selection {
background: #b3d4fc;
text-shadow: none;
}
::selection {
background: #b3d4fc;
text-shadow: none;
}
img {
vertical-align: middle;
}
fieldset {
border: 0;
margin: 0;
padding: 0;
}
textarea {
resize: vertical;
}
.chromeframe {
margin: 0.2em 0;
background: #ccc;
color: #000;
padding: 0.2em 0;
}
Я привык делать сброс базовых стилей сам и делаю это для тех элементов, которые использую.