Submitted over 1 year ago

First front-end project using HTML and CSS

NeilAndrewReyes• 10

@NeilAndrewReyes

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

QR code component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

This is my first project created using HTML and CSS. It is very important for me to hear your thoughts about how i write my HTML and CSS files. Also, does my way of centering things is the effecient way or is there another more effecient way of doing that kind of stuff. Thank you very much for the time and the attention that you will give to review my work.

Community feedback

Julius Mcbraham Paapa-Boateng Somuah• 230

@khophisnow

Posted over 1 year ago

@NeilAndrewReyes. In CSS the perfect way you can center an element is set the display to flex , justify-content to center and also align-items to center. illustration:

display: flex;
justify-content: center;
align-items: center;
}

A typical example include.

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<h1>Perfect Centering</h1>

<p>A flex container with both the justify-content and the align-items properties set to <em>center</em> will align the item(s) in the center (in both axis).</p>

<div class="flex-container">
<div></div>
</div>

</body>
</html>

I hope you find this helpful and mark it as helpful. Great work by the way you did good. Keep up the good work and you will be advanced in no time. Thank you. If you find this

Marked as helpful

Fer• 3,970

@fernandolapaz

Posted over 1 year ago

Hi 👋, perhaps some of this may interest you:

HTML / ACCESSIBILITY:

Every page should have an <h1> to improve user experience and because it is an important element when it comes to SEO. Maybe the '.par-one'...

CSS:

The page content could be centered using Grid or Flexbox. For example as follows:

body {
min-height: 100vh;
display: grid;
place-content: center;
}

And removing the margin to the card.

You might consider using relative units like rem or em since they are better for scalable layouts. Something simple to start with would be to convert to rem (1 rem equals the font size of the root element, 16px by default).

You don't need to use font-weight of 400 and 700 as these are the default values for normal and bold fonts (paragraphs and headings).

I hope you find it useful, any questions do not hesitate : )

Regards,

Marked as helpful

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord