CSS GRID and FLEXBOX solution.

Community feedback

• 

  Asilcan Toper•2,960

  @KapteynUniverse

  Posted 5 months ago

  Merhaba Emirhan, good job. Couple things:

  Landmarks, (or this page) are essencial for accesibility. Every page needs one main. Changing your container div or wrapping it with a main would be good.

  Images needs a meaningful alt text, unless decorative.

  Do not use headings for sizes and do not skip them: always start from h1, followed by h2 and so on.

  Those buttons should be hyperlinks, so correct element to use here is anchor element. Some might say it will bloat the html but to me, they are list of links, so you can also put them in a list.

  Also flex on them (and grid on p's, h4 etc.) is unnecessary but if you need to align text, you can use text-align. I think you don't need any flex or grid for this challenge besides the one on the body to center the card.

  You don't need to apply font family to every element. Applying to body would do the job but some elements like buttons don't inherit it. For that and many other things, i recommend you to use a modern css reset. You can check Andy Bells reset too.

  Using fixed values like width: 400px; will cause responsive issues later, use max-width: 25rem; instead.

  Never use px for the font sizes. So people with visual impairment can adjust the font size on their browser. Use rem for especially font sizes and media queries.

  Using font-display: swap in your @font-face rule improves performance by showing fallback text until the custom font loads, preventing a blank screen (flash of invisible text). The downside is a brief flash when the font switches, but it’s usually better than waiting for text to appear.

  01

  Marked as helpful