Responsive landing page using css flexbox

Community feedback

• 

  P

  Adrian Trandafir 🎮•330

  @XenoMeePosted 10 months ago

  Hello Filip! Your solution looks great and like the design. Great job 👏

  I might have a few suggestions for you to improve it:

  • You can set a 100svh size for the body's min-height property instead of main.
  • Try to avoid using id selectors for styling as it raises specificity. Use classes as much as you can, even if you use them one time. This makes everything stay at the same level.
  • It's not ideal to set a width on texts (your h1 and p) since it affects the responsiveness of the website.
  • I personally would use a container for all your content inside main, then one more for the intro text and one more for all the cards. This makes your website be more component based and structured.
  • For the images inside each card, you can use the ::after pseudo-element since their purpose is to be decorative and does not present any context or meaning for the people who use screen readers.
  • You can use grid for the desktop layout since grid is often used for layout purposes while flexbox is used more for individual components.

  Hope this information helped you 😊

  Happy coding!

  Marked as helpful

  0

  ---

  

  Filip Szkarłat•180

  @FilipSzkarlatPosted 10 months ago

  Hello Adrian!

  Thanks for the comment, I learned a lot of new things 😊. Could you explain a little more how I can use ::after in my case?

  1

  

  P

  Adrian Trandafir 🎮•330

  @XenoMeePosted 10 months ago

  Gladly!

  So, when you select each individual card with your id selectors, for example:

  • #supervisor { border-top: 4px solid hsl(180, 62%, 55%); }

  You can use the ::after pseudo-element like this:

  #supervisor::after{
  content="";
  display: block;
  background-image:url("/images/supervisor.svg")
  width: (the svg's width)
  height: (the svg's height)
  }
  

  Marked as helpful

  0

  

  Filip Szkarłat•180

  @FilipSzkarlatPosted 10 months ago

  Great!

  Thanks a lot, I followed your advices and improved the code, apart from using grid for the layout, I will use this advice in my next projects ;)

  1