I'm not sure about my approach using the input type radio for the theme switcher button. I’d appreciate feedback on whether this is the best practice for accessibility and usability, or if there’s a more efficient way to implement it. Any suggestions on improving the logic and UI interaction would be helpful!
I will improve code optimization, UI design, performance, etc., to make it better.
What challenges did you encounter, and how did you overcome them?I faced challenges while applying Tailwind CSS.
What specific areas of your project would you like help with?I don't need help. Thank you for your support
You're using Tailwind, but you're using arbitrary values in all classes. Why? For example, you can use w-full class instead of w-[100%].
I'm not trying to give advice, I'm just curious about your coding decisions.
Completing this project itself making me proud.
What specific areas of your project would you like help with?I’m still unable to properly position the background image for both desktop and mobile screens. If anyone has suggestions on how to improve my code, especially regarding the background image, please let me know in the feedback section.
To fix the issue, I suggest changing the CSS value in body element from background-size: 100vw 49.1vh; to background-size: contain;. And remove the property background-attachment: fixed;.
I would really like to know some ways how to use different font sizes on desktop and mobile without using media queries, thank you
You can use CSS clamp(), min(), or max() functions. Example:
font-size: clamp(1rem, 2vw, 2rem);
This scales the font between 1rem and 2rem based on viewport width, without media queries.
How can I make the page responsive?
There are two ways to make the cards responsive:
Set .container to display: flex for mobile, and change the flex direction for larger screens.
.container { display: flex; flex-direction: column; /* Mobile: Stack cards in a single column */ align-items: center; /* Center the items on small screens */ } /* For desktop */ @media (min-width: 1024px) { .container { flex-direction: row; /* Arrange cards in a horizontal row */ justify-content: center; /* Center the items */ align-items: stretch; /* Ensure all cards have the same height */ } }
For more control, you can use CSS Grid, which allows better responsiveness without needing to change flex-direction.
.container { display: grid; grid-template-columns: 1fr; /* Mobile: Single column */ } /* For desktop */ @media (min-width: 1024px) { .container { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Responsive grid */ } }
I’m most proud of successfully implementing a clean and responsive blog preview card using HTML and CSS. The layout is well-structured, and I like how the hover effect on the title enhances the user experience.
Next time, I would focus on:
Improving accessibility by adding aria-labels for screen readers. Optimizing text readability by adjusting color contrast for better visibility. Adding a transition effect to make the hover color change smoother.
What challenges did you encounter, and how did you overcome them?No challenges were encountered in this.
What specific areas of your project would you like help with?CSS best practices: Are there any improvements in my class structure or styling approach? Performance optimization: How can I make the hover effect and box-shadow rendering smoother? Accessibility improvements: Are there better ways to ensure the design is user-friendly for visually impaired users?
Hi Ranjit,
You did a great job! There are no issues with web accessibility or CSS. However, there is room for improvement in the HTML structure. Since this is a blog card, you can wrap it with the <article> tag instead of a <div>. This way, the HTML structure would be as follows:
<body> <main> <article> </article> </main> <footer></footer> </body>
This is my first project and I tried to make it as good as i can and I'm proud that I was able to create it.
What challenges did you encounter, and how did you overcome them?I struggled with using Flexbox correctly.
What specific areas of your project would you like help with?I'm a beginner, so I need help understanding how to improve my project. Any guidance on best practices would be really helpful.
Cool solution! But there are a few things that need improvement:
<h1> because every web page should have one <h1>.