Tiny Component With Vanilla JS

@correlucas

Hey! I haven't actually tried to make this challenge without JS, but it might be possible given that you can use the "checkbox hack" to create the popup menu for the card component (which I see is what you did in your solution to this challenge) and that you can style the desktop popup menu to look different in the mobile view (which is what I did in my solution to this challenge). Check out lines 155-187 in these styles. You'll have to use a media query to adjust the size and position of the popup menu and the items inside it. 😉

Even though creating these challenges without JS is fun, nowadays I do not recommend it so much because it is often simpler to use a little bit of JS to accomplish the same thing and often times it is much more accessible. Have fun, though! 👍

@aadigit

Hi, aadigit! 👋

It's fine to set a fixed width and/or height for certain elements in your site—I usually like to allow elements to be sized by their content so that there isn't too little or too much space. But don't worry too much! For this challenge, you could set a fixed width for the card component and simply change it with a media query when the width of the screen becomes small (you can allow the height of the card to be determined by its content, though).

When I was beginning web development, I tried to make things responsive by setting lots of dimensions in percentages, but that doesn't work out so well for me all of the time because then it's hard to predict how things will look at certain screen sizes and things sometimes become a little messy.

I think setting fixed dimensions for elements is okay as long as you take into account how they will look or affect the layout of the site when the screen is small/medium/large. Sometimes, percentages will work better. It depends on the element and the context and the elements around it. But with practice, you'll be able to choose which elements of your page should have a fixed width/height and which ones should have a variable width/height based on something else like their parent container or the viewport.

Hope that helps. 🙂

@Darknessflowers

Thank you very much!

@LaBoiteDeCarton

Thanks for the feedback and the tip! I'll certainly look into that!

@tarasis

Thanks for the feedback! 👍

I've heard that setting the font-size to a percentage rather than an explicit value gives the user a little more control over how the page appears. This is because although the default font-size for most browsers is 16px, sometimes, users set their own default font-sizes. Setting the font-size to a percentage means that the design will scale to the font-size the user chooses.

I haven't actually really tested it out or anything, but I just do it as a good practice, I guess. 😉

@CSumm

Thank you!