Skip to content
OverviewSolutions
39
Comments
819
P
Øystein Håberg
@Islandstone89

All comments

  • mkalkandev•70
    @mkalkandevSubmitted 4 days ago
    What are you most proud of, and what would you do differently next time?

    Note to myself: -Learn how to use semantic tags. -Use "rem" for sizing.

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

    It was difficult to make the text suitable for the design, in the end the solution was with the size of the text and I adjusted it.

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

    I would like a general evaluation and ideas on how I can write better code.

    Creating a blog card using Flexbox

    2
    Øystein Håberg•10,970
    @Islandstone89Posted about 18 hours ago

    HTML:

    • Don't wrap only the text in a <main>, as the <main> represents all of the main content on a page. Instead, wrap the card in a <main>.

    • Change <footer> to a <div>, as <footer> cannot be inside of a <main>.

    • Headings should always be in order, so you would never have a <h3> before a <h2>. Also, "Learning" is a <p>.

    • I would change the alt text on the profile image to "Headshot of Gary Hooper".

    CSS:

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

    • I recommend adding a bit of padding, for example 16px, on the body, to ensure the card doesn't touch the edges on small screens.

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

    • Change line-height: 1.5rem to line-height: 1.5, or line-height: 150%.

    • You don't have to declare flex-direction: row, as that is the default value.

    • Pro tip: Whenever a value is being used several times, it's smart to store it as a Custom Property, aka a variable. Here we have a yellow color that is being used as background for the page and "Learning", as well as heading color when it is hovered. Instead of writing out the hsl value each time, you can declare it once, and reference to it throughout the stylesheet. An added benefit is that if you wanted those values to change, you only need to change it one place, instead of several.

    First, declare the Custom Property on the :root. This means it is available for all elements in the DOM. To store a variable, we use -- followed by a name of our choice:

    
