blog preview card using flexbox

Community feedback

• 

  Bshy201•80

  @Bshy201Posted about 2 months ago

  The best way to test out how media queries and relatives units is to just put them in your code and see what happens. For responsive design, follow a tutorial on Youtube, and you'll figure it out in no time. Keep up the good work!

  Marked as helpful

  1

  ---

  

  SITRAKA Tsimisaraka Joliot•70

  @Joliot-TSIMISARAKAPosted about 2 months ago

  @Bshy201 You're right, practice is essential when it comes to coding, as we receive instant feedbacks. I'm gonna start the responsive design learning path in this platform to solidify my foundations in that aspect

  0
• 

  T

  Grace•31,070

  @grace-snowPosted about 2 months ago

  I'm afraid this has quite a few foundational (and very common) mistakes you need to correct before moving on. I hope this list is helpful!

  • the title needs to be high up in the head, straight after the viewport meta is fine. This kind of stuff will matter later in much bigger projects but good to build the habit now.
  • all content should be contained within landmarks. Again it's a good practice to get into so you don't miss it later. This is a single component demo so all you need is a main landmark where you have the container div.
  • look up how and when to write good alt text on images. There are a few good posts about this in the resources channel on discord. Both img alts need to change in this.
  • the heading must use a heading element, not paragraph. That is essential.
  • you know from the design showing a hover style that this card is meant to be interactive. You can also tell that from the content. It's clear that the purpose of this card is to signpost (link) people to a blog. Yet you've not included any link element so the whole card does nothing! Add a link inside that heading element, wrapping the blog title text.
  • you then need to make the whole card clickable according to the design. You can do that by making the card position relative and giving the link a pseudo element that's absolutely positioned to cover the card. That effectively makes the link area as big as the card so the whole thing becomes clickable.
  • as a general rule, text shouldn't ever sit in a div or span alone. Use a meaningful element every time, even just a paragraph.
  • get into the habit of including a full modern css reset at the start of the styles in every project. Andy Bell or Josh Comeau both have good ones you can look up and use.
  • never limit the height of elements that contain text, including the body. Because you've set the body height to 100vh, content can become cut off when the browser tries to squeeze the component in when there isn't room (like on mobile landscape). Instead, use min-height not height. And optionally use a modern viewport unit like svh instead of vh.
  • font size should never be in px. Use rem.
  • this component must not have an explicit width, min-width or height. Remove all. Instead, give the component a max-width only, and write this in rem so the layout scales nicely even for users with a different text size. Giving it a max-width instead of width let's the browser squish it narrower when it needs to (like on my 320px wide iPhone!). Similarly, it doesn't need a height or min-height. Let the browser do it's job and decide what height is needed based on the content inside.
  • there is no need for a media query in this challenge.
  • it's really important you don't nest css selectors like you are doing now. This will become a specificity nightmare and be impossible to manage on larger projects. Instead try to only use single class selectors. Keep the specificity as low/flat as possible by placing classes directly on what you want yo style.
  • similarly, get rid of all the nth child selectors in this. You should be able to read and understand the css, you shouldn't have to go and examine this card and count children to work out what you're styling.
  • don't ever add cursor pointer to non-interactive elements.
  • rather than relying on key words set font weights explicitly with the value you want. "Bold" could differ between browsers.
  • on a related topic I think you have to define the range of weights you want in the font-face declaration if its a variable font (I may be wrong there but worth checking).

  Marked as helpful

  0

  ---

  

  SITRAKA Tsimisaraka Joliot•70

  @Joliot-TSIMISARAKAPosted about 2 months ago

  @grace-snow Thank you very much ! These aren't the kind of things you could learn on your own, getting such a helpful reply is my fortune. And here I thought that my code was pretty good already, I still have a long way to go. I certainly know a lot of theory but not sure how to make good use of them, I'm severely lacking practical knowledge. I was just fixated on getting it similar to the design.

  I'm gonna start again and see what I can do to make my code fulfill all of what you cited above. And when I finish, can I mention you in our Discord group to check out my code again to see if I kinda correct most of these foundational mistakes?

  Again, thanks a lot

  0

  

  T

  Grace•31,070

  @grace-snowPosted about 2 months ago

  @Joliot-TSIMISARAKA dont "start again" in a new repo. Just update this one and this solution. That's one of the benefits of git version control -— keep the history and see how far you've come.

  Marked as helpful

  0

  

  SITRAKA Tsimisaraka Joliot•70

  @Joliot-TSIMISARAKAPosted about 2 months ago

  @grace-snow Hello ! I've updated my code in github, it has taken more time than expected. Can you please check it out ? Are most of the points you cited corrected ? Any feedback are always welcome

  0

  

  T

  Grace•31,070

  @grace-snowPosted about 2 months ago

  @Joliot-TSIMISARAKA I can still see a few issues here.

  • Both of the images in this I would consider to be decorative. That means the alt should be empty.
  • this card component would never be used to serve the main heading on a page, so you know it shouldn't be a h1. Use a lower importance heading level like h2.
  • I can't understand why a paragraph is wrapped in a span. A span is an inline meaningless element only used for styling purposes. There would never be a reason to use that around a paragraph.
  • using imports in css is really bad for performance. Just use the reset at the start of the stylesheet. Don't make the browser work so hard.
  • setting the root font size like this immediately makes the solution inaccessible. It means users text size settings will no longer be respected. https://fedmentor.dev/posts/font-size-px/.
  • if making the body into a flex container make sure.you make it a column not the default row.
  • the component shouldn't be the main landmark, it should be inside the main landmark. No component specific styles should be on the main in this.
  • this component is hitting the edges of my screen on all sides. Make sure that can't happen with some padding on a wrapping element.
  • i'd expect the card to have a max width in rem. And I wouldn't expect the main element to have any width set at all. In a site you would want the main landmark to be full width.

  0

  

  SITRAKA Tsimisaraka Joliot•70

  @Joliot-TSIMISARAKAPosted about 2 months ago

  @grace-snow Thank you again for taking the time to review my code, And I can see that the list have shrunk this time XD

  I'm now starting to understand all the points to take into account when creating responsive simple element like this one

  "We should always have the whole website, or at least the whole page, in mind when creating simple component such as this card " I'm gonna get into it again now, I hope this time, there would be no more mistakes

  0