Design comparison
Solution retrospective
.it was difficult trying the get the correct width and also the colors that were used
.i don't know yet
.Yes i do. how can i balance my school n tech life
Community feedback
- @ecemgoPosted over 1 year ago
Some recommendations regarding your code that could be of interest to you.
- For the font-family to work correctly, add the following between the
<head>
tags in HTML:
<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@400;700&display=swap" rel="stylesheet">
- You can center it easily, so I recommend you to use flexbox in the
body
. - If you want, you can also use the recommended font-family and color for the background in
body
:
body{ /* background: hsl(228, 13%, 92%); */ /* padding: 30px; */ /* height: auto; */ min-height: 100vh; display: flex; justify-content: center; align-items: center; background-color: hsl(212, 45%, 89%); // the recommended color font-family: 'Outfit', sans-serif; // google fonts which is suggested }
- after using flexbox, you don't need to use
margin
in the#box
:
#box{ background-color: white ; /* margin-left: 40%; */ /* margin-right: 40%; */ /* width: 25%; */ max-width: 280px; // max-width makes it responsive & 280px is ideal for the card height: 69vh; border-radius: 19px; }
- You'd better improve the
padding
andwidth
of the image in this way:
img{ display: block; margin-left: auto; margin-right: auto; /* width: 81%; */ width: 90%; /* margin-top: 30px; */ /* padding: 14px; */ padding: 14px 5px; border-radius: 16%; }
- finally, you don't need
.container
because thebody
already represents the outside of the card in this solution, you can delete.container
from CSS.
Hope I am helpful. :)
Marked as helpful0 - For the font-family to work correctly, add the following between the
- @FrostemanNeogardPosted over 1 year ago
When starting a challenge, Frontend Mentor gives you a prompt to download the starter code which is a .zip file. In this zip file there will be information about the styling used as well as assets such as the QR code image (which I can see you've used.). If you take a look at the starter code again, you'll find a file named 'style-guide.md' which contains the following:
# Front-end Style Guide ## Layout The designs were created to the following widths: - Mobile: 375px - Desktop: 1440px ## Colors - White: hsl(0, 0%, 100%) - Light gray: hsl(212, 45%, 89%) - Grayish blue: hsl(220, 15%, 55%) - Dark blue: hsl(218, 44%, 22%) ## Typography ### Body Copy - Font size (paragraph): 15px ### Font - Family: [Outfit](https://fonts.google.com/specimen/Outfit) - Weights: 400, 700
Here you can find all the colors that you may have missed as well as font information and such.
As for the width and height of your container, often you don't need to play around with that too much. You'll see that if you just remove the
width: 25%;
andheight: 69vh;
properties on#box
then the box will still look good. A div will most of the time shrink and grow based on its contents.There's quite a lot more I could go into regarding the CSS, but I hope what I mentioned so far helps!
1 - @0xabdulkhaliqPosted over 1 year ago
Hello there 👋. Congratulations on successfully completing the challenge! 🎉
- I have other recommendations regarding your code that I believe will be of great interest to you.
HTML 🏷️:
- This solution generates accessibility error reports, "All page content should be contained by landmarks" is due to incorrect usage of
semantic
markup, which causes lacking of landmark for a webpage
- So fix it by replacing the
<section class="container">
element with the semantic element<main>
in yourindex.html
file to improve accessibility and organization of your page.
- What is meant by landmark ?, They used to define major sections of your page instead of relying on generic elements like
<div>
or<span>
. They are use to provide a more precise detail of the structure of our webpage to the browser or screen readers
- For example:
- The
<main>
element should include all content directly related to the page's main idea, so there should only be one per page - The
<footer>
typically contains information about the author of the section, copyright data or links to related documents.
- The
iMAGES 📸:
alt
text is a descriptive text attribute added to an HTML image tag that provides a textual description of an image for users who are visually impaired or cannot see the image for any other reason.
- The purpose of
alt
text is to convey the meaning and context of an image to these users so that they can understand the content and information conveyed by the image.
- Since this component involves scanning the QR code, the image is not a decoration, so it must have an
alt
attribute.
- E.g.
alt="QR code to frontendmentor.io"
PS 🥲:
- You're asking "Yes i do. how can i balance my school n tech life".
- Me, currently that's what i'm doing my brother. But i'm a college student
.
I hope you find this helpful 😄 Above all, the solution you submitted is great !
Happy coding!
0 - @JuanRamirez2000Posted over 1 year ago
Regarding the colors used.
If you are always unsure of what color an element is and you dont have the style guide as described in the other comment, you can always resort back to using chrome devtools (not sure about the process for other browsers)
Chrome devtools has a color picker that you can use to find the color of any element on the screen. You can open the chrome devtools by rght clicking and hitting 'inspect". From here in the Elements tab you can go towards the subsection called "styles"" and find the color attribute. Clicking on the color here will bring up a color picker that you can use to find the color of any element on the screen.
This is a better explanation than the one I have above. Hope it helps! https://geekflare.com/google-chrome-color-picker/
0
Please log in to post a comment
Log in with GitHubJoin 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