:root {
  --clr-accent: hsl(47, 88%, 63%);
}

    Now we can update the code using the Custom Property:

    body {
    background-color: var(--clr-accent);
}

    .learning {
    background-color: var(--clr-accent);
}

    a:hover{
    color: var(--clr-accent); 
}

    I hope this made sense. Overall, great work! :)

    Marked as helpful
    0
  • mkalkandev•70
    @mkalkandevSubmitted 4 days ago
    What are you most proud of, and what would you do differently next time?

    Frankly, I couldn't understand where and how to use desktop and mobile width in the project, but I still tried to make the project similar.

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

    There are many ways to center the menu exactly in the middle of the page and the easiest way for me is to use flex.

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

    Honestly I would like help in making it responsive and giving it a custom and mobile friendly width.

    CSS Flex kullanarak QR menu

    2
    Øystein Håberg•10,970
    @Islandstone89Posted about 18 hours ago

    Hey, well done!

    Here are some tips:

    HTML:

    • <main> holds all of the main content on a page. As a card would likely not be the only component on a page, I would wrap the card content in a <div class="card"> inside of <main>.

    • Remove <article>, it is not needed.

    CSS:

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

    • Use the style guide to find the correct font-family and background-color.Remember to specify a fallback font: font-family: 'Outfit',sans-serif;

    • I recommend adding a bit of padding, for example 16px, on the body, to ensure the card doesn't touch the edges on small screens.

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

    • max-width on the card should be in rem. Around 20rem will work fine.

    • 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 height: auto.

    Marked as helpful
    0
  • Øystein Håberg•10,970
    @Islandstone89Posted 3 days ago

    Hello, 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" content. 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(the frontendmentor website). A good alt text would be "QR code leading to the Frontend Mentor website."

    • Headings should always be in order, so you never start with a <h3>. I would change the heading to a <h2> - a page should only have one <h1>, reserved for the main heading. As this is a card heading, it would likely not be the main heading on a page with several components.

    • Change .attribution to a <footer>, and use <p> for the text inside.

    CSS:

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

    • Move font-family to body.

    • I recommend adding a bit of padding, for example 16px, on the body, to ensure the card doesn't touch the edges on small screens.

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

    • Remove all widths and heights in px. We rarely want to give a component a fixed size, as we need it to grow and shrink according to the screen size.

    • We do want to limit the width of the card, so it doesn't get too wide on larger screens. To solve this issue, give the card a max-width of around 20rem.

    • 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, height: auto and max-width: 100% - the max-width prevents it from overflowing its container. Without this, an image would overflow if its intrinsic size is wider than the container. max-width: 100% makes the image shrink to fit inside its container.

    0
  • ErwinPlaza064•10
    @ErwinPlaza064Submitted 3 days ago
    What are you most proud of, and what would you do differently next time?

    I'm proud of my learning in flexbox and grid, I would like to make my landing page more accessible

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

    At the moment I am facing challenges, since I already had most of the things I used mastered.

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

    About whether my landing page is accessible and has a good HTML and CSS structure

    Responsive landing page with flexbox to create qr card

    1
    Øystein Håberg•10,970
    @Islandstone89Posted 3 days ago

    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" content. Change .container to a <main>.

    • Remove <picture>, that is used when you want to serve different versions of an image depending on the screen size.

    • 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(the frontendmentor website). A good alt text would be "QR code leading to the Frontend Mentor website."

    • I would change the heading to a <h2> - a page should only have one <h1>, reserved for the main heading. As this is a card heading, it would likely not be the main heading on a page with several components.

    CSS:

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

    • I recommend adding a bit of padding, for example 16px, on the body, to ensure the card doesn't touch the edges on small screens.

    • I would move the styles on .container to the body. Change height to min-height: 100svh - this way, the content will not get cut off if it grows beneath the viewport.

    • Remove all widths in px.We rarely want to give a component a fixed size, as we need it to grow and shrink according to the screen size.

    • We do want to limit the width of the card, so it doesn't get too wide on larger screens. To solve this issue, give the card a max-width of around 20rem.

    • 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.

    • font-family is also a property which gets inherited, so set it on body, and delete it anywhere else.

    • I would increase the padding on the card a little bit, to for example 16px.

    • On the image, add display: block, height: auto and max-width: 100% - the max-width prevents it from overflowing its container. Without this, an image would overflow if its intrinsic size is wider than the container. max-width: 100% makes the image shrink to fit inside its container.

    0
  • Ghazi Benattia•50
    @ghazibenattiaSubmitted 4 days ago
    What are you most proud of, and what would you do differently next time?

    What I'm Most Proud of

    I am most proud of how I was able to integrate Google Fonts into my project, giving it a polished and professional look with the "Outfit" font. This small detail really made a difference in the overall design and enhanced the user experience. I'm also proud of how I applied Flexbox to structure the layout. It was my first time using Flexbox, and it was rewarding to see how easy and flexible it was for centering and aligning content.

    Additionally, I'm proud of the fact that I focused on responsive design from the start, ensuring that the layout looks good across different devices. This was an important step toward making the site accessible and user-friendly.

    What I Would Do Differently Next Time

    Next time, I would experiment more with CSS Grid alongside Flexbox for even more control over complex layouts. While Flexbox works great for simpler structures, I think CSS Grid would be beneficial for creating more intricate designs. I would also focus on improving accessibility by adding appropriate ARIA labels and ensuring better screen reader compatibility.

    I also plan to refine my workflow with Git for version control and start using it earlier in the project to track changes more efficiently. Lastly, I would like to focus on making the design more interactive with some JavaScript to enhance the user experience even further.

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

    Challenges I Encountered and How I Overcame Them

    One of the main challenges I faced during this project was using Git commands in PowerShell. I encountered issues with understanding and executing commands properly, especially when it came to staging, committing, and pushing my changes to GitHub. At first, I was unsure of the correct syntax and encountered errors that slowed me down.

    To overcome this challenge, I turned to multiple learning resources including online tutorials, articles, and YouTube videos. Specifically, I found tutorials from Atlassian Git tutorials and Net Ninja's YouTube tutorial on GitHub Pages to be incredibly helpful. These resources explained Git concepts clearly, which helped me understand the commands and how to troubleshoot issues effectively.

    By actively looking up solutions and practicing the commands, I was able to build confidence and resolve the issues, which ultimately helped me improve my Git workflow.

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

    Areas I Would Like Help With

    I would like to dive deeper into HTML semantics to improve the structure and accessibility of my web pages. Understanding how to use semantic HTML elements properly will help me create cleaner, more accessible, and SEO-friendly websites.

    Additionally, I want to expand my knowledge on website responsiveness. While I've started using responsive design techniques, I would like to explore more advanced concepts and tools, such as media queries and fluid layouts, to ensure that my websites look great on all devices and screen sizes.

    Finally, I aim to improve my CSS styling and design skills. I want to learn more about advanced CSS techniques, like CSS Grid and CSS animations, to enhance the aesthetics and interactivity of my projects.

    QR Code Component challenge using HTML5 semantics and CSS flexbox

    1
    Øystein Håberg•10,970
    @Islandstone89Posted 4 days ago

    Hi, well done!

    Looking through your code, these are my suggestions for improvement.

    I hope they are clear and helpful - good luck :)

    HTML:

    • Remove <section>, it is not needed.

    • Remove <header> - this is used for content that stays the same on several pages, like a logo and navigation bar you often see at the top of every webpage.

    • I would change the heading to a <h2> - a page should only have one <h1>, reserved for the main heading. As this is a card heading, it would likely not be the main heading on a page with several components.

    • 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.

    • Wrap the footer text in a <p>.

    • The <footer> must be outside of the <main>, since they are both semantic landmarks.

    • It's best practice to give elements a class, and use that as a CSS selector.

    • Ideally, your HTML should look something like this:

    <main>
  <div class="card">
    <img src="images/image-qr-code.png" alt="QR code leading to Frontend Mentor" class="qr-image">
    <h2 class="heading">Improve your front-end skills by building projects</h2>
    <p class="text">Scan the QR code to visit Frontend Mentor and take your coding skills to the next level.</p>
  </div>
