วีดีโอ

Thanks for the visit!

Great to hear! 👍

You can either compare your code with the demo link in the description or share your version with me. I may be able to debug and help.

Thank you! You might be using separate HTML elements for each column and adjusting their heights with CSS. That's a nice solution, although it requires a new element for each column. Honestly, I've never seen a CSS-only solution for creating a line graph. Most of them use either JS or SVG in some way.

Thank you!

Thank you! I'm glad the content helped you discover new concepts.

Thanks for watching!

Thank you! I'm glad you enjoyed it.

Thank you! Your support means a lot.

Awesome, thank you!

Thank you for your feedback! I appreciate your input and always strive to improve. These videos aim to include information that benefits developers of all levels, including beginners, so sometimes we need to set the foundation. Please let me know which parts you found unnecessary and where I could be more concise.

Nope 😊

Thanks!!

Thank you so much for your kind words! I'm glad to hear that the explanations helped clarify things for you. Appreciate your support!

Thanks! Using clip-path for menu animations can indeed create some cool effects. I have seen some off-the-viewport menus animating on hover etc. Performance issues may occur if the animation is complex and involves several points morphing between shapes. You might try optimizing animation by reducing the number of points or by using the transition property instead of keyframes. Keep in mind that any type of animation can be resource-intensive, not just those using clip-path.

Thank you! I'm glad you found the video helpful and discovered something new.🤞

Thanks for the feedback! Yes, using ch units could be an option to fine-tune the overall effect.

😊

Thanks for sharing another trick! It's always great to discover new approaches.

Thank you! I wish I had a time machine to go back and help out-I could have been learning along with you! 😊 But seriously, I'm glad you're here now and enjoying the content.

Aren't you still? :)

yeah, I'm still learning. It never ends...

Thanks so much! I appreciate the suggestion. Making a course does require a lot of time and resources, but it's definitely something to consider for the future. Glad you're enjoying the content!

Thank you! Using a CSS grid would make that easier. You could set up two columns in the middle, like "1fr 40% 40% 1fr". The image could then span lines 1 to 3, with the text from lines 3 to 5. The remaining content would start at line 2 and end at line 4.

@@OptimisticWeb Thanks.

Thank you!

Yes, that can be done. One of the possible solutions will be to have two pseudo-elements with different colors, then apply rotate(0deg) and scaleX(-1) on one of them to switch its direction.

@@OptimisticWeb i will try it myself, but can you create a video on it? Thanks

Glad you liked it!

Thank you! I'm glad you found the tutorial helpful. If you can share your CodePen, I can take a look and help debug the issue. Just a heads-up, adding multiple animations like this on a page can negatively affect performance and user experience, so it's worth considering the overall impact.

Thank you! Glad you found the video helpful.

We used to rely on JavaScript for such tasks, but CSS has become quite advanced. Thanks for watching!

Thank you!

Thank you for your kind words! I'm glad to hear that you found the content useful and learned new things. Your feedback means a lot.

You're welcome!

Thank you! Glad you like them.

Thanks for the feedback! Yes, it can be converted to a button, or we could use aria attributes to enhance the experience for assistive technology. To keep the video focused on the main topic, I opted for a simpler approach.

could u explain in layman's language wdym

@@kYt0-cz3hk Some people use screen readers that read websites for them. Usually people with a visual impairment. In order to make it possible for the screen reader to understand the website we need to make it as straightforward as possible. The tags should make it clear what the role of the element is as much as possible so your navigation should be between <nav> tags otherwise it just looks like another list. Ideally there would be only one <nav> tag so the screen reader can go there instantly when needed. A button should be for submitting or any clickable option. An anchor tag <a> should be a link to another page. If you do end up using a tag differently you can give it an aria-attribute to say what its new role is (menu, input, etc.) so screen readers can still understand. In this specific case I don't think it's a big deal since the screen reader doesn't need to expand the side bar to be able to see the names of the buttons, it's only a visual effect, and I doubt anyone would choose the collapse option when they hear it because it's simply not relevant to them and it's also unlikely that they would think it's going to navigate them somewhere else. But it's good practice to avoid any ambiguity. There used to be a lot of attention for 'skip-to-main' links a couple of years ago to save impaired people from dying of boredom trying to get through all the navigation links and other stuff at the top of the page that they won't need the first time they visit a site but that seems completely gone these days.

@@robinheyer708 Thanks for your detailed response and contribution!

​@@kYt0-cz3hk I just noticed that robinheyer708 's reply isn't showing up on TH-cam. Seems the use of HTML tags in their reply has messed things up, so I am adding the same here. Some people use screen readers that read websites for them. Usually people with a visual impairment. In order to make it possible for the screen reader to understand the website we need to make it as straightforward as possible. The tags should make it clear what the role of the element is as much as possible so your navigation should be between nav tags otherwise it just looks like another list. Ideally there would be only one nav tag so the screen reader can go there instantly when needed. A button should be for submitting or any clickable option. An anchor tag should be a link to another page. If you do end up using a tag differently you can give it an aria-attribute to say what its new role is (menu, input, etc.) so screen readers can still understand. In this specific case I don't think it's a big deal since the screen reader doesn't need to expand the side bar to be able to see the names of the buttons, it's only a visual effect, and I doubt anyone would choose the collapse option when they hear it because it's simply not relevant to them and it's also unlikely that they would think it's going to navigate them somewhere else. But it's good practice to avoid any ambiguity. There used to be a lot of attention for 'skip-to-main' links a couple of years ago to save impaired people from dying of boredom trying to get through all the navigation links and other stuff at the top of the page that they won't need the first time they visit a site but that seems completely gone these days.

Glad you liked it!

Thank you!

Thank you! By the way, did you check out the mosaic layout video? It covers how to set up a gallery layout using CSS Grid.

Sure, the demo link is ready in the description.

Thank you!

You're welcome!

Thank you!

Thanks ✌️

Thank you!

Thank you!

Sounds good! You can start with this th-cam.com/video/XGKj4HtIcGo/w-d-xo.html

@@OptimisticWeb I will check it out

Thank you for the suggestion! We actually have 3-4 playlists already available on our channel. If you have any specific ideas for a playlist you'd like to see, please let me know.

You're welcome!

It depends on the layout and what you are trying to achieve. However, you can use sticky sidebars as shown in this video th-cam.com/video/znmdx4UZTAg/w-d-xo.html

Thanks for the feedback.

You might be missing the top padding on the main element.

Never mind I saw what I did wrong I never gave padding to the main section thank you : )

Thank you! Glad you liked it.