CSS псевдоэлементы. Псевдоэлементы BEFORE и AFTER. Уроки HTML CSS JS. Урок №11

Поделиться
HTML-код
  • Опубликовано: 25 янв 2025

Комментарии • 1 тыс.

  • @FreelancerLifeStyle
    @FreelancerLifeStyle  5 лет назад +134

    Ребята, надеюсь выпуск понравился!
    Появилась возможность поодержать канал:
    www.patreon.com/freelancerlifestyle
    И еще пара полезных ссылок:
    Чат по верстке: t.me/flschat
    Instagram: instagram.com/freelancer.lifestyle
    Telegram канал: t.me/freelancer_lifestyle
    Facebook: facebook.com/freelancerlifestyle

    • @ИванСамуйлов-й5ф
      @ИванСамуйлов-й5ф 4 года назад +2

      Можешь свои стримы на канал заливать по вёрстке,а то я в график не вписываюсь,пожалуйста)

    • @АртурЗлатарёв-к7т
      @АртурЗлатарёв-к7т 3 года назад

      Когда добавляю стрелку в кнопку, после
      .textbutton span:after{
      могу ее сдвигать при помощи padding только по горизонтали.
      Как сдвинуть по вертикали подскажите пожалуйста, 3 день не могу разобрать

    • @englishtogether6506
      @englishtogether6506 3 года назад

      @@АртурЗлатарёв-к7т попробуй, display:inline-block

    • @АндрейСидельников-ш8ъ
      @АндрейСидельников-ш8ъ 3 года назад

      @@АртурЗлатарёв-к7т попробуй возможно paddinng:bottom;

    • @ДаняКравець-и8о
      @ДаняКравець-и8о 2 года назад

      Як через before поставити пнг картинку в кнопку, я не можу цю стрілку поставити, я вказую розмір і так далі, але нічого не виходить

  • @СергейКолдаев-ч7я
    @СергейКолдаев-ч7я 4 года назад +657

    Жень, да как ты вообще можешь говорить "надеюсь, выпуск был полезен"??? Все твои видео просто на вес золота!!! Они просто не могут быть не полезными!!! Спасибо за твою работу!!!

    • @FreelancerLifeStyle
      @FreelancerLifeStyle  4 года назад +42

      Я рад! Пожалуйста!

    • @ЮсупСага-п6я
      @ЮсупСага-п6я 4 года назад +26

      Полностью согласен!!! Единственный канал который так затянул что без лени каждый день по 3-4 ролика смотрю, топовый разбор каждого момента, отличные домашки для закрепления, и просто лучшее объяснение!!!!!!!!!!!

    • @reina_5425
      @reina_5425 3 года назад +7

      Согласна на все 100%)

    • @dispatchteamalexgroup2183
      @dispatchteamalexgroup2183 3 года назад +1

      ++++++

  • @СергейЖариков-ю2ъ
    @СергейЖариков-ю2ъ 4 года назад +234

    Дядя Ты с какой планеты родом??? С такой подачей инфы надо тебе занимать должность менистра образования! Коротко, по существу и наглядно. Просто красавчегггг!!!

  • @dumbling5223
    @dumbling5223 5 лет назад +216

    Наконец-то хоть кто-то понятно объяснил про before и after, спасибо, Жека!

  • @WildRescueGrace
    @WildRescueGrace 4 года назад +214

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

    • @FreelancerLifeStyle
      @FreelancerLifeStyle  4 года назад +7

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

    • @95fsk32
      @95fsk32 Год назад +1

      Привет, можешь сказать, как сейчас у тебя обстоят дела с веб-разработкой? Было бы интересно узнать

    • @magnetic6612
      @magnetic6612 10 дней назад

      @@95fsk32А у тебя как?
      Мне просто интересно

  • @ryzhik863
    @ryzhik863 Год назад +5

    Привет. По поводу галочки, вот что получилось у меня.
    1 вариант - скачать иконки двух цветов, и добавить зеленую в изначальный список с помощью before и свойства background image, но при этом указать еще внутренний левый отступ пикселей на 10-20 (смотря какая у вас по величине картинка, там можно играть, но паддинг добавить обязательно, иначе при обновлении браузера картинки не видно), а уже когда мы добавляем hover, то в background добавить вторую картинку с красной галочкой и поменять цвет текста на красный.
    2 вариант - с помощью свойства content и добавления в него галочки из эмодзи (у меня вызывается клавишами windows + ' ; ' (ну или там где русская ж на клавиатуре, опять же это у меня так)).
    Так вот, в эмодзи есть и галочка и стрелочки и разные другие символы, включая кавычки, которые легко вставляются в content и им можно менять цвет свойством color. Опять же в изначальном списке я указала зеленый, а при наведении - красный.
    Единственный недостаток имеющихся эмодзи - это маленький выбор, там нет кучи вариантов стилей галочки или стрелки, но как вариант работает.

  • @КорольовЖ
    @КорольовЖ 4 месяца назад

    Євгене, роки йдуть, а ваші відео не перестають дивитись! Дякую!

  • @МаксимКрутов-е8б
    @МаксимКрутов-е8б 5 лет назад +51

    Приятно учиться! Появляется настоящая надежда стать Верстальщиком и работать на бирже заказов! Огромное спасибо Вам!!!

  • @lenaplay3884
    @lenaplay3884 4 года назад +42

    У меня прогресс на лицо. Раньше Ваш урок длительностью 15 минут я усваивала два часа. Данный урок я усвоила минут за 40. Спасибо. Вы очень талантливо делаете большое и нужное дело.

  • @valentyndubin5441
    @valentyndubin5441 5 лет назад +100

    Хорошая подача материала, все отлично!) За инфу в формате блокнота👨🏽‍💻, огромное спасибо)))). Я когда учил, то сам все искал, а тут все в сжатом максимально удобном формате, очень крутая идея👍👍👍). 😊

  • @Alexander-mh7hy
    @Alexander-mh7hy 4 года назад +26

    Спасибо за труд! Я просто поражаюсь сколько в этот канал вложено сил и денег! И всё ради людей! Ещё раз спасибо!!!

  • @fantast2568
    @fantast2568 4 года назад +49

    Может повторюсь но отдельное спасибо за обнуляющие стили.

  • @MAR11ONE
    @MAR11ONE 4 года назад +11

    НЕТ КОММЕНТАРИЕВ, СМОТРЮ УЖЕ 11 УРОК И МНЕ ЭТО НРАВИТЬСЯ! ты очень хорошо объясняешь! спасибо что ты захотел нас *бесплатно* обучить! лучший!

  • @aniblacktv59
    @aniblacktv59 5 лет назад +17

    Жека! Спасибо наконец-то ты единственный Препод, который рил объясняет все тонкости! И наконец-то я понял про "before and after". Thank, you! I wait to your videos!

    • @FreelancerLifeStyle
      @FreelancerLifeStyle  5 лет назад +4

      Супер! Спасибо! 🤘

    • @gen6885
      @gen6885 5 лет назад +3

      *wait for
      :)

    • @O.Kosty.
      @O.Kosty. 4 года назад +5

      @@gen6885 А еще лучше I'm waiting for your videos!

  • @annadwar9534
    @annadwar9534 2 года назад +1

    Величезне!!! Велиииичееееезнееее дякуюююю тобі за обнулюючий список!
    Насправді, це величезний подарунок!

  • @erlanm5344
    @erlanm5344 4 года назад +13

    Боже ты такой классный, ты даёшь информацию интересно, просто и запоминающе!

  • @Юрій-о7й
    @Юрій-о7й 2 года назад +1

    Окрема подяка за обнулення! Це реальна крута фішка!

  • @ivannamuska7684
    @ivannamuska7684 5 лет назад +3

    Передивила багато контенту, аби зрозуміти для чого ж потрібні псевдоелементи. Лише Женя зміг пояснити все зрозумілою мовою, і тепер я можу рухатися далі. Дякую) Це дійсно крутяк)

  • @kos_tik_lkm
    @kos_tik_lkm 2 года назад +1

    Дякую за твої уроки, вони всі корисні, а головне зрозумілі та зроблені з душею.

  • @kadencode5347
    @kadencode5347 3 года назад +4

    Жень, спасибо тебе огромное. Ты мне как отец, в любом случае выручишь.
    Спасибо!

  • @innakhomovska298
    @innakhomovska298 4 года назад +1

    Эвгене, якби всі мої викладачі в універі так давали інформацію свого часу, я би вже давно працювала за спеціальністю! Дуже корисно і позитивно! Велике дякую!!!!!!!!!!!!!!!!!!!!!!!!!!

  • @GoGame_YT
    @GoGame_YT 2 года назад +7

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

  • @user-57et2ks
    @user-57et2ks 2 года назад +1

    Евгений, благодарю Вас за такую бескорыстную подачу материала , очень объемно и исчерпывающе , мне 37 и я без труда все понимаю, но вы дали более короткую дорогу в Iti сферу которую я откладывал всю жизнь .В этот праздник желаю Вам благополучия и процветания, я каждый день учусь с Вами и благодарен тому что вы есть на просторах интернета.

  • @-Forever-Young-
    @-Forever-Young- 4 года назад +18

    Нарадоваться не могу, что когда-то наткнулся на этот канал. Спасибо, Жека, за труды твои) отличная подача материала) Всех благ.

  • @man_money_
    @man_money_ Год назад

    Дуже дякую за вашу працю і за хорошу подачу матеріалу. Люблю дивитися ваші відео. Сподіваюся стати схожим на вас. Дякую, що ділитеся своїм досвідом з людьми.ВЕЛИКЕ СПАСИБІ!!!

  • @dangerdwolfqwertyuiop8824
    @dangerdwolfqwertyuiop8824 4 года назад +3

    Впервые смотрю такие полезные видосы про HTML и CSS с таким классным объяснением!!!

  • @James_218
    @James_218 4 года назад +2

    Наверное единственный автор, который так доступно и приятно объясняет, что понятно ,даже когда кушаю во время просмотра) Спасибо большое! очень жду занятия по JS)

  • @siliyva
    @siliyva 5 лет назад +7

    Жека, моё почтение! У тебя дар доносить до мозга не доносимое другими. Умеешь объяснить, рассказать, научить. Нельзя не поставить лайк! Жека, смотрю, изучаю, внедряю)

    • @FreelancerLifeStyle
      @FreelancerLifeStyle  5 лет назад

      Спасибо! Стараюсь) Рад что полезно!

  • @AlenaRisk.
    @AlenaRisk. Год назад

    Один из лучших каналов про верстку. Автор всегда доступно расставит все по полочкам.

  • @ilovekefir8405
    @ilovekefir8405 5 лет назад +2

    Женя, спасибо тебе большое, во время обучения я как будто чувствую твоё присутствие, полное погружение и как будто индивидуально для меня все показываешь, изучение идет как по маслу и с улыбкой на лице

    • @FreelancerLifeStyle
      @FreelancerLifeStyle  5 лет назад

      Супер! Именно этого я и хотел! 👍👍👍

  • @user_natazaja
    @user_natazaja 3 года назад

    Очень доходчиво объяснил такую непростую тему. Супер! "надеюсь, выпуск был полезен"??? , за это переживает человек который отдельно кавычки выложил. Это бомбический уровень. Некоторые страница из учебника зачитали, скрин кода показали, а дальше плавай сам, разбирайся как знаешь. А тут человек КАВЫЧКИ выложил. О.май, гад!!!!!!!!

  • @progprog796
    @progprog796 4 года назад +6

    Огромная огромная огромная благодарность за видео!!!!!!!!!!!

  • @КасымханТуитин
    @КасымханТуитин Месяц назад

    Спасибі велике, дуже цікава подача інформації, привіт від братів з Казахстану !!!

  • @uk-lych_sveta
    @uk-lych_sveta 4 года назад +2

    Действительно Евгений!!!, со своим видео-обучающим каналом, находка для начинающего верстальщика. Будь здоров и

  • @ozzzdi
    @ozzzdi 3 года назад

    Как же мне повезло с тем, что я, начинающий верстальщик, наткнулся на ваш канал. Я очень, очень и очень сильно благодарен за ваш труд, который вы предоставляете абсолютно бесплатно! Я просто в шоке. За всю мою жизнь я впервые вижу канал, видео на котором невозможно найти негативный комментарий! А ведь вы не то что просто предоставляете это бесплатно, но и отвечаете на комментарии, оставляете в текстовом блокноте и на своем сайте информацию о уроке. Надеюсь таких людей как вы, будет больше! И еще раз огромное спасибо за все, что вы для нас делаете.

  • @kotiko_oks
    @kotiko_oks 4 года назад +3

    🥰Просто нет слов!!! 😊Стараюсь посмотреть каждое видео, 🤗 некоторые пересматриваю😇 и первым делом смотрю поставил ли я лайк, 😅если нет, ставлю. И со спокойной душой продолжаю просмотр. 🤩 Спасибочки!!! Бесконечно БЛАГОДАРЕН Автору🤗🤗🤗

  • @katarionn
    @katarionn 3 года назад +1

    Евгению очередная благодарность за замечательную подачу и подготовку материала! К прилежно выполняющим задание (может быть, уже не столь актуально, но наверняка я не одна пришла на канал не сразу) вопрос: допустимо ли так решать вопрос с маркерами-галками (использовать боковой марджин)? Визуально так работает.
    /*Проставление маркера*/
    .list li::before {
    content: url(img/check.png);
    margin-right: 10px;
    }
    /*Замена маркера на красный*/
    .list li:nth-child(2):hover::before {
    content: url(img/check_red.png);
    }
    Если опустить "пиксел-перфект", т.к. не это задача текущего урока, и не пытаться чуть поднять-опустить маркеры, визуально так все работает. Таким же образом сделала и стрелку. Но сдвинуть вверх-вниз изученными к 11 уроку средствами не удается. На стрелке это очень заметно. Да, я понимаю, как это сделать еще не изученными способами, но реально ли выровнять тем, что известно за 11 уроков с начала курса?
    Кроме того, не увидела, чтобы кто-то писал о том, что у стрелки есть opacity 0.8 и в этом задании, и в предыдущих. Но это мы не разбирали ни на стриме разбора верстки простой страницы (хотя там opacity был и у большого фонового изображения) и ни у кого в примерах не нашла, чтобы кто-то пытался это реализовать.

  • @МихаилРазуваев-ь6л
    @МихаилРазуваев-ь6л 5 лет назад +2

    Как всегда всё только по теме, ничего лишнего! Спасибо!

  • @YaniaRZ
    @YaniaRZ 3 года назад

    Я наверное под каждым уроком буду писать спасибо, особенно за краткие конспекты!!!! Это просто находка, забыл что-то открыл и посмотрел, не надо видео пересматривать и искать нужное место!

  • @johnzhuzhan
    @johnzhuzhan 5 лет назад +3

    Спасибо Женя! За 14 минут доступно объяснил эту тему, которая мне за несколько часов самостоятельного штудирования не зашла.

  • @vladvlad7232
    @vladvlad7232 4 года назад +1

    Никогда не получал такого удовольствия от обучения (а за плечами университеты и институты)! А фишка, я думаю, в том, что всё понятно , а значит методология изложения продумана и логична. Женя, спасибо за труды ! Лайк !

  • @easylife6731
    @easylife6731 4 года назад +4

    Жека, ты красава. С таким преподом и подачей информации у меня есть все шансы добиться успеха. Спасибо за контент.

  • @lilironrijik222
    @lilironrijik222 2 года назад

    Слушая Вас, понимаешь о чём говорите и при этом нет напрягов, а просто отдых. смотрю-понимаю-делаю 3 минуты перерыва, чтобы улеглось в памяти, потом!!! словами не описать
    какая благодать от Вас нам, желающих учиться

  • @ВторойЖравтрак
    @ВторойЖравтрак 4 года назад +3

    *Огромнейшее тебе спасибо! Благодаря твоим урокам шагаю семимильными шагами к созданию собственного сайта) А твой обнуляющий код - это просто вишенка на этом полезном торте из видеоуроков)*

  • @generalakr758
    @generalakr758 3 месяца назад

    Этот курс будут смотреть еще наши дети, так что спасибо за твой большой труд❤

  • @ЮрійДмитрик-в9в
    @ЮрійДмитрик-в9в 4 года назад +47

    У меня была проблема как через псевдоелемент before сделать так чтобы галочка становилась красным. Решение оказалось банальным, нужно правильно писать последовательность псевдокласса и псевдоелемента. Делюсь вам для возможной проверки уже решенной домашки. P.S когда будете вставлять мой код, то чтобы стрелочка и галочка появились, не забудьте их выкачать - поместить в папку - и отредактировать в моем коде путь к этим иконкам и картинкам ( может кто не знает то это " url()" )
    код html:
    Стилизируй с помощью псевдоклассов и псевдоэлементов
    Put on this page information about your product
    A detailed description of your product
    Tell us about the advantages and merits
    Associate the page with the payment system
    Full Story
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet tempore fuga dicta neque, laudan
    tium ratione nemo architecto tempora consequatur, officia corporis. Officia atque ex minima ac
    cusantium eius ea excepturi incidunt.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet tempore fuga dicta neque, laudan
    tium ratione nemo architecto tempora consequatur, officia corporis. Officia atque ex minima ac
    cusantium eius ea excepturi incidunt.
    Код CSS:
    /*Обнуление*/
    *{
    padding: 0;
    margin: 0;
    border: 0;
    }
    *,*:before,*:after{
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    }
    :focus,:active{outline: none;}
    a:focus,a:active{outline: none;}
    nav,footer,header,aside{display: block;}
    html,body{
    height: 100%;
    width: 100%;
    font-size: 100%;
    line-height: 1;
    font-size: 14px;
    -ms-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    }
    input,button,textarea{font-family:inherit;}
    input::-ms-clear{display: none;}
    button{cursor: pointer;}
    button::-moz-focus-inner {padding:0;border:0;}
    a, a:visited{text-decoration: none;}
    a:hover{text-decoration: none;}
    ul li{list-style: none;}
    img{vertical-align: top;}
    h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight: 400;}
    /*--------------------*/
    body{
    background-color: @/e8e8e8;
    width: 1440px;
    height: 1700px;
    }
    .cummonbody {
    padding: 125px 308px 103px 290px;
    }
    .checkicons_text {
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 20px;
    }
    .check_title {
    font-size: 14px;
    color: @/000000;
    line-height: 40px;
    text-transform: uppercase;
    letter-spacing: 2.8px;
    }
    .check_text li:nth-child(1){
    color: @/273d46;
    line-height: 36px;
    text-align: left;
    text-decoration: line-through;
    }
    .check_text li:nth-child(2){
    color: @/273d46;
    font-weight: bold;
    line-height: 36px;
    text-align: left;
    }
    .check_text li:nth-child(3){
    color: @/273d46;
    font-style: italic;
    line-height: 36px;
    text-align: left;
    }
    .check_text li:nth-child(4){
    color: @/273d46;
    line-height: 36px;
    text-align: left;
    text-transform: uppercase;
    }
    .check_text li:before{
    content: url('../img/DZ/icons/check_icon.png');
    padding: 0px 10px 0 0;
    }
    .check_text li:nth-child(1):hover{
    color: @/273d46;
    line-height: 36px;
    text-decoration: none;
    }
    .check_text li:nth-child(2):hover{
    color: @/d55a5a;
    font-weight: 400;
    }
    .check_text li:nth-child(3):hover{
    font-style: normal;
    }
    .check_text li:nth-child(4):hover{
    text-transform: none;
    }
    .check_text li:nth-child(2):hover:before{
    content: url('../img/DZ/icons/check_icon_red.png');
    padding: 0px 10px 0 0;
    }
    .check_text{
    margin-bottom: 137px;
    }
    .link_button{
    border-radius: 24px;
    display: inline-block;
    height: 44px;
    box-shadow: 0 6px 40px rgba(128, 183, 179, 0.54);
    margin-bottom: 118px;
    background-color: @/80b7b3;
    }
    .link-link {
    display: inline-block;
    padding:2px 35px 0 30px;
    }
    .link-link span:after{
    content: url('../img/DZ/icons/strelca.svg');
    position: relative;
    left:9px;
    top:2px;
    }
    .link-link span{
    display: inline-block;
    color: @/ffffff;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    line-height: 40px;
    text-transform: uppercase;
    letter-spacing: 2.8px;
    }
    .link_button:hover{
    background-color: @/3a5856;
    }
    .link_button:active{
    background-color: @/818181;
    }
    .text p:nth-child(1):first-line{
    color: red;
    }
    .text p:nth-child(1){
    margin-bottom: 43px;
    }
    .text p:nth-child(2):first-letter{
    color: red;
    font-size: 26px;
    }
    .text{
    font-size: 18px;
    }

    • @maxxnuzhnykh6407
      @maxxnuzhnykh6407 3 года назад +3

      Спасибо.)
      Уточил, для себя, некоторые элементы.
      Плюс Вам в карму, однозначно.))

    • @ЛидияХисматуллина-и3о
      @ЛидияХисматуллина-и3о 3 года назад +3

      Спасибо большущее! Что только не делала с этой галочкой)

    • @sufffear
      @sufffear 3 года назад

      подсмотрел как добавить списку через ::before галочки которые бэкграунд, оказалось положение и no-repeat после url() у меня были лишними а так все верно, спасибо за подсказку.

    • @АкжолАманкелдин
      @АкжолАманкелдин 2 года назад +1

      Этот метод уже не рабочий по ходу да

    • @Dmytro-DIY
      @Dmytro-DIY 2 года назад

      Зміг замінити на нову червону галочку. Але, здається, є спосіб змінити колір в коді CSS. Хтось знає як це зробити?

  • @mikhailkinebas3503
    @mikhailkinebas3503 Год назад +1

    Хочу і я приєднатися до подяки Жені за його круті відео контент , людина вкладає свій час і єнергію в освіту. Ділится всім своїм досвідом )))

  • @lord8360
    @lord8360 4 года назад +5

    Учу html и css, тут хорошо объясняют да ещё и домашка есть) спасибо что стараешься;)

  • @user_2782-
    @user_2782- 4 года назад +2

    Дякую за класні пояснення!!! Супер!

  • @igorlevchenkov191
    @igorlevchenkov191 4 года назад +6

    Спасибо за урок! Отлично, ка всегда! «Кавыкчкчки» alt+0171 alt+0187 на num-паде (alt надо держать).

  • @konstantino7016
    @konstantino7016 3 года назад

    Обнуляющий стиль бесценен, как и весь контент от Евгения!!!!

  • @mila4308
    @mila4308 4 года назад +4

    оказывается before и after вообще несложные, благодаря объяснениям Жеки все просто и понятно :) как всегда восхищена!

  • @olegryazanov5926
    @olegryazanov5926 2 года назад

    Лучший... нет, ну, честно - это лучшие уроки на ютубе, что я находил. Начинал учиться раза 4 и всякий раз словно головой кирпичную стену пытался пробить. В последний раз не мог разобраться с SASS и нашел твоё видео на эту тему. Правда, тогда в очередной раз забросил, но на этот раз решил сразу начать с твоих уроков. Самое лучшее, что ты не просто говоришь, что делать, но и объясняешь, как оно работает. Я наконец-то начал по-настоящему всё понимать. Искренне и от души спасибо!

  • @cypokcypok5906
    @cypokcypok5906 4 года назад +6

    Жека, ты лучший! Реально самый крутой курс из тех, что смотрел. Отличная подача материала, никакой лишней болтовни и заумных фраз, все четко и по делу. При этом все сразу становится понятно + тут же домашка для закрепления материала. Спасибо и успехов тебе!

  • @igorbush840
    @igorbush840 4 года назад +1

    Доходчиво человек объяснил про данные псевдоэлементы. Очень полезное видео. Спасибо.

  • @islomtoshev8721
    @islomtoshev8721 4 года назад +10

    Ничто не сияет ярче чем твои уроки )) спасибо Женя

  • @x_ledmaster_x6524
    @x_ledmaster_x6524 3 года назад +1

    Радует, что весь код работает во время занятий по видео и после, когда повторяешь заново уже самостоятельно. Подача информации без ошибок, наличие шпаргалок и технического материала играют важную роль в обучении, которая становиться в разы быстрее, чем учиться по книжке.
    Ps.домашка удалась, кроме одного: не могу изменить chek.png при наведении мышкой.

  • @denvanrain8793
    @denvanrain8793 4 года назад +6

    Спасибо за урок! Как всегда, супер! Интересно было бы посмотреть на Ваше решение домашки и сравнить со своим.

  • @vadimrex6784
    @vadimrex6784 5 лет назад +2

    Женя! Огромное тебе спасибо!!! Действительно, только после твоего видео стало понятно про before и after! Теперь буду частым гостем на твоём канале! СПАСИБО !!!

  • @svetlanapokrovskaya7798
    @svetlanapokrovskaya7798 4 года назад +3

    Спасибо за уроки! Огромное человеческое СПАСИБО!

  • @ДаряЮрко-у9т
    @ДаряЮрко-у9т 2 года назад +1

    Дякую за урок. Вчимося далі.

  • @info_maps_maroc
    @info_maps_maroc 3 года назад +3

    Женя, очень вас благодарю за прекрасные и понятные уроки

  • @serghiyveres6750
    @serghiyveres6750 4 года назад +1

    Снова видео-урок и снова я удивлен... Спасибо Вам, Евгений, за лаконичность и информативность. Раньше я знал только о двух псевдо-элементах - 'before' и 'after'. Теперь узнал о новых и занес их в свою копилку знаний. Очередной заслуженный ЛАЙК за годный урок.

  • @maximbalezin748
    @maximbalezin748 4 года назад +4

    Спасибо за видео уроки, отличная подача материала и очень вариативная.

  • @zan0zavzadnice
    @zan0zavzadnice 3 года назад

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

  • @romanown1361
    @romanown1361 4 года назад +26

    о качестве уроков говорят дизлайки конкурентов. ну не может же нормальный человек этому видео поставить минус. а если считаете что сделал заслуженно - объяснить же надо за что минус.

  • @astatorn
    @astatorn 4 года назад +1

    Женя, я в восхищении! Я немного знакома с версткой, но все равно смотрю сейчас уроки с самого начала на случай новой информации. В каждом уроке такое находится, но на ms-clear и moz-focuz я просто запищала от восторга. Не столько даже с них, столько с того, что вам реально не жалко делиться такими вот локальными лайфхаками на этапе, казалось бы, для совсем начинающих. Сразу видно, как вас самого с этого прет и что вы действительно хотите научить полезному, а не плодить дураков, лишь бы платили)). Это супер, это большая редкость.

  • @eminemroyce5457
    @eminemroyce5457 4 года назад +6

    :hover: before впечатлило, спасибо за урок и Ваши советы.

  • @iamyourbestfriend1709
    @iamyourbestfriend1709 2 года назад

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

  • @АртёмДукуп
    @АртёмДукуп 4 года назад +2

    Выпуск огонь!В общем как и всегда!

  • @o_antushevich
    @o_antushevich 3 года назад +1

    Женя, миллион сердечек тебе. Каждый выпуск - восторг!

  • @ВячеславНиколаевич-у2н

    Спасибо Жека! За псевдо-элементы огромный тебе респект!!!

  • @Duplomat
    @Duplomat 5 лет назад +2

    Жека красава. Только у него наконец-то понял про before и after. Огромное спасибо. Самый лучший канал.

  • @artyomvoytenko1237
    @artyomvoytenko1237 5 лет назад +3

    Видео обязательно вечером посмотрю. Но хочу напомнить про две более лайтовые темы: правильное обозначение классов и подключение шрифтов к проекту. Было бы интересно посмотреть и понять как это делается, а то в инете куча ненужной инфы идет рядом и суть теряется. А ты всегда по делу говоришь! Так что спасибо за это видео, и ждем следующие по темам!)

    • @FreelancerLifeStyle
      @FreelancerLifeStyle  5 лет назад

      Спасибо! Эти темы уже запланированы!

  • @АртурЗлатарёв-к7т
    @АртурЗлатарёв-к7т 3 года назад

    Женя, спасибо огромное в сотый раз! Добра тебе и твоему дому, обнял!

  • @kospav9145
    @kospav9145 3 года назад +6

    Не могу не написать: Супер! Ни одного лишнего слова, как профессор объясняешь

  • @ВладЛитвин-с6д
    @ВладЛитвин-с6д Год назад

    Огромное тебе спасибо за то что ты делишься знаниями накопленными годами и делаешь это без возмездно. Твой канал лучший на RUclips для верстальщика многие платные курсы дают уровень знаний сильно хуже. Недостаточно хорошо знать программирования нужно уметь подавать информацию нужно быть учителем у тебя это прекрасно получается спасибо за твой канал

  • @yuralus2101
    @yuralus2101 4 года назад +2

    Бро нехай прибуде з тобою сила )))дякую за урок

  • @13ILYAINDIGO
    @13ILYAINDIGO Год назад

    Очень полезно даже для программиста с большим стажем!
    Просто быстро и понятно!
    Благодарю!

  • @sheldonkupeer7519
    @sheldonkupeer7519 4 года назад +2

    Спасибо тебе!) Благодаря тебе учеба стала легче и приятней, а за ДЗ отдельное Спасибо)

  • @July-beauty
    @July-beauty 3 года назад

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

  • @jasonborn4373
    @jasonborn4373 2 года назад

    Это нечто! С каждым уроком у меня челюсть отвисает все больше). Спасибо!) Просто красавчик!

  • @ChendlerBiing
    @ChendlerBiing 4 года назад +15

    Как всегда- на высоте урок! Сорян, не могу поддержать из-за короны....

    • @FreelancerLifeStyle
      @FreelancerLifeStyle  4 года назад +4

      Спасибо! Нет проблем! Буду рад репостам в соц сети)

  • @cryptoneophyte
    @cryptoneophyte 2 года назад

    Всегда досматриваю до самого конца, чтобы услышать мотивирующую фразу и покачать головой под крутую музыку!

  • @ErisBlood
    @ErisBlood 4 года назад +3

    Дядя, дай Бог тебе здоровья!

  • @oleggbllack1453
    @oleggbllack1453 3 года назад

    Недавно доделал домашку из 9 урока и теперь дополняю ее с учетом новых уроков. Автору огромный респект за труды.

  • @puldirection3190
    @puldirection3190 4 года назад +5

    Ну как тут без лайка?
    Я бы пачку лайков поставил!
    Какой ты добрый, дядь Жень!

  • @ВячеславФилимонов-п8к

    Я никогда не пишу комментарии и редко ставлю лайки, но в этом курсе под каждым видео стоит мой лайк. Жека - красавчик, так держать!

  • @mykhailobokalo6037
    @mykhailobokalo6037 5 лет назад +5

    Смотрю с большим интересом)) спасибо!

  • @yuriitimakov7904
    @yuriitimakov7904 2 года назад

    Женя, дуже ДЯКУЮ!!! Урок дуже корисний!👍👍👍👍👍👍👍

  • @АртемКа-в3к8й
    @АртемКа-в3к8й 5 лет назад +3

    Урок бомбезный!)

  • @Anatoli-bq1pe
    @Anatoli-bq1pe 2 года назад

    Огромная благодарность тебе Женя) Псевдо-классы и псевдо-элементы реально детально помогают изменять наполненность сайта

  • @ApasnySketches
    @ApasnySketches 3 года назад +4

    Видос супер по кайфу! Жека респект! Есть разбор домашки? Интересно как в кнопке (Full story) добавить стрелку с помощью after, а именно, как ее опустить на пару пикселей?

    • @tril75
      @tril75 3 года назад

      Не смогу уснуть пока не опущу)

    • @АртёмСеров-г1ч
      @АртёмСеров-г1ч 2 года назад

      Нашлось решение как опустить?

    • @olegryazanov5926
      @olegryazanov5926 2 года назад

      ​@@АртёмСеров-г1ч position: absolute и margin-top 3px :)

    • @АртёмСеров-г1ч
      @АртёмСеров-г1ч 2 года назад

      @@olegryazanov5926 это в дальнейших уроках будет?

    • @olegryazanov5926
      @olegryazanov5926 2 года назад

      @@АртёмСеров-г1ч не знаю, сам только до этого дошёл. Просто загуглил)

  • @АндрейСадовой-б7е
    @АндрейСадовой-б7е 2 года назад +1

    Очень доходчиво и грамотно поданный материал. Спасибо ОГРОМНОЕ. Патреон само собой))))))))

  • @ИлонаШульга-к1ь
    @ИлонаШульга-к1ь 4 года назад +3

    Спасибо. Огромное спасибо! Каждый урок - восторг, конкретика, понимание и море полезности. Вы фантастичны!!!

  • @МихаилМиша-р2р
    @МихаилМиша-р2р 4 года назад +1

    Ух ты!
    Я читаю книгу и в ней говорится про эти псевдоклассы и псевдоэлементы, но благодаря тебе, я вижу как они работают. Огромное тебе спасибо Евгений)

  • @iamname8758
    @iamname8758 5 лет назад +2

    Объясняешь максимально понятно)

  • @igorfedoseev5500
    @igorfedoseev5500 2 года назад +1

    Впервые вижу обнуляющий список:
    "Что за мать его абракадабра"
    С каждым последующим уроком:
    "Ого, какая же всё таки нереально крутая штука!"
    Уроки огонь, безмерная благодарность!

  • @91Marcus
    @91Marcus 4 года назад +14

    «Замечательный браузер:
    Интернет Эксплорэр»😁👍

    • @-Forever-Young-
      @-Forever-Young- 4 года назад +3

      Тож улыбнуло))

    • @yourdream28
      @yourdream28 3 года назад

      Explorer(с англ.)- исследователь
      Enternet(с англ.)- Интернет
      Исследователь интернета получается!

  • @igortishkov9390
    @igortishkov9390 3 года назад

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