The proper alignment was a bit hard and took my time
What challenges did you encounter, and how did you overcome them?Using only css was a major pain,rest aside it was fun
Hi nabhoneel, how’s everything? I think your project turned out great! However, I have some feedback that I think might be useful:
To prevent the background image from breaking at higher resolutions, we can prevent this in two different ways:
Add a background-repeat: repeat-x;, the image will repeat on the horizontal axis, preventing it from breaking.
Add a background-size: 100% 50vmin;, the 50vmin will set its height as the page target, and 100% will make it stretch on the horizontal axis.
Feel free to choose one of the two!
The rest is amazing.
I hope this is helpful. 👍
I'm proud of how the layout turned out to be and how responsive it is.
What challenges did you encounter, and how did you overcome them?Had some difficult with making my font-size responsive
Hello Bruno514, how are you? I was really pleased with your project, but I’d like to offer some advice that might help:
You have used <br> , using <br> is not only bad practice, it is problematic for people who navigate with the aid of screen reading technology. Screen readers may announce the presence of the element. This can be a confusing and frustrating experience for the person using the screen reader.
The rest is spot on.
Hope it’s helpful to you. 👍
Hi ConTacMight, hope you're doing well! I loved how your project turned out, but I’ve got a few suggestions that could be useful:
To prevent the background image from breaking at higher resolutions, we can prevent this in two different ways:
Add a background-repeat: repeat-x;, the image will repeat on the horizontal axis, preventing it from breaking.
Add a background-size: 100% 50vmin;, the 50vmin will set its height as the page target, and 100% will make it stretch on the horizontal axis.
Feel free to choose one of the two!
The rest is fantastic.
Hopefully, you'll find it helpful. 👍
Hey Thomas-Ngo-1, how’s it going? I was really impressed with your project’s result, though I have some advice that could be helpful:
You have used <br> , using <br> is not only bad practice, it is problematic for people who navigate with the aid of screen reading technology. Screen readers may announce the presence of the element. This can be a confusing and frustrating experience for the person using the screen reader.
Everything else looks great.
Hope this helps! 👍
Hi KenyoSR, how are you doing? I really loved the outcome of your project, but I have a few suggestions that I think might be helpful:
Using Flexbox or Grid on the body to center elements ensures a more responsive and adaptive layout, fitting different screen sizes seamlessly. It avoids manual calculations and constant adjustments needed with margin, padding, or absolute positioning. These techniques provide more consistent alignment and simplify the code.
flexbox:
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
grid:
body {
display: grid;
place-content: center;
min-height: 100vh;
}
The rest is excellent.
I hope you find it useful. 👍
Hi Govardhan V Prakashmurthy, how’s everything? I think your project turned out great! However, I have some feedback that I think might be useful:
Using Flexbox or Grid on the body to center elements ensures a more responsive and adaptive layout, fitting different screen sizes seamlessly. It avoids manual calculations and constant adjustments needed with margin, padding, or absolute positioning. These techniques provide more consistent alignment and simplify the code.
flexbox:
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
grid:
body {
display: grid;
place-content: center;
min-height: 100vh;
}
The rest is amazing.
I hope this is helpful. 👍
I'm proud of my simple resolution & made it responsive.
What challenges did you encounter, and how did you overcome them?Biggest challenge was figuring out how to shrink the image & buttons when the card shrinks a bit on mobile
What specific areas of your project would you like help with?I'm seeking advice from anyone who thinks I could approach the challenge differently and the more efficient way.
Hello Govardhan V Prakashmurthy, how are you? I was really pleased with your project, but I’d like to offer some advice that might help:
To enhance the semantics of your code, consider using a <ul> (unordered list) for the collection of links, as it represents a list of related items. Here's an example:
<ul>
<li><a href="#">GitHub</a></li>
<li><a href="#">Frontend Mentor</a></li>
<li><a href="#">LinkedIn</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Instagram</a></li>
</ul>
Using a <ul> provides clear structure and context, signaling to both browsers and assistive technologies that these links are part of a cohesive group, improving both accessibility and readability.
The rest is spot on.
Hope it’s helpful to you. 👍
Olá Davi Luiz, espero que você esteja bem! Adorei o resultado do seu projeto, mas tenho algumas sugestões que podem ser úteis:
Para melhorar a semântica do seu código, considere usar uma <ul> (lista não ordenada) para a coleção de links, já que ela representa uma lista de itens relacionados. Aqui está um exemplo:
<ul>
<li><a href="#">GitHub</a></li>
<li><a href="#">Frontend Mentor</a></li>
<li><a href="#">LinkedIn</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Instagram</a></li>
</ul>
Usar uma <ul> oferece uma estrutura clara e sinaliza tanto para os navegadores quanto para tecnologias assistivas que esses links fazem parte de um grupo coeso, melhorando a acessibilidade e a legibilidade do código.
O resto está ótimo.
Ahora estoy dejando las medidas absolutas y las cambio con querys
What challenges did you encounter, and how did you overcome them?Fue rapido, quizás al final del deployment tenia un error con las ""
What specific areas of your project would you like help with?Quiero mejorar en mi responsive
Hey Andrés R.W., how’s it going? I was really impressed with your project’s result, though I have some advice that could be helpful:
Using Flexbox or Grid on the body to center elements ensures a more responsive and adaptive layout, fitting different screen sizes seamlessly. It avoids manual calculations and constant adjustments needed with margin, padding, or absolute positioning. These techniques provide more consistent alignment and simplify the code.
flexbox:
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
grid:
body {
display: grid;
place-content: center;
min-height: 100vh;
}
Everything else looks great.
Hope this helps! 👍
Hi Opara Kelechi, how are you doing? I really loved the outcome of your project, but I have a few suggestions that I think might be helpful:
To enhance the semantics of your code, consider using a <ul> (unordered list) for the collection of links, as it represents a list of related items. Here's an example:
<ul>
<li><a href="#">GitHub</a></li>
<li><a href="#">Frontend Mentor</a></li>
<li><a href="#">LinkedIn</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Instagram</a></li>
</ul>
Using a <ul> provides clear structure and context, signaling to both browsers and assistive technologies that these links are part of a cohesive group, improving both accessibility and readability.
The rest is excellent.
I hope you find it useful. 👍
am good on it
What challenges did you encounter, and how did you overcome them?none
What specific areas of your project would you like help with?none
Hi Godswill Chidiebube, how’s everything? I think your project turned out great! However, I have some feedback that I think might be useful:
Use the THE PICTURE TAG that is a shortcut to deal with the multiple images in this challenge. So you can use the <picture> tag instead of importing this as an <img> or using a div with background-image. Use it to place the images and make the change between mobile and desktop, instead of using a div or img and set the change in the css with display: none with the tag picture is more practical and easy. Note that for SEO / search engine reasons isn’t a better practice import this product image with CSS since this will make it harder to the image. Manage both images inside the <picture> tag and use the html to code to set when the images should change setting the device max-width depending of the device desktop + mobile.
Check the link for the official documentation for <picture> in W3 SCHOOLS: https://www.w3schools.com/tags/tag_picture.asp
See the example below:
<picture>
<source media="(max-width:650px)" srcset="./images/image-product-mobile.jpg">
<img src="./images/image-product-desktop.jpg" alt="Gabrielle Parfum" style="width:auto;">
</picture>
The rest is amazing.
I hope this is helpful. 👍
Hello sediqa, how are you? I was really pleased with your project, but I’d like to offer some advice that might help:
Using Flexbox or Grid on the body to center elements ensures a more responsive and adaptive layout, fitting different screen sizes seamlessly. It avoids manual calculations and constant adjustments needed with margin, padding, or absolute positioning. These techniques provide more consistent alignment and simplify the code.
flexbox:
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
grid:
body {
display: grid;
place-content: center;
min-height: 100vh;
}
The rest is spot on.
Hope it’s helpful to you. 👍