This lesson just supercharged my CSS skills! I had a decent understanding of pseudo elements, but you really took it to the next level and filled in those critical gaps. Your explanation of positioning and efficiency was an absolute game-changer. I’m so excited to leave Chumpville behind and start creating smarter, cleaner designs! And that thunderstorm moment-pure gold! Just don’t get electrocuted out there, but keep bringing the lightning to these lessons! Thanks for the incredible boost! Let’s Keep It Rolling!
I know that Kevin says that repeating yourself is "chump-like behaviour", but I have said it many times before that Kevin is a natural teacher - some actual teachers never fully acquire the skill to identify with the learner. Kevin does! Another excellent description and application: learning by doing! Now to revise on "Positioning"! Peace! ❤
CLICKABLE IMAGE WITH AN OVERLAY - At 42:00, during the "image overlay" section, if your image is a clickable image, you will NOT BE ABLE to click on it anymore. Solution: if you encounter this problem, you can add [pointer-events: none;] in the [root::before] element to prevent the overlay from interfering with the mouse click, and so, keep the image (that lay below) clickable. Thank you Kevin for this video on pseudo elements!
these pseudo elements really break the "boxes within boxes" feel of most websites in a way that border radius just can't. Definitely adds a pro touch. I'm terrified of how many hours I already know I'm going to spend fiddling around with making custom little pseudo elements :P THANKS A LOT 😝😝
@@Gearyco The change has started. Building my 1st site with Bricks (ex-Divi, currently-Breakdance) Big learning curve but big lessons learnt. Adding pseudo-elements so re-watching the course again. Thanks a lot 🙏
Kevin, thank you!!!! Thank you for PB101 and ALL of your trainings. You are a real MENTOR to me!!!! Please keep on doing what you are doing 👍👍 ACSS & FRAMES ( & Frames for FIGMA soooooooon.....) = all I need ;-)
I've been building websites for years and I've learned something from every single PB101. This episode the distinction between pseudo elements and pseudo class and they way they are written ( :: vs : ) finally clicked for me. Great stuff.
You may have a gift for teaching. I applaud you for recognizing it and maximizing the impact through effort, determination, and intentional mastery of your craft! *Thank You*
Kevin, I wanted to add faint lines between blocks I added to a FRAMES element. After scratching my head for awhile not wanting to be a "chump", I remembered how you use pseudo elements like a magician. After rewatching this PB101 episode, the confusion cleared.
Thank you, Kevin, as usual! t The marker styling was unknown to me; how can you zero that left margin the bullets usually have? In your example, they are left aligned with the text above them.
My god, I have gone from chump, to not-so-chumpy after a week of binging this playlist (I loved it so much I;m gonna be watching them again to let it soak in - I even learned the word lede haha). Love it Kevin! I was keen to know your thoughts on the "Stop using code snippet plugins" by Adam Lowe on UA-cam as I am massive fan of your plugin blueprint for Wordpress but it includes a code snippet plugin like many I've seen across UA-cam land.
It's generally not a problem. If you have a site that requires a higher level of security it's a good idea to remove it. But for most projects it's a non-issue, especially if you're just using it for CSS/SCSS.
Every one of your videos is a pleasure to watch thank you ! One question tat popped up : you created an overlay using a pseudo element, and in Bricks there's already a native option to dot it i the builder. Any advantage of using one way or the other?
It's super good. Is there a way to set the width and height to the half of the image height? Let's say we need to add this class to a smaller image, then how we can adjust it to fit according to the height of the actual element?
Kevin, many thanks for this video. I want to ask you, I have a problem with responsive display (especially on mobile) with pseudo elements. Can you please advise how to do this?
amazing lesson Kevin! Thank you very much! Just a question: what is the best way to parameterize a class? In your videos you do this by inserting the custom CSS inside the element. Or maybe it's better to write them all in Bricks custom CSS? But that way I have to go out and do it "blind" every time...
@@Gearyco Hi Kevin, thanks for the quick response! for example, at minute 21:07:00 you created a ".media-accent" class and then entered the values in the "CSS -> Custom CSS" field of Bricks Builder. Is this the correct procedure or is it preferable to create and insert the values for the class created in Bricks -> Settings -> Custom Code?
Would it be possible to get a highlight style with this. Like ; ‘Duo tone Heading’ in which the word Heading gets a background color with some padding? If yes how would this work?
Suppose I had the text "Hello I'm a short Sentence" and I wanted to style the letter "A" using CSS to apply a slight rotation. How could I achieve this? This is just for illustration purposes.
Another great lesson in the series. I'll need to rewatch the positioning video, well more likely most all of the videos to keep everything fresh in my mind, but a worthwhile time investment.
Kevin, great lesson. Since this was a introductory course and not generally focused on Bricks, what are your thought on using the Bricks pseudo element features versus hand coding in the CSS block versus using something like wpCodeBox to manage the CSS? I have an opinion (more the wpCodebox route for reuseability outside of Bricks), but curious to know yours.
Thanks, Kevin, for this pseudo elements lesson. Going to re-watch this a second time. Looking forward to the next tutorial/class (pun intended) on: pseudo classes. Thanks again, Kevin.
You don’t, you just keep aligning the W to wherever you want it to go. I would recommend using a longer paragraph and then you can see exactly what needs to happen.
From somebody who doesn't have any experience in CSS or coding background, your videos help me a lot in understanding the basic that one should practice! Thanks a lot!
@@Gearyco got you I guess I d have to practice enough to know when you want something to stay the same size in mobile as it is on Desktop... This must be one of those situations
Mandatory Side Quest: Watch this training on positioning elements: ua-cam.com/video/wAvjJ3p5iSM/v-deo.html
Can you apply the accent box effect to divs / containers?
yep@@websiltd
This lesson just supercharged my CSS skills! I had a decent understanding of pseudo elements, but you really took it to the next level and filled in those critical gaps. Your explanation of positioning and efficiency was an absolute game-changer. I’m so excited to leave Chumpville behind and start creating smarter, cleaner designs! And that thunderstorm moment-pure gold! Just don’t get electrocuted out there, but keep bringing the lightning to these lessons! Thanks for the incredible boost! Let’s Keep It Rolling!
I know that Kevin says that repeating yourself is "chump-like behaviour", but I have said it many times before that Kevin is a natural teacher - some actual teachers never fully acquire the skill to identify with the learner. Kevin does! Another excellent description and application: learning by doing! Now to revise on "Positioning"! Peace! ❤
CLICKABLE IMAGE WITH AN OVERLAY - At 42:00, during the "image overlay" section, if your image is a clickable image, you will NOT BE ABLE to click on it anymore. Solution: if you encounter this problem, you can add [pointer-events: none;] in the [root::before] element to prevent the overlay from interfering with the mouse click, and so, keep the image (that lay below) clickable.
Thank you Kevin for this video on pseudo elements!
these pseudo elements really break the "boxes within boxes" feel of most websites in a way that border radius just can't. Definitely adds a pro touch. I'm terrified of how many hours I already know I'm going to spend fiddling around with making custom little pseudo elements :P
THANKS A LOT 😝😝
Kevin, the internet will remember You as The Guy who made web design great again.
Thanks for your efforts.
You're going to win so much you're going to get sick of winning. It's gonna be yuge.
@@Gearyco Trying to get ready for that 😅
@@Gearyco The change has started. Building my 1st site with Bricks (ex-Divi, currently-Breakdance)
Big learning curve but big lessons learnt.
Adding pseudo-elements so re-watching the course again.
Thanks a lot 🙏
18 videos in, and I've learned more than any paid course has ever shown me! It helps that I already have the LTD of Bricks.
I come prepared to these lessons, I wear safety glasses and rain gear. Great stuff
💪🏻🙏
Kevin, thank you!!!! Thank you for PB101 and ALL of your trainings. You are a real MENTOR to me!!!! Please keep on doing what you are doing 👍👍 ACSS & FRAMES ( & Frames for FIGMA soooooooon.....) = all I need ;-)
Kevin, you are Mr Beast of CSS, helping us all to grow. Thank you very much!
I've been building websites for years and I've learned something from every single PB101. This episode the distinction between pseudo elements and pseudo class and they way they are written ( :: vs : ) finally clicked for me. Great stuff.
You may have a gift for teaching. I applaud you for recognizing it and maximizing the impact through effort, determination, and intentional mastery of your craft!
*Thank You*
You are the best, since I found you on YT I only watch your videos and the other i did watch before are out. Thanks for all
you are a natural born teacher. thank you for the training!!
Thx!
Kevin! You are a phenomenal teacher! Thx!
Thank you 🙏
Amazing! Your dedication to creating high-quality, and informative content is truly admirable ❤🙏
Thank you so much 😀
Kevin, I wanted to add faint lines between blocks I added to a FRAMES element. After scratching my head for awhile not wanting to be a "chump", I remembered how you use pseudo elements like a magician. After rewatching this PB101 episode, the confusion cleared.
Good to hear!!
Refactoring, it's not just for server side code. I'm digging the lessons inside lessons!
Thank you, Kevin, as usual! t The marker styling was unknown to me; how can you zero that left margin the bullets usually have? In your example, they are left aligned with the text above them.
Anything can be done with margin/padding. A lot of times it's on the ul instead of the li --- just have to inspect and see where it's coming from.
Well done, Thx Kevin.
I really was a savage psychopath, wasn't I? What have I done?
My god, I have gone from chump, to not-so-chumpy after a week of binging this playlist (I loved it so much I;m gonna be watching them again to let it soak in - I even learned the word lede haha). Love it Kevin! I was keen to know your thoughts on the "Stop using code snippet plugins" by Adam Lowe on UA-cam as I am massive fan of your plugin blueprint for Wordpress but it includes a code snippet plugin like many I've seen across UA-cam land.
It's generally not a problem. If you have a site that requires a higher level of security it's a good idea to remove it. But for most projects it's a non-issue, especially if you're just using it for CSS/SCSS.
@@Gearyco nice. Thanks for getting back so quickly.
Every one of your videos is a pleasure to watch thank you !
One question tat popped up : you created an overlay using a pseudo element, and in Bricks there's already a native option to dot it i the builder. Any advantage of using one way or the other?
Using the css box is way better workflow efficiency
Спасибо, отличный урок.
The moment I saw the lady on the plane meme, I just had to press the like button lmao
💪🏻
It's super good.
Is there a way to set the width and height to the half of the image height?
Let's say we need to add this class to a smaller image, then how we can adjust it to fit according to the height of the actual element?
% is possible too
Thank you @Gearyco. May I ask how you "remove elements from your Bricks install"?
Just hide them. There’s a snippet in the inner circle.
Excellent tut
Kevin, many thanks for this video. I want to ask you, I have a problem with responsive display (especially on mobile) with pseudo elements. Can you please advise how to do this?
Not usually, no.
amazing lesson Kevin! Thank you very much!
Just a question: what is the best way to parameterize a class? In your videos you do this by inserting the custom CSS inside the element. Or maybe it's better to write them all in Bricks custom CSS? But that way I have to go out and do it "blind" every time...
Not quite sure what you are asking?
@@Gearyco Hi Kevin, thanks for the quick response!
for example, at minute 21:07:00 you created a ".media-accent" class and then entered the values in the "CSS -> Custom CSS" field of Bricks Builder.
Is this the correct procedure or is it preferable to create and insert the values for the class created in Bricks -> Settings -> Custom Code?
Just a suggestion. You can zoom in your website a little bit so it will be clearer for those who use small screen. ❤
By the way I am on L06.
Oh, I fixed it! Just set conditions for my theme style!
The problem later on is to remember in what wrapper I put the code of this pseudo element.
Doesn't Bricks have pseudo elements in their CSS parameter settings? eg. image overlay or background overlay?
Bricks pseudo element area should be avoided. It’s not well done.
Would it be possible to get a highlight style with this. Like ; ‘Duo tone Heading’ in which the word Heading gets a background color with some padding? If yes how would this work?
Wrap the word you want to style in a span tag and give it a class like .highlight
Suppose I had the text "Hello I'm a short Sentence" and I wanted to style the letter "A" using CSS to apply a slight rotation. How could I achieve this? This is just for illustration purposes.
Wrap it in a span tag and style the span.
I was not expecting 0:35 😆.
Gotta keep you on your toes.
@@GearycoWho is the physically attractive angry woman? 🤔 We need to know. Lol😅
@@derekshort Do you live under a rock? Lol. knowyourmeme.com/memes/that-motherfucker-is-not-real-plane-woman
wow! That's awesome!! The others are psychopaths 🤣 divs coming out of our ears 😂😂
Another great lesson in the series. I'll need to rewatch the positioning video, well more likely most all of the videos to keep everything fresh in my mind, but a worthwhile time investment.
"That mofo back there is not real" 😂
hahahaha the mf is not real. Well, but she is, so I am sorry for her having such a public bad day. Wish her well.
Kevin, great lesson. Since this was a introductory course and not generally focused on Bricks, what are your thought on using the Bricks pseudo element features versus hand coding in the CSS block versus using something like wpCodeBox to manage the CSS? I have an opinion (more the wpCodebox route for reuseability outside of Bricks), but curious to know yours.
I hate this bricks pseudo area. One of the worst parts of bricks IMO. I write custom CSS for all that.
Love your video as always this is super useful
It's so obvious once you know👍🏼
I know "DRY" but THANKS again Kevin!😆 You literally save and elevate my life ❤🧡💛💚💙💜🤎
Appreciate you!
Thanks, Kevin, for this pseudo elements lesson. Going to re-watch this a second time. Looking forward to the next tutorial/class (pun intended) on: pseudo classes. Thanks again, Kevin.
It'll be right ::after this one.
Eye sea what you did there, Mr. Geary.@@Gearyco
@@GearycoI.C. what you did there. 😉
How do you align the text after the big red W? The following characters look pushed up.
You don’t, you just keep aligning the W to wherever you want it to go. I would recommend using a longer paragraph and then you can see exactly what needs to happen.
Good lesson
Thanx Kevin, Best explanation of pseudo elements I have ever got.
Glad it was helpful!
From somebody who doesn't have any experience in CSS or coding background, your videos help me a lot in understanding the basic that one should practice! Thanks a lot!
Good video. Thanks! I already knew about these but it was a good reminder. I will have to actually use them to impress clients.
Is this the last PB101 video? I am getting withdrawal symptoms waiting for another! 😉
No, 3-4 more coming
@@Gearyco Phew! 😉👍😀
Great tutorial on Pseudo Elements ! Thank you Kevin 😀
Excellent lesson. Thank you.
And I thought I knew pseudo elements 🤔
Why are you using pixels for the media accent and not rem or en?
Because I don't want it to scale with the users root font size. I want it to stay the same size at all times.
@@Gearyco got you I guess I d have to practice enough to know when you want something to stay the same size in mobile as it is on Desktop... This must be one of those situations
@@jerryb6728 px/rem isn't about mobile, really, it's about what happens when the user adjusts their root font size.