Frontend Mentor | Html and Css coding challenge solution

@md-abid-hussain

Posted 8 months ago

There are many ways to position an element. If you want tp add space between the content you can use padding or margin. Both have different use cases.

I think you are asking for the way to center the content on screen.

Easier way is to use either flex box or grid as display property.

Resource 1 - docs

Resource 2 - videos

These resources helped me in learning css. I hove this can help you as well.

Marked as helpful

Marcos Travaglini• 4,920

@Blackpachamame

Posted 8 months ago

📌 Some accessibility and semantics recommendations for your HTML

To improve the semantics of your HTML, you can change your <div> to a <main class="container">
I can only mention an accessibility issue, you can add a short description to your image with the alt attribute. In case it is just a decorative image, such as an icon or logo, you can leave it empty: alt="". More info
You placed the favicon image in the head, however, it is not found in your repository. The same thing happens with the font-family

📌 Some suggestions

I recommend doing a small reset to the styles that come by default in the browsers. To do this, you can apply a couple of properties to the universal selector *, with this you will make your site look the same in all browsers
I leave you the task of researching the reset CSS and the box-sizing: border-box
If you didn't apply the reset, you can add margin: 0 to your body, this will remove annoying scrolling on large screens. If you want to maintain separation on very small screens, you can apply the margin again using media querys
Instead of using margin to center your content in the center of the screen, you can use the flexbox properties in the body:

body {
      min-height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
}

Here I leave my solution for you to take a look at

Marked as helpful

Mevindu-Dev• 10

@Mevindu-Dev

Posted 8 months ago

@Blackpachamame box-sizing: border-box makes the border box take the width property set in the css so the heights and widths are more straight forward so padding and border can't affect the box size. The CSS reset can make it so that every component has this box-sizing : border-box property and set every property to 0. This is what i have learnt so far. If there are any mistakes in what i have said please let me know, Marcos Travaglini thanks for the detailed feedback and Md Abid Hussain thanks for the video link to web.dev .

Mevindu-Dev• 10

@Mevindu-Dev

Posted 8 months ago

@Mevindu-Dev I'll be implementing them shortly in this project.

Daniel 🛸• 44,230

@danielmrz-dev

Posted 8 months ago

Hello @Mevindu-Dev!

Your solution looks great!

I have a couple of suggestions for improvement:

First: For semantic reasons, use <main> to wrap the main content instead of a <div>.

📌 This tag change does not impact your project visually and makes your HTML code more semantic, improving SEO optimization as well as the accessibility of your project.

Second: Import the font directly from Google fonts instead of using @font-face. It's a lot easier. Just paste this inside the <head>:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">

I hope it helps!

Other than that, great job!

Html and Css

Design comparison

Solution retrospective

Community feedback

Please log in to post a comment

Join our Discord community