@Al-Shimaa2001
What are you most proud of, and what would you do differently next time?
this the first time to use serset with img its very useful
Kama
@Kama-ds10All comments
- @Kama-ds10
What You Did Well Responsive layout with media queries: Great use of @media for different screen sizes.
Semantic structure: Using proper tags like <main>, <h2>, <p>, and <button>.
Visual styling: Elegant colors and spacing, plus good use of object-fit and aspect-ratio.
Use of srcset: Smart step toward responsive image handling.
Suggested Improvements
Text Improvements “Add to card” → Should be “Add to cart” It's a small typo, but it's good to catch these details early.
HTML Best Practices Avoid using width="100%" in the img tag inline. You already styled it correctly in CSS. Keep HTML and CSS separate when possible.
- @melikeasahin@Kama-ds10
Feedback on your Solution
Semantic HTML:
You used semantic elements very well: <main>, <section>, <h1>–<h2>, <p>, <ul>, <ol>, and <table> all make sense and improve the document structure and accessibility. Great job!
Small suggestion: You could wrap your <hr> tags in <section>s if you want even cleaner grouping, but it's not a big issue.
Responsive Layout:
Your project looks clean on both mobile and desktop. The media queries and layout adjustments are well handled.
Nice touch removing the card background and shadow on mobile – it matches typical mobile-first design thinking!
Code Structure, Readability, and Reusability:
Your CSS is organized into clear sections (fonts, layout, titles, lists, etc.) — very easy to read.
You consistently use BEM-like class naming (recipe-card, recipe-content, etc.), which makes the CSS reusable and understandable.
For even better reusability, you could create some shared utility classes like .text-center, .mt-2, .mb-2 for margins and spacing in future projects.
Design Accuracy:
Your visual layout follows the design very closely: good typography, colors, spacing, and element sizing.
Small note: The border-radius is slightly missing on the small screen version for the image (you removed it completely, but you might still want a small radius like 0.5rem for better aesthetics).
Summary:
Overall, this is an excellent solution! Your structure, responsiveness, and code readability are very strong. Minor improvements like adding a table <caption> and fine-tuning mobile styles would make it even better.
Marked as helpful - P@j3dd3rsWhat are you most proud of, and what would you do differently next time?
I created it at a speed I was happy with and managed to get to the solution.
What challenges did you encounter, and how did you overcome them?I had to rewrite some code to get the anchor links to work. I had the padding on the li element and not the anchor tag.
@Kama-ds10Great work, j3dd3rs! Your solution is clean, visually appealing, and very close to the original design. Here’s some detailed feedback based on key points:
Semantic HTML You’ve used semantic tags like <main> and <ul>, which is great! One thing to consider is replacing the <p> elements used for the name, location, and tagline with more semantic tags where appropriate—for example:
Use an <h1> or <h2> for the user’s name (.social-media-name).
The tagline could be in a <blockquote> or a styled <p>, depending on the tone you want.
Responsiveness The layout looks solid and centered on larger screens. You may want to test how it behaves on smaller devices or add a media query to ensure the padding and button widths adapt below, say, 375px.
Tip: Instead of fixed padding: 1rem 9rem for your links, consider something more flexible like padding: 1rem 2rem; width: 100%; text-align: center;
Design Accuracy Very faithful to the original Frontend Mentor challenge design. The only noticeable difference is the button sizing on smaller screens. Otherwise, it's clean and on-point.
Suggestions for Improvement Add focus states for accessibility.
Consider using h1/h2 for the main headings instead of p.
Use more flexible padding or widths for buttons to improve responsiveness.
Marked as helpful - @Kc-man6@Kama-ds10
What’s Working Well: Layout: The card structure is visually clear and matches the overall layout of the design. The use of spacing, padding, and contrast between sections is good.
Responsiveness: You've applied Flexbox on the body which helps center the content nicely on most screen sizes.
Typography and Visual Hierarchy: The size difference between headings, subtext, and body copy helps guide the viewer’s eyes correctly.
Avatar Section: The placement and alignment of the avatar with the name is well done and clean.
Suggestions for Improvement:
- Semantic HTML Avoid using a <form> tag unless you're capturing or submitting data. In this case, it’s being used as a wrapper for layout, which isn’t semantic. Replace <form> with a <section> or <article> instead.
Consider wrapping your main content with a semantic tag like <main>.
- Accessibility The image used inside the card (desktop-design1.jpg) is a mockup — make sure you replace this with the actual preview image meant for the project, and give it a meaningful alt attribute (e.g., alt="Preview of blog post").
The avatar image (image-avatar.webp) has no descriptive alt. Consider updating it to alt="Profile picture of Greg Hooper".
- Layout & Responsiveness While the card is centered vertically and horizontally, it currently doesn't respond well on smaller screens (like mobile). You can improve responsiveness by:
Adding flex-direction: column at smaller breakpoints.
Using relative units like rem, %, or max-width instead of fixed widths and heights (px) for more flexibility.
- Code Structure Avoid inline styles (height="180px" width="300px" in your img tag). Move those to the CSS file for better readability and maintainability.
Try separating structure (HTML) and design (CSS) fully.
Final Thoughts: Great effort on the layout and attention to detail! With a few semantic tweaks and responsive improvements, this project will be even stronger. Keep it up and don’t hesitate to ask if you’d like help improving any part of it!
- @Shashank23codes@Kama-ds10
Hey Shashank! Awesome work getting this QR Code component up and running 👏 I reviewed your HTML, and you're doing a great job, especially for an early-stage project. Here's a detailed breakdown of what you nailed and what you can improve:
What You Did Well: Semantic Setup: You've used essential tags like <!DOCTYPE html>, lang="en", meta tags, and included a description. That’s solid for both accessibility and SEO.
Google Fonts Integration: You included the Outfit font family correctly, which helps match the official design spec.
Clean Structure: The .card div is a neat container. It keeps everything organized and readable, which is great for maintainability.
Simple, Readable Code: Your HTML is minimal and clear — no unnecessary elements or messy nesting.
Suggestions for Improvement: Fix Extra Closing </div>: You have an extra </div> at the bottom of your code:
</div> <!-- This one doesn't have a matching open tag --> This will break the layout or cause rendering issues. Just delete that line.Final Thoughts Powerful work here, Shashank 🙌 With just a few small improvements — like semantic enhancements and better alt text — this will be a super polished beginner project. Keep building and trying new layouts — you’re progressing well!
Marked as helpful
