All comments

Juicedream•40
@Juicedream
Submitted about 1 month ago
What challenges did you encounter, and how did you overcome them?
responsiveness, still having troubles there
What specific areas of your project would you like help with?
responsiveness, still having troubles there
Css, flexbox, html
#pure-css
1
P
Øystein Håberg•13,260
@Islandstone89
Posted about 1 month ago
Hi there, well done.

Here are some suggestions - I highly recommend applying these changes before moving on to the next project.

Good luck :)

HTML:
- Every webpage needs a <main> element 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>.
- You don't need to wrap the image in a <div>.
- The alt text must also specify 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:
- Make a habit of including a modern CSS Reset at the top of your stylesheet.
- 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, remove position: absolute, transform: translate(-50%, 0%), top: 5% and left: 50%. It is not recommended to use these properties for page layouts.
- 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 height: auto on .card__info, as that is the default value.
- Remove all widths.
- Add a max-width of approximately 20rem to the card to prevent it from becoming too wide on larger screens.
- .attribution must also have font-size in rem. This article explains why you must never set font-size in px.
- 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. 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
MadonnaAdel•10
@MadonnaAdel
Submitted about 1 month ago
i used flex to center the card in the midel page
2
P
Øystein Håberg•13,260
@Islandstone89
Posted about 1 month ago
Hello, good job!

Here are some tips for an even better solution. I highly recommend applying these changes before moving on to the next project.

Good luck :)

HTML:
- Every webpage needs a <main> element 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 .card-container into a <main>.
- You don't need to wrap the image in a <div>.
- The alt text must also specify 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:
- Make a habit of including a modern CSS Reset at the top of your stylesheet.
- 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.
- The font for this project is "Outfit", not "Poppins".
- Move the styles on .card-container to the body.
- On the body:
  - Remove width: 100% and color: inherit, as these are default values.
  - Add flex-direction: column - the default is flex-direction: row, which makes the footer appear besides the main.
  - Add gap: 1rem, to create space between the main and the footer.
  - Add min-height: 100svh - by default, the body is only as tall as its content, meaning there is no vertical space to center the card. min-height: 100svh ensures the body is at least as tall as the viewport. NB: Don't use width: 100svh, as that causes overflow if the content grows taller than the viewport.
- Descendant selectors like .card-container .card .img increase specificity, making the styles harder to override. Instead, give elements a class and use that as the selector.
- Remove the margin on the card, it is unnecessary.
- Remove the width in px 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.
- 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.
Willian Kennedy•40
@kennedy-brito
Submitted about 2 months ago
What are you most proud of, and what would you do differently next time?
I would center the card differently. I used margin-top and bottom px values, but i didn't liked it.
What specific areas of your project would you like help with?
I would like help about the css, the semantic of the html and if the class names are good.
Qr Code Card With HTML and CSS
2
P
Øystein Håberg•13,260
@Islandstone89
Posted about 2 months ago
Hey, here is some feedback - I hope it helps :)

