{"id":72,"date":"2025-03-08T01:59:13","date_gmt":"2025-03-08T01:59:13","guid":{"rendered":"https:\/\/sohilghunowa.uk\/Notes\/?page_id=72"},"modified":"2025-03-09T21:28:16","modified_gmt":"2025-03-09T21:28:16","slug":"seminar-presentation-functional-pseudo-classes","status":"publish","type":"page","link":"https:\/\/sohilghunowa.uk\/Notes\/","title":{"rendered":"Seminar Presentation – Functional Pseudo-classes"},"content":{"rendered":"\n

Introduction<\/strong> <\/p>\n\n\n\n

For my seminar presentation, I wanted to explain functional pseudo classes in a live practice. My goal with the presentation was to spend as little time as possible explaining the slides and spend more time showcasing the features of some of the pseudo classes that I chose. <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

In the first slide I wanted to briefly explain the use of a functional pseudo class so that people will understand when and how to use them. I wanted the slide to be simple and avoided overloading it with too much information. I also briefly explained the two main pseudo classes that i will be demonstrating. <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

The next slide contained the link to the Codependent where I would explain how to use the pseudo classes. I decided to start with an example that everyone can relate therefor people can clearly understand the usefulness of the pseudo classes.I started with a situation that everyone could relate to then expanded my explaination off of that. I made sure that the explaination was short and simple by only targeting the colour of the heading so that they could easily see the difference when coding.  <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

In this slide, I decided to remind the benefits of using the functional pseudo so that people will realise the utility of the classes. I made it simple and straightforward and expanded a bit on each point when explaining it to the class. <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

In this slide, i decided to introduce the most important part of the presentation. Introducing the \u201c:has()\u201d pseudo class after the previous one makes it easier to understand. I also demonstrated the ability of the latter using CodePen and explained it step by step and showing how it affects the styling. <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

I quickly went through the benefits of the pseudo classes as a quick reminder and I will also use this opportunity to explain the difference between the :has and :is() pseudo classes. <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

This slide, I will talk about the browser support of the pseudo classes used and whether it is safe to use them. I will also talk about the importance of having a fall-back styling in case the browser does not support the pseudo classes. I will include the name of the website where people can check the compatibility and invite them in using the website. <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n

The two last slides will contain the reference for research that I conducted before presenting the seminar and links to relevant article and videos where people can learn more about the subject. <\/p>\n\n\n\n

Download Seminar slides here<\/summary>\n

<\/p>\n\n\n\n