w3schools.com , Angla Li bootcamp HTML and CSS

Solution retrospective
I don't understand how to build page for mobile users,it's took me time and i still don't know so i created qr code for desktop only for now it's only my second week coding so i still don't remember many things and i spent around 4 hours just to build this page.
Please log in to post a comment
Log in with GitHubCommunity feedback
- @MelvinAguilar
Hello 👋. Congratulation on successfully completing your first challenge 🎉 ! !
I have some recommendations regarding your code that I believe will be of great interest to you.
HTML 📄:
- Use semantic elements such as
<main>
and<footer>
to improve accessibility and organization of your page.
- The text
Scan the QR code to visit Frontend Mentor and take your coding skills to the next level
is considered a simple paragraph and not a h2.
- The indentation of the code is inconsistent, making it difficult to read and understand. It's recommended to use a code formatter tool, such as Prettier, in your code editor to automatically format your code and maintain consistent indentation.
CSS 🎨:
- Instead of using pixels in font-size, use relative units like
em
orrem
. The font-size in absolute units like pixels does not scale with the user's browser settings. You can read more about this here 📘.
-
Setting the width of the component with a percentage or a viewport unit will behave strangely on mobile devices or large screens. You should use a max-width of
350px
or another value to make sure that the component will have a maximum width of350px
on any device, also remove thewidth
property with a percentage value..code-img { background-color: hsl(0, 0%, 100%); text-align: center; /* NOTE: Using max-width instead of width */ max-width: 350px; /* width: 25%; */ /* margin: 70px auto; */ border-radius: 11px; /* NOTE: Use padding on all sides to prevent the text from touching the edges of the component. */ /* padding-top: 20px; */ /* padding-bottom: 35px; */ padding: 20px; } img { /* NOTE: Update to 100%, the padding will prevent the image from touching the edges.*/ /* width: 85%; */ width: 100%; border-radius: 10px; }
-
To center the component in the page, you should use Flexbox or Grid layout. You can read more about centering in CSS here 📘.
Using grid layout:
body { min-height: 100vh; display: grid; place-content: center; }
CSS Reset 🔄:
-
You should use a CSS reset. A CSS reset is a set of CSS rules that are applied to a webpage in order to remove the default styling of different browsers.
CSS resets that are widely used:
I hope you find it useful! 😄 Above all, the solution you submitted is great!
Happy coding!
Marked as helpful - Use semantic elements such as
- @vincemarq01
Make sure to use text-align to adjust the text to the center. Happy coding
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