HTML:
- Every webpage needs a <main> element 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.
- Headings should always be in order, so you never start with a <h3>. I would change it 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:
- Make a habit of including a modern CSS Reset at the top of your stylesheet. At least include the following snippet:
```
*,
*::before,
*::after {
  box-sizing: border-box;
}
```
MDN has good articles about the CSS Box Model and the box-sizing property.
- 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.
- 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: 1rem;
```
- Remove min-width and margin on the card. NB: It's not recommended to use % for properties like margin, padding, or border-radius.
- Remove all widths and heights in %.
- Add a max-width of approximately 20rem to the card to prevent it from becoming too wide on larger screens.
- Remove position: fixed on .attribution.
- I recommend using rem instead of em for font-size. NB: never set font-size in px. This is a significant accessibility issue, as it prevents the font size from scaling with the user's default browser setting.
- 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
Utkarsh9571•520
@Utkarsh9571
Submitted about 2 months ago
What are you most proud of, and what would you do differently next time?
I think the answer to this question is not that i completed this challenge, but the fact that i started making projects, i completed java 2 days ago and then struggling with git and github, but now i started.
What challenges did you encounter, and how did you overcome them?
I completed HTML and CSS 2 weeks ago and didn't practice them, so i need to take help from youtube and i was able to recall most of the components of HTML and CSS.
What specific areas of your project would you like help with?
I was wondering if i need to revisit the HTML and CSS course, but i think not, i was good during the course, first i wanna try some more challenges and then i will see if i need to do a revisit or not, hopefully not.
Basic HTML and CSS only.
1
P
Øystein Håberg•13,260
@Islandstone89
Posted about 2 months ago
Hi, well done!

Here is a bit of feedback. I hope you find it clear and helpful. For maximum learning, I highly recommend applying these changes before moving on to the next project.

Good luck :)

HTML:
- Every webpage needs a <main> element 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>.
- The alt text must also specify where it leads(the frontendmentor website). A good alt text would be "QR code leading to the Frontend Mentor website."
CSS:
- Make a habit of including a modern CSS Reset at the top of your stylesheet. At least include the following snippet:
```
*,
*::before,
*::after {
  box-sizing: border-box;
}
```
MDN has good articles about the CSS Box Model and the box-sizing property.
- 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.
- There's a typo in your font-family declaration. font-family : 'Outfit', sans-serief; should be font-family : 'Outfit', sans-serif;.
- Remove the styles on .container, they are not needed.
- Add justify-content: center on the body to center the card horizontally.
- Descendant selectors like .text h2 increase specificity, making the styles harder to override. Instead, give elements a class and use that as the selector.
- 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 significant accessibility issue, as it prevents the font size from scaling with the user's default browser setting. 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
Adil Solkar•30
@Adil-Solkar
Submitted about 2 months ago
What are you most proud of, and what would you do differently next time?
- Using flexbox to center the card.
- Containing the image inside it's Parent container & not letting it overflow
- I would like to use relative values like (rem or em) next time to add padding and margin
What challenges did you encounter, and how did you overcome them?
- The challenging part was to contain the image in it's Parent container and not let it overflow.
What specific areas of your project would you like help with?
- I would like to know when to use relative values like(em, rem, %)
Used flexbox to center the card. Border-radius to add rounded corners
2
P
Øystein Håberg•13,260
@Islandstone89
Posted about 2 months ago
Hi, good job! The centering of the card is spot on :)

Here are some suggestions I hope you find helpful:

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 remove .card on main and wrap the card content in a <div class="card"> inside of <main>.
- 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:
- Make a habit of including a modern CSS Reset at the top of your stylesheet. At least include the following snippet:
```
*,
*::before,
*::after {
  box-sizing: border-box;
}
```
MDN has good articles about the CSS Box Model and the box-sizing property.
- 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 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 significant accessibility issue, as it prevents the font size from scaling with the user's default browser setting. Use rem instead.
- Paragraphs have a default value of font-weight: 400, so there is no need to declare it.
- On the image, add 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
Thaissa Leslye (Nami)•10
@ThaissaLeslye
Submitted about 2 months ago
What are you most proud of, and what would you do differently next time?
I learned about BEM in this project, and next time I would like to try using a framework like Bootstrap.
What specific areas of your project would you like help with?
Best practices, because there are many ways to build the same screen but its important to keep the code clean, readable and scalable.
QR Code Component Solution Using CSS Variables and Best Practices
#bem
2
P
Øystein Håberg•13,260
@Islandstone89
Posted about 2 months ago
Hi, well done.

Here are some things that could be improved. I highly recommend applying these changes before moving on to the next challenge, as this is the best way to learn.

Good luck :)

HTML:
- Don't use words like "image" or "photo" in the alt text. Screen readers start announcing images with "image", so an alt text of "QR code image" would be read like this: "image, QR code image".The alt text must also specify where it leads (the Frontend Mentor 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.
- I would wrap the footer text in a <p> instead of a <span>.
- The <footer> must be outside of the <main> - both should be direct children of the <body>.
CSS:
- Make a habit of including a modern CSS Reset at the top of your stylesheet.
- 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 the styles on main to the body.
- On the body, change height to min-height: 100svh— this way, the content will not be cut off if it grows beneath the viewport.
- 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 significant accessibility issue, as it prevents the font size from scaling with the user's default browser setting. 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, 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 width: 100vw on the footer.
- On .attribution, remove width: 100% and position: absolute.
- To create space between the main and the footer, add gap: 1rem on the body.
Davi Samuel Schneider•30
@davvisamuel
Submitted about 2 months ago
What are you most proud of, and what would you do differently next time?
Maybe make better use of Flexbox.
What challenges did you encounter, and how did you overcome them?
Just to align a few items I had some doubts about regarding what to use.
What specific areas of your project would you like help with?
I'd like to know if the methods I chose were the right ones, or if there was a better way to do it.
Flexbox to align the card
2
P
Øystein Håberg•13,260
@Islandstone89
Posted about 2 months ago
HTML:
- Every webpage needs a <main> element 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>.
- Instead of an id, I recomend giving elements a class. This article explains when to use the id attribute.
- 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:
- Make a habit of including a modern CSS Reset at the top of your stylesheet.
- 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 *, margin: 0px and padding: 0px is usually written as margin: 0 and padding: 0. Whenever the value is zero, you don't need to include any units.
- Move font-family to body.
- On the body, change height to min-height: 100svh— this way, the content will not be cut off if it grows beneath the viewport.
- 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 significant accessibility issue, as it prevents the font size from scaling with the user's default browser setting. Use rem instead.
- 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, remove margin-top. 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
Aria Rouzegar•150
@Ariarzg
Submitted about 2 months ago
What are you most proud of, and what would you do differently next time?
I tried to make the design as responsive as possible and it turned out beautiful. ;)
What challenges did you encounter, and how did you overcome them?
The Typography was actually the most time consuming part.
What specific areas of your project would you like help with?
I don't know if the breakpoints I chose are even useful or not, I would be glad if you tell me <3
Testimonials Grid using CSS Grid with 4 breakpoints
2
P
Øystein Håberg•13,260
@Islandstone89
Posted about 2 months ago
You're on a roll :)

HTML:
- I would have the card container as a <div> and each card as an <article>, not the other way around.
- I would wrap the quotes in a <blockquote> element:
```
<blockquote>
  <p>
