@bytemage22
Tiago Pereira
@BuildAndBreakAll comments
- @BuildAndBreak
Hi, you've built a solid foundation for form validation, and with a few small tweaks, it'll be even more user-friendly.
Try to improve this:
-Form is never submitted – The submit event calls e.preventDefault(), but there’s no condition to allow submission when all inputs are valid.
-Validation of all fields before preventing submission: validateInput(input) should be called for all fields at the same time, displaying all errors.
Keep up the excellent work!
Marked as helpful - @HishamBoghdady@BuildAndBreak
Your HTML looks good! Just a couple of things:
Headings: Maybe change one of the <h3> to <h1> for better structure. Footer: The <footer> tag for each item is a bit off—try using a <div> or <section> instead.
Keep going :)
Marked as helpful - P@huynhvanngoan@BuildAndBreak
Nice job for completing the challenge! Looks great! Code is clean, and it’s responsive.
These tweaks can improve structure and accessibility! Consider improve alt text to be more descriptive like: "Gabrielle Essence Eau De Parfum bottle". Group related content using tags like:
<article>, <section>, or <figure>. Add accessibility features like aria-label to links and buttons.You're doing great!
Marked as helpful - @Tasin269@BuildAndBreak
Hey, nice job on the Interactive Rating Component! It looks smooth, and everything works well. Solid work—keep it up! 🚀
- @abedbortol@BuildAndBreak
Error 404 , there isn't a GitHub Pages site here.
- @jeanethsnWhat are you most proud of, and what would you do differently next time?
I'm proud of using variables for spacing, colors and font size.
@BuildAndBreakHi, great job completing this project, @jeanethsn!
Your code is clean, readable, and makes effective use of semantic HTML.
I also appreciate the use of css variables, it's a great habit that will be invaluable in larger projects, so getting comfortable with them early is definitely a smart move.
A couple of suggestions:
-Fixed Width on Section:
I noticed you set a fixed width of 310px on the <section> element. While this will work on most devices, I’d recommend using a percentage (%) for more flexibility and adding a max-width of 310px if needed. This will make your layout more responsive across different screen sizes.-Clickable Links:
Consider adding links within each list item to make the social media options clickable. Redirecting users to these platforms could be a nice enhancement and why not make your personal social links profile? Think about that :)Tip: It looks like there are two closing <main> tags by mistake, so double-check that part.
Keep up the great work! Greetings, Tiago
- @Abdullah-trial@BuildAndBreak
Hi Abdullah! Congrats for completing the challenge!
Pro's:
-
Use of CSS Variables: Defining color and size variables at the root level makes the code more maintainable and allows for easy updates.
-
Responsive Design: The inclusion of media queries demonstrates a commitment to responsive design, ensuring the layout adapts to different screen sizes.
Cons: -To enhance responsiveness, and avoid hitting the edges on small screen sizes, I would consider adjusting the .card and .blog-image widths using relative units like "%" instead of fixed values:
Like this for example: .card { width: 90%; /* More flexible width / } .blog-image { width: 100%; / Image will adapt to card size */ }
- In the heading selector, the (width: 200;) value is missing a unit, which could cause issues.
-You could use an <address> tag for the creator’s information, as it’s associated with contact details or authorship in most cases.
Marked as helpful -
- @danesp93@BuildAndBreak
Good job for completing the challenge!
Here some tips: -Instead of absolute positioning for .item-qr, you can use Flexbox to center items more efficiently and responsively. -In this case I would use "paragraph" instead of "span" it provides more semantic meaning. -You might want to include the breakpoints for better responsiveness.
Marked as helpful