</main>

<footer class="attribution">
  <p>Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. Coded by <a href="https://github.com/ghazibenattia">Ghazi Benattia</a></p>.
</footer>

    CSS:

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

    • I recommend adding a bit of padding, for example 16px, on the body, to ensure the card doesn't touch the edges on small screens.

    • On the body, change height to min-height: 100svh - this way, the content will not get cut off if it grows beneath the viewport. Add flex-direction: column, so the footer is underneath the main and not to its side.

    • Remove all widths in %.

    • 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.

    • On the image, remove max-height. Add display: block, height: auto and change max-width to 100% - the max-width prevents it from overflowing its container. Without this, an image would overflow if its intrinsic size is wider than the container. max-width: 100% makes the image shrink to fit inside its container.

    Marked as helpful
    0
  • Øystein Håberg•10,970
    @Islandstone89Posted 4 days ago

    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" content. Wrap the card in a <main>.

    • I would remove the <div> around the image, as it is not needed.

    • Always include an alt attribute on images! If the image is purely decorative, the alt text should be empty: alt="". This 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(the frontendmentor website). A good alt text would be "QR code leading to the Frontend Mentor website."

    • I would change the heading to a <h2> - a page should only have one <h1>, reserved for the main heading. As this is a card heading, it would likely not be the main heading on a page with several components.

    • It's common to give elements a class. Ideally, your HTML would look like this:

    <main>
  <div class="card">
    <img src="images/image-qr-code.png" alt="QR code leading to the Frontend Mentor website." class="qr-image">
    <h2 class="heading">Improve your front-end skills by building projects</h2>
    <p> class="text">Scan the QR code to visit frontend mentor and take your coding skills to the next level</p>
  </div>