</blockquote>
```
CSS:
- For the Grid setup, I would consider using grid-template-areas along with grid-area. To learn more, I highly recommend this in-depth exploration of CSS Grid areas.
Marked as helpful
Aria Rouzegar•150
@Ariarzg
Submitted about 2 months ago
What are you most proud of, and what would you do differently next time?
I did this layout without any media queries and it turned out to be more beautiful and easier than normal.
What specific areas of your project would you like help with?
I think the typography needs some work, if you have any idea to improve it, I would be glad to see your comment <3
Three Column Layout With Fluid Flexbox, without using media queries
1
P
Øystein Håberg•13,260
@Islandstone89
Posted about 2 months ago
Hi, nicely done!

Some suggestions:

HTML:
- <main> holds all of the main content on a page. As a card container would likely not be the only component on a page, I would wrap the card content in a <div class="card-container"> inside of <main>.
- The car icons are purely decorative, meaning they should have empty alt text: alt="".
- "Learn More" would navigate to another page, hence, it is not a button but a link.
CSS:
- Since we have 3 cards with equal width, I would use Grid instead of Flexbox:
```
.card-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr))
}
```
Kevin Powell has (as always!) a good video on how to set up Flexible Grids.
Marked as helpful
Aria Rouzegar•150
@Ariarzg
Submitted about 2 months ago
What are you most proud of, and what would you do differently next time?
I started to use em for some font sizes and padding and margins to make it more responsive. And I am proud of that.
What challenges did you encounter, and how did you overcome them?
I had some troubles to calculate the clamp(). and I used This Website to calculate it and it turned out very good.
What specific areas of your project would you like help with?
I am open to any suggestions.
Product Preview Card
#accessibility
2
P
Øystein Håberg•13,260
@Islandstone89
Posted about 2 months ago
Hello, excellent job!

Here are a few tips. I also recommend this guide on how to approach the HTML for this challenge.

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 the <main> element.
- I recommend using the <picture> element to change the image based on the screen size.
- "Perfume" is not a heading, so change it to a <p>.
- As the cart icon is decorative, I would hide it for screen readers using aria-hidden : <svg width="15" height="16" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
CSS:
- For accessibility, it's better to use border: transparent instead of border: none.
- Media queries should be in rem or em instead of px.
Marked as helpful
Barnabas001•180
@Barnabas001
Submitted 2 months ago
Blog preview face card
1
P
Øystein Håberg•13,260
@Islandstone89
Posted about 2 months ago
Hey, good job.

Here are some tips to keep in mind:

HTML:
- Every webpage needs a <main> element 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>.
- "Learning" and "Published 21 Dec 2023" are not headings but a <p>. NB: Headings should always be in order, so you never start with a <h4>.
- I would wrap the date in the <time> element: <p">Published <time datetime="2023-12-21">21 Dec 2023</time></p>.
- As this is a blog card, the heading requires a link within it.
- "Greg Hooper" is a <p>.
- Change .attribution to a <footer>, and use <p> for the text inside.
CSS:
- Make a habit of including a modern CSS Reset at the top of the stylesheet. At least include the following snippet:
```
*,
*::before,
*::after {
  box-sizing: border-box;
}
```
MDN has good articles about the CSS Box Model and the box-sizing property.
- 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 be cut off if it grows beneath the viewport.
- Instead of margin-left: 12px on "Greg Hooper", set gap: 12px on its parent, .avatar-section.
- Remove the width in px 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 significant accessibility issue, as it prevents the font size from scaling with the user's default browser setting. Use rem instead.
- The card text ("These languages are the backbone of every website, defining structure, content, and presentation.") has poor contrast. Inspecting it in DevTools shows a contrast ratio of 3.94, lower than 4.5, which is the minimum requirement from the Web Content Accessibility Guidelines. Changing color: hsl(216, 15%, 55%); to color: hsl(216, 15%, 45%); gives it a contrast ratio of 5.07, which is acceptable.
- I would increase 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 or em, not px.
Marked as helpful
Aria Rouzegar•150
@Ariarzg
Submitted about 2 months ago
What are you most proud of, and what would you do differently next time?
I think I coded cleanly and learned so much in the process.
What challenges did you encounter, and how did you overcome them?
I tried so much to vertically center the bullets relative to the li elements when the text is more than 1 line; but I couldn't.
What specific areas of your project would you like help with?
I am open to any feedbacks. but if anyone knows how to vertically center a bullet relative to the li element, please comment the solution.
Recipe Page Responsive Design
2
P
Øystein Håberg•13,260
@Islandstone89
Posted about 2 months ago
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 the <main> element. It's also possible to use an <article class="card">.
- You should not include words like "image" or "photo" in the alt text, as screen readers announce images with "image", followed by the alt text.
- Beware that the <section> element by default doesn't have any semantic meaning. It has a role of generic, which is the same as a <div>. To give it a role="region" in the Accessibility Tree, you need to give the section heading an id, which is then referenced by the section using aria-labelledby:
```
<section class="ingredients" aria-labelledby="ingredients-title">
  <h2 class="section-title" id="ingredients-title">Ingredients</h2>
