#6 ActiveBox - Верстка сайта с нуля для начинающих | Адаптивная верстка
HTML-код
- Опубликовано: 2 июн 2019
- Продолжаем практиковаться в верстке сайтов на HTML и CSS. В этом видео продолжим делать адаптивную верстку для нашего сайта.
// Ссылки =================
Основы 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
Привет! Я почти выздоровел - лови видос. Как ты? Не болеешь летом?)
Хай! Не летом не болею, болею в ноябре)
не болею. спасибо бро
Привет.
Я конечно пишу спустя год, но... пусть будет. Возможно где-то забываю коменты писать, а вот лайк это обязательно)
Сижу ночью и смотрю видео, пишу код, ночью тихо и спокойно)
По поводу самих уроков вопросов не возникает, Дима мастерОбъяснений 110го уровня!=)
Так держать, огромное спасибо за твои труды!!!
привился сутником, температура была под 40, но я не жалею и только рад)
связь с космосом налажена
всем здоровья!)
сегодня заболел, лол
Вот что значит, когда сразу спланировать нормально разметку и все это сразу же нормально сверстать, то потом и адаптировать нужно по минимуму. Аплодирую стоя. Работа перфекциониста. Идеально!
Ближе к концу курса остаются самые сильные - видно по количеству просмотров :) Прорываемся до конца! Спасибо за лучшие видеоуроки!
только хотел это написать )
4 года назад были закинуты видео, а они остаются такими же эффективными даже по сей день. Сразу видно, уровень.
Просто лучший! спасибо за годный Web content
Спасибо за ваши труды. Эти видео просто находка. Сколько было перелопачено RUclips, чтоб найти что-то подобное. Все получается, главное чтоб глаз был намётан на свои ошибки ). Ваши видео + литература + упорный труд = Web Developer. Желаю побыстрей набрать 100тыс и более подписчиков. Продолжайте в том же духе)))
хорошо что я подписался на этот канала давно , здесь все понятно логично обьясняет человек по Адаптивной вертски !
Очень крутая серия уроков. Всем советую. Еще есть по JS отдельная серия - тоже очень просто рассказывает. Автору ОГРОМНОЕ СПАСИБО.
Как обычно на высоте!! Огромное спасибо!!!
Все очень понятно )) Спасибо за видео)))
Просто ТОП, спасибо за видео!)
Только пару дней назад закончила онлайн-школу html academy и в качестве тренировки использую ваши видео!
Спасибо огромное вам за ваш труд !!
Надеюсь ,что видео будут выходить и дальше . Вы идеальны! ❤️
Выздоравливай! Пили больше годных видосов)
Спасибо что уделяете много времени для ваших подписчиков ✊🙏
Отличный урок! Большое спасибо!
Спасибо Дмитрий. Здоровья Вам.
КТО ПОСТАВИЛ ОДИН ДИЗЛАЙК???
Ты лучший)Просто красавец)
Удачи тебе )))
Автор,ты лучший.Это самые оптимальные обучающие курсы из всех, которые я только видел.Все доходчиво и понятно.Всё разжёвываешь по малейшим деталям.Красава)))
Осваивать верстку по вашим урокам одно удовольствие. В блоке reviews для адаптации под мобильное устройство перепрописал .container {
padding: 0;}, и картинка стала на свое место, красиво по центру без боковых зазоров.
*Большое спасибо за урок. Доходчиво и полезно*
Лучшее обучающее видео, на столько понятного разбора ни у кого не видел. Так держать!!!
Это просто лучший канал из всех что я видела, спасибо огромное вам за объяснения, всё очень понятно ☺️😍
Гениально все разложил по полочкам. Ты сделал для всех нас неоценимый вклад.Огромное спасибо!
🌟🌟🌟🌟🌟 *Спасибо за очень полезный и понятный урок!!!* 🌟🌟🌟🌟🌟
Огромное спасибо за уроки.
Большое спасибо за урок!
я наверное больше боялся этого адаптива чем надо было) спасибо
Salute Boss, For ACTIVE & MOGO Tutorials Thanks a lot
Здравствуйте! Благодарю за видео!
Как всегда - супер! Не болей!)
Спасибо!
Топ контент, продолжай в том же духе!!
Спасибо за труд!
спасибо за отличные уроки!
Спасибо большое за урок!
Спасибо за качественно проделанную работу 💋💋💋💋👌👌👌👌😘😘😘😘💕💕💕❤❤❤
Спасибо за качественные видео, очень помогают) Здоровья и вдохновения снимать уроки для нас)
Спасибо!
Спасибо за годный контент!!!
Ты лучший! Побольше таких видосов!!!
Здоровья тебе,
лайк не глядя,
еще раз скажу, что у тебя очень классные уроки
Спасибо!
Спасибо за уроки . Здорово. Как то так ;)
Дмитрий Вы крутой человек!
Я смотрю Вас на You Tube, вы мой билет в Web. Спасибо вам огромное за ваш труд 😎
Спасибо! Всё круто!
Теска привет, спасибо тебе за твой труд
спасибо большое за ваш труд!!!!
Просто огонь!
Привет! БОЛЬШОЕ тебе, чувак человеческое спасибо!!!!!!, за то,что по полочкам все разложил! А то после курсов такая каша в башке была...
Редко встретишь внятные объяснения. Смотрю дальше твои уроки. Успехов тебе!!!
Норм адаптивчик, едем дальше!
Спасибо тебе за этот туториал
Здорово, спасибо
Ты там не хворай))) годные видосы пилишь, подробно объясняешь!
Уже почти здоров) Стараюсь, спасибо )
Спасибо большое!
оч круто) вы профи!
спасибо!
212 лайков \ 0 дизлайков.
Автор этого достоин. Спасибо тебе
1100 лайков, два диза от шизофреников)))
1.3k лайков и 2 диза
Круто еще верстки с js!!!
10K поздравлямба
Кстати я нашел легкий способ сделать картинку с reviews__img без рамок. можно было прописать что через reviews мы обращаемся к container и внутри него убираем padding.
То есть это было бы так: .reviews .container{ padding: 0;}
Ну а затем .reviews__img{ width: 100%}
5:53 и 17:07
Возможно просто,когда ты эскпортировал картинки для блока works,то не заметил
как у двух картинок,которые сейчас меньше,чем другие в эскпорте размер меньше,чем у других.
Скорее всего ты просто не "вытащил" картинки из под других слоев и эти слои обрезали картинку для экспорта.
У меня все картинки одинаковые.
И кстати,спасибо за твой труд!)
Тоже самое в блоке REVIEWS 19:24 , там картинка с женщиной больше по ширине(если убрать из слоя) и проблем с адаптацией не возникает)
Хорош )
Спасибо бро
Top!
супер
Салам, Диман!!! Огромное спасибо за эти уроки!!! Примерно на 6:28 с картинками опять фотошоп у тебя косякнул, у меня норм размера )
97,4к подписчиков! Ещё чуть чуть)
При верстке не знаю что пошло не так но при расширении ширины менее 650px сайт начинает очень корячится в том плане что шапка сужается больше чем надо и в правом углу как белая полоска на всю ширину
такая же проблема
Нашли решение?
Как то так...
Лайк
отсутствие дизлайков - показатель годного контента
Привет! Классные уроки! Вопрос: почему контейнер выходит за пределы интра по ширине?
Веб привет!
Спасибо за тьюториал. Делаю, пока все получается. Возник вопрос - может проще размер шрифтов сразу в относительных величинах ставить, чтобы потом не прописывать снова при адаптации под мобильные устройства или при таком подходе есть какие-то подводные камни?
Здравствуйте! Хотел бы узнать вашего мнение по поводу верстки одного блока, а именно, блока с работами. (4:07) Вы показали решение с отдельной картинкой, но можно ли было сделать столько же блоков с бэкграундом этих картинок и при наводе показывать всплывающий красный блок? Просто с background-size:cover и background-position: 50% 50% по сути всегда будет качественное фото, размещенное по середине блока. Или в этом способе есть какие то подводные камни?
контентные изображения через фон обычно не делаются
Привет. Не подскажите - как добавить картинки новых устройств в просмотр (как у тебя - айфоны и айпады) ? У меня только 5 айфон есть, айпад уже не отображается и другие модели устройств тоже. Спасибо за ответ. Видео классные !
У тех у кого отступ справа на мобильной версии, пропишите в css коде так :
html, body{
margin: 0;
font-family: 'Raleway', sans-serif;
font-size: 14px;
color: #6c7279;
-webkit-font-smoothing: antialiased;
background-color: #fff;
width: 100%;
overflow-x: hidden;
}
Когда блок команды адаптировал, почему-то не перескакивает на другую строку 4 участник. Пересмотрел предыдущее видео с версткой команды, но там всё 1 к 1 в коде. В чем может быть дело?
То есть при одинаковых размеров экранов, но разным разрешением картинка сайта будет различаться? Это чувство не давало сосредоточится все видео.
27:55 ахахахах
Спасибо за контент, качество как всегда на высшем уровне!
Вопрос ко всем кто возможно сталкивался с такой проблемой. Когда я нажимаю в инспекторе кода Show Device Frame действие как бы происходит, но самих элементов (телефон либо планшет) не появляется, как решить данную проблему???
от браузера зависит, в chrome есть, но не ко всем, в brave нет вообще
у меня или моник такой или что, но по мне дак лучше features__item визуально лучше запилить медиа width 50% при ширине 767px. Больше этого размера еще три нормально смотрятся. Ну тут я так понимаю строгих правил нет. как лучше смотрится так и пилить. или какой монитор (разрешение экрана) посоветуйте оптимальный приобрести для верстки.
Я думаю минимум full hd, хотя я хочу себе 2к, чтобы при включенном devtools было хорошо видно сайт
Секция "features" к левому краю прилипает.. лишних paddingов и marginов нет. Ну кроме margin: 100px 0;.
Почему так ?
20:00
18:23 .reviews .container {
padding: 0;
}
Тоже заметил, уже хотел писать))
Я не понимаю, почему, если в css прописать max-width какому нибудь блоку (например, тому же .features__item), слетает выравнивание по центру? И как его вернуть? Заранее спасибо за ответ!
Блок team__item вообще не меняется в ширине (как в breakpoint так и в основном)... хотя как стояло 25% в CSS, так и стоит, а если хочу поменять на 50 или 100% то не меняется... меняется все, текст, отступы, но ширина неизменна...(да, без фото/видео сложно объяснить) Кто то может помочь?
Столкнулся с такой же проблемой. В блоке .team__inner в свойстве flex-wrap поменял значение nowrap на wrap. Сработало.
@@vi7aly к сожалению у меня и так стоит flex:wrap в team__inner
@@user-dr5pv1md6x flex:wrap или все-таки flex-wrap: wrap; ? Может в этом ошибка?
@@Oksana-mv7kz В нужном контейнере прописал в CSS "flex-wrap: wrap;", у меня заработало.
У меня контейнеры по другому называются, но делаю с ориентиром на этот урок.
Выглядеть должно примерно так:
.team {
display: flex;
margin: 100px 0;
flex-wrap: wrap;
С версткой разобрались. Теперь давай с js разбираться.
18:06 там позиции - абсолют релатив. изза этого. паддинга нет
Доброго времени суток. А кто-нибудь знает, почему изменения по медиа-запросам у меня начинаются от ширины экрана 1091px , хотя мы прописали от 991px (Chrome) и от 844px вместо прописанной 767px?
Приветствую! Можно как то сделать так, чтобы при наведении на блок из под него (снизу) появлялся еще один блок, а верхний смещался вверх на высоту нижнего?) Не могу накопать такую информацию...
я так понял ты имеешь ввиду что-то типо "аккордеона", погугли, надеюсь я правильно понял
@@user-jz9ny1tt8n спасибо) Обязательно посмотрю
подскажите пожалуйста, когда адаптирую под max-width:687px, reviews__content- делаю ему ширину 100%, то при уменьшении картинка становиться на 100%, а контента просто нету. Как будто картинка перекрывает и Backround и Text . Нету ни фона , ни текста. Только одна картинка. Flex-wrap:wrap стоит. Начинаю увеличивать в браузере ширину, делаю ее больше чем 687px, то появляется фон справа от картинки, но без текста... Что это может быть? ничего не получается
Ребят, почему у меня в браузере при включенном отображении рамок, рамки есть только для двух устройств, а для айфонов и айпадов нету.
У меня все нормально с картинками. Может из макета не так вырезали?
15 мин
Спасибо за урок.
В пятом уроке на 19:58 Вы показываете iphone 6/7/8(375*677), справа появляется белая полоса на протяжении всего сайта.
В шестом уроке на 13:10 Вы показываете разрешение 387*787, полосы уже нет. Как Вы убрали её?
P.S не получается победить полоску при маленьком разрешении ibb.co/3yZ8Tty
все показано в видео
В том случае, если еще актуально, попробуй вставить "метатег"
(мне помогло)
Спасибо всем , нужно было просто погуглить)
@@BrainsCloud к сожалению, столкнулся с той же проблемой. Не знаю, как сформировать запрос в гугле, чтобы найти решение. В одном из видео тоже видел, что у вас сползает вся инфа влево и при уменьшении размеров экрана. в этом видео этой проблемы уже нет. ПодскАжите, как решить?
@@aleksandrsinelnikov19 все показано в видео, нужно просто адаптировать все блоки, чтобы ничего не вылезало за пределы размеров экрана
жду js
Привет, пишу сайт с нуля на HTML и CSS, я хочу выкладывать статьи на свой сайт, как можно это делать?
выучить например php или работу с cms, например wordpress
У меня почему-то большой белый кусок по правой стороне и когда уменьшаешь до мобильной версии, весь контент начинает превращаться в тонкую полоску слева?
нид хелп.
все уже разобрался)
@@serega_vvoi7137 поделитесь с решением. у меня то же
Спасибо за видео! Я думаю единственный дизлайк тебе поставила дама, которую ты женщиной назвал.)))
почему появился горизонтальный скрол?
какой-то элемент вылезает за пределы сетки
эх.... костыль на костыле
Что вы имеете ввиду конкретно?
22:30 фотография же на айфон5 совсем уйдет за экран,не видно же будет нормально даже женщину
Как же лень учиться. Помню 1ое видео вышло, сказал себе учись, ему видео снимать-заливать потом, ты хотя бы смотри. и нифига. Остальные так же походу) 1 видео собрало 7к, остальные до 2 не дотягивают. эх лень враг человечества
Scorpion First классика )
так везде абсолютно, посмотри уроки в ютубе например англиского, да или просто летсплейи по играм - где-то в половину с каждой серией уменьшается. Эти уроки интересные, но сама по себе верстка довольно скучна, развче что когда научишься быстро делать все и тогда пойдет живее. У меня знакомые фронт енд разраюотчики вспоминают верстку как страшный сон и плюются на нее.
Блин, у меня остался горизонтальный скролл....