When I was pushing to Git, I kept making mistakes on the README.md file and had to keep repeating the process of git add, git commit and git push. I have now gotten it to read the way I want it to. The problems originated from using the wrong file paths for the README.md file and my project's screenshot initially.
Hi. Some notes for your code:
<body> should look like this:<body> <header>...</header> <main>...</main> <footer>...</footer> </body>
Since this is a card component, we only need the <main> element.
<img> tag you need alt text to describe the image. Although for decorative and avatar images You need to add an empty alt="" because there is no information in the photo. The point is you have to use alt.<h1><h2> instead<span>. Simply use a p tag.Use viewport height properly:
/* Instead of: */ body { height: 100vh; } /* Use: */ body { min-height: 100vh; }
This ensures content can expand beyond viewport height
width: 384px and height: 522px from .wrappermax-width for better text container adaptabilityrem for font-size and max-width instead of pxmin-width in media queriesem units for breakpointsExample media query:
@media (min-width: 40em) { /* Desktop styles */ }
Hi. I see some issues in your code I wanna mention:
<body> should look like this:<body> <header>...</header> <main>...</main> <footer>...</footer> </body>
Since this is a card component, we only need the <main> element.
alt=""<span> - it should be a <p> tag. The person name is a <p> tag too.<a> tag. Here your h2 is interactive too. So you need to wrap it inside the a tag:<h2><a href="#">Title Text</a></h2>
Use viewport height properly:
/* Instead of: */ body { height: 100vh; } /* Use: */ body { min-height: 100vh; }
width: 300px from .cardmax-width for better text container adaptabilityrem for font-size and max-width instead of pxI have some notes for your code which may help improve your code:
<body> <main>...</main> </body>
This provides proper document outline while keeping markup minimal. Remember the main tag is necessary.
Image descriptions should be meaningful and descriptive:
alt="QR code to Frontend Mentor website"<h1><h2> insteadmin-width on body. Also no need for max-width on #root. You only need a max-width on .card with rem unit.img { max-width: 100%; display: block; }
This ensures:
font-size and max-width values from px to remThis improves:
Hi. I have some notes for your code which may improve it.
<body> <main>...</main> </body>
This provides proper document outline while keeping markup minimal.
<h1><h2> insteadimg use max-width: 100%;This ensures:
font-size and max-width values from px to remThis improves:
min-height instead of fixed height for viewport-height elementsHi. Some notes for your code:
p tag not a spanul and li:<!-- Use: --> <ul class="social-links"> <li><a href="#">GitHub</a></li> <li><a href="#">Frontend Mentor</a></li> <li><a href="#">LinkedIn</a></li> </ul>
This provides better semantics and accessibility for related links
alt=""rem units instead of px for better accessibility and scaling:
rem for max-widthmin-height: 100vh instead of height: 100vh to prevent overflow issues:This ensures your container will expand if content exceeds viewport height.
First I strongly suggest get feedback on every challenge and refactor your code before you start a new challenge.
alt=""img tag in html. You don't need to use background on CSS.header is for repeatable contents like nav items and page logo on the top of your website that repeats in every page. You need to use p here.h1 is an a tag too. So inside the h1 wrap the text inide an a tag too. You don't need tabindex attribute here.width: 350px from .cardmax-width for better text container adaptabilityrem for font-size and max-width instead of pxI am proud that i successfully deployed my site and also wrote my first markdown file. I also improved my CSS skills. Next time I would like to push even harder and make my solution more efficient.
Hello. Congratulations on completing this project. I think there was a misunderstanding in viewing the design images. The whole page should be light blue, and there's no need for the edges to be white. By the way, I have some notes for your code:
For your h1 you need something like .visually-hidden or .sr-only class. This is good for screen readers and also not show it to the users. You can search on the internet to find the styles.
Image descriptions should be meaningful and descriptive:
alt="QR code to Frontend Mentor website"The bold text needs to be h2 because is a heading.
The .attribution needs to be a p tag because It contains a text and p tag is the most proper tag here.
Start with a proper CSS reset (Andy Bell or Josh Comeau recommended)
This ensures consistent styling across browsers
Avoid fixed dimensions for text containers:
Your figure contains text and you should not limit width and height.
Do not use ID for css. Only use class. ID is suitable for JS and link two or more html tags together.
The fact that i'm getting better as days goes by, i will like to improve in java script and become better overall.
What challenges did you encounter, and how did you overcome them?adding a shadow to the blog post, i had to seek help to complete.
Hi. I have some notes for your code:
Use a proper title in your head of html like Blog Preview Card.
Add your fonts locally with font-face on CSS or with link tag on your html head.
You need a proper HTML structure. After your main, first wrap all of your code into the div with something like .container class and add a box-shadow and max-width and other properties that is needed. You don't need a <div class="shadow"></div> for shadow.
<h1> has hover effect so you should wrap it inside a a tag too. You can do it like this:
<h1> <a>...</a> </h1>
width: 400px from mainmax-width for better text container adaptability width: 100px; and use padding insteadrem for font-size and max-width instead of pxI completed the challenge as expected. Next time, I might explore more styling options.
Congratulation for doing this challenge. Some notes for your code:
Image descriptions should be meaningful and descriptive:
alt="QR code to Frontend Mentor website"Follow proper heading hierarchy:
<h1><h2> insteadKeep HTML and CSS in separate files
font-size and max-width values from px to remmin-height=: 100vh instead of fixed height for viewport-height elements:img { max-width: 100%; display: block; }
This ensures:
any feedback on css appreciated, thanks!
Your HTML structure is good. Congrats! Some notes to improve your code:
<body> <main>...</main> </body>
This provides proper document outline while keeping markup minimal.
Image descriptions should be meaningful and descriptive:
alt="QR code to Frontend Mentor website"Follow proper heading hierarchy:
<h1><h2> insteadbody { min-height: 100vh; display: flex; justify-content: center; align-items: center; padding: 1rem; }
/* Instead of: */ .container { width: 280px; height: 390px; } /* Use: */ .container { max-width: 18.75rem; /* or appropriate rem value */ }
img { max-width: 100%; display: block; }
This ensures:
Some notes for your code:
<body> should look like this:<body> <header>...</header> <main>...</main> <footer>...</footer> </body>
<main> element.alt=""p tag not a h6.<!-- Instead of: --> <div class="social-links"> <a href="#">GitHub</a> <a href="#">Frontend Mentor</a> <a href="#">LinkedIn</a> </div> <!-- Use: --> <ul class="social-links"> <li><a href="#">GitHub</a></li> <li><a href="#">Frontend Mentor</a></li> <li><a href="#">LinkedIn</a></li> </ul>
min-height: 100vh instead of height: 100vh to prevent overflow issues:width and height for elements containing textmax-width for better adaptability/* Instead of: */ .container { width: 300px; height: 50px; } /* Use: */ .container { max-width: 18.75rem; }
This allows text to flow naturally and prevents content overflow issues:
rem units instead of px for better accessibility and scaling:
font-size values from px to remrem for max-width and spacing valuesExample:
/* Instead of: */ .text { font-size: 16px; } /* Use: */ .text { font-size: 1rem; }
Hello, everyone! This is my 3rd solution. This challenge was pretty easy but fun to do.
I would like to know if there's any way to improve my code. Thanks in advance :)
Hi. Your HTML is really good. I have some points for your CSS:
px units with rem for better accessibility and maintainability:
rem for font-size instead of pxmax-width values to rem unitsalign-content: center as it has no effect in this flex context/* Instead of: */ .bottom-container ul li { width: 300px; height: 3rem; } /* Use: */ .bottom-container { width: 100%; }
This allows content to adapt naturally while maintaining container boundaries
All feedback are welcome.
<body> should look like this:<body> <header>...</header> <main>...</main> <footer>...</footer> </body>
Since this is a card component, we only need the <main> element.
alt=""<button> - it should be a <p> tag since it has no interactive behavior<a> tag instead<h6> text is incorrectly used - this should be a <p> tag<p> tag<a> tag<button> tag<h1> to <h6>)<h1> → <h2> → <h3>width: 350px from .boxmax-width for better text container adaptabilitywidth: 20% and use padding insteadrem for font-size and max-width instead of pxmin-width in media queriesem units for breakpointsExample media query:
@media (min-width: 40em) { /* Desktop styles */ }
سلام. تبریک میگم بابت انجام این پروژه! کارتون خوبه، ولی چند نکته هست که میتونن به بهبود کدتون کمک کنن. نکات رو به انگلیسی مینویسم تا دقیقتر بیان بشن:
<form> tag, which includes a submit button. This ensures proper functionality and accessibility.<fieldset> and <legend>. The question can be placed inside the <legend> tag. This improves accessibility and structure. You can learn more about these elements on MDN.<label>. This makes the interface more user-friendly and accessible. The current button implementation is incorrect and should be replaced.alt attribute should be empty (alt=""). This ensures screen readers skip over them, improving accessibility.width: 25rem; and height: 24rem; for text containers is incorrect. Instead, use max-width with rem units to allow the content to flow naturally while maintaining a reasonable maximum size.width: 50px; height: 50px;. Instead, use padding to control the size, which makes the button more flexible and responsive.width in your code are unnecessary. Replace them with max-width where needed, using rem units for better scalability.I strongly recommend refactoring the code based on these suggestions before moving on to the next challenge. This will help you build a stronger foundation and improve the overall quality of your work.
I liked the fact that I had to change the grid for different screen sizes. I also added another break point between tablet and desktop screen and adjusted the layout accordingly. Next time I will try to use sass. I am still learning but I think it will make things much easier and cleaner.
What challenges did you encounter, and how did you overcome them?Trying to keep the dimensions analogy as shown in the figma file especially while changing the grid layout. Using grid-template-columns: auto; solved it.
What specific areas of your project would you like help with?Please any feedback will be much appreciated.
Hi. Some notes for your code:
.testimonial, The person name can be a h2 tag as a heding.And for your css you can add this too:<blockquote> <p>Bold text</p> <p>Regular text</p> </blockquote>
blockquote > p.regular::before {
content: "" ";
}
blockquote > p.regular::after {
content: " "";
}
alt text. You can set it to alt="". Avoid using words like image, picture, or photo in alt descriptions.max-width on your section tag. You do not need min-width. And for your grid, You only need four columns and two rows and there is no need to define the rows height in your code. It's not true. Take this very simple and do not over complicate the code for your self.Hi. Some notes for your code:
A proper page structure inside <body> should look like this:
<body> <header>...</header> <main>...</main> <footer>...</footer> </body>
Depending on the design, you may not need a <header> or <footer>, but a <main> element is essential.
<h1> to <h4>. Headings should grow one by one (<h1> → <h2> → <h3>), regardless of desired font size. Use CSS to adjust the visual appearance if needed. Here after h1 you only need h2 but one of them has a different style.font-size and max-width should be in rem units instead of px. Read more about this here.width: 50%; because It allows the container grow. Just use a max-width in rem unit.Would appreciate any feedback! Personally, I found sizing the most struggling thing. Especially getting the feeling of it. Thank you.
Also, how does that box-shadow works for this?
Some notes for your code:
A proper page structure inside <body> should look like this:
<body> <header>...</header> <main>...</main> <footer>...</footer> </body>
Depending on the design, you may not need a <header> or <footer>, but a <main> element is essential.
QR Code to frontend mentor website.<h1> heading. However, in some cases (like a QR code component), an <h2> is more appropriate because is not a page and is a card only.min-height: 100vh; instead of height: 100vh; to prevent overflow issues.width: 320px; and height: 499px; for a text container. You only need max-width here.font-size and max-width should be in rem units instead of px. Read more about this here.h1. Just add a padding to your .card and that's enough.Some notes for your code:
alt="".<button>Learning</button> is not a button. It's a p tag because inside the design there is no hover effects for this but If you see this interactive you should use a tag instead of button. Learn when to use a and when button.alt text. Avoid using words like image, picture, or photo in alt descriptions.