@HamzaMohamed321
What specific areas of your project would you like help with?
how to make space between "front-end developer" text and the buttons
Amna Ashraf
@Dev-AmnaAll comments
- @Dev-Amna
Great Job on This Profile Card!
Your layout looks clean and modern. The use of flexbox, position: absolute, and transform is smart for centering elements like the image and text. The color scheme is well chosen — dark background with a bright accent works very nicely.
What’s working well:
Clean and organized structure
Nice font choice (Inter) and spacing
Good use of button hover transitions
Dark theme looks polished with good contrast
Neat alignment and consistent padding
Suggestions for improvement:
Center the card vertically: You already added display: flex to the body, just uncomment align-items: center; and justify-content: center; for perfect vertical centering.
Add image and alt text: Currently, the profile image is empty. Add a real src and a helpful alt (like alt="Profile picture of Jessica Randall").
Avoid white-space: nowrap: In .job p, this could break layout on smaller screens — consider removing it or handling it with media queries.
More interactivity: You could enhance the button hover effect with a slight transform: scale(1.03) or a soft shadow for a more engaging UI.
Marked as helpful - P@WebDevSinaWhat are you most proud of, and what would you do differently next time?
I am proud of how i was able to make it look similar. it's not perfectly identical but it looks okay to me.
What challenges did you encounter, and how did you overcome them?The challenging part was trying to get the text looking right. it kept misaligning and I was able to use padding to get it right.
What specific areas of your project would you like help with?I would love help with my unit usage. I feel very uncertain about when to use what units.
@Dev-Amna🌟 You’ve done a really nice job on this QR code component! The layout is centered perfectly using Flexbox inside the .container with display: flex; justify-content: center; align-items: center, which gives it a very clean and balanced look. I really liked how you used color variables like --slate300 and applied it as the background using background-color: var(--slate300) — this is a great way to keep your theme consistent.
🖼️ Your .main-container has a neat white background with rounded corners using border-radius: 20px and a max-width of 275px, which makes the card compact and stylish. The QR image is fully responsive because of width: 100% and height: auto, and the rounded corners are a nice touch with border-radius: 10px.
📌 Just a small HTML issue: inside your .description, the <p> tag is incorrectly closed after the </div>. You should move the closing </p> right after the paragraph text to fix the HTML nesting. So instead of placing it outside the block, it should look like: <p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>.
📱 For better responsiveness on small screens, you already used a media query — which is awesome. Inside that media query (@media (max-width: 375px)), you could add width: 90% to .main-container so it scales better on mobile. It would look like this: .main-container { width: 90%; }.
🎨 Another suggestion is to center the description block completely by adding margin: 0 auto in your .description CSS — so it becomes .description { margin: 0 auto; }. This ensures everything inside remains visually aligned.
💡 And to make the card stand out more, you can apply a light shadow using something like box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1) inside .main-container.
📏 Lastly, for better font scaling on different screen sizes, you can use clamp() on your heading like this: font-size: clamp(1rem, 2vw, 1.3rem) inside your h1 styling.
✅ Overall, it’s a very well-done solution — clean layout, consistent styling, and great use of fonts and spacing. Just a couple of small improvements and it will be perfect! Keep up the great work! 🚀💻
Marked as helpful - @Bilal-ptr@Dev-Amna
Wow, this looks amazing! I really love the clean layout and your attention to detail. You've done a fantastic job — truly inspiring work!
- @tortimanWhat are you most proud of, and what would you do differently next time?
Learn about accesibility
@Dev-AmnaGreat work on building this Contact Form component! 🙌 Your structure, styling, and validation logic are well organized. The layout looks clean, and I really liked how you combined HTML, CSS, and JavaScript to make a fully interactive form. Here’s what stands out:
✅ What’s working well: Proper use of semantic HTML (fieldset, legend, label, etc.) — great for accessibility.
The validation is handled nicely with real-time feedback using input event listeners — well done!
Good use of CSS variables for consistent theming and clean styling with clamp() for responsive spacing.
The success message popup is a nice UX touch.
🛠 Suggestions for improvement: You can hide the success message using opacity: 0 and pointer-events: none, then show it with a fade-in for smoother UX instead of toggling visibility alone.
Consider removing the fixed height from the form (height: 49.69em) and letting it grow naturally with content — helps on smaller screens.
In JS, the message validations could be combined into one function that accepts an input element and an error element to reduce repetition.
You might want to add resetting the form after successful submission with form.reset() and hide error messages.
Some of your labels use both aria-label and visible text — the aria-label isn’t necessary in those cases and can be removed to avoid redundancy.
- @Bilal-ptrWhat are you most proud of, and what would you do differently next time?
I'm proud that I was able to complete the layout and styling with proper structure and make it responsive using best practices. I also explored and successfully used the <picture> tag for the first time to switch images based on screen size, which gave me more control. Next time, I would better plan my layout structure and naming conventions to make my code more maintainable.
What challenges did you encounter, and how did you overcome them?The biggest challenge I faced was changing the product image for mobile screens. I initially tried solving it using media queries and background-image, which worked partially but wasn't ideal. After researching, I learned about the <picture> tag, and it turned out to be the perfect solution for responsive images. It was a great learning moment!
What specific areas of your project would you like help with?I’d appreciate feedback on:
How I structured my layout using Flexbox — could it be done better or more efficiently? Best practices for using the <picture> tag — did I implement it correctly? Any improvements I could make for accessibility or semantic HTML.
@Dev-AmnaNice work on your Product Preview Card! 👏 Your layout looks clean and professional. I liked how you used Flexbox for layout, object-fit: cover for the image, and responsive design with media queries — all great practices!
Here are a few suggestions to improve it even more:
✅ Great use of the <picture> element with srcset — helps a lot with responsive images.
For better accessibility, try adding an aria-label or more descriptive text inside the button, like: "Add Gabrielle Essence Eau De Parfum to cart".
The label "Perfume" could be wrapped in a <span> with a class like .tag, and styled to stand out more (uppercase, letter-spacing).
You could also add a smooth hover effect on the button:
button { transition: background-color 0.3s ease; } Lastly, your media query works well — but on very small screens, you could also reduce padding or font size slightly for better readability.
Overall, this is a solid and responsive component — just a few minor tweaks and it’s ready to go! 💪
Marked as helpful - @Luis-Guilherme-stackWhat are you most proud of, and what would you do differently next time?
Make some responsivity.
What challenges did you encounter, and how did you overcome them?Responsive in mobile.
What specific areas of your project would you like help with?Make the page more responsive.
@Dev-AmnaNice job on this blog preview card! 🎉 Your structure is clean, and I like how you used CSS variables, Figtree font, and responsive design. The layout looks modern and well-balanced. Great use of Flexbox too!
Here are a few suggestions to improve it even more:
Move your @import for Google Fonts into the <head> section of your HTML. It should be inside a <style> tag or a linked CSS file, not after the </html>.
In your HTML, the title and description are both headings (<h1> and <h2>). For accessibility, it’s better to use <h2> for the main title and turn the description into a <p> tag.
Add cursor: pointer; to .title:hover so users know it’s clickable.
You could also add a hover effect to .card, like transform: translateY(-5px); with a smooth transition, to make the UI feel more interactive.
Your media query is a great start — you might want to add one for smaller screens (e.g., 600px) to improve readability on mobile.
Overall, great work — just a few tweaks will make it even more polished! 👍
Marked as helpful - @shobhitjajoo@Dev-Amna
👏 Great work on completing this challenge! Your layout looks close to the original design, and your use of Flexbox and media queries shows a good understanding of responsive design. I especially liked how you implemented the image overlay and included custom fonts — nice attention to detail.
Here are a few suggestions to make it even better:
⚙️ In CSS, try using lowercase units consistently (e.g., px instead of PX).
🧼 Some padding and spacing values repeat or override each other — cleaning those up would simplify your code.
🧱 Consider switching to more structured class naming (like BEM: .hero__text, .hero__image) for better maintainability.
🔍 For accessibility, if the image is decorative, use alt="" or add proper ARIA roles.
📱 On smaller screens, slightly reduce padding or image height to prevent vertical overflow.
Overall, well done! You're building clean, responsive components — keep going! 🚀
- @zunemoeWhat are you most proud of, and what would you do differently next time?
- Used secondary variables to handle different colors based on the card color was new concept for me
- Using grid-row/column: span was a headache and it took me a while to figure out to get the desired result
- Used order property to override the card order for the desktop
@Dev-Amna🌟 Great work on completing this challenge! Your layout looks visually appealing and responsive across screen sizes. I especially liked the way you handled the background SVG on the first card and your use of CSS variables for consistent theming — that's a great practice for scalability and maintainability.
✅ What you did well:
Clean and structured HTML markup
Effective use of CSS Grid and media queries for responsiveness
Clear color contrast and good use of custom properties
Thoughtful CSS reset and typography styling
🛠️ Suggestions for improvement:
Consider adding alt text that’s more descriptive for accessibility, e.g., instead of just “Profile image,” maybe use the person’s name.
You could optimize your mobile layout spacing slightly to reduce top padding on smaller screens.
Some minor typos in the testimonials could be corrected for polish (e.g., "developent" → "development").
Overall, a strong and professional-looking solution! Keep it up! 💪
- @omarhossam750@Dev-Amna
👏 Great work on this QR Code component! The layout is neat, and the blue circular accents give it a unique and creative touch.
Responsive Design: Nice use of media queries for different screen sizes! You might want to simplify by using max-width and rem units for more flexibility.
💡 Accessibility Tip: Don’t forget to add an alt attribute to your image like:
<img src="./qrcode.png" class="qr-img" alt="QR code to visit Frontend Mentor" /> 🧽 Minor Cleanup: You can remove z-index: 999 from .qr-img unless there’s a specific layering reason — it doesn’t seem needed here.Keep up the great work — you’re doing awesome! 🚀🔥
Marked as helpful - @Shathamh25@Dev-Amna
Great job! 👏 Your layout looks clean, and the responsive design works nicely. You've used grid, Google Fonts, and CSS variables well — that shows good structure and understanding. I just have a few suggestions to improve your code even more:
Fix typos: The class name discounr-prrice should be discount-price, and in your h1, the color property has unnecessary parentheses. Just use color: var(--Black-color);.
Button icon: The ::before pseudo-element for the cart icon won't show the image unless you also add display: inline-block, background-size: contain, and background-repeat: no-repeat. Or even better, consider using an <img> tag inside the button for better accessibility.
Clean up media query styles: You're repeating some styles (like padding and background-color) inside the media query that don't need to be there. Only override what changes — it keeps your code cleaner.
Font redundancy: font-family is declared in both * and body. One declaration is enough (preferably in body).
Overall, you're doing really well — just a few small fixes and your solution will be even stronger! 🚀
- @Shakshi-Mittal-Tech@Dev-Amna
Great job on completing the Four Card Feature section! 🎉 Your layout is responsive and visually clean. Here are a few suggestions to improve it further:
✅ What's Good: Semantic structure with <main>, <header>, and organized cards.
Nice use of CSS variables for colors.
Responsive behavior is working well on smaller screens.
🛠 Suggestions: Remove Duplicate Media Queries You have two @media (max-width: 37.5rem) blocks — try merging them into one to keep things cleaner and avoid conflicting rules.
Fix Font URL Typo One of your font-face declarations has .woff2.woff2 — it should be just .woff2.
Choose One Layout Method on Mobile On small screens, you first use flex for .card-container, then grid. Stick with one (preferably grid) to avoid unnecessary overrides.
Uncomment CSS Reset The universal box-sizing: border-box; reset is commented out. It's helpful for consistent layout behavior, so consider enabling it.
Alt Text Enhancement Instead of just saying "Supervisor Icon", try more descriptive alt text like "Magnifying glass icon representing Supervisor" for better accessibility.
- @zunemoe@Dev-Amna
Nice work! 🎉 The layout looks clean and responsive, and your use of custom properties (CSS variables) is excellent — it makes the styling really scalable. Just a few suggestions to consider:
💡 Minor Typo: In the button styles, box-shadow: non; should be corrected to none to avoid potential confusion or unexpected behavior.
🚀 Accessibility Tip: Adding aria-labels or title attributes to the social buttons could improve accessibility, especially for screen readers.
🧠 Optimization Idea: Instead of using min-width: 100vw; and min-height: 100vh; on .container, consider using height: 100dvh; for more modern viewport behavior on mobile browsers.
✨ Hover Feedback: You did great with hover effects! You might also consider adding a slight transform: scale(1.02); to give the buttons a more interactive feel.
Overall, you nailed the design and layout — well done! 🙌 Keep building and experimenting. You're doing awesome!
- @donnalayWhat are you most proud of, and what would you do differently next time?
Spent extra time on the thank you page transition! I built this with vanilla HTML, CSS, JS. Next time I would build it using React.js.
@Dev-AmnaNice work! 👏 Just a few suggestions:
You forgot to include the correct GitHub file link in the solution — please make sure to add that for better context and reference.
In the btn.addEventListener("click", ...), the e.preventDefault; is missing parentheses — it should be e.preventDefault(); to properly prevent the default form action.
You’re repeating the logic in two labels.forEach(...) loops — one for click and one for keydown. To keep your code DRY (Don't Repeat Yourself), consider extracting that into a reusable function like setActiveLabel(label).
If .transition-in or #result is not found, it might throw an error. You can add a simple check like:
if (result) { result.innerText =
You selected ${rating} out of 5; } Everything else looks clean and organized! Great use of localStorage, event listeners, and accessibility with keydown. 🌟Marked as helpful - @saif010101What challenges did you encounter, and how did you overcome them?
Adding the animation was a little challenging since i have not created a proper accordion before. I saw other solutions to see how they did the animation plus watched a youtube video.
What specific areas of your project would you like help with?I would like feedback on my HTML structure, CSS and JS Code and any advice in general would be really appreciated.
Thank you for taking your time out to read and help.
@Dev-AmnaGreat work on the FAQ Accordion! 👏 I really loved the clean layout and the smooth little animation—it adds a nice touch of interactivity. Everything looks polished and works really well. Keep it up!
- @Shakshi-Mittal-Tech@Dev-Amna
Hey! 😊 Your recipe page looks really clean and pretty — love the colors and layout! Just a few small tips: maybe add alt to the image, fix the spelling of ingrediants, and slightly increase the font size for better reading. Overall, great job! Keep it up! 🍳✨💻
Marked as helpful - @MustaphaMouchtarik@Dev-Amna
✨ Great job on this solution! The overall design looks clean, and your use of color and spacing is visually appealing. Just a few friendly suggestions to help improve it:
There's a small typo in the location — "Unite Kingdom" should be "United Kingdom".
The Instagram link is missing a slash (https:/instagram.com → https://instagram.com).
Add alt text to the image for better accessibility.
Your CSS file is linked as "stzle.css", which seems to be a typo — it should be "styles.css".
To make the layout more responsive, consider using max-width: 400px; width: 90%; instead of width: 50%.
It’s better to style <a> tags directly as buttons rather than placing a <button> inside an <a> — this avoids invalid HTML.
You're doing really well — just polish these small details and it'll be perfect! Keep it up! 💪🌟
- @theuzzkl@Dev-Amna
✨ Nice work! Your layout looks super clean and modern. Great use of the dark theme and hover effects—they make the profile look really professional. I just have a few small suggestions:
Try using <a> tags instead of <button> for the social links since they're meant to navigate.
Add some mobile responsiveness—maybe reduce padding or button width on smaller screens.
A little transition on the hover effect would make it smoother.
Also, consider adding real links (even placeholders) so the buttons feel interactive!
Overall, you're doing great—just a few tweaks and it’ll be perfect. Keep it up! 👏💻
Marked as helpful - @theuzzkl@Dev-Amna
🌟 Great job on the Recipe Page! The layout is clean, and your use of semantic HTML and Google Fonts gives it a polished look. I especially liked the consistent color palette and organized structure for each section. Well done!
Here are a few small suggestions to make it even better:
✅ Fix closing tag typo – In the instructions section (step 3), you wrote </spam> instead of </span>. Just a small typo to fix.
🧼 Avoid repeated class names – You're using class="card" on both the wrapper and the headings inside section 3. Try to use more specific class names to avoid confusion and styling conflicts.
📱 Mobile responsiveness – You’ve started adding a media query for screens smaller than 768px, which is great! But consider reducing the image width and padding inside .col for better mobile appearance.
🎨 Enhance spacing – Some sections, like .col-5 (Instructions), could benefit from margin-bottom or vertical spacing between steps to improve readability.
♿ Accessibility – Consider using unordered (<ul><li>) or ordered (<ol><li>) lists for ingredients and instructions instead of multiple <h3> elements. This improves semantic structure and accessibility for screen readers.
Keep going—you're doing amazing work! 💪🍳
Marked as helpful
