Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Log in with GitHub
OverviewSolutions30Comments575

All comments

  • suraj sharma• 10

    @surajsharma19

    Submitted

    What are you most proud of, and what would you do differently next time?

    I am proud of my self. I was exploring many field and didn't focus on the proper path but now I am fixing my mistake and learning in a proper manner.

    What challenges did you encounter, and how did you overcome them?

    In this solution, I try to use vanilla CSS and tried my best to do this challenge in the most simple code possible.

    What specific areas of your project would you like help with?

    None.

    QR-code-component

    #foundation

    1

    P
    Øystein Håberg• 7,880

    @Islandstone89

    Posted

    Hi, you did a good job. Here is some feedback.

    HTML:

    • Every webpage needs a <main> that wraps all of the content, except for <header> and footer>. This is vital for accessibility, as it helps screen readers identify a page's "main" section. Wrap the card in a <main>.

    • The alt text should be written naturally, without using - between the words. Write something short and descriptive, without including words like "image" or "photo". Screen readers start announcing images with "image", so an alt text of "image of qr code" would be read like this: "image, image of qr code". The alt text must also say where it leads(frontendmentor website).

    CSS:

    • Including a CSS Reset at the top is good practice.

    • I like to add 1rem of padding on the body, to ensure the card doesn't touch the edges on small screens.

    • Remove the position and transform properties, they should not be used for a layout like this.

    • To center the card horizontally and vertically, use Flexbox on the body:

    display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 100svh;

    • The card is a <div>, which is a block element. Block elements take up the full width by default, so there is no need for width: 100%.

    • max-width must be in rem - 20rem is the size I usually recommend for this project.

    • Paragraphs have a default value of font-weight: 400, so there is no need to declare it.

    • On the image, add display: block and change width to max-width: 100% - the max-width prevents it from overflowing its container.

    Marked as helpful

    0
  • P
    Øystein Håberg• 7,880

    @Islandstone89

    Posted

    HTML::

    • Every webpage needs a <main> that wraps all of the content, except for <header> and footer>. This is vital for accessibility, as it helps screen readers identify a page's "main" section. Replace <section> with <main>.

    • "Learning", "Published" and "Greg Hooper" are <p> elements. If they were headings, they must have been in order.

    • "These languages" is also a <p>.

    • Profile image needs a short alt text, for example "Headshot of Gary Hooper".

    CSS:

    • Including a CSS Reset at the top is good practice.

    • I like to add 1rem of padding on the body to ensure the card doesn't touch the edges on small screens.

    • Move the properties on .all to .container, and remove the margin. Add min-height: 100svh on the body, so the card has vertical space to center itself.

    • Instead of using elements or nth-child as selectors, I would assign classes on the different elements.

    • font-size must never be in px. This is a big accessibility issue, as it prevents the font size from scaling with the user's default setting in the browser. Use rem instead.

    • line-height must also never be in px.

    • The top image should have display: block and max-width: 100%.

    0
  • P
    Øystein Håberg• 7,880

    @Islandstone89

    Posted

    HTML:

    • Every webpage needs a <main> that wraps all of the content, except for <header> and footer>. This is vital for accessibility, as it helps screen readers identify a page's "main" section. Change .main to .card, and wrap it in a <main>.

    • "Learning" and "Gary Hooper" are <p> elements. They would not be <h5>if they were headings, as headings must be in order.

    • I would wrap the date in a <time> element:<p>Published <time datetime="2023-12-21">21 Dec 2023</time></p>.

    • .attribution should be a <footer>, and you should use <p> for the text inside.

    CSS:

    • Including a CSS Reset at the top is good practice.

    • Add around 1rem of padding on the body, so the card doesn't touch the edges on small screens.

    • Remove the margin on the card.

    • To center the card horizontally and vertically, use Flexbox on the body:

    display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 100svh;

    • Except for on .avatar, remove all widths.

    • I wouldn't use % for margin, padding.

    • Add a max-width of around 20rem on the card, to prevent it from getting too wide on larger screens.

    • font-size must never be in px. This is a big accessibility issue, as it prevents the font size from scaling with the user's default setting in the browser. Use rem instead.

    • Add display: inline-block on "Learning".

    • I'm not sure media queries are needed on this project. When they are, they should be in rem, and we usually style for mobile as the default.

    Marked as helpful

    0
  • Mukarram Haq• 30

    @MukarramHaq

    Submitted

    What are you most proud of, and what would you do differently next time?

    I'm definitely proud that I was able to get this done in 2 days. I thought it would take me some time.

    The next time that what I would want to do is to use ids and classes in a better way.

    What challenges did you encounter, and how did you overcome them?

    The most challenging was how to center a div, lol.

    Reach a few articles and stackoverflow to finally find the what I was looking for.

    What specific areas of your project would you like help with?

    I was wondering if I could get feed back on the quality of code that i've written. Also, if I used ids and classes correctly or not and is there a better way to to go about using them?

    I'm open to a lot of feedbacks. Any advice will do! Thank you :)

    Custom Fonts

    2

    P
    Øystein Håberg• 7,880

    @Islandstone89

    Posted

    Hi! I have some suggestions you might find helpful :)

    HTML:

    • Every webpage needs a <main> that wraps all of the content, except for <header> and footer>. This is vital for accessibility, as it helps screen readers identify a page's "main" section. Wrap the card in a <main>.

    • Always include an altattribute on images! Decorative images should have empty alt text. This image, though, has meaning, hence it must have proper alt text. Write something short and descriptive, without including words like "image" or "photo". Screen readers start announcing images with "image", so an alt text of "image of qr code" would be read like this: "image, image of qr code". The alt text must also say where it leads(frontendmentor website).

    • In general, you should use class instead of id. This article explains the use cases for the id attribute.

    • Other than the <div> holding the card content, you don't need any divs.

    • Do not use <br> to force text onto a new line. The text should flow naturally, and all styling, including space between elements, should be done in the CSS.

    CSS:

    • Including a CSS Reset at the top is good practice.

    • Add around 1rem of padding on the body, so the card doesn't touch the edges on small screens.

    • You should not use position or transform to center the card, so remove those. To center the card horizontally and vertically, I would use Flexbox on the body:

    display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 100svh;

    • Remove all widths and heights. In web design, we want our components to adjust to different screen sizes. Setting fixed sizes in px makes them unable to adapt, and it is something you should rarely do.

    • Add a max-width of around 20rem on the card, to prevent it from getting too wide on larger screens.

    • font-size must never be in px. This is a big accessibility issue, as it prevents the font size from scaling with the user's default setting in the browser. Use rem instead.

    • Since all of the text should be centered, you only need to set text-align: center on the body, and remove it elsewhere. The children will inherit the value.

    • Likewise, put the font-family on the body, and remove it elsewhere. Also, remember to specify a fallback font:font-family: 'Outfit', sans-serif;.

    • Remove the margin on the paragraph.

    • On the image, add display: block and max-width: 100% - the max-width prevents it from overflowing its container.

    Marked as helpful

    2
  • osamaaabdullah• 50

    @osamaaabdullah

    Submitted

    What are you most proud of, and what would you do differently next time?

    • Figuring out how to approach the responsiveness part of a web design.
    • Start by making the website for mobile layout first.

    What challenges did you encounter, and how did you overcome them?

    • Difficulties in addressing the responsiveness when starting with the web-layout.
    • Took advice from online on starting the design with mobile-layout first.

    What specific areas of your project would you like help with?

    • Better CSS approaches for making the website responsive.

    QR Code Challenge Solution

    1

    P
    Øystein Håberg• 7,880

    @Islandstone89

    Posted

    HTML:

    • Remove the .attribution if you are not going to include it.

    • Every webpage needs a <main> that wraps all of the content, except for <header> and footer>. This is vital for accessibility, as it helps screen readers identify a page's "main" section. Change .container into a <main>.

    • The image has meaning, so it must have proper alt text. Write something short and descriptive, without including words like "image" or "photo". Screen readers start announcing images with "image", so an alt text of "image of qr code" would be read like this: "image, image of qr code". The alt text must also say where it leads(frontendmentor website).

    • Never have text in divs alone. "Improve your" is a <h2>, and "Scan the QR code" is a <p>. You don't need to wrap either in a <div>, so remove those 2 divs.

    CSS:

    • Including a CSS Reset at the top is good practice.

    • Add around 1rem of padding on the body, so the card doesn't touch the edges on small screens.

    • You don't need the .center class so I would remove it. To center the card horizontally and vertically, use Flexbox on the body:

    display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 100svh;

    • Remove all properties on .container.

    • Remove all widths, as well as min-height and max-height on the card.

    • Add a max-width of around 20rem on the card, to prevent it from getting too wide on larger screens.

    • I would use rem instead of em on font-size.

    • Paragraphs have a default value of font-weight: 400, so there is no need to declare it.

    • To create the space between the image and the edge of the card, set padding on all 4 sides of the card:padding: 16px;.

    • On the image, add display: block and max-width: 100% - the max-width prevents it from overflowing its container. Remove margin-top.

    Marked as helpful

    0
  • P
    Øystein Håberg• 7,880

    @Islandstone89

    Posted

    Hi Mahmoud, well done!

    Here are some suggestions:

    HTML:

    • Every webpage needs a <main> that wraps all of the content, except for <header> and footer>. This is vital for accessibility, as it helps screen readers identify a page's "main" section. Wrap the card in a <main>.

    • Remove the <span> elements, they are not needed. Images shouldn't be wrapped in a <span>, and "Learning" "Published" and "Greg Hooper" are all <p> elements.

    • I would use the <time> element for the date:<p>Published <time datetime="2023-12-21">21 Dec 2023</time></p>.

    • Change the alt text on the profile image to "Headshot of Gary Hooper".

    • .attribution should be a <footer>, and you should use <p> for the text inside.

    CSS:

    • Including a CSS Reset at the top is good practice.

    • Add around 1rem of padding on the body, so the card doesn't touch the edges on small screens.

    • On the body, change height to min-height - this way, the content will not get cut off if it grows beneath the viewport. Remove the width, as the body takes up the full width of the viewport by default.

    • Remove the width on the card - to make components responsive, we should rarely set fixed sizes in px.

    • Add a max-width of around 20rem on the card, to prevent it from getting too wide on larger screens.

    • font-size on the footer must also be in rem.

    • On the top image, add display: block and max-width: 100% - the max-width prevents it from overflowing its container.

    0
  • Syed Muhammad Zain Ul Abideen• 20

    @imszain5

    Submitted

    What are you most proud of, and what would you do differently next time?

    I am proud of that by completing these projects it will enhance my skills and will help to gain valuable knowledge and hands on experience. I want to write more complex code next time .

    What challenges did you encounter, and how did you overcome them?

    Little bit challanges I faced and I overcome it with the help of google. And That's it.

    What specific areas of your project would you like help with?

    It help me with the html and Css. And I gain valuable knowledge.

    I used Custom CSS in this project. I used Flex box instead of CSS Grid

    3

    P
    Øystein Håberg• 7,880

    @Islandstone89

    Posted

    HTML:

    • Every webpage needs a <main> that wraps all of the content, except for <header> and footer>. This is vital for accessibility, as it helps screen readers identify a page's "main" section. Change the first <div> to a <main>.

    • You don't need all of those divs! You only need one <div>, which holds the card content - I would give it a class of .card.

    • The alt text must also say where it leads(frontendmentor website).

    • "Improve your" should be a <h2>.

    CSS:

    • Including a CSS Reset at the top is good practice.

    • Use the style guide to find the correct font-family.

    • Use the style guide to find the correct background-color.

    • Add around 1rem of padding on the body, so the card doesn't touch the edges on small screens.

    • To center the card horizontally and vertically, use Flexbox on the body:

    display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 100svh;

    • Remove all widths and heights.

    • Add a max-width of around 20rem on the card, to prevent it from getting too wide on larger screens.

    • Add text-align: center on the card to center the text.

    • To create the space between the image and the edge of the card, set padding on all 4 sides of the card: padding: 16px.

    • On the image, add display: block and max-width: 100% - the max-width prevents it from overflowing its container. Remove the margin.

    • Add border-radius: 10px on the card and the image.

    0
  • Maryam Damagum• 40

    @maryam-damagum

    Submitted

    What are you most proud of, and what would you do differently next time?

    I am very proud of myself for achieving the task in a short time.

    What challenges did you encounter, and how did you overcome them?

    The challenges are still the same. I am still struggling with responsiveness.

    What specific areas of your project would you like help with?

    The responsiveness of my website.

    Blog Preview card Using Html and Css

    1

    P
    Øystein Håberg• 7,880

    @Islandstone89

    Posted

    HTML:

    • Every webpage needs a <main> that wraps all of the content, except for <header> and footer>. This is vital for accessibility, as it helps screen readers identify a page's "main" section. Wrap the card in a <main>, and change .main to .card.

    • Replace the id with a class.

    • "Learning" is a <p>.

    • Wrap the date in a <time> element:<p>Published <time datetime="2023-12-21">21 Dec 2023</time></p>.

    • The heading would have a link as this is a blog card.

    • An appropriate alt text for the profile image would be "Headshot of Gary Hooper".

    • "Gary Hooper" is a <p>.

    CSS:

    • Including a CSS Reset at the top is good practice.

    • Add around 1rem of padding on the body, so the card doesn't touch the edges on small screens.

    • Remove the margin on the card.

    • To center the card horizontally and vertically, use Flexbox on the body:

    display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 100svh;

    • Except for the profile image, remove all widths and heights.

    • Add a max-width of around 20rem on the card, to prevent it from getting too wide on larger screens.

    • Remove font-style: normal, as that is the default value already.

    • Add display: inline-block or width: fit-content on "Learning".

    • font-size must never be in px. This is a big accessibility issue, as it prevents the font size from scaling with the user's default setting in the browser. Use rem instead.

    • Paragraphs have a default value of font-weight: 400, so there is no need to declare it.

    • It is standard practice to add display: block and max-width: 100% on images - the max-width makes images resize according to their container.

    • As the design doesn't change, there is no need for any media queries. When you do need them, they should be in rem, not px. Also, it is common practice to do mobile styles first and use media queries for larger screens.

    0
  • P
    Øystein Håberg• 7,880

    @Islandstone89

    Posted

    HTML:

    • Every webpage needs a <main> that wraps all of the content, except for <header> and footer>. This is vital for accessibility, as it helps screen readers identify a page's "main" section. Wrap the card in a <main>.

    • It is common to use a class instead of an id.

    • The image has meaning, so it must have proper alt text. Write something short and descriptive, without including words like "image" or "photo". Screen readers start announcing images with "image", so an alt text of "image of qr code" would be read like this: "image, image of qr code". The alt text must also say where it leads(frontendmentor website).

    CSS:

    • Including a CSS Reset at the top is good practice.

    • Use the style guide to find the correct font-family.

    • Add around 1rem of padding on the body, so the card doesn't touch the edges on small screens.

    • To center the card horizontally and vertically, add the following on body:

    display: flex;
