All feedback is welcome and greatly appreciated.
All feedback is welcome and it's greatly appreciated.
All feedback is welcome and greatly appreciated.
N/A
I used :is() CSS pseudo-class to apply the background-color for header and article.
:is(header, article){
background-color: hsl(var(--clr-neutral-300));
}
I went to the website on my iphone SE with IOS 17.5.1 background-color doesn't appear even if I remove :is(). I applied -webkit- and -moz- vender prefixes per this article How to Fix CSS Issues on Safari and the background-color still doesn't show.
Is there something wrong with code that I'm not seeing? What other solutions can I use that fixes this issue?
Thanks,
Rebecca
I 'm proud of figuring out how to use different images with picture element, and how to achieve border-radius when the view is divided into 2 parts( picture and text box) Besides, it is great to review somewhat sass, which i havenot touched for long.
What challenges did you encounter, and how did you overcome them?I found it somewhat not similar to the original design, due to the difference of icon selection.
Hi Nhan Phan. Congratulations on completing this challenge!!!🎉
HTML 📃:
index.html to incorporate HTML semantic tags.<h1>.<del> for the original price to apply an automatic strikethrough. <div>
<p class="product-price">
<span class="visually-hidden">Current Price:</span>
$149.99
</p>
<p class="product-original-price">
<span class="visually-hidden">Orginial Price:</span>
<del>$169.99</del>
</p>
</div>
visually-hidden CSS class hides the text visually on the website but accessed by screen readers/* sometimes referred to as .sr-only */
.visually-hidden:not(:focus):not(:active):not(:focus-within) {
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
cursor: pointer for better interactivity and make sure it focusable and usable by keyboard.Here is my solution to this challenge: Product Preview card component
I hope you find this useful and don't hesitate to reach out if you have any questions.
Hi @aneeshthakur67. Congratulations on completing this challenge!!!🎉
To remove the scrollbar on the website you can use position CSS property to keep the attribution on the top of all the content.
.attribution{
position:fixed;
inset: auto auto 1rem 1rem;
}
inset setting for top, right, bottom, and left property.More info📚:
Also you can add self-host Work Sans font family using this website: google webfonts helper
I hope you find this useful and don't hesitate to reach out if you have any questions.
Any feedback is appreciated. Is there a way to change only the text color of the logo SVG, or is the dark mode logo missing? Also, is there a better way to fetch data, toggle states, and handle dark mode?
Hi there! You can change the fill color of the svg.
Hi jharshavardhan2003
Congratulations on completing this challenge!!! 🎉
HTML 📃:
<main> tag.<footer> tag for attribution.<div> with <main> for wrapping your content.CSS 🎨:
body{
display:flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
body{
display:grid;
place-content: center;
min-height: 100vh;
}
padding on the body and you can apply a max-width on your .container class so you don't have implement a media query.I hope you find this useful. Don't hesitate to reach out if you have any questions. Keep up the great work!!
Nothing to say! :)
What challenges did you encounter, and how did you overcome them?Well, it was the images in the body; I didn't know how to add them and position them, but in the end, I sort of managed to do it. I found two ways: one using background-image and the other with the <img> tag, but one is fully responsive from the start, and the other isn't.
Another thing was how to set the profile image as requested. In the end, I managed to do it, and I hope it's okay. :)
What specific areas of your project would you like help with?Any feedback! :)
Hi!
Congrats on completing the challenge! 🎉
HTML Tips:
<article> and <section> tags.<div> usage as it fails to clarify content.<ul>:<ul>
<li>
<strong>80k</strong>
<p>Followers>
</li>
<ul>
Using a <ul> (unordered list) tag is beneficial for structuring stats because:
In short, <ul> tags create well-structured, accessible, and consistent content presentation.
I hope you find these tips useful! If you need any clarification, I'm glad to help. Keep up the great work!
Clean, semantic HTML structure using appropriate elements for accessibility.
Responsive design implementation that works across different screen sizes.
Consistent visual styling matching the design requirements.
What challenges did you encounter, and how did you overcome them?Getting the equal-height columns to work properly across different content lengths.
Maintaining button positioning at the bottom of each card.
Ensuring the responsive layout breaks appropriately on mobile.
What specific areas of your project would you like help with?I’m happy to receive any feedback and suggestions for optimizing and improving the code! Always looking to learn and grow. 💡
Hi 👋🏼
Your project looks great! I have few tips to improve your solution.
Use Proper HTML Semantic Tags
<main> tag.
<main> tag because it identifies the primary content of the page.<footer> tag
<Footer> tag holds content like the copyright information, authorship information, and contact information just to name few examples.CSS 🎨:
*{
margin: 0;
padding: 0
}
To remove the scrollbar on desktop, you can adjust your CSS styles.
On the <body> I used flexbox to center the content the page. and used position: fixed on the attribution so content stays in one place.
body{
display: flex;
align-items: center;
min-block-size: 100vh;
flex-direction: column;
justify-content: center;
}
.container{
max-width: 960px;
margin: 0 auto;
}
.attribution{
position: fixed;
inset: auto auto 1rem 1rem;
}
Here is my solution to this challenge: 3-column preview component
I hope you find these tips useful! Don’t hesitate to reach out if you have any questions or need further guidance. Keep up the amazing work!