PB101: L19 - Dynamic Styling with Data Attributes & Attribute Selectors

Поділитися
Вставка
  • Опубліковано 17 січ 2025

КОМЕНТАРІ • 141

  • @jcdeaton42
    @jcdeaton42 Рік тому +8

    Awesome course! I finished it in 4 days 😂. This course is great for any skill level. I learned best practices for things I’ve done wrong for 25 years. Thanks Kevin.

  • @ReubenHochstetler
    @ReubenHochstetler Рік тому +17

    This course is incredible for anyone wanting to level up their web development. It's not just for beginners.

  • @olafurgumundsson6475
    @olafurgumundsson6475 Рік тому +3

    This is like striking gold after a long and frustrating search.

  • @serendipidy
    @serendipidy 11 місяців тому +5

    I binge-watched this course in the last week and am just blown away that this course is for free. No one gives knowledge away like that for free. This is one of a kind. Am gob-smacked. I shared this course and hopefully, a lot of people will watch it. I am thinking of joining the Inner Circle now.

    • @Gearyco
      @Gearyco  11 місяців тому +1

      I appreciate you!

  • @rickdugmore
    @rickdugmore Рік тому +3

    I'm a changed man. Thank you.
    Am I in love or just infatuated? Not sure yet, time will tell.
    But seriously, I run an SEO agency and always tried to avoid website design because of the monotonous tasks involved with it. But now I think i will start to enjoy website building again and now even look forward to it.
    I believe I can charge way more now.
    Thank you again.

  • @clausmorlock
    @clausmorlock Рік тому +7

    Switched to Bricks not long ago. Currently working on my first website trying to follow the best practices I learned in this course. It's a challenge, I have to admit, but sets the bar for the level I wanna work on. The value you provide with PB101 is awesome. Thank you so much for that

    • @Gearyco
      @Gearyco  Рік тому +5

      It takes practice. But it will quickly become second nature!

  • @jeremya3037
    @jeremya3037 Рік тому +8

    This is one of the best episodes yet. Thanks for creating this video.

  • @matthewolding9427
    @matthewolding9427 Рік тому +5

    Absolute gold! Every PB101 has been value packed. Thank you!

  • @jansimecik
    @jansimecik 4 дні тому

    I guess I will only repeat what others already said, but Kevin, this is one of the best course I've ever seen and not just in a PB/Web development topic!
    I have binged it in like 3 days and I'm hungry for more! I liked every video and subscribed even before finishing the first one!
    Thank you so much!

    • @Gearyco
      @Gearyco  4 дні тому +1

      Glad you like it!

  • @aCatSiki
    @aCatSiki 25 днів тому

    This 50min video is fire. 🔥
    It's very worth it than any 5-10 combinations as it's concise to perfection.
    I'm kinda glad I held back on learning data attributes and watched this instead of bits and pieces from others.

    • @Gearyco
      @Gearyco  25 днів тому

      Appreciate it! 🔥

  • @zdenekholy2634
    @zdenekholy2634 Рік тому +3

    Ah, ah ... this is what I was craving for. Attributes and custom queries. Till now it was just all black magic to me ... but I see I was wrong :)
    Great tutorial Kevin. Can't wait what L20 will bring ... it's getting better & better.

  • @thewhiterussian138
    @thewhiterussian138 5 місяців тому +1

    Boss mode teaching. Best, most informative, most value packed course out there. ❤

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

      Appreciate that

  • @rafikiAli
    @rafikiAli 11 місяців тому +1

    Left each video with a value of "Like" i. Going back to the beginning for round 2 with more practice executions! I can actually feel my net worth increasing exponentially! TY!

    • @Gearyco
      @Gearyco  11 місяців тому

      💰get that bag!

  • @davidwalls2304
    @davidwalls2304 Рік тому +1

    Kevin, I've seen you use data attributes in other videos but wasn't quite sure how everything worked. This PB101 lesson was tremendously helpful. "Elevate Your Game" doesn't even cover the value this lesson provided. Thank you for investing your time and effort into creating this series of videos.

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

    Another outstanding tutorial Kevin. A very big thank you for doing all these - unbelievably valuable

  • @VigneshMukund
    @VigneshMukund 8 місяців тому +1

    You are an incredible teacher, Kevin! I can't believe I learnt all of this for FREE! Thank you. You have earned yourself a supporter. :)

  • @curtismorrow4537
    @curtismorrow4537 3 місяці тому

    I got a ton of value from this course Kevin. Thank you for providing such complete and engaging content for free.

  • @MariaMur-qi4ox
    @MariaMur-qi4ox Місяць тому

    I loved the course, lot's of valuable information. Hope you continue bringing content like this. But I wanted it to end because my brain was hurting! hahah Thank you!

  • @DavidWhiteGives
    @DavidWhiteGives 3 місяці тому

    Brilliant content as ever explained so well I used data attributes to hide and display content based on a switch so I can use the same template for parent and child, where there is far more content to display in the parent, which was making the child look very clunky, now, totally cleaned up. Brilliant! Thanks Kevin.

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

    This is by far the best course I have followed on web development. It's well structured and extremely well explained and illustrated. Very eagerly awaiting Page Building 102, or 201. Thank you tremendously for sharing all this!

  • @isaurasotoca
    @isaurasotoca Рік тому +1

    Can’t believe we are almost at the end of this course 😢 With the last couple of lessons, things are getting more advanced and exciting!! Looking forward to next lesson! Thanks Kevin!

  • @AthloneH
    @AthloneH Рік тому +1

    Incredible value in EACH lesson. I can't recommend this course highly enough for anyone wanting to level up their skills.

  • @ted-e-baer
    @ted-e-baer Рік тому +1

    Amazing lesson, Kevin. 50 minutes of net video time. I for one recognize the time needed to just setup the environment. So I am paying with a like, comment and share. This lesson was greatly enjoyed and I appreciate it very much. Cheers, Kevin!

  • @John.Rearden
    @John.Rearden Рік тому +1

    Good lesson.
    You should consider including in this course giving a lay of the land about PHP, various javascript libraries various CSS frameworks, and the like.
    A birds eye view of the front end development landscape. Food for thought.

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

    Getting all this knowledge for free feels illegal! Thanks as always Kevin!

  • @GavinDavidson
    @GavinDavidson Місяць тому

    I FINISHED!!! I have tossed up a like on every single video! But seriously, what do you say other than a massive thank you for an incredible series!!! What astounds me is the knowledge you have thrown out here to lift us all up to become better developers. I will need to rehearse these concepts namely, Flexbox which was the toughest for me to grasp, followed equally by programmatic styling and data attributes - but practice will make perfect. Big respect for you - thank you, Kevin!

    • @Gearyco
      @Gearyco  Місяць тому +1

      Great job! Congrats on getting to the end! Let us know if you need help with anything.

    • @GavinDavidson
      @GavinDavidson Місяць тому

      ​@@Gearyco Cheers, Kevin, thanks a million. I think the best way is to implement these techniques on client builds going forward. You explain concepts well, now I need to write the code so it sticks. I will keep revisiting these concepts on PB101. Onto ACSS 101 ;)

  • @kakenetit2
    @kakenetit2 Рік тому +1

    Excellent lesson! I got the pop quiz right too!

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

    Man , you're at beast mode :D You've taught me really alot on this course , Thank you.

  • @Umair_Shehzad
    @Umair_Shehzad Місяць тому

    Having completed the course, I realize I was the chump, but now I’m on my way to becoming a champ. Thank you for sharing your knowledge. I plan to purchase the ACSS when you offer the unlimited website lifetime package-just kidding!😁 Thanks again for the course.

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

    🤯Kevin. My man. I am sounding like a broken record but I have no words for your tremendous work, effort and knowledge you put out there for all of us, elevating and making us better one lesson at a time. A big big THANK YOU for everything.

  • @madebywahab
    @madebywahab Місяць тому +1

    Thanks kevin i have learned so much from you

    • @Gearyco
      @Gearyco  Місяць тому +1

      My pleasure!

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

    I have already been styling with Attributes and still picked up some new tricks with your video.

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

    Outstanding lessons. Especially 18-20 were eye openers for me! Thank you very much!!!

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

    Wonderful course. Cannot find a valuable content like this YT. Thank you Kevin.

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

    The words fail me. So much effing value. Thanks a lot for these. Much love.

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

    As always, it is a masterclass. I need to practice it right away. Thx Kevin for the content and kudos for the innercircle, it is a gold mine!

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

    Men, this is the web developer's bible101.
    All these videos, I look and can't stop.
    What did you done? You changed me.

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

    This course has changed my life!

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

    Thank you very much for this amazing course! I'm about to start my first Bricks website and for sure I will be rewatching your videos at the same time. Thank you again!

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

    Amazing. This just solved something I needed, and that was the ability to have a bunch of news posts, but to allow a toggle to make it “featured” and when on, to show up first in the loop and look a bit different.

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

    Whole course is incredibly valuable and I’m really shocked that this is free! Thank you Kevin Geary very greatly, you’re the best!

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

      Glad you enjoy it!

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

    this came in so handy today as I need to have ONE person always first and had to add a custom field for order/position. This is SOOO much easier and cleaner.

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

    This one, and L18 were extremely helpful, and I didn't know about many of this. Thank you Kevin!!!! 🙏🏼

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

    I didn't know how to thank you for so many teachings, that's why I just joined the inner circle :)
    It has been my best decision.

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

    Sheeeeeeeeeeesh!!!! The people want more Kevin!! 🔥🔥🔥🔥

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

    Such a dense and amazing episode thanks ! I always struggled and failed to find easy ways to order cards in certain ways, so the first example you gave in the video is very helpful. Now as you said, gotta open Bricks and start practising to make these new techniques stick to my brain !

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

    This is fantastic ❤ i knew they existed;’data attributes’ but did not know the how or what. Brilliant video!

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

      Would love a few lessons about javascript :)

  • @danieleromano7442
    @danieleromano7442 Рік тому +1

    Compliment, great tutorial!

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

    Great explanation 👍🏻

  • @Edwin-Bautista
    @Edwin-Bautista Рік тому

    Great video like all the ones you make, the PB101 course video series are great, I am learning a lot and raising my level of knowledge to build websites.
    My knowledge of the English language is poor, but thanks to a Google Chrome plugin, it immediately translates the audio into another language, in my case Spanish, so I can better understand the lessons.
    Thank you very much Kevin.

  • @billlewis22
    @billlewis22 11 місяців тому

    I came to the end, and where is the rest of the series? Great job, Kevin , I appreciate your work and skills.

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

    This stuff is pure gold.

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

    Exactly what I was looking for. Thank you 10000 times! ❤

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

    This video is awesome! One of the best from the series so far! Thank you @Kevin Geary!!!

  • @MB-sl8pw
    @MB-sl8pw Рік тому +2

    Think this is why you have to learn web design the right way, this is a Facebook post from the divi group
    Client initially approved the design now 3 months and 50+ pages later, he wants to change the title text. I had initially set this in each module and cloned the page. I do not want to change 20 titles per page times 50 pages, going 1 at a time. None of the css I'm writing is working though. I'm trying to make all h1-h6 alata font (from aldrich).

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

      YEP!

    • @GavinDavidson
      @GavinDavidson Місяць тому

      Unreal that some people actually work like this.

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

    Awesome episode Kevin

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

    Wonderful lesson, Kevin.

  • @S_Tito
    @S_Tito 10 місяців тому

    Thanks, Kevin. Awesome content!

  • @ShanaC-kg8oi
    @ShanaC-kg8oi 10 місяців тому

    Thank you so much for the wonderful very well-explained lessons! :)

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

    I find a lot of value here!!! Thanks Kevin!

  • @re-member
    @re-member 7 місяців тому

    Awesome lesson, Thank you

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

    Incredible value, thank you Kevin !

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

    This stuff is phenomenal. Glad I found it. Thanks I found you on a webcast conversation with Jamie Marsland and really like your style of discussion. You eluded to doing a full landing page and some other things. WIll they be additional segments of this class or a different video series, maybe already available?

  • @sagedhasan4983
    @sagedhasan4983 11 днів тому

    Amazing Kevin, I didn't know Data Attribute up until now. When we would be expecting the last episode or a couple for this series? It's been a year and excited. Thank you!

    • @Gearyco
      @Gearyco  9 днів тому

      Series is over. :/

  • @tngwebdesign
    @tngwebdesign 3 місяці тому

    Kevin you are fantastic! I have loved all your videos in this course and really appreciate everything you have shared. You mentioned in the video that you were winding the course down. Are there any videos after this? I did look but didn’t find any. I just didn’t want to miss them if you did make them. Thank you again for all you have done so far and continue to do for the community.

    • @Gearyco
      @Gearyco  3 місяці тому

      That’s all. I teach other stuff in one off videos. Thanks for watching.

    • @tngwebdesign
      @tngwebdesign 3 місяці тому

      @@Gearyco ok great thank you 😊

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

    That was gold! Thank you!

  • @hourglass716
    @hourglass716 Рік тому +1

    Absolutely amazing episode. This stuff is actually possible??

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

    Thanks Kevin

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

    Kevin hits again 🎉🎉

  • @a.varezhnikova
    @a.varezhnikova Рік тому

    thank you

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

    Aching for that next course KG

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

      Inner circle 💪🏻

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

    Great video, I'm watching it on break between projects and I'm about 3/4 through. All stuff I never knew. I wouldn't say the value of the data attribute is 'binary', either. 'Radio', maybe? :)
    Maybe the 'i' (for case insensitivity) is for 'insensitive'. Not sure if I'll ever use it but pretty sure that's how I'll remember it.

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

    You mentioned a "couple more episodes" full landing page build but I don't see them here?

    • @Gearyco
      @Gearyco  5 місяців тому +1

      We decided not to do them because everything that got taught is shown repeatedly in most of the videos I do

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

    This is really valuable stuff to know. One quick question, and apologies if I missed it from an earllier lesson. In the profile cards you used the class naming convention of two underlines for __title and __name. I've notted all the other BEM naming conventions but this one is neww to me? And, one more, there was bin-- with the two trailing hyphens.
    Lastly. It's been a real pleasure getting to know all the information you have imparted over the 19 videos. I already knew or was awre of some this but now am empowreed with all of it coming together, in a way that will be beneficial to my work in the future. I am just starting to use Bricks and I first encountered you on Jamie Marsland's interview where you were questioning the direction of WordPress and the Gutenberg project. I was hovering on Divi and waiting to see where the block editor was going to go as an alternative but am now more convinced that builders like Bricks are what we need if we are serious about building sites properly.

    • @Gearyco
      @Gearyco  Рік тому +1

      The __ is the core of the BEM naming convention. "--" denotes a modifier class on a block. So for btn--action it basically means, "this is a button styled with the action styles" vs "btn--black" would denote a black button.

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

    So much goodness on this video

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

    Thanks for all the helpful content Kev! Can I ask what font name is used for the body text and on the black buttons? Thank you 🙏

  • @johnnycakez2750
    @johnnycakez2750 7 місяців тому

    Just a quick note- anyone who needs little prompts around selectors, pseudo classes, attributes, etc. WDS have a css selectors cheat sheet that I find very helpful.

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

    So much content here! I was hoping for a way to link a CPT card to an internal URL. As there is only one "real" card in the DOM, how would I link each card to a different URL?

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

      I’d need more context as to what you’re wanting to accomplish. What are the cards for and where do they take people?

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

      I'm using Frames Feature Card Hotel, and have set up dynamic content for the image, heading, and accent text. I'd like each card when clicked to take visitors to a separate dedicated page featuring more information on the topic. I just can't see where I can add the relevant URL. @@Gearyco

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

      @@iainjhamilton sounds like you need a CPT…

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

      I created a CPT in ACF, that's where the frame is drawing content from. But each card needs to link to a separate page and I can't see where I can do that. @@Gearyco

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

      Just create a link and in the url path use dynamic data to link to the post url.@@iainjhamilton

  • @curiouslywp
    @curiouslywp 10 місяців тому +1

    All Im going to say is these later lessons, especially, make me feel like I've joined the Navy Seals or Delta Force for bricks builder...🤯

  • @mr.matt.eastwood
    @mr.matt.eastwood Рік тому

    Hey Kevin, at 24:21, you show the status badge doesn't have any CSS on it. Yet, on the front end, it says "Status". How can it do that without any CSS? Shouldn't there be an attr function somewhere to make this work? Is it on :before here too? Watching on my tablet in low res so I might be missing something.

    • @Gearyco
      @Gearyco  Рік тому +1

      Yes, there was an attr() on it already, but that was it. I think I meant no styling CSS.

    • @mr.matt.eastwood
      @mr.matt.eastwood Рік тому

      @@Gearyco Thanks!

  • @jacobwwarner
    @jacobwwarner 11 місяців тому

    I've made it all the way to the end, I've found valuable insights from each and every video, commented and liked every video and kept this playlist saved for future reference. I love it, especially how to work with CSS within the context of a page-builder like Bricks. I'm more used to writing out the code directly, but I haven't worked much with dynamic, or programmatic CSS, like this. Is there a way to work with JavaScript and REST APIs directly within a WordPress page builder like Bricks? For example, creating a component that can be populated with data from an external source rather than the connected WordPress database. Also, are there instances where you would need to be working directly with PHP on the Bricks theme or child theme files? Or is this another area of the WordPress site's code that you work on the PHP? I haven't found a course thoroughly covering this yet.

    • @Gearyco
      @Gearyco  11 місяців тому

      Anything is possible

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

    KMG: Hey, man. How did you end up here?! This is a long way from Rebooted Body. You're still looking good. 🙂

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

    I took that firehose to the face! Died several times but I made it! Thank you for sharing your knowledge with the world.

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

    Can we create a thankyou page and able to show the thank you - name. The name will b take from the form first name.. ?

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

      Yes but not with the techniques in this video. It’s a different method.

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

    Are dynamic attribute workign with ACF repeater in Bricks currently?

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

    What has happened to the L20? Don't see it. Law suite by Elementor? :)

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

      19 was the final episode.

  • @joziahreynolds
    @joziahreynolds 7 місяців тому

    Beginner... time to rewatch the series and go check out ACSS and the inner circle... My first web project is gonna be on the same level as 'Reasonable Doubt' lol

    • @Gearyco
      @Gearyco  7 місяців тому

      💪🏻💪🏻💪🏻

  • @johnklutz1403
    @johnklutz1403 2 місяці тому

    The absolute best PB9999 (it's not 101, my power level is now at 9999)! Did the LP build ever get released?

    • @Gearyco
      @Gearyco  2 місяці тому

      I’ve done them separately outside of pb101

    • @johnklutz1403
      @johnklutz1403 2 місяці тому

      @@Gearyco Sorry to ask but do you recall the title of that video? Is it in this channel or ACSS?

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

    Can data attributes be utilized in conjunction with membership plugins? For instance, if I create a query loop to show the first 3 cards and blur the remainder for non-members, could this be achieved if the membership plugin supports it?

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

      I suppose it depends on the membership plugin. I'm not sure it would be foolproof, though. People could manipulate the DOM in the inspector and undo any CSS you're using to blur things.

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

      @@Gearyco I use Sure members for a directory website and okay that makes sense. Thank You

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

    Oh no, you said Gif wrong. :P

    • @Gearyco
      @Gearyco  Рік тому +1

      It’s a hill I’m willing to die on 😂

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

    Wow! So much info and power. The beauty of UA-cam is this goldmine of info can be watched again and again. 👍🫡