flex-direction: column;
justify-content: center;
align-items: center;

    • On the card, remove height, width, position, margin and inset.

    • max-width should be in rem. Change it to around 20rem.

    • On the image, add display: block and change width to max-width: 100% - the max-width prevents it from overflowing its container.

    0
  • David• 30

    @Dav1dGP

    Submitted

    What are you most proud of, and what would you do differently next time?

    What I am most proud of is the time and ease of doing this project.

    What challenges did you encounter, and how did you overcome them?

    As with the QR project, the biggest challenge has been to center the container and make it responsive.

    What specific areas of your project would you like help with?

    Tips related to responsive are welcome.

    BLOG-PREVIEW-CARD with HTML and CSS

    3

    P
    Øystein Håberg• 7,880

    @Islandstone89

    Posted

    Hi, well done!

    Here is some feedback:

    HTML:

    • I would use class instead of id on the images.

    • Consider wrapping the date in a <time> element:<p>Published <time datetime="2023-12-21">21 Dec 2023</time></p>.

    • The heading would have a link, as this is a blog card.

    • You don't need to write "image" in the alt text, as screen readers will read that by default. A suitable alt text for the profile image would be "Headshot of Gary Hooper".

    • Footer text should be wrapped in <p>.

    CSS:

    • Including a CSS Reset at the top is good practice.

    • Add around 1rem of padding on the body, so the card doesn't touch the edges on small screens.

    • When declaring display: flex, the default value is flex-direction: row, meaning flex items go side by side. Here, we want them to stack, so add flex-direction: column on the body. I would also add gap: 2rem to make sure there is distance between the main and the footer. Remove the absolute positioning on the footer.

    • I would use px or rem for border-radius.

    • Change the max-widthto 20rem.

    • center is not a valid value for flex-direction. You do not need to set the flex-direction - in this instance, you want the default row value.

    • I don't think this challenge needs any media queries. When required, they should be in rem.

    Marked as helpful

    0
  • P
    Julie• 60

    @salentipy

    Submitted

    What are you most proud of, and what would you do differently next time?

    What I learned Just learning how to use Figma. This project was a nice intro to that!

    Continued development Always looking for best practices especially in regards to accessibility and responsivity. Any feedback received may be added here at a later date.

    What challenges did you encounter, and how did you overcome them?

    Still working out how to properly use Figma since I upped my account to a paid sub.

    What specific areas of your project would you like help with?

    I'm still having some "issues" with vertical alignment - if they are indeed actually issues. My images aren't always lining up well in the slider comparison window.

    QR Code Component Main

    1

    P
    Øystein Håberg• 7,880

    @Islandstone89

    Posted

    Hi, great job!

    Some suggestions:

    HTML:

    • The alt text must also say where it leads(frontendmentor website).

    CSS:

    • Including a CSS Reset at the top is good practice.

    • Add around 1rem of padding on the body, so the card doesn't touch the edges on small screens.

    • On the body, change height to min-height - this way, the content will not get cut off if it grows beneath the viewport.

    • I would move the properties on .wrapper to the body. You don't need to declare nowrap, as that is the default value for flex-wrap.

    • Remove the width on the card. Instead, give it a max-width of around 20rem to prevent it from getting too wide on larger screens.

    • On the image, remove the width and height. Add display: block and max-width: 100% - the max-width prevents it from overflowing its container.

    Marked as helpful

    0
  • P
    Øystein Håberg• 7,880

    @Islandstone89

    Posted

    HTML:

    • Every webpage needs a <main> that wraps all of the content, except for <header> and footer>. This is vital for accessibility, as it helps screen readers identify a page's "main" section. Wrap the card in a <main>.

    • Replace the id on the card with a class.

    • Headings should always be in order, so you would never start with a <h5>. Likewise, you cannot go from a <h1> to a <h4>. Also, none of them are headings - change them to <p>.

    • I would wrap the date in a <time> element:<p>Published <time datetime="2023-12-21">21 Dec 2023</time></p>.

    • The heading would have a link as this is a blog card.

    • The profile image needs alt text, for example, "Headshot of Gary Hooper".

    CSS:

    • Including a CSS Reset at the top is good practice.

    • Add around 1rem of padding on the body, so the card doesn't touch the edges on small screens.

    • You don't need to set anything on html, so I would remove that selector.

    • On body, remove the width - block elements like <body>, <main>, <div> etc take up the full width by default. Remove the height as well.

    • To center the card horizontally and vertically, use Flexbox on the body:

    display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 100svh;

    • Remove the margin on the card.

    • Add max-width: 20rem on the card, it will work on all types of screens. Remove height: auto, as that is the default value.

    • Remove the width on .header - as mentioned, block elements take up the full width by default.

    0
  • P
    Øystein Håberg• 7,880

    @Islandstone89

    Posted

    Hi there, good job. Here is my feedback:

    HTML:

    • Every webpage needs a <main> that wraps all of the content, except for <header> and footer>. This is vital for accessibility, as it helps screen readers identify a page's "main" section. Change .container to a <main>.

    • The image has meaning, so it must have proper alt text. Write something short and descriptive, without including words like "image" or "photo". Screen readers start announcing images with "image", so an alt text of "image of qr code" would be read like this: "image, image of qr code". The alt text must also say where it leads(frontendmentor website).

    CSS:

    • Including a CSS Reset at the top is good practice.

    • Add around 1rem of padding on the body, so the card doesn't touch the edges on small screens.

    • On body, remove font-optical-sizing, font-weight and font-style, as your values are already the default values. Add justify-content: center to center the card horizontally.

    • Remove the margin on .container, and move max-width to .card. It must be in rem - around 20rem works well.

    • font-size must never be in px. This is a big accessibility issue, as it prevents the font size from scaling with the user's default setting in the browser. Use rem instead.

    • On the image, add display: block and change width to max-width: 100% - the max-width prevents it from overflowing its container.

    0
  • UrNotic• 50

    @UrNotic

    Submitted

    What are you most proud of, and what would you do differently next time?

    proud of having it look very similar to original

    I'd like to make it more responsive to screen size

    What challenges did you encounter, and how did you overcome them?

    There wasn't very challenging just basic HTML and CSS understanding

    What specific areas of your project would you like help with?

    positioning of the QR code

    solution of the first challenge with plain HTML and CSS

    2

    P
    Øystein Håberg• 7,880

    @Islandstone89

    Posted

    HTML:

    • The alt text must also say where it leads(frontendmentor website).

    • Use <p> for the footer text.

    CSS:

    • It is best practice to write CSS in a separate file, often called style.css. Create one in the same folder as the index.html, and link to it in the <head>: <link rel="stylesheet" href="style.css">.

    • Including a CSS Reset at the top is good practice.

    • Add around 1rem of padding on the body, so the card doesn't touch the edges on small screens.

    • Remove the margin on the card.

    • To center the card and the footer horizontally and vertically, use Flexbox on the body. You must also add some space between them using gap:

    display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 100svh;
