#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 Подписываюсь под каждым словом! Только после повторения за Дмитрием появилось понимание и умение ориентироваться в коде. !Очень! много открыл для себя. Огромное спасибо Дмитрию за его работу!
стопитсотый вариант написания сердечка
Made with ❤ by Kamal Chaneman
но вариант
Валеры Копилова конечно бест))
Ириночка, вы Фея)))) Супер!!!!Сердешное сеньк Ю!))))
ахахаха точно так и сделал, потом сюда заглянул. Прям точь в точь
Столько времени прошло, но все же. ctrl + 3 == ♥, ♥ , CSS : .♥ { color: red; }
спасибо за урок. смотрю и стараюсь все впитывать как губка. повторяю, повторяю и уже какие-то моменты откладываются в голове запоминаю, что-то даже пыталась сделать вперед и потом посмотреть правильно или нет. вообщем твои уроки огонь!!!! СПАСИБО ОГРОМНОЕ ЗА ТВОЙ ТРУД!!!!!
очень помогаешь своими уроками, платить за курсы деньги нет возможности, а обучаться по книжкам без практики не вариант. спасибо, ты крут !
Мужик твои уроки реально учат! Огромное спасибо за труды, было бы круто ещё сделать уроки по JS, отдельный плейлист и там подробно разобрать от основ до серьёзных вещей)))
Спасибо огромное вам Дмитрий, за 4 пройденных с вами видеоуроков я научился больше чем за 3 года обучения в техникуме, еще раз огромное спасибо вам, самое понятное, доступное обучение во всем ру нете. Лайк и подписка полюбому.
Почему я раньше тебя не смотрел(
Топ!!!!!
Спасибо! Ждем продолжения)
Дмитрий, спасибо огромнейшее за Ваши уроки! это лучший контент, который я видела на просторах Интернета. Гораздо информативнее даже популярных платных курсов. Всё очень интересно, профессионально и максимально приближено к реальной разработке.
Огромное спасибо! Всё по делу, без воды и прелюдий. Ты крут!)
Лучшие уроки! Новые зания против того что были до того как нашел канал Дмитрия увеличиваются в геометрической прогрессии =)
Огромное спасибо за Ваш труд! Всё доступно и понятно....А главное это порядок в Вашем коде....Давайте новые видео...Очень интересно)))
Огромнейшее спасибо за уроки!!!
Спасибо.
Очень классные уроки.
Очень круто! Сердечко вставила😊, ну и ещё пару отсебятин тоже упростила. Пищщу от того, что соображаю уже что то) 😜😄👍
Потихоньку начинаю вникать все лучше и лучше. Спасибо авторам за подробное объяснение !
очень хорошо объясняешь!!!!! Спасибо
спасибо за оперативность, жду продолжеия
🌟🌟🌟🌟🌟 *Спасибо за очень полезный и понятный урок!!!* 🌟🌟🌟🌟🌟
Спасибо. Как всегда - отлично!
Спасибо за труд!
Спасибо за качественный урок!
Большое спасибо за отличный урок!
Лучший преподаватель, спасиьо за время 😊
Я учусь постепенно, рад что все понимаю на практике.
Спасибо за очередной урок, всё как всегда классно. Сердечко подключил библиотекой fontawesome
Очень приятно учиться у Вас
сердечко в копирайте я добавил с помощью html тега ❤ обернул в span и в css с помощью псевлокласса .copyright_text span:first-child сменил цвет.
Кстати то что в этом видеоуроке я сверстал сам и потом посмотрел как это сделал Дмитрий, и лишь небольшую разницу заметил с иконками социал, но визуально ничего не заметно было. Но а во всем сделал идеально. Начал изучать два месяца назад и как я рад что уже научился что то делать нормально)) Спасибо за все Дмитрий)
Пол пути пройден, кости и хрящи готовы, осталось вдохнуть жизнь нашему боксу! Спасибо за уроки!
Класс, спасибо за урок !!!
Здравствуйте! Благодарю за видео!
Как всегда автор на высоте! Респект!
Спасибо, Дмитрий! всё получается)
Ждём продолжения.
Большое спасибо за урок!
Класс! Го ещё!
Очень круто) Спасибо!
Красаучиг, спасибо за уроки!
Просто класс!
Я раньше не понял это все. Сейчас все Изи
спасибо за отличные уроки!
Спасибо за видео, очень интересно
Спасибо за годный контент!!!
Спасибо.
Очень познавательно)
*Cпасибо большое за урок*
И с каждым уроком голос как родной=)
Очень хорошо объясняете))
Спасибо большое!
Спасибо!
Спасибо большое
По больше такого контента💥💥💥👍👍👍
Спасибо😊
Спасибо
кайфово!!!
Всем, кто сверстал этот макет сам - полуадаптивно и частично косячно,
ребята я с вами!
Не зря подключил awesome для social) И сердечко в конце вставил)))
Очень крутые уроки. Одного не могу, понять, почему в одних местах отступ делается padding-ом, в других margin-ом. А так один из толковых каналов для обучения.
от ситуации зависит, главное понимать где нужен внутренний отступ а где внешний
thank you a lot))
26:26 "Как быстро и красиво сделать сердечко" Выделяешь в спан или в див сердечко, код которого ❤ и даёшь спану красный цвет
Да Дима ты крассавчик
круто)
top!
всем привет! вопрос не с этого урока. Почему в прошлой верстке сайта мы каждый блок делали в , а сейчас в ?
лучший братишка
Просто и быстро добавить сердечко можно так:
Made with ❤ by Kamal Chaneman
❤
будут ли новые макеты? Очень круто объясняешь, спасибо за уроки!!!!
Ничего нового: все отлично.
можно ли место тега использовать тег с классом "footer", или это принципиально важно?
можно
сердечко на всякий, как вариант:
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;
}
Жаль, что только один лайк можно поставить :(
b{
color: #e84545;
font-family: Webdings;
}
Made with c Y by Kamal Chaneman
Сработало сердечко без потключения шрифта
Made with
♥
by Kamal Chaneman
а я таким образом сделал, потом придал сердцу красный цвет
использовала))
спасибо)
"" не получилось изменить цвет текста, и только после того, как изменила на все заработало. возможно что-то там сверху подкрутили?
Я такой: добавил flex-wrap: wrap; в social и social--footer, хотя у Димы, вроде такого не было.
Начал писать резюме для отправки в гугл.
Спасибо за старания!!!
вопрос по стилизации с помощью rgba.Корректно ли использовать Color и opacity вместо rgba?
opacity делает весь блок полупрозрачным и соответственно все что в нем находится тоже
6:59 почему-то модификатор для кнопки btn--long не срабатывал, помогло убрать один "-", вариант btn-long заработал
Почему в блоке css footer для отступов использовал padding, а в downloads margin?
Ребят, для чего нужно использовать абзац для текста..например в футере, почему просто в div его не поместить?
можно еще таких же версток ?
Привет, подскажи, пожалуйста, а то я не очень понимаю, прочему ты в некоторых местах вместо заголовка и параграфа используешь два разных дива? Спасибо.
Все круто, спасибо! Но, Дмитрий, ПОЖАЛУЙСТА, скрольте строку кода, который пишите в центр экрана. Глаза болят всматриваться вниз, еще и постоянно ставлю на паузу и полоса времени мешается((
Комменты не прочитал, сразу стал делать сердечко через 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 ))
Ловите эмоджу для сердечка 😍
понимаю, что простой момент но все же. В первом блоке урока самому блоку download ты делаешь margin, для самого footer в той же ситуации padding. не очень понимаю в чем причина. то есть footer ты воспринимаешь как весь блок (синего цвета), а download не белую секцию а именно сами блоки с информацией
ага, у меня такой же возник вопрос
если нужен обыкновенный отступ между блоками, всё равно когда использовать margin или padding?
Текст с красной кнопкой не становился по центру , прописал margin: 90px auto;
Так можно сделать или что-то дальше пойдет не так ?
А почему для блока download использовали margin для отступов снизу и сверху, а в блоке footer для тех же отступов использовали padding?
Сердечко можно сделать с помощью комбинации alt + 3 но оно будет белым, но ему можно просто поставить цвет в css...
А как ты сделал так что прр создании нового блока у тебя он автоматом в конец становится? У меня при создании нового блока он в начале под блоком появляется
У меня в теге h4 показывает стандартные отступы, а у тебя их почему то нет.
Когда падинги использовать, а когда мерджены?
Нужно смотреть по ситуации, но само определение вам может подсказать, падинг - внутренний отступ элемента, мержин - внешний.
Вопрос: Почему (в css) ..... дает белый (в html) прямоугольник в 300х150 между body и header. Как его убрать? По идее он должен отсутствовать в html
Я этот футер через justify content: space around;
Верстал...
И фонт авесом...
HTML код сердечка: ♥
Made with
❤
by Kamal Chaneman
А вот так можно было сделать в блоке copyright?
если получилось, почему нет
16:23 "Share with love" вместе с иконками появляется под адресом. Как исправить?
Уже решил сам, оказывается накосячил с
Хотел узнать
Эти информации актаульны на данный момент?
8ч 37 мин
:after{
content: "♥";
color: red;