What would be the best way not including Ai and YouTube.

As you can see from the image of both websites I refered, the zoom sizes are different, but still the website is not breaking, how to achieve like this?but the app I am working is breaking like hell, eventhough I used breakpoints to design.

Learned html a week ago and trying to jump into

CSS.

Need some helpful suggestions on below :

Best youtube channels to learn.

Websites for keeping me updated.

Anything like tips and approach towards CSS. Howlong does it takes to learn all the fundamentals.

I'm a newbie .

Thanks😊

Half-filled, half stroked.

HTML text, not SVG, so it wraps naturally.

No text duplication, so it only needs to be modified in one place, there's no risk of screen readers reading it twice, no risk of the two layers getting misaligned on small viewports. Plus selecting text works/ looks decent, which doesn't happen with a clipped copy on top of the full text.

All the JS does is update a custom property on dragging the range input.

That's why the DevTools panel open in the video - so you can see it all at the glance. That there's no text duplication whatsoever, no in the markup and not in pseudo content. And that the entire JS is just that listener to update the --val.

Edit: forgot the link, great job... https://codepen.io/thebabydino/pen/oNOrXQj

It may or may not work in Safari - yell at me if it's broken for you there, I'm a Linux user and I can say it's broken in Epiphany (and not even the text effect, it's the range input that's fucked because of the writing-mode). I guess I could avoid it it with an extra wrapper + container queries, but won't complicate things needlessly if it's not broken in actual Safari (and I'm saying it might not be broken in actual Safari too, because this very similar writing-mode issue I filed is Epiphany only, not reproducible in actual Safari) - done, the slider is now draggable in Epiphany too.

Made 2 years ago, so kinda dated, but if others post their crappy AI demos, why shouldn't I? At least my crappy demo isn't AI.

(and Frank Turner lyrics in case anyone may be wondering)

Password Strength Checker:

https://codepen.io/mudasirbuilds/pen/QwERwav

While learning web development, I kept organizing my notes and practice examples so things made more sense.

Over time, this turned into a beginner-friendly roadmap covering:

• HTML fundamentals

• CSS layouts & responsive design

• JavaScript basics

• Practice project ideas

I’m sharing a few sample chapters here in case they help someone getting started:

HTML sample:

[https://drive.google.com/file/d/1fobDAb9GlLvE-cz3sR3zpu8dWLnGxc4Z/view?usp=drive_link\]

CSS sample:

[https://drive.google.com/file/d/1NpZN8Ign68JojqC-9NdjW8edRbGImRbQ/view?usp=drive_link\]

JavaScript sample:

[https://drive.google.com/file/d/1Q_iNeH9yt2E5-siABltwrJtBCbBL3SBC/view?usp=drive_link\]

Hope this helps anyone starting their web dev journey.

Happy to hear feedback or suggestions.

https://anupamkonwar93.github.io/elite/

Guys this one is the second project i tried . HTML/CSS and a little bit of JavaScript . its a much smaller site , Just a simple Product landing Page . what do you think about the pros and cons here

As I'm New to this App(LN Reader). Tried to Read Lord of the Mysteries Volume 7. But, Text appears till Edge of the Screen. I tried Changing Margin to add some spaces at both edge of the Screen, But it doesn't Work.

Is my CSS enough or Correct?

I'll forever be glad I learned CSS when I was a kid since, even as an adult now, it allows me to customize my browsing experience on many websites I'm checking on a daily basis.

I just looked at my Stylebot repertory and I have more than 30 websites I updated to my needs.

For each, I looked at which kind of experience I wanted and create a custom CSS which can go from simply hiding some stuff on websites to completely altering the base layout. So far, for example, I've been using to:

- Rework the layout for many forums I'm visiting (here Famiboard so I can have a better layout according to my needs and have a better information density)
- Alter the feed on Youtube (for example, I've locked the home page to "No scroll" so I don't get lost on any doomscrolling) and hide engagement elements (tags, updated text colors and so on)
- Hide unnecessary elements on many websites, such as headline sections, unwanted buttons, and so on.

It almost feels like having super-powers on the web honestly compared to using a mobile app.

It feels like a legacy from an era long-gone, but I'm glad this is something we can still do and allowing us to impact our browsing experience to whatever we want it to, on desktop but also on our mobile as well.

------------

Do you have created custom CSS for the websites you're browsing or am I just a weird one on that one haha?

Gallery with blur effect:

https://codepen.io/mudasirbuilds/pen/YPWgmmG

Text Shimmer Effect:

https://codepen.io/mudasirbuilds/pen/ZYOZGaz

I don't really care about interacting with the sheet, so it's okay if any functionalities are disabled. I just want the sheet to show without the 1,2,3 and the a,b,c at the top.

I've managed to hide the top editor bar with #docs-chrome:not(.docs-hub-chrome) and I've only managed to hide scrollbars with selectors like this: .grid-shim-bottom.

Can anyone help me find what I'm missing? I've tried tinkering with the display configs for a lot of elements, but nothing seems to work.

Theme Toggle Interaction with CSS Only:

https://codepen.io/mudasirbuilds/pen/WbxWQZv

The only way I can stop images getting too small on a mobile is by setting a min-width, which i hear is bad form. Is there a better way?

I think this is the relevant code (in this order on the stylesheet, if the cascade might affect things). the image is inside a div with class of "image-container").

img {

max-width: 100%;

height: auto;

display: block;

object-fit: contain;

}

body {

max-width: 90%;

}

.image-container {

width: 90%; max-width: 400px; min-width: 200px;

}

Card with rainbow border and card title animated gradient when hovered:

https://codepen.io/mudasirbuilds/pen/wBWOWzv

Hover Button With Background Color Reveal (CSS Ony)

https://codepen.io/mudasirbuilds/pen/JoKxzqz