gap: 2rem;

    • Remove the width on the card - setting fixed sizes in px is not recommended, as we want our components to be able to adapt to different screens.

    • Add a max-width of around 20rem on the card, to prevent it from getting too wide on larger screens.

    • font-size must never be in px. This is a big accessibility issue, as it prevents the font size from scaling with the user's default setting in the browser. Use rem instead.

    • Since all of the text should be centered, you only need to set text-align: center on the body, and remove it elsewhere. The children will inherit the value.

    • I would increase the padding on the card to around 16px.

    • On the image, add display: block and change width to max-width: 100% - the max-width prevents it from overflowing its container. Remove the z-index, it is not needed.

    Hope this is helpful - good luck :)

    Marked as helpful

    1
  • Neven Cebic• 300

    @redizork

    Submitted

    What are you most proud of, and what would you do differently next time?

    Nothing to write.

    What challenges did you encounter, and how did you overcome them?

    Nothing to write.

    What specific areas of your project would you like help with?

    Nothing to write.

    QR Code Component

    2

    P
    Øystein Håberg• 7,880

    @Islandstone89

    Posted

    Good job, Neven!

    A few suggestions:

    HTML:

    • Every webpage needs a <main> that wraps all of the content, except for <header> and footer>. This is vital for accessibility, as it helps screen readers identify a page's "main" section. Wrap the card in a <main>.

    • The alt text must also say where it leads(frontendmentor website).

    CSS:

    • Add around 1rem of padding on the body, so the card doesn't touch the edges on small screens.

    • Do NOT change the default font size on html.

    • Remove overflow: hidden, it is not needed.

    • max-width on the card should be in rem. Change it to 20rem, which equals 320px.

    Marked as helpful

    0
  • P
    Øystein Håberg• 7,880

    @Islandstone89

    Posted

    HTML:

    • Every webpage needs a <main> that wraps all of the content, except for <header> and footer>. This is vital for accessibility, as it helps screen readers identify a page's "main" section. Wrap the card in a <main>.

    • I would use the <time> element for the date:<p>Published <time datetime="2023-12-21">21 Dec 2023</time></p>.

    • The heading would have a link inside, as this is a blog card.

    • Screen readers automatically announce <img> as an image, so you shouldn't have words like "image" or "photo" in the alt text. A suitable alt text for the profile image would be "Headshot of Gary Hooper".

    • .attribution should be a <footer>, and you should use <p> for the text inside.

    CSS:

    • Including a CSS Reset at the top is good practice.

    • font-size and font-weight should be placed on the body, not the *. You do not need to declare font-size: 1rem, as that is the default value.

    • Add around 1rem of padding on the body, so the card doesn't touch the edges on small screens.

    • Remove the media query, it is not needed. Replace widthon the card with max-width: 20rem.

    • I would remove the positioning and transform properties on .attribution.

    0
  • P
    Øystein Håberg• 7,880

    @Islandstone89

    Posted

    HTML:

    • Consider wrapping the date in a <time> element:<p>Published <time datetime="2023-12-21">21 Dec 2023</time></p>.

    • The profile image needs alt text, like "Headshot of Gary Hooper".

    • .attribution should be a <footer>, and it needs to be moved outside of the <main>, as they are distinct semantic landmarks.

    CSS:

    • Including a CSS Reset at the top is good practice.

    • Use the style guide to find the correct font-family.

    • Add around 1rem of padding on the body, so the card doesn't touch the edges on small screens.

    • Remove the margin on the card.

    • To center the card horizontally and vertically, with some space between the main and the footer, use Flexbox on the body:

    display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 100svh;
