Stats Challenge Solution

Community feedback

• 

  Rafal•1,395

  @grizhlieCodesPosted over 3 years ago

  Hi Denzell, thanks for your solution! I had a look and I think this is a great opportunity to learn about a few concepts that I wish I was made aware of sooner.

  The issue with using positions relative and absolute is that this breaks the normal document flow. You're telling the brower to ignore the usual rules of layout for the select elements. But the remaining elements won't respect this new 'order' of the absolutely-positioned elements so it'll become a mess unless the position absolute is for a tiny styling adjustment, some background-shape position or a 1px underline for a <p>, etc.

  I have a suggestion for this particular project as I think it's a great way to learn (redoing projects to really encapsulate some new concepts, see before and after). For context I redid the entire Designo project from FEM. I learned more on that project about hmtl/css than any other. Anyway:

  1. Re-code the project mobile-first. Start with the mobile design. The purpose for this is simple: it is easier to start simple and increase in complexity, than it is to start complex and decrease complexity via media queries. This is a pattern you will find in just about anything.

  2. For the media queries use min-width.

  3. Try using clamp to size your text with, it's quite amazing how so little code can add so much responsiveness. This video from Kevin Powell nicely covers clamp I think. Play around with it in codepen is my advice :). This tool is also nice to help you figure out that middle value in clamp (you will know what I mean after you learn a bit about it).

  4. For positioning of the text/left side of this card, just use flexbox. Don't use position relative/absolute. If you want any advice specific to any part of this project just narrow it down for me and i'll go through anything you might need in detail. (like what desired behaviour you are looking for and what is happening currently could help :) )

  5. This piece of advice may sound weird at first so I'll expand a bit on it afterwards: try not setting a height anywhere but the body. So do the typical body { height: 100vh; width: 100% ; /* other code you have*/ and then don't set the height for the card. Instead allow your content, in this case it will most likely be your text, to set the height of the left side. The image may need a height as a 100% or something along those lines. Perhaps you can use object-fit and object-position for the image.

  I noticed you set a lot of heights: 100%. This is mostly unnecessary. If you take a peek at this project I did you will notice that I used height once, for the body. And hopefully you'll agree that this solution is more or less pixel-perfect (I wasn't going for pixel perfect mind you). I was simply going for making sure that the font-sizes, line-heights, paddings, margins and flex-gap or simply gap these days were correct.

  The reason for thinking this way is because lets say your data/html is coming from another source, an API lets say or you don't know how much text there is in something. So touching height immediately creates a potential problem: what if there is too much content for the height to handle? This is where 'content-first' thinking comes in handy. You allow the content to dictate the height after a few adjustments to the content directly. That way whether you add 1 or 50 more words, nothing will break. It's also just a cleaner way of coding I think.

  All in all, I'm trying to share some simple fundementals of responsive layout. Give them a go if you want and see how you fare. I'll be happy to re-review anything in more detail if you'd like then. At the moment I think it's a good idea to redo this project and try using some of the above 'tools'.

  I say this after having redone the Designo project from scratch.

  Marked as helpful

  1

  ---

  

  Denzell Dy•30

  @DenzDyPosted over 3 years ago

  @grizhlieCodes Hi, I'm currently in the process of redoing this challenge and your tip on going for a mobile-first approach has helped alot. But when making the website responsive, I've run into some issues regarding the min, max, and clamp functions. I've used vh and vw for my measurements but I don't really know how to put that into the functions since I'm not sure how the units work on the min and max functions. I've changed these to px for now, but I don't really feel comfortable using px for measurements since I have to be precise. Any help is appreciated!

  0

  

  Rafal•1,395

  @grizhlieCodesPosted over 3 years ago

  @DenzDy For clamp max and min are usually in REM/px. Using a dynamic size on a 'max' missed the beauty of it. The middle (preferred) value is where you want a dynamic size to go.

  This will usually be a mixture of some rem + vw.

  Pixels actually are as precise as it gets in a way. Everything ends up being calculated in pixels. The issue is setting max-heights or heights in general with pixels as content tends to flow out of containers when it's adjusted slightly from the original designs.

  Also, your font-sizes seem to be in vh. This is a very bad idea 😅. Lets take this as an example:

  .text h3 {
     font-size: 5vh;
  }
  

  This will grow forever! What you want is to use REM units for font-sizes. In general REM is your best friend. There are other viewpoints on this of course and to be honest you can spend quite a while learning about each approach. I, for now, opted for a simple approach.

  :root {
       font-size: 62.5%;
       /* now when you type font-size: 1rem it will equal to 10px. 1.5rem = 15px, etc.  */
      /* by default 1rem = 16px or whatever font-size is set in html/:root */
  }
  

  Once you set a font-size it shouldn't change in between the minimum and maximum.

  I could make a video doing this challenge from scratch if you'd be interested and try explaining why I'm doing everything, i could be comparing it to your solution on the go perhaps?

  0

  

  Rafal•1,395

  @grizhlieCodesPosted over 3 years ago

  @DenzDy One more seperate question, where did you come across setting stuff in vh/vw so much? These are generally not used as much anywhere I've seen, wondering if it's an experimentation-led solutions or some resource I'm not familiar with (or methodology)? Thanks!

  0

  

  Denzell Dy•30

  @DenzDyPosted over 3 years ago

  @grizhlieCodes I joined a front-end dev. camp and the solution for the task had vw units in the font sizing. The use of vw in the challenge did make sense though since it was made without and responsive css in mind. When should I be using the viewport units instead of px and em? Also when should I be using px? Also, the video of you making this would be great too. Thanks in advance!

  0

  

  Rafal•1,395

  @grizhlieCodesPosted over 3 years ago

  @DenzDy Interesting, I'd never use them. Seems like a weird solution, or at the very least a limited + outdated one? I find this to be the case with 50% of the stuff I uncover online. (I was very slow and careful choosing what I learned. I usually try finding YouTubers who know damn well what they are talking about and stick with them, Kevin Powell for example).

  Viewport units are a rare case I think. We have better tools at our disposal now. I'm drawing a blank as to when I might have used vw (there are definitely cases where you can use it but there are not common i think). I think the only thing I use them in is clamp 😅. Because clamp lets you increase the font size with the viewport BUT it sets a maximum. Imagine my screen (49") with the webpage maxed out. The font would be HUGE and unnecessarily so. Realistically most websites will have a max-width, for the content at least. Sometimes background related stuff can overflow, no problem. But the content can't be spreading into infinity based on the viewport, it wouldn't work and for most sites, there's just no need for it.

  body {
      width: 100%;
      height: 100vh; /* here we use vh */
      display: flex;
      flex-flow: column nowrap;
      align-items: center; /* center our child/ren */ 
      padding: 2rem;
  }
  
  .content {
        width: 100%;
        max-width: 1110px;
  }
  
  

  Simple example of what is perfectly fine to do. Since we are setting a max-width for our content there is absolutely no need for the font to be THAT dynamic that it starts overflowing anywhere.

  I'll record my solution and will link it here. I'm pondering on YouTubing and trying to learn + teach best principles/practices I come across. I find that a lot of stuff out there is outdated when I'm researching best practices, best bet is some CSS Tricks articles usually 😅.

  I usually use REM throughout my projects. Almost never use px. I avoid EM since it usually results in weird behaviour in some cases, possibly due to my ignorance of it or lack of forethought.......

  Anyway - I See what you mean. I suppose thinking that vw makes sense for a font-size that needs to be dynamic does make sense at first. Clamp is the best way of achieving this now due to the already-stated benefits. Whilst it does include vw, it most certainly needs that max width in px/rem.

  Simple example of clamp in action.

  I made a video for another Frontend Mentor person that may benefit you, it's for the User Preview Card challenge. I try building it whilst using as clean code and best practices (to my knowledge) as I could. Link here if you think you might benefit from it.

  0

  

  Denzell Dy•30

  @DenzDyPosted over 3 years ago

  @grizhlieCodes Also, should I be using clamp on padding, width, and height aswell?

  0

  

  Rafal•1,395

  @grizhlieCodesPosted over 3 years ago

  @DenzDy up to you. I choose depending on whether it seems to be working or not. Sometimes it’s better to just stick with a media query.

  0

  

  Rafal•1,395

  @grizhlieCodesPosted over 3 years ago

  @DenzDy Howdy! Ended up recording the video today. Still testing some video-quality settings but it seems crisp to me. Either way I go through just about everything I could have thought of. Btw, you don't have to watch it, you can just have a look at my solution. It was quite interesting recording and verbalising thoughts though 😀

  Video link

  Solution link

  0