Boris• 2,870
@mkboris
Posted
Hi Prototype-113322 congrats on completing your first challenge you did great, here are a few things to review
- All content should be wrapped within landmarks. Wrap a
main
tag around the .container-flex and afooter
for the attribution. - Every page should have at least one heading element typically an
h1
element to provide a clear structure. Thep
with the class of .heading should be a heading element - Your image is missing an
alt
attribute like soalt="Qr Code to Frontendmentor.io"
- Font-size should be written in
rem
not px - Consider using a modern CSS reset at the start of the styles in every project. Like this one Modern CSS Reset. This will help reset a list of default browser styles.
- Avoid setting fixed
heights
andwidths
on elements, as this can create problems with responsiveness and content fit. Instead, let the content andpadding
determine the element’s size. If necessary, usemax-width
ormin-height
, and prefer relative units likerem
for better adaptability. Change thewidth
of the .content tomax-width
and it should be defined inrem
. Remove theheights
from the .container-flex and .content and add this on yourbody
to properly center the card
min-height: 100vh;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
gap: 1rem;
Marked as helpful
0