@MelvinAguilar
Posted
Hi @Hante20 ๐, good job on completing this challenge! ๐
Here are a few suggestions I've made that you can consider in the future if you're looking to improve the solution further.:
- Try to use semantic tags in your code. Click here for more information.:
With semantic tags:
<body>
<main class="body">
. . .
</main>
<body>
- Setting element width with percentages or VW will cause your component to behave weirdly on mobile devices and high-resolution desktops. You can set the width at 320px or 20rem:
* {
box-sizing: border-box;
}
.body {
/* width: 21%; */
max-width: 320px;
background-color: hsl(0, 0%, 100%);
/* position: relative; */
/* top: 2rem; */
/* left: 27rem; */
padding: 1rem;
border-radius: 5%;
}
- The <div> tag defines a division or section on a website. It is used to style a container with CSS, set special alignment, or position content. It might be more efficient to use the <p> tag; the <p> element represents paragraph-level content, usually text:
<p class="text">Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
- Add an h1 tag to your solution. The
<h1>
element is the main heading on a web page. There should only be one<h1>
tag per page, and always avoid skipping heading levels; Always start from<h1>
, followed by<h2>
, and so on up to <h6> (<h1>,<h2>,...,<h6>). The HTML Section Heading elements (Reference)
Solution:
<h1 class="bold-text">Improve your front-end skills by building projects</h1>
- Instead of using pixels in font size, use relative units of measure like
rem
orem
. The font size in absolute length units (px) does not allow users with limited vision to change the text size in some browsers. Reference. - Centering the element with position would make your element behave strangely on some mobile devices. You can use flexbox to center elements:
body {
margin: 0;
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
Links with more information:
- The Complete Guide to Centering in CSS.
- A Complete Guide to Flexbox (CSS-Tricks).
- How TO - Center Elements Vertically (W3Schools).
- CSS Layout - Horizontal & Vertical Align (W3Schools).
Overall well done! I hope those tips will help you.
Good job, and happy coding!
Marked as helpful