Responsive Design using Flexbox and CSS

Community feedback

• 

  T

  Grace•31,090

  @grace-snowPosted 8 months ago

  I'm afraid the html needs a total rewrite on this. It's really important to get HTML right as it's the foundation for everything else.

  1. All content should be contained within landmarks. This is a card (div or section) that must sit within a main landmark. Every page must have a main at a minimum.
  2. Inside the card must be no header or footer or articles (or any other landmark). Look up what these landmarks are actually for, because it is definitely not this. This would cause a lot of confusion for screen reader users who rely on landmarks to understand and navigate page contents.
  3. There should be no IDs in this.
  4. The image must have an alt attribute. I consider this image to be meaningful content so would expect a description in that alt attribute. But if you think the image is decorative you can leave the alt blank. There is a very good post about how to write good alt text in the resources channel on discord.
  5. The persons name is a heading (not a header).
  6. All text must be in meaningful elements, never in divs or spans alone. The location and description are paragraphs.
  7. The list of links must be just that — an unordered list with anchors (links) inside each list item. You must use interactive elements for interactive behaviour. Articles are not clickable.

  I wrote a post about translating designs into HTML which may be worth you reading. The basic principle is to always imagine the content without any styling at all - that should inform your html element choices: https://fedmentor.dev/posts/html-plan-product-preview/

  Marked as helpful

  0

  ---

  

  T

  Grace•31,090

  @grace-snowPosted 8 months ago

  The styling is also a bit broken because content is able to spill out of the card. This is really common when people first start styling but some base principles can help here too:

  1. Always use a modern css reset at the start of the styles in every project. Andy Bell or Josh Comeau both have good modern examples you can look up and use in your projects. (Choose one not both)
  2. Set background color on the body. It's rare if ever you need to style on :root or html and it's best avoided.
  3. Never limit the height of elements that contain text, including the body. This is what's causing the big overflow problem on this solution. Change height 100vh to min-height so the body height is allowed to grow beyond the viewport height when it needs to.
  4. Never style on IDs! That is not what they are for, leads to highly specific css, reduces reusability and can create a maintenance nightmare. Use single class selectors as much as possible for styling. If you want to understand what the ID attribute is for, I've written a post about it in detail on https://FEDmentor.dev.
  5. The max width on the component must be in rem. This allows the layout to work for all users, even those of us who have a different text size in our browsers.
  6. The component MUST not have a height at all! (See point 3 above). There is no need for a min height either in this case. Let the browser do it's job and decide what height is needed based on the content.
  7. Please have one css property per line. This is really hard to read at the moment. Indent/format code consistently. Your code editor can even do this formatting automatically for you with prettier.
  8. I recommend you avoid em units for now. You should only use em very intentionally and rarely - You only use it when you want a property to scale with the elements font size. You never use em for font size itself. That could lead to awful bugs in bigger projects because em compounds, meaning you could lose all control over font size as it changes in different contexts. Use rem for font size (and probably for most instances where you're tempted to use em for now).
  9. Remove anything to do with height and width on the articles and footer. All the links will need when you add them is padding and width 100% to make them full width. Definitely don't use min-width. That is very rarely needed.
  10. Font size must never ever be in px. This is extremely important.

  Marked as helpful

  0

  

  Mariano•90

  @MarFandino84Posted 8 months ago

  @grace-snow Thank you so much for taking the time on this review... I will go through every point you made here... can´t emphasize how much this helps!! thanks !!

  0

  

  Mariano•90

  @MarFandino84Posted 8 months ago

  Absolutly loving your post about HTML!! thanks so much again for taking the time to reply a consistent and valuable view!!! @grace-snow

  0
• 

  Raymond Njagala•40

  @Rhyz26Posted 8 months ago

  Well done

  0

  ---

  

  Mariano•90

  @MarFandino84Posted 8 months ago

  Thanks !@Rhyz26

  0