@Aman11b
PastaSus
@PastaSusAll comments
- @PastaSus
things you can fix:
- Bg color should off white actually
- Desktop nav links color should be dark grayish blue
overall i think you did pretty good
i can see some techniques i can apply to my code also like the menu btn set to absolute and then changing the value of src while using js instead of having two buttons on my markup
- @pavanbone@PastaSus
bro, im seeing vercel site here in solution and design comparison lmao. anyways heres my thoughts on your solution:
1.Instead of using
<div>tag to wrap your form and success message i think you can use<section>tag witharia-labelledby="id-of-heading-to-connect"attribute to a heading with the.visually-hidden or .sr-onlyclass to improve accessibility .- Use <fieldset> and <legend> for grouped form controls like radios:
<legend>Query Type *</legend> <!-- radio buttons here --> </fieldset>``` 3. Add autocomplete attributes: Helps with autofill and improves user experience: 4. Replace aria-required="true" with the required attribute: 5. Use aria-describedby for associating error messages: This helps screen readers announce errors correctly when focus is on the input. 6.Avoid duplicate or ambiguous error messages: <span class="error valid hidden">...</span> <span class="error empty hidden">...</span> Better: use one error container, and dynamically update its text/content with js. 7. Use consistent and descriptive class names: Instead of `.form-group.radio`, consider `.form-group--radio` or `.radio-group.` trying using BEM or other naming conventions. 8. Consider adding `role="alert"` to error containers if using JavaScript to inject messages: It lets screen readers automatically announce changes. - @NitiemaAllassane@PastaSus
damn, didn't know you can do this with only html,css pretty cool to know! but anyways heres some things i think you should fix: Avoid Using <hr> Excessively or for Layout:
-
<hr>is for thematic breaks in content, not layout separation. Styling with borders or spacing is better.-Missing alt Text for Icons in Summary:
-The comment suggests adding icons (+ and –) but doesn’t specify their alt text. If used, they should have appropriate alt text (like "Expand answer" / "Collapse answer") or aria-hidden="true" if redundant.
-BEM Naming Not Consistently Applied:
Some classes (like first__detail) are not BEM. Use faq__detail faq__detail--first instead.Marked as helpful - P@JeronimoCardu@PastaSus
Good job
- P@Capt-Rong@PastaSus
Good job on finishing the challenge, i think the code could be refactored into something better.
- @AndresOreVelWhat are you most proud of, and what would you do differently next time?
Mobile design is the best. Next time I might make a different design for the tablet.
What challenges did you encounter, and how did you overcome them?At first, I didn't know how to do the desktop layout because there were some aspects of the grid I didn't understand, especially for the profile card.
What specific areas of your project would you like help with?In the tablet design, the cards shrink or stretch, any help to prevent this from happening is welcome.
@PastaSusyou need to use the proper tags here it since the readability of the code is kinda bad. Instead of using divs only try to use the proper markup to make the code more readable and accessible. Other than that good job on finishing the challenge
- @shrikanth-dev@PastaSus
bg color should be the lighter one, and darker color for the text.
you dont really have to use inline svg tag here just use the
<img src="svg.svg">tag its much cleaner and more performant.the error message should be at the end also
space-betweenhere would be a good solution to that problem :)The semantics can also be better by adding a
<section>tag and<main>tag - @Stanex96@PastaSus
theres a lot of things that are wrong here(eg. html semantics, how you did your article preview component from mobile to desktop, bg color for links on mobile should be showing as grey) i think you should go through the learning paths here in frontendmentor to really help you progress better
- @Tj-wo@PastaSus
Go through the learning paths in order if you are new to html,css this will help you significantly when dealing with these challenges which i recommend you to do the most.
- @Rodney-MokenyuWhat are you most proud of, and what would you do differently next time?
This was yet another intriguing project. I had to take several hours trying to figure out how i would structure the page for this particular layout. i Used several prompts on AI just to get ideas. finally i got an idea and although i haven't done this 100% accurate, i am happy i could figure out how to do the layout
What specific areas of your project would you like help with?i would like help on how to write initial styles. i am talking about root styles before the body style. what generally goes in there. thanks
@PastaSusi suggest you highly take a look at the responsive design fundamentals learning path here in frontendmentor it would really help you understand the mistakes you did here. and also go through every learning materials it would help you progress tremendously. lastly, have a css reset on your stylesheet and put it before you code everything else :)
Marked as helpful - @AxumiteByte@PastaSus
i suggest placing the css reset first before anything, and i think you also forgot to place variables for the spacing(margin,padding)
- @essachiAli@PastaSus
component size too big, bg color should be eggshell, prep time bg color also close by the right color. by chance are you color blind ?cause that would make sense with the coloring you've chosen for the given component bg and containers
Marked as helpful - @sztedina
- @Mohamed-A-YehiaWhat are you most proud of, and what would you do differently next time?
I pride myself on focusing on the code and reviewing it before uploading it. This may seem silly, but it helps you develop this skill automatically, grow within you, and become something natural within you.
@PastaSusyou can use the
<section>instead of<div>for better html semantics and accessibilty. you also use rem units in css for better scalability and responsiveness . - @FadyFathey