</main>

    NB: My class names are just suggestions, but you should a meaningful name.

    CSS:

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

    • I recommend adding a bit of padding, for example 16px, on the body, to ensure the card doesn't touch the edges on small screens.

    • Move font-family to body.

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

    • Remove the margin on the card, it is not needed since the card is centered using Flexbox.

    • Remove all widths in px. We rarely want to give a component a fixed size, as we need it to grow and shrink according to the screen size.

    • We do want to limit the width of the card, so it doesn't get too wide on larger screens. To solve this issue, give the card a max-width of around 20rem.

    • 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 wouldn't set an explicit font size on the paragraph, as its default font size of 1rem (equals 16px) is perceived as the minimal text size for accessibility.

    • 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, remove padding. Add display: block, height: auto and max-width: 100% - the max-width prevents it from overflowing its container. Without this, an image would overflow if its intrinsic size is wider than the container. max-width: 100% makes the image shrink to fit inside its container.

    • The card needs padding on all sides of the card. Replace padding: 10px 0 with padding: 16px.

    Marked as helpful
    0
  • OmarReyesC•10
    @OmarReyesCSubmitted 4 days ago
    What are you most proud of, and what would you do differently next time?

    I am happy to start working with HTML and CSS.

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

    I had a bit of trouble placing some elements, but I went back to some of my personal notes.

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

    I would like to know if the CSS code I used to place elements is as optimized as possible.

    QR Code Component with HTML and CSS

    2
    Øystein Håberg•10,970
    @Islandstone89Posted 4 days ago

    HTML:

    • I would remove <figure>, as it is not needed.

    • The alt text must also say where it leads(the frontendmentor website). A good alt text would be "QR code leading to the Frontend Mentor website."

    • I would change the heading to a <h2> - a page should only have one <h1>, reserved for the main heading. As this is a card heading, it would likely not be the main heading on a page with several components.

    • Wrap the footer text in a <p>.

    CSS:

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

    • I recommend adding a bit of padding, for example 16px, on the body, to ensure the card doesn't touch the edges on small screens.

    • Move font-family to body, it's not common to set styles on html.

    • Remove font-size: 62.5%, as changing the font size is not recommended.

    • Remove font-size on the heading and the paragraph, as their default values are suitable.

    • Move the styles on main to body, this way you can also center the <footer>, since it is a direct children of body.

    • On the body, remove height: 100% and change height to min-height: 100svh - this way, the content will not get cut off if it grows beneath the viewport. Add flex-direction: column so the footer sit underneath the main instead of besides it. Also, add gap: 20px, to have some space between the footer and the main.

    • 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.

    • 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 change the padding on the card to 16px 16px 24px 16px;.

    • On the image, add display: block, height: auto and max-width: 100% - the max-width prevents it from overflowing its container. Without this, an image would overflow if its intrinsic size is wider than the container. max-width: 100% makes the image shrink to fit inside its container.

    • Remove positon: fixed on the footer, as well as margin on .attribution.

    • Instead of nested selectors like .content__text p, it's recommended to apply a class to an element, and use that as a selector.

    Marked as helpful
    1
  • MarkoTintor23•40
    @MarkoTintor23Submitted 4 days ago
    What are you most proud of, and what would you do differently next time?

    This is my second small project, and it went smoother than the first. That I am most proud of.

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

    Some css properties I googled and immediately found them.

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

    I need help particulary with my live site, why do my pictures never render in the website, but in the code and when I select "go live" in VSC it works well and all pictures are there, but when I go to the live site in GitHub it doesnt want to show pictures?

    Product preview card using css and html

    1
    Øystein Håberg•10,970
    @Islandstone89Posted 4 days ago

    Hi. Your file path is incorrect. The path must be relative to the index.html. Change src="/product-preview-card-component-main/images/image-product-desktop.jpg" to src="images/image-product-desktop.jpg". NB: When you need different image versions depending on the screen size, use the <picture> element.

    Marked as helpful
    0
  • Øystein Håberg•10,970
    @Islandstone89Posted 5 days ago

    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(the frontendmentor website). A good alt text would be "QR code leading to the Frontend Mentor website."

    • Change .attribution to a <footer>, and use <p> for the text inside.

    CSS:

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

    • I recommend adding a bit of padding, for example 16px, on the body, to ensure the card doesn't touch the edges on small screens.

    • Remove all styles on main.

    • Remove the margin on the card.

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

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

    • 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.

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

    • Remove the margin on the paragraph.

    • The paragraph text has poor contrast, making the text harder to read. Inspecting it in DevTools (open it using the F12 key, then inspect an element using Ctrl+Shift+I) reveals a contrast ratio of 3.53. To fullfill the Web Content Accessibility Guidelines requirements, text must have a contrast ratio of at least 4.5. Since the color is in hsl(hue, saturation, lightness), you can make it darker by reducing the l value. Changing color: hsl(220, 15%, 55%) to color: hsl(220, 15%, 45%) makes the contrast ratio 5.2, which is acceptable.

    • On the image, remove width and replace margin with margin-bottom: 20px. Add display: block, height: auto and max-width: 100% - the max-width prevents it from overflowing its container. Without this, an image would overflow if its intrinsic size is wider than the container. max-width: 100% makes the image shrink to fit inside its container.

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

    • Don't use complex selectors like main .card .content p, as it increases specificity, making it harder to override. It's best practice to give elements a class and then use that class as the selector.

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

    0
  • Øystein Håberg•10,970
    @Islandstone89Posted 5 days ago

    Hi Lucas, great job!

    Here are some suggestions to improve your solution even further:

    HTML:

    • Remove the <section>, it is not needed.

    • You don't need to include words like "image" or "picture" in the alt text. 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(the frontendmentor website). A good alt text would be "QR code leading to the Frontend Mentor website."

    • I would change the heading to a <h2> - a page should only have one <h1>, reserved for the main heading. As this is a card heading, it would likely not be the main heading on a page with several components.

    CSS:

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

    • I recommend adding a bit of padding, for example 16px, on the body, to ensure the card doesn't touch the edges on small screens.

    • Also on the body, you can remove font-weight: 400 and font-style: normal, as these are default values.

    • Remove the margin 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.

    • On the image, add display: block, height: auto and change width to max-width: 100% - the max-width prevents it from overflowing its container. Without this, an image would overflow if its intrinsic size is wider than the container. max-width: 100% makes the image shrink to fit inside its container.

    Marked as helpful
    0
  • Øystein Håberg•10,970
    @Islandstone89Posted 6 days ago

    Hi, well done!

    Here are some things that could be improved upon:

    HTML:

    • <main> holds all of the main content on a page. As a card would likely not be the only component on a page, I would wrap the card content in a <div class="card"> inside of <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(the frontendmentor website). A good alt text would be "QR code leading to the Frontend Mentor website."

    • I would change the heading to a <h2> - a page should only have one <h1>, reserved for the main heading. As this is a card heading, it would likely not be the main heading on a page with several components.

    CSS:

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

    • I recommend adding a bit of padding, for example 16px, on the body, to ensure the card doesn't touch the edges on small screens.

    • Remove all the styles on html, it's not common for it to have any styles applied.

    • On the body, remove width: 100% - since the body is a block element, it takes up the full width by default.

    • Remove the width on the card. We rarely want to give a component a fixed size, as we need it to grow and shrink according to the screen size.

    • We do want to limit the width of the card, so it doesn't get too wide on larger screens. To solve this issue, give the card a max-width of around 20rem.

    • 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.

    • Good job having max-width: 100% on the image! It's also common to give images display: block and height: auto.

    0
  • Anan-dev•30
    @Anan-KaranjaSubmitted 6 days ago
    What are you most proud of, and what would you do differently next time?

    I developed the project using the Figma design file and utilized CSS flexbox. Next time, I would like to try using CSS Grid.

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

    Obtaining the correct card size and margins for the elements was somewhat challenging, but I used the Figma design to get them as close as possible.

    QR code component Flexbox

    2
    Øystein Håberg•10,970
    @Islandstone89Posted 6 days ago

    Hello, good job!

    Here are my suggestions - I hope you find them 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" content. 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(the frontendmentor website). A good alt text would be "QR code leading to the Frontend Mentor website."

    • Headings should always be in order, so you never start with a <h3>. I would change the heading to a <h2> - a page should only have one <h1>, reserved for the main heading. As this is a card heading, it would likely not be the main heading on a page with several components.

    • You don't need to wrap the image or the text in a <div>.

    • It's recommended to add a class on elements.

    • Ideally, your HTML would look something like this:

    <main>
  <div class="container">
    <img src="./images/image-qr-code.png" alt="QR code leading to the Frontend Mentor website." class="qr-image">
    <h2 class="heading">Improve your front-end skills by building projects</h2>
    <p class="text">Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
  </div>
</main>

    CSS:

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

    • It's not common to set styles on the html, so move those properties to the body. Remove font-size: 16px, as that is the default value, meaning it doesn't need to be declared. Also, font size must always be in rem.

    • I recommend adding a bit of padding, for example 16px, on the body, to ensure the card doesn't touch the edges on small screens.

    • On the body, change height to min-height: 100svh - this way, the content will not get cut off if it grows beneath the viewport. Remove the width, as block elements are 100% wide by default.

    • Remove all widths and heights in px. We rarely want to give a component a fixed size, as we need it to grow and shrink according to the screen size.

    • We do want to limit the width of the card, so it doesn't get too wide on larger screens. To solve this issue, give the card a max-width of around 20rem.

    • 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.

    • On the image, add display: block, height: auto and max-width: 100% - the max-width prevents it from overflowing its container. Without this, an image would overflow if its intrinsic size is wider than the container. max-width: 100% makes the image shrink to fit inside its container.

    Marked as helpful
    0