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 would like feedback on the mobile version of my website. I have an iPhone SE and can't scroll past the image to see the section content. I have the transform CSS property on my image.
section < img{
transform: translate(10%) scale(1.1);
}
I am unsure if that is causing the issue and if you have any suggestions, please let me know.
Thanks, Rebecca
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 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!
I would appreciate feedback on if there is a way to have both the "button" text and the background JUST under that text be transparent while keeping the rest of the background as it is. Alternatively, is there a way to optimize my CSS so that I don't have to target each button individually: .category:nth-child(2) .button:hover {.
Hi there!
<a> tag in a <div> and its okay to add CSS styling to the <a> tag.aria-label="learn more about sedan cars" to the <a> tag to make link more the accessible for screen readers.<button> and <a> tag
a{
background-color: var(--Very-light-gray);
border: 2px solid var(--Very-light-gray);
transition all 350ms ease-in-out;
}
a:hover{
background-color: transparent;
color: var(--Very-light-gray);
}
In CSS you can add another CSS class like .button-sadans to change the button text color.
Here is my solution to this challenge: 3 Column preview card 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!
Hi @RahmaBahaa. Congratulations on completing this challenge!!!🎉
Your project looks good so far! I have a few suggestions to improve your solution.**
HTML 📃:
<main> tagExample:
<body>
<div class="container"><div>
<main class="container"></main>
</body>
The difference between the <div> and <main> tag is the <div> is non-semantic element that doesn't explain the content.
More info📚:
CSS 🎨:
Flexbox
padding because it is not needed..container{
display: flex;
align-items: center;
/*padding: 20px 100px; */
justify-content: center;
min-height: 100vh;
}
CSS Grid
.container{
display:grid;
place-content: center;
min-height: 100vh;
}
max-width instead of the width to .leftSection and .rightSection so the content will not stretch the page.width gives elements a fixed width that doesn't changeMore info📚:
Here is my solution to this challenge: Responsive Sign up form using HTML, CSS & JS
background-color is blue because the title and paragraph meets WCAG AAA accessible text for Color and Contrast fix.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!