#3 ActiveBox - Верстка сайта с нуля для начинающих | HTML, CSS
Vložit
- čas přidán 21. 05. 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
*Верстка сайта транспортной компании:* brainscloud.ru/landing/logistic-html
*Хостинг Timeweb* - bit.ly/2Kms8Lf
*Бонусы* доступны после оплаты тарифа Optimo+ на год. Для активации нужно открыть раздел "Бонусы и промокоды" в Панели управления и ввести промокод.
*brainscloud* - плюс 1 месяц бесплатного хостинга
*brainscoud2* - услуга "Ускоритель сайтов"
А это нормально, что из-за margin: 0 -15px справа белая полоса при просмотре с мобильного? Из-за чего так?
Дмитрий, не хотели бы Вы снять видео про разные платформы для веб-разработки? Заметил, что иногда у Вас в видео MacOs, а иногда Windows. Так вот, может расскажете, где и что удобнее на Ваш взгляд, стоит ли веб-разработчику переходить на Мак и т.д.?
@@andrewlincoln9208 ОС не имеет значения, скачал WebStorm и пишешь, для вёрстки вообще ничего не нужно кроме пары прог, которые есть на всех ОС
@@user-qy9yi1kc3r в html порядок блоков или в css flex order
Не знаю как для кого, а для меня после стольких часов этот голос стал как родной)
за работу с SVG огромное спасибо
Поддерживаю. Давно искал, но так и не мог найти доступную для простого понимания инфу
"Если вам понравилось видео" ))) рассмешил! тут без вариантов! так доступно и понятно, это просто клад какой-то! Спасибо тебе!
Лучшее объяснение за историю человечества!!) Огромное спасибище за ваш труд! Даже тот кто отказывается понимать, поймет! Очень вас прошу, не останавливайтесь!!!!
Дмитрий вы молодчина, очень практичные уроки, после них не надо ни на какие курсы ходить, мне очень понравились спрайты, 5+
Код цвета, цвет кода не баг, а фичей стало) Фишка с SVG это бомба! На курсах учили в фотошопе все совмещать, смотреть на высоту, сравнивать пиксели и т.д и т.п., а тут бац бац, Работает! Легко и гениально! Спс за видос.
Вот когда я сам смогу такое сверстать - буду за себя горд. Хотя все равно радостно, что смог за Вами повторить это, местами даже не дожидаясь Ваших комментариев писал правила, радостно. Спасибо за столь информативный контент.
Смотрю тебя в 2021 году. Не знаю на сколько устаревшая информация, но точно могу сказать, что преподносишь информацию, ты круто
Лайк однозначно, успехов тебе, как человеку и твоему каналу!!!
Боже, лучше всех платных курсов в инете. И голос действительно приятный, после многих обучалок понимаешь что это важно. Спасибо за работу
Спасибо! Отличные уроки! Пожалуйста, продолжайте!
Спасибо, очень понравилось, хорошая подача и подробные объяснения очень помогают в усвоении материала.
Спасибо за такие уроки! Разбор со спрайтами - огонь!
Спасибо вам огромное!С вами учусь верстать!У вас очень приятный голос 😉
спасибо Вам большое! такого объяснения нигде не найти. Роста этому каналу. Однозначно подписка и лайк)))
Замечательный курс! Все ясно и понятно! Спасибо большое! И флексы и слайдер...
Одно НО - очень мешали направляющие в макете и в Фигме все гораздо удобнее и быстрее. Даже стили прописаны)
Но это так, ложка дегтя, равная 20% из 100%)))
Спасибо!
У вас такой приятный голос!!! Спасибо все очень понятно даже начитающим.
Все на высоте! Большое спасибо за уроки!
Лучший преподаватель, спасибо за время 😊
Я учусь постепенно, рад что всё понимаю на практике. Лайк поставил ❤️
Отличные уроки! Я вам очень благодарна за труд! Все предельно понятно (даже для скрипучих), обьясняются даже мелочи. Лучшие уроки, которые можно было найти. Успехов и развития вам!
Оригинальный подход, спасибо, очень познавательно...
Полезные уроки для новичков, спасибо большое ✊
Все еще не перестаю удивлятся что с этими видео я понимаю, что я делаю :) Прекрасное видео!
Фишка со спрайтами супер, спасибо! ))
только хлопотно больно... из за какой то мелочи
@@dinir1000 когда первый раз увидел как это делается, тоже так подумал. А сейчас проделав данную процедуру раз 20-ть уже вообще не паришься, делается быстро, так что это наверное дело привычки.
@@default2199 можно же сниппеты сделать (в VS Code или Sublim`e, например) и уже после быстрого вызова просто втыкать туда необходимые данные
@@user-xr7pl9hg7g Спрайты уже неактуальны. Я делал это вручную, чтобы запомнить на мышечном уровне как их делать.
@@default2199 А что тогда актуально? Подскажи, куда глядеть?
Спасибо Дмитрий, объясняешь очень внятно, много лайков!
Дмитрий, спасибо! Больше таких видео!!!
Очень круто, спасибо большое! Твои видео - это самая лучшая верстка на youtube! Svg спрайты вообще пушка) Буду покупать верстку транспортной компании. Реально, лучшие примеры качественной верстки.
Большое спасибо! Замечательный урок!
Вообще крутейший урок! Особенно порадовал гайд по использованию SVG. До этого момента думал что лучше способа чем FontAwesome нет, но таки ошибался. SVG - топчик. Спасибо, Дмитрий. Ваши уроки - лучшие. Добра и успехов Вам =)
Зарегался на Вашем сайте htmlbase.ru Более доступного и разжёванного материала ещё не находил на просторах I-net'а!!! Советую всем! А Вам процветания и СПАСИБО за такую работу!!!
Очередное качественное видео, спасибо. Кто-то пожадничал и не закинул в архив картинки "twitter" и "linkedin" :-)
Структуризация верстки просто божественная, глаза радует и очень удобно! Спасибо!
недостаток - иногда не использует семантические теги, например, тег blockquote для отзывов и еще местами....
🌟🌟🌟🌟🌟 *Спасибо за очень полезный и понятный урок!!!* 🌟🌟🌟🌟🌟
Большое спасибо, с svg было особенно познавательно!
ну как -то так ) я все заверстала) спасибо большое за видео , после верстки мого все понятно и просто )
спасибо за еще один прекрасный урок!!!
Спасибо ещё раз! более, чем информативно! За SVG! Открыл для себя! Думаю, хоть-бы Дмитрий выбрал reviews, вместо testimonials и о-чудо! А ещё цвет кода - улыбнуло :)
спасибо за отличные уроки!
Здравствуйте! Благодарю за видео!
с отрицательным margin удивил, хороший урок
одна ковычка в сss которую я не заметил, и пол часа работы над поиском почему не меняется цвет в спрайте, огонь :D
ахахха жиза
прикольно было бы сделать дз. Например если вы бы могли кинуть тоже какой-то макет и дать нам время над ним поработать а потом сделать его разбор)
Так ты же можешь взять тот же шаблон что и в видео, сделать его сам, а потом, когда всё будет готово, то проверять себя по видео. То есть смотреть на то как это делал ты, как это делал он, как по факту было эффективней и тд)
Изначально так и сделал...
Все получается. Все супер. Спасибо!
Спасибо огромное ! То что надо для новичков ! мне очень помог респект))
Самый лучший контент на эту тему! Снимаю шляпу.
Как всегда отличный ролик.
Спасибо. Познавательно очень
Вот какие видео нужно в топ выводить, а не эти пранки. Спасибо видел топчик💪🙂
Спасибо тебе ты мне очень помог .С шапкой и вообще сверсткой
Лучший урок.Нет слов тупо и по БЭМУ все хорошо лайк
Спасибо за годный контент!!!
Со спрайтами конечно очень занимательно, но я нашел иконки максимально похожие на те что в макете и дал им Opacity: 0.5, а при наведении 0.8
Дешего и сердито)) Конечно зависит от заказчика, но вариант рабочий)
А вобще уроки пушка, спасибо за работу 👍
пушка бомба спасибо доступным языком + изучаю фотошоп ))))
лучший мужчина мира, я считаю!
Круто! Круто! Спасибо!
Супер! Спасибо!
Отличная обучалка good
Большое спасибо!
Спасибо большое!
Дмитрий спасибо за очередной урок, очень познавательно, однако фишка с svg спрайтами не очень понравилась, подключил fontawesome + добавил в верхнее меню иконку поиска и корзины - как ты в первом уроке хотел, иконок вышло уже пять - вполне себе повод подключить библиотеку. Плюс если понадобиться в будущем добавить ещё несколько соцсетей - библиотека уже подключена.
Попробовал самостоятельно сверстать иконки и сделал не с помошью SVG, а фотошоп. Получилось одинаково и анимацию сделал(при наведении квадрат становится кругом). Согласен, что с svg легче и правильней получается) сделаю..
Топовый учитель!
у меня в VSC не отображается тег где прописан код svg как его найти?
Спасибо большое
Спасибо!
День добрый! у меня в svg class="social__icon" когда вставлял facebook, item расширился по горизонтали и пришлось прописывать в css для .social__icon не только высоту 18px, но и ширину 18px... Так и не смог разобраться почему.
спасибо вам огромное
Спасиба большое!))
Спасибо за инфу со спрайтами)) Видео супер, подписан конечно же. Так а теперь эти svg файлы можно удалять с пк? Они будут отображаться только с помощью кода?
да
Ничегосебе, за svg спасибо!
привет всем!а как поработать со спрайтами в Visual Code studio?
не могу найти path.
Спасибо!!!
Добрый день, у меня такой вопрос 39:56. Если мы пропиуем flex-wrap: wrap; то у меня блок с текстом переходит вниз как и полагается, так как у вас так вышло, что он остался там где должен быть ?
Привет. Повторяю все за тобой, но в .team__item при width: 25% и padding: 0 15px, дочерние елементы не помещаются и один из них перескакивает на новую "строку". В чем причина? Во второму уроке с блоком .features и его дочерними елементами по 33.33333% было тоже самое. При добовлении внутреннего padding: 0 40px; одному из елементов не хватало места и он перескакивал на новую "строку"
Спасибо!!!)
Привет, я недавно начал писать сайты, и у меня есть вопрос. Я написал интро (главное окно) на котором сверху распологаются кнопки которые должны вести на другие старницы, как это сделать я не понял, кнопки я написал а вот переход к страницам хз, у тебя в видео я не нашел ответ на этот вопрос. Надеюсь что ты мне поможешь.
Дмитрий, спасибо большое за ваши уроки, и хочу задать вопрос, касательно "div" в некоторых местах где казалось бы лучше использовать тег или вы используете "div" и помещаете в него текст, я понимаю что для визуального отображения разницы нет, но для коммерческих проектов лучше использовать теги? как я понимаю это необходимо для лучшей индексации. Что вы думаете об этом? Заранее спасибо за ответ.
В некоторых случаях нет разницы p или div. Как по мне, абзацы должны быть в блоке с тектом, если у нас просто какая-то строка, то почему не div. Заголовки я обычно используя для заголовков блоков, разделов и новостей, например. Ничего криминального в этом нет, я считаю, а для индексации сайта вам нужен хороший контент - это самое главное. Ну и реклама ) это мое мнение. Пусть у вас будет сделан сайт идеально с точки зрения семантики, но если контент гавно и о сайте никто не знает - это вам не поможет.
@@BrainsCloud Дим, там все же логичней ....
А не легче ли брать иконки с font awesome? Там можно легко настраивать размеры. Или я не прав?
Привет!
А чем плоха практика вставлять иконки через псевдо-элементы в CSS?
Там и кастомайз куда более логичный(на мой взгляд),да и выглядит лаконичнее.
Возник вопрос один.Мы в первом уроке в контейнере прописывали margin 0 auto. А тут применяем класс контайнер и на видео фотки отступ сверху почему-то.
Можно ли менять шрифты только для ? Просто у меня что-то не работает
Привет. Хотел спросить, почему ты не используешь свойство background для картинок, там ведь удобнее, cover прописал она выровнялась.
потому что в этом уроке картинки - фотографии. При использовании background / cover они будут сжиматься вплоть до центра, исказится лицо. А при width 100% height auto при нехватке места в контейнере они будут пропорционально уменьшаться в размерах
А есть какая-нибудь разница создавать team до контейнера или после? Просто я создал сразу контейнер, а потом team и вышло также
Спасибо
В последнем блоке, там где фото и контент (текст) написано вроде флекс врап и блоки должны становится на маленьком экране один под другим, но это не так, блок с текстом просто остается справа и становится невидим.
спасибочки)
А вот за svg спасибо!
well done man
Уважаемый, а можно исходники получить? Для теста...спасибо.. П.С. Нашел, спасибо, Бомба. Лайк и подписка
Доброго времени суток! Подскажите почему при добавлении других участников team они встают в столбик а не в строчку как на видео?:
Посмотрите может вы забыли написать это
.team__inner {
display: flex;
flex-wrap: wrap;
}
(скорее всего вы забыли написать display: flex;)
@@rpy6u9h92 согласен с вами
Респект за SVG !!!
11:54 Подскажите почему для айтемов используется именно пэддинг, а не, например маргин? Только чтобы компенсировать ширину блока против ширины картинки?
Понял почему не использовался маргин: чтобы зазор между айтемами стал гибким.
после всех действий со спрайтом иконка не отображается. работаю на visual studio code. в чем может быть ошибка и как ее исправить?
проверь все ли теги закрыты, зачастую у меня тоже что-то отображается неккоректно, перепроверяю и все гуд! Также на SV code работаю.
решили проблему? столкнулся с тем же, причем перепробовал на других иконках, на других svg и все равно не отображается.
Ребят, подскажите плз, с чем может быть связана проблема, что встроенный внутренний отступ у фото и текста 11:30 не уменьшается от padding? То есть, педдинг к нему просто плюсуется, а не заменяет, как на видео. Исправляется только путем уменьшение процента team__item с 25% до 22%. Тогда все норм.
за SVG отдельное спасибо)
43:30 Это единственный простой способ "засунуть" картинку в блок меньшего размера? Или есть еще?
подскажите, что делать если контейнер расположился изначально вертикально и поэтому профиль сотрудников идет в ряд, а не в строку?
Когда вставил иконки соцсетей, рядом с ними появился знак "больше или равно", как его убрать?
Здравствуйте ,может кто подскажет..
Тег уже не существует?
У меня не работает и в справочнике html его тоже нет.
Спасибо 🙏🏼
Что делать если что с отзывом, что с порфолиом работ справа и слева всеравно остаются белые полосы и не расширяется на весь экран, хоть делаю все поточно как в видео, помогите пожалуйста.