gap: 2rem;

    • Remove the width on "Learning" and on the card. Add display: inline-block on "Learning".

    • Add a max-width of around 20rem on the card, to prevent it from getting too wide on larger screens.

    • font-size must never be in px. This is a big accessibility issue, as it prevents the font size from scaling with the user's default setting in the browser. Use rem instead.

    0
  • P
    Øystein Håberg• 7,880

    @Islandstone89

    Posted

    HTML:

    • Every webpage needs a <main> that wraps all of the content, except for <header> and footer>. This is vital for accessibility, as it helps screen readers identify a page's "main" section. Wrap the card in a <main>.

    • I would use the <time> element for the date:<p>Published <time datetime="2023-12-21">21 Dec 2023</time></p>.

    • The heading would need a link inside, as this is a blog card.

    • The profile image needs a short, descriptive alt text:"Headshot of Gary Hooper".

    CSS:

    • Including a CSS Reset at the top is good practice.

    • Add around 1rem of padding on the body, so the card doesn't touch the edges on small screens.

    • Remove the width and height on the card.

    • Add a max-width of around 20rem on the card, to prevent it from getting too wide on larger screens.

    • font-size must never be in px. This is a big accessibility issue, as it prevents the font size from scaling with the user's default setting in the browser. Use rem instead.

    0
  • P
    Øystein Håberg• 7,880

    @Islandstone89

    Posted

    HTML:

    • The image has meaning, so it must have proper alt text. Write something short and descriptive, without including words like "image" or "photo". Screen readers start announcing images with "image", so an alt text of "image of qr code" would be read like this: "image, image of qr code". The alt text must also say where it leads(frontendmentor website).

    CSS:

    • Including a CSS Reset at the top is good practice.

    • Add around 1rem of padding on the body, so the card doesn't touch the edges on small screens.

    • On the body, change height to min-height - this way, the content will not get cut off if it grows beneath the viewport.

    • Remove all widths in px.

    • Add a max-width of around 20rem on the card, to prevent it from getting too wide on larger screens.

    • font-size must never be in px. This is a big accessibility issue, as it prevents the font size from scaling with the user's default setting in the browser. Use rem instead. I would also decrease the font size, so the card doesn't get too tall.

    • line-height must also never be in px. Use numbers instead; for example, if you want a line-height twice the size of the element's font size, write line-height: 2;.

    • On the image, add display: block and max-width: 100% - the max-width prevents it from overflowing its container.

    • I would decrease the padding on the card to around 16px.

    • As the design doesn't change, there is no need for any media queries. When you do need them, they should be in rem, not px. Also, it is common practice to do mobile styles first and use media queries for larger screens.

    Marked as helpful

    1
  • P
    Øystein Håberg• 7,880

    @Islandstone89

    Posted

    Hi, good job!

    A few suggestions:

    HTML:

    • Consider using the <time> element for the date:<p>Published <time datetime="2023-12-21">21 Dec 2023</time>/p>.

    • The heading would have a link as this is a blog card.

    • Don't use "picture" or "image" in the alt text. A better description would be something like "Headshot of Gary Hooper".

    • Footer text must be wrapped in 2 <p> elements.

    CSS:

    • Including a CSS Reset at the top is good practice.

    • Add around 1rem of padding on the body, so the card doesn't touch the edges on small screens.

    • font-size must never be in px. This is a big accessibility issue, as it prevents the font size from scaling with the user's default setting in the browser. Use rem instead.

    • Media queries should be in rem or em, and we usually style for mobile as the default.

    Marked as helpful

    0
  • Alexandru736• 40

    @Alexandru736

    Submitted

    What are you most proud of, and what would you do differently next time?

    I was able to do my first HTML & CSS mini project, covering some of the basics I've learned.

    What challenges did you encounter, and how did you overcome them?

    What breakpoints to add to the card's responsiveness. I checked online what are the most appropriate widths for the most used devices.

    What specific areas of your project would you like help with?

    So far none. If there are better things I could do to improve the quality of my work, I'm ready to listen.

    QR code component

    1

    P
    Øystein Håberg• 7,880

    @Islandstone89

    Posted

    HTML:

    • <main> has an implicit role="main", so there is no need to declare it explicitly.

    • The alt text must also say where it leads(frontendmentor website).

    • .attribution should be a <footer>, and you should use <p> for the text inside. It needs to be moved outside of the footer, as they are 2 separate landmarks.

    CSS:

    • Including a CSS Reset at the top is good practice.

    • Add around 1rem of padding on the body, so the card doesn't touch the edges on small screens.

    • Add gap: 2rem on body, to create space between the card and the footer.

    • I would use px for border-radius instead of %.

    • Remove all widths in px.

    • Add a max-width of around 20rem on the card, to prevent it from getting too wide on larger screens.

    • Since all of the text should be centered, you only need to set text-align: center on the body, and remove it elsewhere. The children will inherit the value.

    • Paragraphs have a default value of font-weight: 400, so there is no need to declare it.

    • On the image, change width to max-width.

    • As the design doesn't change, there is no need for any media queries. When you do need them, they should be in rem, not px.

    Marked as helpful

    1
  • P
    Anthony Young• 30

    @A-Young-Git

    Submitted

    What are you most proud of, and what would you do differently next time?

    took slaythedragon.io's css course and now i was able to slice my workflow time in half and understand what im doing every step of the way.

    What challenges did you encounter, and how did you overcome them?

    getting border-radius to round the entire image container. I needed to use the overflow:hidden property.

    What specific areas of your project would you like help with?

    open to any suggestions or feedback

    Blog Preview card

    1

    P
    Øystein Håberg• 7,880

    @Islandstone89

    Posted

    Hi Anthony, good job!

    Here are some suggestions :)

    HTML:

    • Every webpage needs a <main> that wraps all of the content, except for <header> and footer>. This is vital for accessibility, as it helps screen readers identify a page's "main" section. Wrap the card in a <main>.

    • Replace <span> with <p>.

    • Consider using the <time> element for the date:<p>Published <time datetime="2023-12-21">21 Dec 2023</time></p>.

    • As this is a blog card, the heading needs a link inside.

    • The heading should be a <h2>, as the card would likely wouldn't be the only component on a page.

    CSS:

    • Add around 1rem of padding on the body, so the card doesn't touch the edges on small screens.

    • Add width: fit-content on "Learning", so it doesn't stretch across the card.

    • Except for the author image, remove all widths and heights in px.

    • Add a max-width of around 20rem on the card, to prevent it from getting too wide on larger screens.

    • It is common practice to add display: block and max-width: 100% on images. The max-width prevents it from flowing out of its container.

    • On .author__section, remove justify-content: space-between, and add gap: 1rem.

    Marked as helpful

    0
  • Shafiq Ur Rehman• 100

    @srplanta

    Submitted

    What are you most proud of, and what would you do differently next time?

    Using Flexbox and aligning items

    What challenges did you encounter, and how did you overcome them?

    Faced problems by first time uploading files

    What specific areas of your project would you like help with?

    using media queries

    Frontend Mentor - QR code component challenge by using CSS flex box

    2

    P
    Øystein Håberg• 7,880

    @Islandstone89

    Posted

    HTML:

    • Every webpage needs a <main> that wraps all of the content, except for <header> and footer>. This is vital for accessibility, as it helps screen readers identify a page's "main" section. Wrap the card in a <main>.

    • The image has meaning, so it must have proper alt text. Write something short and descriptive, without including words like "image" or "photo". Screen readers start announcing images with "image", so an alt text of "image of qr code" would be read like this: "image, image of qr code". The alt text must also say where it leads(frontendmentor website).

    • Never have text in divs alone. "Improve your" is a <h2> and "Scan the QR code" is a <p>. You don't need to wrap either in a <div>.

    CSS:

    • Including a CSS Reset at the top is good practice.

    • Use the style guide to find the correct background-color.

    • Add around 1rem of padding on the body, so the card doesn't touch the edges on small screens.

    • Move font-family and font-size from :root to body.

    • On the body, change height to min-height - this way, the content will not get cut off if it grows beneath the viewport. Remove the width, as it is 100% wide by default. Change justify-content from space-around to center.

    • Remove all widths in % and px.

    • Add a max-width of around 20rem on the card, to prevent it from getting too wide on larger screens.

    • Remove justify-content from the card, it is not needed.

    • font-size must never be in px. This is a big accessibility issue, as it prevents the font size from scaling with the user's default setting in the browser. Use rem instead.

    • Since all of the text should be centered, you only need to set text-align: center on the body, and remove it elsewhere. The children will inherit the value.

    • Paragraphs have a default value of font-weight: 400, so there is no need to declare it.

    • On the image, add display: block and max-width: 100% - the max-width prevents it from overflowing its container.

    • As the design doesn't change, there is no need for any media queries. When you do need them, they should be in rem, not px. Also, it is common practice to do mobile styles first and use media queries for larger screens.

    Marked as helpful

    1
  • bea-jpg• 90

    @bea-jpg

    Submitted

    What are you most proud of, and what would you do differently next time?

    Working speed.

    What challenges did you encounter, and how did you overcome them?

    None

    What specific areas of your project would you like help with?

    None

    blog-preview-card-main

    2

    P
    Øystein Håberg• 7,880

    @Islandstone89

    Posted

    Hey, well done. Here are some suggestions:

    HTML:

    • Every webpage needs a <main> that wraps all of the content, except for <header> and footer>. This is vital for accessibility, as it helps screen readers identify a page's "main" section. Change .container to a <main>.

    • Wrap the date in a <time> element:<p>Published <time datetime="2023-12-21">21 Dec 2023</time></p>.

    • The heading would have a link as this is a blog card.

    • .attribution should be a <footer>, and you should use <p> for the text inside. It needs to be moved outside of the <main>.

    CSS:

    • Including a CSS Reset at the top is good practice.

    • Add around 1rem of padding on the body, so the card doesn't touch the edges on small screens.

    • Move font-family, font-size and font-weight from * to body.

    • Move all the properties on .container to body.

    • Remove the width on .card and .category.

    • Add a max-width of around 25rem on the card, to prevent it from getting too wide on larger screens.

    • font-size must never be in px. This is a big accessibility issue, as it prevents the font size from scaling with the user's default setting in the browser. Use rem instead.

    • Add display: inline-block on .category, this prevents it from taking up the full width.

    Marked as helpful

    0