```
CSS:
- It's not recommended to use % for properties like margin, padding, width, height or border-radius.
- I'll refer to the demo showing how to vertically center custom list bullets. You need to remove the default bullets (you have list-style: none in your CSS Reset, but it only applies to lists with a role="list"). Create a ::before pseudo-element with the same width and height and border-radius: 50% and aspect-ratio: 1 / 1. It also needs a background-color, content="" and display: block.
Marked as helpful
Aria Rouzegar•150
@Ariarzg
Submitted 2 months ago
What are you most proud of, and what would you do differently next time?
I am pretty proud of this design. Because I used rem instead of px in this design. And also instead of media queries, I used max-width.
What challenges did you encounter, and how did you overcome them?
Nothing really. It was a smooth experience.
What specific areas of your project would you like help with?
I can't think of any. But I am open to any recommendations and feedbacks.
Social Links Profile with Simple Responsiveness
2
P
Øystein Håberg•13,260
@Islandstone89
Posted about 2 months ago
Hi, well done!

A couple of tips to improve your solution:

HTML:
- Instead of using <section> for the card, I would consider the <article> element. You could also use just a <div>.
- A better alt text for the image would be something like "Headshot of Jessica Randall".
- "London, United Kingdom" is not a heading but a <p>.
CSS:
- Make a habit of including a modern CSS Reset at the top of the stylesheet.
- Move font-family and color to body. Except for padding, margin and box-sizing, we rarely set styles on the universal selector *.
- 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.
- Descendant selectors like .social-links-list li and .social-links-list li aincrease specificity, making the styles harder to override. Instead, give elements a class and use that as the selector.
- max-width on the card should be in rem. Around 20rem works well.
Marked as helpful
Aria Rouzegar•150
@Ariarzg
Submitted 2 months ago
Blog Preview Card Responsive and Active State
2
P
Øystein Håberg•13,260
@Islandstone89
Posted about 2 months ago
HTML:
- I would wrap the date in the <time> element: <p class="published-date">Published <time datetime="2023-12-21">21 Dec 2023</time></p>.
- As this is a blog card, the heading requires a link within it.
- "Greg Hooper" is not a heading, but a <p>.
CSS:
- Including a CSS Reset at the top is good practice.
- Move font-family: "Figtree", sans-serif and color: #121212 from * 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.
- Descendant selectors like .card .published-date increase specificity, making the styles harder to override. Instead, use published-date as the selector.
- Move the styles on .container to the body. Remove width: 100%, as block elements are 100% wide by default.
- Except for the author image, 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 significant accessibility issue, as it prevents the font size from scaling with the user's default browser setting. Use rem instead.
- line-height must also never be in px.
- On .author, you can remove flex-direction: row and justify-content: flex-start ,as these are default values.
- Remove margin-left: 10px on "Greg Hooper". Instead, set gap: 10px on the Flex container, .author.
- On the top 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.
- Media queries must be in rem or em, not px. We usually style for mobile first, then use min-width media queries for larger screens. Instead of using media queries to change font-size, you can use the clamp() function.
iynulwa•290
@iynulwa
Submitted about 2 months ago
Social Link Solution
2
P
Øystein Håberg•13,260
@Islandstone89
Posted about 2 months ago
Hi, good job!

Some suggestions:

HTML:
- You don't need to include "image" in the alt text. A suitable alt text for the image would be something like "Headshot of Jessica Randall".
- The social media links are links, not buttons. A button will trigger an action, for example, "Add to cart". A link navigates the user to another page. As there are several links, I see it as an unordered list of links. There is no need to add an id, as we rarely use ids for styling. Hence, I would replace this:
```
<div class="btndiv">
        <button type="button" id="github_btn" class="buttons">GitHub</button>
        <button type="button" id="frontend_mentor_btn" class="buttons">Frontend Mentor</button>
        <button type="button" id="linkedIn_btn" class="buttons">LinkedIn</button>
        <button type="button" id="twitter_btn" class="buttons">Twitter</button>
        <button type="button" id="instagram_btn" class="buttons">Instagram</button>
      </div>
