UPDATED: Second responsive page build using HTML & CSS

Community feedback

• 

  Rafal•1,395

  @grizhlieCodesPosted over 3 years ago

  Hi Alex,

  Thanks for the solution! I'm not sure if I will end up anwsering your question directly as I think that instead of 'fixing it' I'll focus on sharing some insights that are more universal and will help you avoid getting to a point where something is 'kinda jerky'.

  1. Write mobile first. As soon as I saw @media (max-width: 375px) I made the assumption that you wrote this design for desktop first. My advice is to start writing from mobile first and expand. The reasoning is simple: mobile is MVP (minimum viable product). It is the simplest iteration of a website/component, etc. It will usually be a single column, will be void of any 'mega-fancy' backgrounds etc.

  Then you expand and ADD complexity as you increase with the display size. It is far easier to add complexity, than to simplify complexity (desktop -> mobile is going from complex to simple, which is harder in most cases).

  Give this video a go, it's what first made me realise this.

  2. Starting mobile first, make the shift from column to row a bit later: currently your design is very squished. To get flexbox acting the way it should we need to give it enough space. If you start a media query at 940px for example this would fix it. There is no need to squeeze the content that is already quite thin.

  3. You mention not using flex-basis/shrink and then ask what the fix would be. Well the fix is exactly what you just said 😅. Providing you turn the column-layout into a row layout after at least 920px, you can simply add flex: 1 0 auto; to each of your cards. And this will automatically fix everything. Why? GREAT QUESTION, LETS GET INTO IT 😁

  The way flexbox is designed is to get the browser to do most of the work for us. So we want to do less calculations, less positioning and just let it do its magic. The issue is of course that the 'magic' remains magical until we understand flexbox under the hood.

  If you don't set flex-grow, flex-shrink, flex-basis you are telling the browser to figure it out for itself. This is why you had that 'kinda jerky' effect going on. Flexbox was trying to figure stuff out without necessarily detailed instructions. What it does then is it looks at each flex-child/item and depending on the content it holds will make each item grow/shrink as it sees fit. So you're letting the browser make the decision essentially.

  In the case of your cards the text was dictating the height. As the paragraph was extended by an extra line, that particular card would then be 'taller' then the other ones.

  But if you add flex: 1 0 auto; things change. Now each flex-item will actually adapt basing on the 'tallest' item-sibling. I actually wrote a demo that will hopefully outline this behaviour easily to you.

  Here is the link. If you uncomment/comment line 36 in CSS you will see what I just wrote about with great clarity. I hope.

  Here is my solution I wrote to have as an example when trying to explain any concept relevant to this particular project, perhaps it will be of help to you 😁.

  Either way, hope this was somewhat useful. If you want to understand flexbox more I recommend checking out more of Kevin Powell's content on YouTube.

  Let me know if you want me to explain/cover anything else.

  EDIT:

  4. I forgot to mention this one. I wonder if you'll agree with me: I think that the container you currently named class="card" would be better served if you named it class="car-categories" or class="car-category-cards" and then the 3 different cards would be class="car-card sedan", class="car-card suv" etc.

  I wish I thought of the above when I was writing this project up but oh well:

  <div class="preview-cards-container bg-orange">
       <div class="preview-card bg-orange">...</div>
       <div class="preview-card bg-cyan-800">...</div>
       <div class="preview-card bg-cyan-600">...</div>
  </div>
  

  I would probably name them like this now:

  <div class="car-cat-cards bg-orange">
       <div class="preview-card sedan bg-orange">...</div>
       <div class="preview-card luxury bg-cyan-800">...</div>
       <div class="preview-card suv bg-cyan-600">...</div>
  </div>
  

  0

  ---

  

  Alex•270

  @chillcodemaoPosted over 3 years ago

  @grizhlieCodes hi, nice to meet you and thanks a lot for this amazing feedback! There are quite a few suggestions that look really important as a good practice going forward and I'll try to remake the page like you suggested: mobile first. As I was submitting the solution I noticed the 'jerkyness' of the flexbox and the notion of flex basis popped up in my mind as a potential solution but I haven't used it before in a real life practice example so I wasn't sure.. because other pages that I've made (some css practice) were scaling well without it. Thanks for confirming it. (as you've noticed I am a beginner with coding so I probably make a lot of inneficient/not so nice looking code, but I'm getting there). Also, just a few days ago I managed to get git working with vscode (never used git before). Btw, I am taking a webdeveloper bootcamp class online and these concepts are covered there but putting them in practice is something else. Happy for your feedback. Thanks for taking the time. Will update the solution once I've redone it properly.

  1

  

  Rafal•1,395

  @grizhlieCodesPosted over 3 years ago

  @chillcodemao The only way to learn efficient code is to write inefficient code hehe.

  And you're on the money - learning about code vs applying it are different beasts. Simplest way to learn concepts, especially layout based ones, is to go on codepen and just make layouts with colored boxes. Literally just divs within divs, then practice flexbox/grid etc with them and slowly start adding content, see how it works then.

  Either way, happy to have been of some help 😁

  0

  

  Alex•270

  @chillcodemaoPosted over 3 years ago

  @grizhlieCodes watched the video, played around with the pen from the link (it is quite helpful - so basically controlling the widths from flex-basis with grow and shrink... yes, makes sense). I also browsed your solution to this challenge.. pretty good stuff.. and I will rename my classes to better match their roles. (what you mentioned earlier) Is that bootstrap shorthand I noticed in your html? I went over the bootstrap section in my online course once.. I'll have to do it again at least once.. it can get confusing right at the moment but I think maybe later, when I'm more experienced with css, I'll learn to appreciate it.

  0

  

  Rafal•1,395

  @grizhlieCodesPosted over 3 years ago

  @chillcodemao 😨😧😨 I have not used, nor will I use, nor will I ever recommend bootstrap to anyone!

  I would only say bootstrap is ok for someone who knows CSS very well and just wants to create a basic mockup (speed is of the essence). When learning, avoid it like a plague 😁

  If you are referring to my classes, I just use BEM-ish mentality with them.

  If I wanted to be more strict, which I'll admit I wasn't I would write:

  <div class="car-categories bg-orange">
       <div class="car-categories__card  sedan  bg-orange">...</div>
       <div class="car-categories__card  luxury  bg-cyan-800">...</div>
       <div class="car-categories__card  suv  bg-cyan-600">...</div>
  </div>
  

  1

  

  Alex•270

  @chillcodemaoPosted over 3 years ago

  @grizhlieCodes I updated the solution with (I think) improved code, what do you think? Also, if you have the time, do you mind taking a look at the next solution for "Profile card component", link, I'm really curious of what are your thoughts on it.

  0

  

  Rafal•1,395

  @grizhlieCodesPosted over 3 years ago

  @chillcodemao Overall I think this is a great job from your side, it's not the "perfect" solution but I can see you picked up more CSS-knowledge along the way which is literally the only point of this 😁👍

  I'm pondering on just making a video to share some concepts. I could even make 2 videos, the first giving some immediate feedback and the second me attempting this challenge and teaching some concepts along the way. Would you be interested in either? Otherwise I'll just type up a length response, up to you.

  Are you at-all familiar with CSS grid by the way?

  0

  

  Alex•270

  @chillcodemaoPosted over 3 years ago

  @grizhlieCodes Thanks for the feedback. Videos would be great if you can spare the time. I haven't really done anything with grids so far but I'll get familiar with the theory in the next couple of days. Btw, I started watching KP's channel since a few days back, it's awesome.

  0

  

  Rafal•1,395

  @grizhlieCodesPosted over 3 years ago

  @chillcodemao Yeah?? Watch that guy day and night if you want to understand CSS. I like him as he goes in-depth and tries explaining how something works under-the-hood.

  And alrighty. I'll spare some time in that case. Will hit you back here once done.

  0

  

  Alex•270

  @chillcodemaoPosted over 3 years ago

  @grizhlieCodes yeah, KP I think is so cool to do this on yt, great resource really. My partner is working online and I know how long the hours can be so I appreciate your support here!

  0

  

  Rafal•1,395

  @grizhlieCodesPosted over 3 years ago

  @chillcodemao All good. In a way I learn too by explain stuff, or attempting to explain lol.

  It's good timing really, I wanted to start recording videos recently anyway to cover these core concepts. Because learning CSS CODE is one thing but understanding methodologies etc is another.

  And I feel/think it's great to see other coders who code from scratch just to realise everybody has a weakness/gets stuck on something - are human basically haha.

  I've uploaded the 'review' video just now but it's taking its' sweet time 'processing' so I'll update you once that's done.

  I realised that the link you sent, requesting a review, was for another project so i ended up reviewing both 😅😅.

  0

  

  Rafal•1,395

  @grizhlieCodesPosted over 3 years ago

  @chillcodemao Alrighty, here's the link. It's processing the HD version so give it a 'minute'.

  I'll record the entire solution for the user-preview-card thingie a bit later on or tomorrow, I'll see how I get on with work first 😁

  0

  

  Alex•270

  @chillcodemaoPosted over 3 years ago

  @grizhlieCodes Hi Rafal. Great video, thanks a lot for your review. I am focusing now on the 3 column card exercise. I understood now where I did wrong with the paddings, fixed widths and heights on stuff. Also I now understand where to use the 'gap' attribute. Regarding the images being stretched, I researched and found the solution: apparently when you apply flex on the individual cards (i.e. sedan card) the default attribute for images which are direct children is 'stretch'. The fix for this, in this case, is 'align-self: flex-start' and so in this way we don't have to use fixed dimensional units for the images. (one of the things I am realizing from your feedback is to avoid using fixed units for positioning stuff, in order to make responsive designs) I updated my code: removed all paddings, positioned items using gap and margins, applied flex on cards, sorted the images thing, applied the intermediate size of the preview-card for resolutions between mobile and desktop (I agree, I always thought that just 2 sizes for cards like these is not enough.. to make it look good there has to be some intermediate sizing in the design as elongated cards with not so much content inside don't look so good). And maybe you'll find this funny, but I don't have the pro membership and so my designs are based on just looking at the design images provided and trying to figure out the sizes to match the design. :) I'll take a more professional approach on the next exercises - maybe I'll get the pro membership so I can have access to the designs and see the required dimensions. The next exercise, the one with one profile preview card on the page, I think is more complex than this one. I really had a hard time positioning everything and I made the same mistakes with padding and fixed widths and so on. I'll be looking forward to see your approach as I am eager to build a better solution for this challenge, better than the one I've built that you reviewed - thanks for that btw! I'll try to rebuild my solution in a better way - curious to see your design.

  1

  

  Rafal•1,395

  @grizhlieCodesPosted over 3 years ago

  @chillcodemao Glad you found it useful. I thought I replied to this but I guess I never clicked send...

  I recommend the pro-membership for 1 reason: It's closer to a 'real-world' scenario than working from an image. That's it.

  I've just finished uploading the user-card video, here's the link. I avoided pixel-perfection as I like to focus in responsiveness more now. Content leading the sizing of everything etc. Some small touch-ups I did at a later stage but everything of what I wanted to get across is in the video.

  0