Learn Accessibility by Building a Quiz - Step 8

Tell us what’s happening:

TL;DR: So far, we’ve studied different ways of setting width or height, as in, pixels, em or root em, vw & vh. Also, ways like defining a particular width, but still setting up max. and min. width and now this one that uses a max function. I understand how they all work, but my question is: How are we supposed to know which way is the most appropriate for any given situation? (Besides, the obvious years of practice and experience of course)

To go in further detail, as I understand it, px is the most basic/standard way of setting width etc., em and rem help in making it easier to set everything in accordance to the font size of (nearest) parent element and html element, respectively. While vw and vh are most probably doing the same thing by focusing on the dimension of the user’s viewport (screen?). The one with defining max. and min. width even after setting up a fixed value for width was most likely for having a preferred fixed width but still making it a bit flexible to different screen sizes (Topic 4: Creating a registration form). I just don’t feel like I’d know which one to use if I was not being instructed and undertaking a project on my own. Am I not thinking of something due to which I can’t put this info to use as properly and confidently as I’d like?

Sorry, if this seems like a dumb question and thanks in advance for your time :slight_smile:

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
    <title>Accessibility Quiz</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <header>
      <img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
      <h1>HTML/CSS Quiz</h1>
      <nav></nav>
    </header>
    <main></main>
  </body>
</html>

/* file: styles.css */
body {
  background: #f5f6f7;
  color: #1b1b32;
  font-family: Helvetica;
  margin: 0;
}

/* User Editable Region */

#logo {
  width: max(100px, 18vw)
}

/* User Editable Region */

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36 Edg/120.0.0.0

Challenge Information:

Learn Accessibility by Building a Quiz - Step 8

1 Like

its not a dumb question and I can imagine quote common among other learners aswell including myself. But it honestly all depends on what you are trying to build or achieve and your confidince in choosing the right values grows with experience and practice so just keep making and practicing different designs and layouts.

The relative units are the ones I find easiest to choose but most daunting at first but they are relative so just break it down like that and dont overthink it. If you want it to take up half the page then 50vw is your value and depending on how you want to arrange it to you can just work it out thorugh the max value of 100. Hopefully that all make sense but trust me you are definetely overthinking it but thats never a bad thing!

Keep practicing and you will get confidence with it, happy coding!

2 Likes

Yeah, I’d say I do overthink, haha. But I guess, it’s nice to know that it’s just a normal phase that most go through rather than some kind of inability in terms of logically being able to put what I learn into practice. I’m just always wondering whether CSS is more science or art. Cause the nature of subject would make you think that it’s science but the way I have to tweak things using totally random values to make them look ‘even’ makes it seem leaning towards art as well very much. So, I just get confused whether I’m doing it the right way if I have to randomly tweak things rather than just being able to draw a bigger picture of what needs to be done right at the beginning. The only reassuring thought is I know English is also science when it comes to linguistics but it’s no less of an art either cause 2 people can achieve the same result but through very different ways, maybe this IS like that too. The only daunting thing in this case is keeping in mind how what I’ve made would respond to different screen sizes, haha. But thanks a lot for the encouragement! :slight_smile:

1 Like