```
with this:
```
<ul class="social-links">
  <li><a href="#" class="social-link">GitHub</a></li>
  <li><a href="#" class="social-link">Frontend Mentor</a></li>
  <li><a href="#" class="social-link">LinkedIn</a></li>
  <li><a href="#" class="social-link">Twitter</a></li>
  <li><a href="#" class="social-link">Instagram</a></li>
</ul>
```
CSS:
- You can remove font-family on the links, as they inherit the font from the body.
- Remove the height on the links. Instead, use padding to create some space around the text: padding: 1em 2em.
Marked as helpful
Aria Rouzegar•150
@Ariarzg
Submitted 2 months ago
What are you most proud of, and what would you do differently next time?
What I am most proud of is definitely that I didn't look at any guides to do this.

I acknowledge that, this was not so hard but yet I am proud of it.
What challenges did you encounter, and how did you overcome them?
I was struggling to center the whole thing vertically. I looked through my past projects and found the solution.
What specific areas of your project would you like help with?
I know the difference between flex and grid. But I don't know where to use one instead of the other one.
QR Code Component
2
P
Øystein Håberg•13,260
@Islandstone89
Posted about 2 months ago
HTML:
- Don't use words like "image" or "photo" in the alt text. Screen readers start announcing images with "image", so an alt text of "QR code image" would be read like this: "image, QR code image". Also, the alt text must 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:
- Make a habit of including a modern CSS Reset at the top of the stylesheet.
- 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.
- I would move the styles on .container to the body - this way, you could also center the attribution if you include it.
- Remove width: 100%, it is not needed on block elements like <body>, <main> or <div>, to name a few. These take up the full width by default.
- Descendant selectors like .card p increase specificity, making the styles harder to override. Instead, give elements a class and use that as the selector.
- Instead of setting margin-top: 15px on the heading and paragraph, you can set gap: 15px on their parent, .card. This is more efficient, and it ensures there is always spacing between the card elements, regardless of the element.
- 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.
- Paragraphs have a default value of font-weight: 400, so there is no need to declare it.
- I would increase the padding on the card to around 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.
Marked as helpful
iynulwa•290
@iynulwa
Submitted 2 months ago
Blog Preview solution. HTML and CSS only.
2
P
Øystein Håberg•13,260
@Islandstone89
Posted about 2 months ago
Hey, excellent work!

Here are some things to take note of:

HTML:
- You don't need to wrap "Learning" in a <div>.
- I would wrap the date in the <time> element: <p class="date">Published <time datetime="2023-12-21">21 Dec 2023</time></p>.
- As this is a blog card, the heading requires a link within it.
- You don't need to include "image" in the alt text. A suitable alt text for the profile image would be something like "Headshot of Gary Hooper".
- If you don't want to include the <footer>, you should comment out all of it - currently, you have a <footer> with nothing inside.
CSS:
- You can remove text-align: left on the body as that is the default value.
- Likewise, the <p> doesn't need font-size: 1rem since it already has that value.
- I like to nest things like media queries and hover styles. Instead of:
```
h2 {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--Gray950);
}

