Hello there,
worked first time with grid as I was a little scared to start with something new. I like the workflow and the usage of two axis. I can improve more by using repeat() for my templates but I am free for suggestions for my current project.
I worked with ACCESSIBILITY & BEM
Hello there,
Great work on your solution! I particularly appreciated your use of the <hgroup> element to group the subheading and heading (<h1>). This is a thoughtful choice that enhances the structure and semantics of the HTML in this context.
Here are a few suggestions to further improve your code:
Accessibility Enhancements:
I noticed that the alt attributes for the icon images are currently left empty. Providing a brief description for each icon would improve accessibility, allowing screen readers to convey meaningful information to visually impaired users. For example, you could use descriptions like "Supervisor Icon," "Team Builder Icon," etc.
Refactoring Repeated Styles:
There are some repeated CSS styles for card headings and paragraphs, such as color and font size. To simplify your code and make it more maintainable, consider consolidating these styles into shared classes. For instance, instead of defining individual classes like .firstcard__h--color, .secondcard__h--color, etc., you could use a single class, .card__h--color, and apply it to all cards. This would look something like:
.card__h--color { color: var(--very-dark-blue); } .card__h--size { font-size: 1.1rem; } .card__p--color { color: var(--grayish-blue); } .card__p--size { font-size: 0.8rem; }
This approach keeps your code cleaner and easier to modify in the future.
Overall, your solution demonstrates clear attention to detail and effective use of semantic HTML elements. Well done! I hope you find these suggestions helpful.
Implementing a responsive layout that works seamlessly across different devices and screen sizes is an accomplishment. Ensuring the card adapts well on mobile, tablet, and desktop adds significant value to the project. While the component might look great in one browser, ensuring it's flawless across all major browsers is crucial. Next time, you could invest more in automated testing or manual checks to avoid any compatibility issues.
What challenges did you encounter, and how did you overcome them?Ensuring that the product preview card looked perfect on various screen sizes (mobile, tablet, desktop) was a challenge. Getting the layout to adapt properly, especially when dealing with text overflow, image resizing, or grid/flexbox properties, required careful attention. To overcome responsive design challenges, I used CSS Grid and Flexbox strategically. Media queries were applied at specific breakpoints to ensure content was displayed appropriately on all devices. Tools like Chrome DevTools helped simulate different screen sizes during development.
What specific areas of your project would you like help with?Implementing smooth transitions or micro-interactions to enhance user experience. Optimizing the use of JavaScript or CSS animations to ensure they don’t affect performance negatively. Gathering and integrating feedback to better understand how real users interact with the component and identify areas for improvement. If the product card involves dynamic data (like updating price, rating, or availability), handling state management or adding interactive elements (e.g., hover, click events) efficiently can be a challenge. React, Vue.js, or even plain JavaScript. Help with optimizing event listeners, DOM manipulation, or improving performance for animations/interactions would be beneficial.
Congratulations, Great solution 👍. I also agree with the previous comment about transition.
made the required adjustments!.. this was one difficult task for me, but im glad it pulled through.. pls do leave your thoughts concerning this
Hello there, You made a good solution 👍 Your code is well-structured and easy to read.
Suggestions for Improvement:
The use of HTML5 semantic elements (<section>, <h1>, <h2>, <h3>, <ul>, <ol>, <table>) is good. However, wrapping the content inside multiple <div> elements instead of using more semantic tags (like <main>, <article>) can be improved for better readability and SEO. For example: You could replace the element <div class="container"> with <main class="container"> and also the element <div class="innerCont"> could be <article class="innerCont">
The width of the <div class="container"> should be larger to match the design.
The font size of the headings and body text should be adjusted to match the design.
The image dimensions are explicitly set with width="320px" and height="130px", which might distort the image. It's better to use CSS to set a width of 100% for responsive designs.
Overall, your project is well-structured and follows a clear layout. I hope you find these suggestions helpful.
Hello there, You made a good solution 👍 Your code is well-structured and easy to read.
Suggestions for Improvement:
CSS Variables:
Consider using CSS variables for colors and other repetitive values. This will make your code more maintainable and easier to update in the future. For example:
css
:root {
--green: hsl(75, 94%, 57%);
--white: hsl(0, 0%, 100%);
--grey: hsl(0, 0%, 20%);
--dark-grey: hsl(0, 0%, 12%);
--off-black: hsl(0, 0%, 8%);
}
body {
background-color: var(--off-black);
color: var(--white);
}
.card-container {
background-color: var(--dark-grey);
}
.location {
color: var(--green);
}
a {
color: var(--white);
background-color: var(--grey);
}
a:hover {
background-color: var(--green);
color: var(--grey);
}
Again, great job on your project! I hope you find this suggestion helpful.
I think I have sorted out the challenge and divided it part by part, that makes solving the problem much easier. I'll try the responsiveness differently next time.
What challenges did you encounter, and how did you overcome them?I had some challenge with readme file in github repo. searched youtube, watched a video tutorial and the problem was solved, as simple as that!
What specific areas of your project would you like help with?N/A
Hello there, You made a good solution 👍
Your HTML structure is clear and well-organized. However, I noticed that the img elements do not have alternative text. Including descriptive alt text is important for accessibility, as it helps users who rely on screen readers understand the content and purpose of the images.
in my solution I have provided an alternative text as follows:
HTML:
<img decoding="async" src="images/illustration-article.svg" alt="Illustration Article">
Your CSS is well-structured and easy to read. I noticed that you applied the border-radius directly to the image element rather than its wrapper. While this works fine, applying the border-radius to the wrapper can sometimes offer more control, especially if you need to manage overflow or apply additional styling to the container. Here's an example of how you could adjust your CSS:
CSS: .blog-img { overflow: hidden; border-radius: 10px; }
.blog-img img { width: 100%; }
This approach ensures that any overflow from the image is hidden and that the border-radius is consistently applied, which can be particularly useful for maintaining design integrity across different browsers.
Again, great job on your project! I hope you find this suggestion helpful.
I wrote the code mobile first so it was easier to build the computer version after. I did a perfect job and would not change anything.
What challenges did you encounter, and how did you overcome them?Bottom text was overlapping with the card so I lowered it.
What specific areas of your project would you like help with?Commenting my code.
Hello there, You made a good solution 👍 I noticed one thing that could be a small enhancement to your code. Currently, you have the <img> element directly inside the .card container with a border-radius applied directly to the image. This approach works well, but in my solution I wrapped the image in a separate container (div) to ensure consistent application of the border radius and provide greater flexibility for future styling adjustments. This approach also improves the readability and maintainability of the code. Here's a small example of how you could modify your code:
HTML:
<main> <div class="card"> <div class="card-image"> <img src="./images/image-qr-code.png" alt="QR Code"> </div> <div class="card-text"> <h1>Improve your front-end skills by building projects</h1> <p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p> </div> </div> </main>CSS: .card-image { overflow: hidden; border-radius: 10px; }
.card img { width: 100%; }
Again, great job on your project! I hope you find this suggestion helpful.
