#4 ActiveBox - Верстка сайта с нуля для начинающих | HTML, CSS
Вставка
- Опубліковано 22 тра 2019
- Продолжаем практиковаться в верстке сайтов на HTML и CSS. В этом видео сверстаем следующие два блока - блок download и footer.
// Ссылки =================
Основы 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
26:09 - выпал с той интонации, с которой было сказано "нууу мы не будем подключать шрифт для одного сердечка", когда уже устал верстать этот макет и в самом конце это сердечко аххахаха
То чувство, когда пора идти спать и глаза слипаются, а хочется верстать дальше. Спасибо за качественный урок!
V. Strogonov на Здоровье )
Дим, я могу полностью сверстать этот макет сама! Немного подход другой к некоторым элементам, поэтому конечно смотрю видео и исправляю ошибки. Твой макет МОГО я верстала два раза от начала до конца)) Смотрела повторяла )) И вот прошло 3 месяца моего самостоятельного обучения и я уже могу что-то делать самостоятельно. Хотя не умела ничего! Поэтому ребята "повторение-мать учения"!!!
Спасибо Дима за уроки!
Рад что мои уроки вам помогли в обучении :)
@@BrainsCloud Да ты вообще крут. Твои уроки просто спасение.
Смотрел уроки других авторов аля "Это теги, это параграф", потом плюнул и стал повторять все на практике здесь и наконец то начало все откладываться в голове! Я, кстати, в верстке полный ноль, но данный формат обучения просто бомба! Спасибо автору!
@@johnny_bronxxx Подписываюсь под каждым словом! Только после повторения за Дмитрием появилось понимание и умение ориентироваться в коде. !Очень! много открыл для себя. Огромное спасибо Дмитрию за его работу!
спасибо за урок. смотрю и стараюсь все впитывать как губка. повторяю, повторяю и уже какие-то моменты откладываются в голове запоминаю, что-то даже пыталась сделать вперед и потом посмотреть правильно или нет. вообщем твои уроки огонь!!!! СПАСИБО ОГРОМНОЕ ЗА ТВОЙ ТРУД!!!!!
очень помогаешь своими уроками, платить за курсы деньги нет возможности, а обучаться по книжкам без практики не вариант. спасибо, ты крут !
Спасибо огромное вам Дмитрий, за 4 пройденных с вами видеоуроков я научился больше чем за 3 года обучения в техникуме, еще раз огромное спасибо вам, самое понятное, доступное обучение во всем ру нете. Лайк и подписка полюбому.
Мужик твои уроки реально учат! Огромное спасибо за труды, было бы круто ещё сделать уроки по JS, отдельный плейлист и там подробно разобрать от основ до серьёзных вещей)))
Дмитрий, спасибо огромнейшее за Ваши уроки! это лучший контент, который я видела на просторах Интернета. Гораздо информативнее даже популярных платных курсов. Всё очень интересно, профессионально и максимально приближено к реальной разработке.
Лучшие уроки! Новые зания против того что были до того как нашел канал Дмитрия увеличиваются в геометрической прогрессии =)
Огромное спасибо за Ваш труд! Всё доступно и понятно....А главное это порядок в Вашем коде....Давайте новые видео...Очень интересно)))
сердечко в копирайте я добавил с помощью html тега ❤ обернул в span и в css с помощью псевлокласса .copyright_text span:first-child сменил цвет.
Кстати то что в этом видеоуроке я сверстал сам и потом посмотрел как это сделал Дмитрий, и лишь небольшую разницу заметил с иконками социал, но визуально ничего не заметно было. Но а во всем сделал идеально. Начал изучать два месяца назад и как я рад что уже научился что то делать нормально)) Спасибо за все Дмитрий)
стопитсотый вариант написания сердечка
Made with ❤ by Kamal Chaneman
но вариант
Валеры Копилова конечно бест))
Ириночка, вы Фея)))) Супер!!!!Сердешное сеньк Ю!))))
ахахаха точно так и сделал, потом сюда заглянул. Прям точь в точь
Столько времени прошло, но все же. ctrl + 3 == ♥, ♥ , CSS : .♥ { color: red; }
Пол пути пройден, кости и хрящи готовы, осталось вдохнуть жизнь нашему боксу! Спасибо за уроки!
Потихоньку начинаю вникать все лучше и лучше. Спасибо авторам за подробное объяснение !
Очень круто! Сердечко вставила😊, ну и ещё пару отсебятин тоже упростила. Пищщу от того, что соображаю уже что то) 😜😄👍
Почему я раньше тебя не смотрел(
Топ!!!!!
Лучший преподаватель, спасиьо за время 😊
Я учусь постепенно, рад что все понимаю на практике.
Огромное спасибо! Всё по делу, без воды и прелюдий. Ты крут!)
Спасибо! Ждем продолжения)
Спасибо.
Очень классные уроки.
Спасибо за очередной урок, всё как всегда классно. Сердечко подключил библиотекой fontawesome
Огромнейшее спасибо за уроки!!!
очень хорошо объясняешь!!!!! Спасибо
Спасибо за качественный урок!
Очень приятно учиться у Вас
Большое спасибо за отличный урок!
Всем, кто сверстал этот макет сам - полуадаптивно и частично косячно,
ребята я с вами!
🌟🌟🌟🌟🌟 *Спасибо за очень полезный и понятный урок!!!* 🌟🌟🌟🌟🌟
спасибо за оперативность, жду продолжеия
Спасибо. Как всегда - отлично!
Здравствуйте! Благодарю за видео!
спасибо за отличные уроки!
И с каждым уроком голос как родной=)
Спасибо, Дмитрий! всё получается)
Спасибо за труд!
Как всегда автор на высоте! Респект!
Просто класс!
Я раньше не понял это все. Сейчас все Изи
Большое спасибо за урок!
Красаучиг, спасибо за уроки!
Класс! Го ещё!
Класс, спасибо за урок !!!
Ждём продолжения.
Очень хорошо объясняете))
Спасибо за видео, очень интересно
Очень круто) Спасибо!
Не зря подключил awesome для social) И сердечко в конце вставил)))
Спасибо.
Очень познавательно)
Спасибо за годный контент!!!
*Cпасибо большое за урок*
По больше такого контента💥💥💥👍👍👍
Спасибо большое
Очень крутые уроки. Одного не могу, понять, почему в одних местах отступ делается padding-ом, в других margin-ом. А так один из толковых каналов для обучения.
от ситуации зависит, главное понимать где нужен внутренний отступ а где внешний
26:26 "Как быстро и красиво сделать сердечко" Выделяешь в спан или в див сердечко, код которого ❤ и даёшь спану красный цвет
Спасибо большое!
Спасибо😊
Да Дима ты крассавчик
будут ли новые макеты? Очень круто объясняешь, спасибо за уроки!!!!
кайфово!!!
Спасибо!
лучший братишка
всем привет! вопрос не с этого урока. Почему в прошлой верстке сайта мы каждый блок делали в , а сейчас в ?
thank you a lot))
Спасибо
круто)
Просто и быстро добавить сердечко можно так:
Made with ❤ by Kamal Chaneman
Ничего нового: все отлично.
top!
Жаль, что только один лайк можно поставить :(
"" не получилось изменить цвет текста, и только после того, как изменила на все заработало. возможно что-то там сверху подкрутили?
можно ли место тега использовать тег с классом "footer", или это принципиально важно?
можно
❤
Спасибо за старания!!!
вопрос по стилизации с помощью rgba.Корректно ли использовать Color и opacity вместо rgba?
opacity делает весь блок полупрозрачным и соответственно все что в нем находится тоже
Я такой: добавил flex-wrap: wrap; в social и social--footer, хотя у Димы, вроде такого не было.
Начал писать резюме для отправки в гугл.
Ребят, для чего нужно использовать абзац для текста..например в футере, почему просто в div его не поместить?
Почему в блоке css footer для отступов использовал padding, а в downloads margin?
Привет, подскажи, пожалуйста, а то я не очень понимаю, прочему ты в некоторых местах вместо заголовка и параграфа используешь два разных дива? Спасибо.
сердечко на всякий, как вариант:
html
Copyright © 2020 ActiveBox. All Rights Reserved
Made with ♥ by Kamal Chaneman
css
.footer__copyrhight span:first-of-type{
color: red;
}
.footer__copyright span + span{
color: #fff;
}
Все круто, спасибо! Но, Дмитрий, ПОЖАЛУЙСТА, скрольте строку кода, который пишите в центр экрана. Глаза болят всматриваться вниз, еще и постоянно ставлю на паузу и полоса времени мешается((
если нужен обыкновенный отступ между блоками, всё равно когда использовать margin или padding?
Текст с красной кнопкой не становился по центру , прописал margin: 90px auto;
Так можно сделать или что-то дальше пойдет не так ?
6:59 почему-то модификатор для кнопки btn--long не срабатывал, помогло убрать один "-", вариант btn-long заработал
А почему для блока download использовали margin для отступов снизу и сверху, а в блоке footer для тех же отступов использовали padding?
b{
color: #e84545;
font-family: Webdings;
}
Made with c Y by Kamal Chaneman
Сработало сердечко без потключения шрифта
Made with
♥
by Kamal Chaneman
а я таким образом сделал, потом придал сердцу красный цвет
использовала))
спасибо)
А как ты сделал так что прр создании нового блока у тебя он автоматом в конец становится? У меня при создании нового блока он в начале под блоком появляется
можно еще таких же версток ?
Вопрос: Почему (в css) ..... дает белый (в html) прямоугольник в 300х150 между body и header. Как его убрать? По идее он должен отсутствовать в html
понимаю, что простой момент но все же. В первом блоке урока самому блоку download ты делаешь margin, для самого footer в той же ситуации padding. не очень понимаю в чем причина. то есть footer ты воспринимаешь как весь блок (синего цвета), а download не белую секцию а именно сами блоки с информацией
ага, у меня такой же возник вопрос
У меня в теге h4 показывает стандартные отступы, а у тебя их почему то нет.
Хотел узнать
Эти информации актаульны на данный момент?
Почему ты характеристику цвета кнопки пишешь в html, а не css? И название характеристики не color, а red?
Комменты не прочитал, сразу стал делать сердечко через SVG с Flaticon.
Copyright © 2015 ActiveBox. Aii Rights Reserved
Made with
by Kamal Chaneman
CSS:
.heart {
display: flex;
justify-content: center;
align-content: center;
}
.heart__icon {
fill:red;
height: 14px;
width: 24px;
}
Вот как-то так. Получилось хорошо, )))
но судя по размеру - не самое эффективное решение с svg ))
Когда падинги использовать, а когда мерджены?
Нужно смотреть по ситуации, но само определение вам может подсказать, падинг - внутренний отступ элемента, мержин - внешний.
Ловите эмоджу для сердечка 😍
16:23 "Share with love" вместе с иконками появляется под адресом. Как исправить?
Уже решил сам, оказывается накосячил с
Ти непоказал, часть с JavaScript, там где нужно делать слайди, в блоке Testimonials.
всем привет! вопрос не с этого урока, но в чем может быть проблема? вставляю jpg, а у него размеры 0х0 в любом месте сайта, хотя png, gif вставляются нормально. ошибок никаких не выдает в инспект элементе пишет 0х0
Портфолио
Сайт проекта CarTuning.pro
Ильгиз Шарафутдинов может просто путь к картинке неверный, или название.
@@BrainsCloud спасибо! так и есть, у меня не переносило оказывается с срс в дист потому что в настройках гальп файла написал формат "jpeg". а я все проблему в коде искал )
Made with
❤
by Kamal Chaneman
А вот так можно было сделать в блоке copyright?
если получилось, почему нет
Сердечко можно сделать с помощью комбинации alt + 3 но оно будет белым, но ему можно просто поставить цвет в css...
У меня высота иконок не менялась. Добавил к SVG класс в social__item и прописал высоту там. Только после этого все заработало. Пока что))