Learn CSS Pseudo Elements In 8 Minutes

Поділитися
Вставка
  • Опубліковано 28 гру 2024

КОМЕНТАРІ • 208

  • @eskilwadsholt4289
    @eskilwadsholt4289 4 роки тому +203

    The thing I really like about your videos is that you go straight to the point without wasting much time, but you also manage to mention key underlying principles so that the logic behind comes through. So much useful info packed in to those few minutes!

  • @ridl27
    @ridl27 5 років тому +189

    okay, I realize that I need to watch all of your videos, even if I know some topics really well, lol)

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

      yeah, I feel the same way, Mr. Kyle Cook is the light and the only way of my life to build my dream project sooner and quicker !!!

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

      True story!

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

      I knew about some... pseudo elements :
      - ::before
      - ::after

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

      Hahaha

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

      @Tunde Giwa Yeah I know right! He's probably the best coding teacher I've found so far!

  • @sarahwbs
    @sarahwbs 5 років тому +28

    Your explanation of why before and after don't work on elements without content was very helpful!

  • @TokyoXtreme
    @TokyoXtreme 5 років тому +31

    I'm never disappointed with any of your videos. There's always a clear explanation of the topic, along with nice points to remember, and several relevant examples. And your audio quality and overall presentation is top-notch. I hope you never stop making videos!

  • @davidrandall3978
    @davidrandall3978 5 років тому +36

    I’ve found it quite useful on “required” form labels is to set the content of the ::before attribute to “required.” and hide it visually. This way the text content is read by assistive technologies before the label text

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

    There's an entire video dedicated to literally anything about web dev on this channel lol. Subscribed!

  • @adamespinoza8099
    @adamespinoza8099 5 років тому +15

    I always have to google what certain CSS attributes actually do (::before and ::after being one of them). Love this video, definitely do some more CSS tutorials ✨

  • @kopilkaiser8991
    @kopilkaiser8991 Рік тому +2

    Absolutely brilliant tutorial. You were easy to understand because you really know how to explain well. Slowly, calmly, and with simplified information. Since, I'm a visual learner I tend to watch a lot of videos, and I can vouch you are one of the best youtuber in the programming field who know how to teach what is needed and skipping the unnecessary parts which just complicate things. Thank you so much for the video. I was wondering what is this pseudo elements "::before" and "::after" and now I know. :) Have a good day

  • @ankitagarwal4914
    @ankitagarwal4914 4 роки тому +7

    Thumbs Up! I am surprised with the content in 8 minutes. I like your attitude, straight to the concept and meaningful.

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

    Thank you so much! Your video is exactly what I was looking for and I just started learning CSS your videos are perfect bro keep it up!

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

    I’m going through a CSS course right now and this was SO DARN HELPFUL!! Thank you so much

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

    I've been devouring your content for my interview next week and feel like all the stuff I hacked together in the past finally makes sense, THANK YOU!

  • @ismaeilmohamad9570
    @ismaeilmohamad9570 6 місяців тому

    You are great at conveying information in a simple and concise way. I tip my hat to you in respect.

  • @drawdownwind6636
    @drawdownwind6636 2 роки тому +5

    Another great and informative video, brother!! I'm currently tearing into the FCC certificates and your content has been a huge help along the way. Love and Light!!! Vince.

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

    thanks for starting youtube channel, your channel stand out among so many channels , Thanks , wish you good health.

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

    Hey I just went through a college web dev program, and digging for answers found your channel, and really, you do a great job at making it simplified. I do not leave comments much, but you deserve it. I had this idea of using Spotify Api to play music and to display lyrics, and actually thats how I found you. I was inspired by a project that you did similar. Nice on

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

    Your lessons are great for visual learners btw

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

    Most ppl are confused about pseudo elements (before and after) even me,I used to use but didnot realized first the excat use of this tool,after watching your video now I am feeling happy using it in projects,Bundle of Thanks man

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

    Pseudo Elements used to be intimidating to me, but not anymore after this video. Thanks Kyle!

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

    As previously mentioned, I really appreciate the approach of not wasting a learners time!

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

    I must say you are one of the best youtubers on webdevelopment 👍

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

    I love web devs . Simple, straight and precise

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

    Oh gosh! I am just learning CSS and this topic just made me wonder what was a pseudo element but thanks to you, now I got it... Thank you Bro.

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

    This is a great tutorial for what I don't know how to google it! Thanks Kyle

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

    More info in less minutes ..straight to the point 👌

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

    explained simple, calm, amazing; thank you

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

    Thank you Mr. Kyle Cook for this amazing tutorial, I finally understand how pesudo element after / before really works, your tutorially really helps me a lot, no more confusion, I feel free a bit right now, but there is still a lot of to figure out ahead, I will follow your teaching, eventually I will be literally free, I find my way out of mysery !!!

  • @HtopSkills
    @HtopSkills 3 роки тому +5

    Even though I'm familiar with CSS, this video was helpful.

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

    The best css explanation course channel!! So many details and so clear! Thank you so much.

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

    i hope one day you will have 10 mill subs you are great man... love from nepal

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

    Your videos are great dude. Short, sharp and sweet with concise and easy to understand language. Good job 👌

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

    I like to watch your videos as opposed to people that do 40 mins tuts, keep it up Kyle!

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

    Such a crystal clear explanation.. You are a Rockstar!!

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

    Every time I need to get a hold of a css topic, I just search for web dev simplified's video on it!

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

    Thanks brother your videos are easy to understand

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

    I just subscribed to your channel because you really do simplify things for us.

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

    That's so perfect man!!! Thanks, you're amazing

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

    Really cool explanation! Straight to the point, well explained, useful example. Thank u!!

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

    Thank you. I watched a few tutorials and even freecodecamp and couldn't understand what before and after was doing. I understand now

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

    Awesome explanation, thanks for sharing this.

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

    you opened my horizon, thanks.

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

    Such an amazing video...Thanks for sharing!!!!

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

    Finally I learned pseudo elements, Thanks.

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

    dude your videos save my life

  • @danielakamelu6561
    @danielakamelu6561 5 місяців тому

    I must give you your flowers.. you are a great teacher.

  • @YannMetalhead
    @YannMetalhead 4 місяці тому

    Straight to the point, thank you.

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

    Thanks for the explanation I understand them a lot better 😅

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

    Awesome tutorial! thank you so much !!! I was wondering for a long time the utility of ::after and ::before

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

    😍😊Thank You very much This Video helps me to understand the working of pseudo elements thanks sir ji.😊

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

    Amazing stuff. I always wondered where to use these things lol

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

    I just bought the course in the description. I'm looking forward to the premium content as your free content is great

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

    Great tutorial, I love these in depth explanations! I never feel lost or confused!

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

    Thank you so much ,this video of you that i understand about pseudo

  • @RR-ok4wz
    @RR-ok4wz 7 місяців тому

    Perfection. Thank you!

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

    This is really helpful
    Thank you

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

    Authentic information, keep it up. You earned a sub.

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

    Hello sir I like your videos so much that I have subscribed your chanel.I love the way you talk.I understand very quickly what you tell.Thank you

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

    Great teacher! Thank you Kyle!

  • @abdous-i8s
    @abdous-i8s 5 років тому

    Nice man, you will grow really fast if you keep uploading so much videos

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

    Great efforts to train us thank you man

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

    This is such a great tutorial! Thank you!

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

    great topic and great explanation

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

    thank god ... your Videos are there :)

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

    really helping tutorial man

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

    Another Amazing video man.

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

    Super helpful, thank you!

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

    So easy after this video!

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

    I would thank you for telling me how it is actually used in Web Dev instead of just blabbing theory .Looking for more videos!

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

    I hope you realized how you are changing one's lives by making this kind of videos. I for one, doing self study and the agony that I feel for not getting an in depth explanation about something is hell, but here you are, better than any paid platforms who offers "classes", well, what can I say man. A prayer for your welfare and well being is all I can do in exchange of my gratitude. ❤

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

    I didn't know what tool-tip was before watching this video

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

    Another great tutorial!

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

    Great video ! one drawback, we can't handle i18n this way (or can we ?)

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

    I google 1 question and this man has every answer then I end up in a rabbit hole of watching all his vids. its 6am bruv please spare me

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

    Wow this was super helpful, thank you!

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

    Great video. Many thanks

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

    Another great video. You really have a skill in teaching. Thanks.
    What is this data-tooltip="Tooltip" (at the button in the html part)? It seems like it does nothing, at least in my browser (chrome).

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

      Sorry - just had to watch the rest of the video ...

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

    Thank you for this video. It has been really helpful, for me specifically on positioning an icon to the left of some text and being able to space everything. Your additional part about the hovering tooltip, is it possible to make it keyboard accessibly without needing to resort to Javascript? Thanks again.

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

    Love your content 🙏

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

    Clear.,.,Thanks man

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

    quality free content thank you

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

    Good class👍🏼

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

    👍👍👍thanks bro!

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

    Can u make a video with more examples where we can use both pseudo elements and pseudo classes on same thing.

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

    Thanks for the video

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

    Thank you!

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

    Mr. Kyle Cook is the light and the only way of my life to build my dream project sooner and quicker !!!

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

    great content as usual

  • @DeepakGupta-hj2dv
    @DeepakGupta-hj2dv 5 років тому +5

    Please make on series Node JS and Express JS tutorial..

    • @SACHIN-gd6zy
      @SACHIN-gd6zy 5 років тому +1

      Lol check his old video
      He has bunch of Node Js with express tutorial
      He even has a full stack course on node/express/mongodb please check it!!!

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

      @@SACHIN-gd6zy I also have a few newer Node.js/Express videos planned for the future. I even just released a blog post yesterday on Express middleware. blog.webdevsimplified.com/2019-12/express-middleware-in-depth

    • @SACHIN-gd6zy
      @SACHIN-gd6zy 5 років тому

      @@WebDevSimplified yes I saw , I even purchased your React course on launched day!

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

      @@SACHIN-gd6zy Thank you so much for the support!

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

    Awesome as always

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

    bro you are the best

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

    What is data-tooltip in short?

  • @umarmuzammil7332
    @umarmuzammil7332 8 місяців тому

    thank you very much helped

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

    Very useful informations

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

    Nice explained

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

    Thank you it was really usefull

  • @IroshanaRavishan
    @IroshanaRavishan 9 місяців тому

    A great video..!

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

    @4:21 why not just add an asterisk after 'name' rather than making a class for it? Surely, even if we had multiple important inputs to fill in, we can just type an asterisk, right?

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

    sir if we want to add multiple elements in after and before then can we do that?

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

    Thanks sir 😊

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

    thank u so much sir