#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

КОМЕНТАРІ • 143

  • @andrewlincoln9208
    @andrewlincoln9208 3 роки тому +10

    26:09 - выпал с той интонации, с которой было сказано "нууу мы не будем подключать шрифт для одного сердечка", когда уже устал верстать этот макет и в самом конце это сердечко аххахаха

  • @TheRengesha
    @TheRengesha 4 роки тому +21

    То чувство, когда пора идти спать и глаза слипаются, а хочется верстать дальше. Спасибо за качественный урок!

    • @BrainsCloud
      @BrainsCloud  4 роки тому +1

      V. Strogonov на Здоровье )

  • @clayandplay7131
    @clayandplay7131 5 років тому +132

    Дим, я могу полностью сверстать этот макет сама! Немного подход другой к некоторым элементам, поэтому конечно смотрю видео и исправляю ошибки. Твой макет МОГО я верстала два раза от начала до конца)) Смотрела повторяла )) И вот прошло 3 месяца моего самостоятельного обучения и я уже могу что-то делать самостоятельно. Хотя не умела ничего! Поэтому ребята "повторение-мать учения"!!!
    Спасибо Дима за уроки!

    • @BrainsCloud
      @BrainsCloud  5 років тому +19

      Рад что мои уроки вам помогли в обучении :)

    • @user-bo2fn9ye6b
      @user-bo2fn9ye6b 4 роки тому +10

      @@BrainsCloud Да ты вообще крут. Твои уроки просто спасение.

    • @johnny_bronxxx
      @johnny_bronxxx 4 роки тому +12

      Смотрел уроки других авторов аля "Это теги, это параграф", потом плюнул и стал повторять все на практике здесь и наконец то начало все откладываться в голове! Я, кстати, в верстке полный ноль, но данный формат обучения просто бомба! Спасибо автору!

    • @maximk7800
      @maximk7800 4 роки тому +10

      @@johnny_bronxxx Подписываюсь под каждым словом! Только после повторения за Дмитрием появилось понимание и умение ориентироваться в коде. !Очень! много открыл для себя. Огромное спасибо Дмитрию за его работу!

  • @Burovasofia
    @Burovasofia Рік тому

    спасибо за урок. смотрю и стараюсь все впитывать как губка. повторяю, повторяю и уже какие-то моменты откладываются в голове запоминаю, что-то даже пыталась сделать вперед и потом посмотреть правильно или нет. вообщем твои уроки огонь!!!! СПАСИБО ОГРОМНОЕ ЗА ТВОЙ ТРУД!!!!!

  • @nikita.moskovskiy
    @nikita.moskovskiy 3 роки тому +5

    очень помогаешь своими уроками, платить за курсы деньги нет возможности, а обучаться по книжкам без практики не вариант. спасибо, ты крут !

  • @kuurdak
    @kuurdak 3 роки тому +3

    Спасибо огромное вам Дмитрий, за 4 пройденных с вами видеоуроков я научился больше чем за 3 года обучения в техникуме, еще раз огромное спасибо вам, самое понятное, доступное обучение во всем ру нете. Лайк и подписка полюбому.

  • @user-br5mz1xe6m
    @user-br5mz1xe6m 4 роки тому +6

    Мужик твои уроки реально учат! Огромное спасибо за труды, было бы круто ещё сделать уроки по JS, отдельный плейлист и там подробно разобрать от основ до серьёзных вещей)))

  • @usless5656
    @usless5656 4 роки тому +2

    Дмитрий, спасибо огромнейшее за Ваши уроки! это лучший контент, который я видела на просторах Интернета. Гораздо информативнее даже популярных платных курсов. Всё очень интересно, профессионально и максимально приближено к реальной разработке.

  • @Mykhailo_Vdovychenko
    @Mykhailo_Vdovychenko 5 років тому +8

    Лучшие уроки! Новые зания против того что были до того как нашел канал Дмитрия увеличиваются в геометрической прогрессии =)

  • @user-bs6te1sq2z
    @user-bs6te1sq2z Рік тому +1

    Огромное спасибо за Ваш труд! Всё доступно и понятно....А главное это порядок в Вашем коде....Давайте новые видео...Очень интересно)))

  • @maga_frank
    @maga_frank 3 роки тому

    сердечко в копирайте я добавил с помощью html тега ❤ обернул в span и в css с помощью псевлокласса .copyright_text span:first-child сменил цвет.
    Кстати то что в этом видеоуроке я сверстал сам и потом посмотрел как это сделал Дмитрий, и лишь небольшую разницу заметил с иконками социал, но визуально ничего не заметно было. Но а во всем сделал идеально. Начал изучать два месяца назад и как я рад что уже научился что то делать нормально)) Спасибо за все Дмитрий)

  • @user-kz4rr6fb3z
    @user-kz4rr6fb3z 4 роки тому +30

    стопитсотый вариант написания сердечка
    Made with ❤ by Kamal Chaneman
    но вариант
    Валеры Копилова конечно бест))

    • @deepcox4229
      @deepcox4229 3 роки тому +1

      Ириночка, вы Фея)))) Супер!!!!Сердешное сеньк Ю!))))

    • @u_shaco
      @u_shaco 3 роки тому

      ахахаха точно так и сделал, потом сюда заглянул. Прям точь в точь

    • @Ageronor
      @Ageronor 2 роки тому

      Столько времени прошло, но все же. ctrl + 3 == ♥, ♥ , CSS : .♥ { color: red; }

  • @laner4195
    @laner4195 4 роки тому +2

    Пол пути пройден, кости и хрящи готовы, осталось вдохнуть жизнь нашему боксу! Спасибо за уроки!

  • @user-ds9hi3cn4r
    @user-ds9hi3cn4r 4 роки тому

    Потихоньку начинаю вникать все лучше и лучше. Спасибо авторам за подробное объяснение !

  • @user-rp9po1ev5r
    @user-rp9po1ev5r 2 роки тому +1

    Очень круто! Сердечко вставила😊, ну и ещё пару отсебятин тоже упростила. Пищщу от того, что соображаю уже что то) 😜😄👍

  • @selimaltayev3034
    @selimaltayev3034 4 роки тому +8

    Почему я раньше тебя не смотрел(
    Топ!!!!!

  • @yevheniidodiak3644
    @yevheniidodiak3644 3 роки тому +1

    Лучший преподаватель, спасиьо за время 😊
    Я учусь постепенно, рад что все понимаю на практике.

  • @larss2772
    @larss2772 4 роки тому

    Огромное спасибо! Всё по делу, без воды и прелюдий. Ты крут!)

  • @user-ig5en5eh7d
    @user-ig5en5eh7d 5 років тому +2

    Спасибо! Ждем продолжения)

  • @zv5585
    @zv5585 5 років тому +1

    Спасибо.
    Очень классные уроки.

  • @user-yb9uf8uz8k
    @user-yb9uf8uz8k 4 роки тому

    Спасибо за очередной урок, всё как всегда классно. Сердечко подключил библиотекой fontawesome

  • @diasdamen1346
    @diasdamen1346 4 роки тому

    Огромнейшее спасибо за уроки!!!

  • @bigsasiska3921
    @bigsasiska3921 5 років тому +4

    очень хорошо объясняешь!!!!! Спасибо

  • @user-bo2fn9ye6b
    @user-bo2fn9ye6b 4 роки тому

    Спасибо за качественный урок!

  • @olegvoskovets4309
    @olegvoskovets4309 4 роки тому

    Очень приятно учиться у Вас

  • @user-bz6lb8kl8n
    @user-bz6lb8kl8n 4 роки тому

    Большое спасибо за отличный урок!

  • @Kiruha307
    @Kiruha307 3 роки тому +2

    Всем, кто сверстал этот макет сам - полуадаптивно и частично косячно,
    ребята я с вами!

  • @EUC_Novak
    @EUC_Novak 3 роки тому +1

    🌟🌟🌟🌟🌟 *Спасибо за очень полезный и понятный урок!!!* 🌟🌟🌟🌟🌟

  • @elitech3339
    @elitech3339 5 років тому +2

    спасибо за оперативность, жду продолжеия

  • @vikogr200
    @vikogr200 4 роки тому

    Спасибо. Как всегда - отлично!

  • @user-te1ut5ev8w
    @user-te1ut5ev8w 3 роки тому

    Здравствуйте! Благодарю за видео!

  • @serene3d772
    @serene3d772 2 роки тому

    спасибо за отличные уроки!

  • @Yakyzzza93
    @Yakyzzza93 3 роки тому +1

    И с каждым уроком голос как родной=)

  • @NeedForHeavyMetal
    @NeedForHeavyMetal 2 роки тому

    Спасибо, Дмитрий! всё получается)

  • @excommunicado3079
    @excommunicado3079 5 років тому +1

    Спасибо за труд!

  • @user-qh9jw8if1p
    @user-qh9jw8if1p 3 роки тому

    Как всегда автор на высоте! Респект!

  • @marlenzhantore8218
    @marlenzhantore8218 4 роки тому +1

    Просто класс!
    Я раньше не понял это все. Сейчас все Изи

  • @tanyamarushka7251
    @tanyamarushka7251 2 роки тому

    Большое спасибо за урок!

  • @dbr9216
    @dbr9216 4 роки тому +1

    Красаучиг, спасибо за уроки!

  • @Anton-iy9ji
    @Anton-iy9ji 5 років тому

    Класс! Го ещё!

  • @KuKu_RuKu88
    @KuKu_RuKu88 4 роки тому

    Класс, спасибо за урок !!!

  • @MrValentinTV
    @MrValentinTV 5 років тому

    Ждём продолжения.

  • @forceward
    @forceward 3 роки тому

    Очень хорошо объясняете))

  • @user-wd5ks8hm6j
    @user-wd5ks8hm6j 3 роки тому

    Спасибо за видео, очень интересно

  • @user-mg2ni7se5s
    @user-mg2ni7se5s 3 роки тому

    Очень круто) Спасибо!

  • @Jerry161188
    @Jerry161188 3 роки тому

    Не зря подключил awesome для social) И сердечко в конце вставил)))

  • @vad6234
    @vad6234 2 роки тому

    Спасибо.
    Очень познавательно)

  • @artem_ka3863
    @artem_ka3863 4 роки тому

    Спасибо за годный контент!!!

  • @followmagnus9775
    @followmagnus9775 4 роки тому

    *Cпасибо большое за урок*

  • @hotDelights_
    @hotDelights_ 2 роки тому

    По больше такого контента💥💥💥👍👍👍

  • @mak_whisk
    @mak_whisk 2 роки тому +1

    Спасибо большое

  • @molfa_r
    @molfa_r 4 роки тому +4

    Очень крутые уроки. Одного не могу, понять, почему в одних местах отступ делается padding-ом, в других margin-ом. А так один из толковых каналов для обучения.

    • @BrainsCloud
      @BrainsCloud  4 роки тому +1

      от ситуации зависит, главное понимать где нужен внутренний отступ а где внешний

  • @user-hn5ie9hx6q
    @user-hn5ie9hx6q 4 роки тому +1

    26:26 "Как быстро и красиво сделать сердечко" Выделяешь в спан или в див сердечко, код которого ❤ и даёшь спану красный цвет

  • @user-jq6tr6rr8v
    @user-jq6tr6rr8v 3 роки тому

    Спасибо большое!

  • @PiterProduction
    @PiterProduction Рік тому

    Спасибо😊

  • @JeepersCreepersss
    @JeepersCreepersss 4 роки тому

    Да Дима ты крассавчик

  • @user-jv6bd7db2x
    @user-jv6bd7db2x 3 роки тому +1

    будут ли новые макеты? Очень круто объясняешь, спасибо за уроки!!!!

  • @user-nt3cb8oq3k
    @user-nt3cb8oq3k 3 роки тому

    кайфово!!!

  • @AkciaInterestingSite
    @AkciaInterestingSite 5 років тому

    Спасибо!

  • @user-ye2ut3yw4u
    @user-ye2ut3yw4u 3 роки тому

    лучший братишка

  • @user-ci2rv2re2z
    @user-ci2rv2re2z 5 років тому +2

    всем привет! вопрос не с этого урока. Почему в прошлой верстке сайта мы каждый блок делали в , а сейчас в ?

  • @user-me7vz2xo1n
    @user-me7vz2xo1n 5 років тому

    thank you a lot))

  • @elifas2012
    @elifas2012 4 роки тому

    Спасибо

  • @user-nl9ks1zc6v
    @user-nl9ks1zc6v 4 роки тому

    круто)

  • @user-jm1uh8ln1g
    @user-jm1uh8ln1g 2 роки тому

    Просто и быстро добавить сердечко можно так:
    Made with ❤ by Kamal Chaneman

  • @baga9898
    @baga9898 2 роки тому +1

  • @KanalReal
    @KanalReal 3 роки тому

    Ничего нового: все отлично.

  • @andsunt
    @andsunt 4 роки тому

    top!

  • @user-mp4fn1zj5f
    @user-mp4fn1zj5f 5 років тому +1

    Жаль, что только один лайк можно поставить :(

  • @webit9026
    @webit9026 4 роки тому +3

    "" не получилось изменить цвет текста, и только после того, как изменила на все заработало. возможно что-то там сверху подкрутили?

  • @user-kn3hp9qc6h
    @user-kn3hp9qc6h 5 років тому

    можно ли место тега использовать тег с классом "footer", или это принципиально важно?

  • @2189108
    @2189108 3 роки тому

  • @sashakalin
    @sashakalin 4 роки тому

    Спасибо за старания!!!
    вопрос по стилизации с помощью rgba.Корректно ли использовать Color и opacity вместо rgba?

    • @BrainsCloud
      @BrainsCloud  4 роки тому +1

      opacity делает весь блок полупрозрачным и соответственно все что в нем находится тоже

  • @megafyrnd
    @megafyrnd 3 роки тому

    Я такой: добавил flex-wrap: wrap; в social и social--footer, хотя у Димы, вроде такого не было.
    Начал писать резюме для отправки в гугл.

  • @zmerz
    @zmerz 3 роки тому

    Ребят, для чего нужно использовать абзац для текста..например в футере, почему просто в div его не поместить?

  • @NoveL58
    @NoveL58 4 роки тому

    Почему в блоке css footer для отступов использовал padding, а в downloads margin?

  • @8loodz
    @8loodz 3 роки тому

    Привет, подскажи, пожалуйста, а то я не очень понимаю, прочему ты в некоторых местах вместо заголовка и параграфа используешь два разных дива? Спасибо.

  • @manofsteppe179
    @manofsteppe179 3 роки тому +1

    сердечко на всякий, как вариант:
    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;
    }

  • @Robbi726
    @Robbi726 4 роки тому

    Все круто, спасибо! Но, Дмитрий, ПОЖАЛУЙСТА, скрольте строку кода, который пишите в центр экрана. Глаза болят всматриваться вниз, еще и постоянно ставлю на паузу и полоса времени мешается((

  • @DerAleksey
    @DerAleksey 3 роки тому

    если нужен обыкновенный отступ между блоками, всё равно когда использовать margin или padding?

  • @ASERIA777
    @ASERIA777 3 роки тому

    Текст с красной кнопкой не становился по центру , прописал margin: 90px auto;
    Так можно сделать или что-то дальше пойдет не так ?

  • @igorsml9919
    @igorsml9919 3 роки тому

    6:59 почему-то модификатор для кнопки btn--long не срабатывал, помогло убрать один "-", вариант btn-long заработал

  • @degustat_or
    @degustat_or 3 роки тому

    А почему для блока download использовали margin для отступов снизу и сверху, а в блоке footer для тех же отступов использовали padding?

  • @ihorkondratov2189
    @ihorkondratov2189 4 роки тому +2

    b{
    color: #e84545;
    font-family: Webdings;
    }
    Made with c Y by Kamal Chaneman
    Сработало сердечко без потключения шрифта

    • @denparamonov_8835
      @denparamonov_8835 4 роки тому

      Made with

      by Kamal Chaneman
      а я таким образом сделал, потом придал сердцу красный цвет

    • @user-kz4rr6fb3z
      @user-kz4rr6fb3z 4 роки тому +1

      использовала))

    • @deeco8289
      @deeco8289 3 роки тому +1

      спасибо)

  • @user-qf5jd5wh1s
    @user-qf5jd5wh1s 2 роки тому

    А как ты сделал так что прр создании нового блока у тебя он автоматом в конец становится? У меня при создании нового блока он в начале под блоком появляется

  • @user-jf8me8xo3v
    @user-jf8me8xo3v 4 роки тому

    можно еще таких же версток ?

  • @user-pe3cc5xb9j
    @user-pe3cc5xb9j 2 роки тому

    Вопрос: Почему (в css) ..... дает белый (в html) прямоугольник в 300х150 между body и header. Как его убрать? По идее он должен отсутствовать в html

  • @anixi85
    @anixi85 4 роки тому

    понимаю, что простой момент но все же. В первом блоке урока самому блоку download ты делаешь margin, для самого footer в той же ситуации padding. не очень понимаю в чем причина. то есть footer ты воспринимаешь как весь блок (синего цвета), а download не белую секцию а именно сами блоки с информацией

    • @luke4789
      @luke4789 4 роки тому

      ага, у меня такой же возник вопрос

  • @turalperfectworld1065
    @turalperfectworld1065 5 років тому

    У меня в теге h4 показывает стандартные отступы, а у тебя их почему то нет.

  • @justsapow9956
    @justsapow9956 3 роки тому

    Хотел узнать
    Эти информации актаульны на данный момент?

  • @DubinArtur
    @DubinArtur 4 роки тому +1

    Почему ты характеристику цвета кнопки пишешь в html, а не css? И название характеристики не color, а red?

  • @kirillkononov5094
    @kirillkononov5094 4 роки тому

    Комменты не прочитал, сразу стал делать сердечко через 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 ))

  • @igor9830
    @igor9830 5 років тому +1

    Когда падинги использовать, а когда мерджены?

    • @BrainsCloud
      @BrainsCloud  5 років тому

      Нужно смотреть по ситуации, но само определение вам может подсказать, падинг - внутренний отступ элемента, мержин - внешний.

  • @lolidolux
    @lolidolux 5 років тому +1

    Ловите эмоджу для сердечка 😍

  • @arturmusaev5195
    @arturmusaev5195 3 роки тому

    16:23 "Share with love" вместе с иконками появляется под адресом. Как исправить?

    • @arturmusaev5195
      @arturmusaev5195 3 роки тому

      Уже решил сам, оказывается накосячил с

  • @StepaAan_Official_youtube
    @StepaAan_Official_youtube 2 роки тому

    Ти непоказал, часть с JavaScript, там где нужно делать слайди, в блоке Testimonials.

  • @user-yj2oq7ki6l
    @user-yj2oq7ki6l 5 років тому +1

    всем привет! вопрос не с этого урока, но в чем может быть проблема? вставляю jpg, а у него размеры 0х0 в любом месте сайта, хотя png, gif вставляются нормально. ошибок никаких не выдает в инспект элементе пишет 0х0
    Портфолио





    Сайт проекта CarTuning.pro

    • @BrainsCloud
      @BrainsCloud  5 років тому +1

      Ильгиз Шарафутдинов может просто путь к картинке неверный, или название.

    • @user-yj2oq7ki6l
      @user-yj2oq7ki6l 5 років тому

      @@BrainsCloud спасибо! так и есть, у меня не переносило оказывается с срс в дист потому что в настройках гальп файла написал формат "jpeg". а я все проблему в коде искал )

  • @user-ig5en5eh7d
    @user-ig5en5eh7d 5 років тому

    Made with

    by Kamal Chaneman
    А вот так можно было сделать в блоке copyright?

    • @BrainsCloud
      @BrainsCloud  5 років тому

      если получилось, почему нет

  • @darklight7167
    @darklight7167 4 роки тому

    Сердечко можно сделать с помощью комбинации alt + 3 но оно будет белым, но ему можно просто поставить цвет в css...

  • @ha_pozit1ve
    @ha_pozit1ve 3 роки тому

    У меня высота иконок не менялась. Добавил к SVG класс в social__item и прописал высоту там. Только после этого все заработало. Пока что))