h2:hover {
    color: var(--Yellow);
}
```
You can write:
```
h2 {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--Gray950);

  &:hover {
    color: var(--Yellow);
 }
}
```
Well done - keep up the good work!
Marked as helpful
P
Sascha Wagner•70
@Sascha-Wagner99
Submitted 2 months ago
What are you most proud of, and what would you do differently next time?
My goal was that my solution should look very simiular to the template image. I am proud it came very close.
What challenges did you encounter, and how did you overcome them?
I wasn't sure about how to get the card as big as possible. I used it with flex-grow: 1;
What specific areas of your project would you like help with?
Is it common to use border-radius with pixel values?
Social links profile
2
P
Øystein Håberg•13,260
@Islandstone89
Posted 2 months ago
Great job, Sascha!

I've only had a quick look, but I don't see any issues in your CSS.

A few things in the HTML:
- "Front-end developer and avid reader." should be a <p>.
- The social media links should be an unordered list:
```
<ul class="social-media-links">
  <li><a href="" class="sm-button text-preset-2-bold">GitHub</a></li>
  <li><a href="" class="sm-button text-preset-2-bold">Frontend Mentor</a></li>
  <li><a href="" class="sm-button text-preset-2-bold">LinkedIn</a></li>
  <li><a href="" class="sm-button text-preset-2-bold">Twitter</a></li>
  <li><a href="" class="sm-button text-preset-2-bold">Instagram</a></li>
</ul>
```
You are doing great, keep up the good work :)
Marked as helpful

Øystein Håberg

All comments

Css, flexbox, html

i used flex to center the card in the midel page

Qr Code Card With HTML and CSS

Basic HTML and CSS only.

Used flexbox to center the card. Border-radius to add rounded corners

QR Code Component Solution Using CSS Variables and Best Practices

Flexbox to align the card

Testimonials Grid using CSS Grid with 4 breakpoints

Three Column Layout With Fluid Flexbox, without using media queries

Product Preview Card

Blog preview face card

Recipe Page Responsive Design

Social Links Profile with Simple Responsiveness

Blog Preview Card Responsive and Active State

Social Link Solution

QR Code Component

Blog Preview solution. HTML and CSS only.

Social links profile