A YT clone

Added distinct background colors for video-cards. I did it by channel type but some one who didn’t read this would think it is random, just like YouTube’s.

I also added title attributes to elements to tell the user what they do, or what they were supposed to do if they had functionality.

Added some videos with external help (Gemini). There was no way that I could finish adding these in a short amount of time.

Now I see why YouTube automates this process (no wonder). Overall, it has been fun looking at YouTube’s own website through the developers console. Theirs has a lot of stuff compared to mine, for instance a video player where the thumbnail is. But since I am making a static replica of the original thing, I’ve decided to keep it simple.

I changed the display type for the card grid from flex to grid. This has allowed me to scale the video cards to fit the display.

Modified the styles of the other components a little and made sure that the header is responsive to any screen size.

This took me longer than I would like to admit but I added a color change when the user presses, hovers or focuses these buttons.

I was also experimenting with the transition property and I like the fluidity. It sort of reminds me of Liquid Glass.

I’ve fixed both the header and sidebar. The styles are now correctly implemented and you can reload the page by scrolling all the way to the top. Just don’t scroll all the way to the bottom. I couldn’t fix that problem.

I got locked out of flavortown for a bit so here is the summary of the things I’ve done in these 4.5 hrs:

I initially looked at the YouTube website to learn about the header and sidebar. It had this effect where if you scroll past the contents of the pages it has some sort a “rubber-banding” effect where you can scroll for just a bit and bounce back. I really wanted to add that effect so I made a simple version of the two elements and tried to recreate it.

I didn’t succeed and I broke a lot of stuff trying to implement it so I’ve decided to not include it.

Added grid layout using flex-wrap. Now the grid is responsive.

Working on the card that lets you go to the video. So far, I have this: