@Marcofa87
Latest solutions
Latest comments
- P@srijanss
- You have used landmark components like main and footer , however using article or section for card element would've been more semantic. Level 1 heading is missing for you page, so you can change h2 to h1 in your card
- There are two links in the solution, but they were not accessible using keyboard. You can change the Heading and author name to link so that it takes default focus on keyboard Tab press
- The solution differs a bit from the design, with some padding and margin fixes it will match the design
- I followed BEM methodology to define CSS classes for this solution, its really helpful to write and manage modular CSS
Marked as helpful - P@Biggboss7P@srijanss
Your solution looks very good, layout looks good on all screen sizes, code is well structured, readable and reusable
- You can improve the accessibility using different aria-attributes and roles to announce the game result, turns etc to screen reader users
- some minor styles and some features are missing, like, Restart game ? modal is missing
- P@vcollins1What are you most proud of, and what would you do differently next time?
Finishing the challenge.
What challenges did you encounter, and how did you overcome them?Ran into some issues using grid but got through it with trail and error.
What specific areas of your project would you like help with?Any feedback would be helpful.
P@srijanss- Solution includes semantic HTML, however it would be meaningful to add main heading and form component in main element instead of header landmark
- solution is accessible using keyboard, but it moves focus to result element and some other element on the page as well which can be bit confusing
- Layout looks good on all the screen sizes
- code is well-structured, readable and reusable
- solution differs a bit from design, some styles for headings are different, and on page load welcome message should be shown instead of the bmi result information
- really nice solution , keep up the good work
- @konradbaczykWhat are you most proud of, and what would you do differently next time?
Next time I will save the data of products in cart in variables for easier reusable.
P@srijanss- The solution includes semantic HTML
- Solution is not fully accessible using keyboard, you can enable outline on a, button tags so that keyboard users knows about the active element on the page
- also it would be helpful for screen readers users by adding different aria attributes to define different states in the app e.g popup open/close , add to cart success etc.
- Layout looks good on all screen sizes
- Code is readable, but it can be structured into smaller components for reuse
- Solution differs a bit from the design, the lightbox component is not working
- I liked how you've used animations in menu and slider library for the image gallery
Marked as helpful - @kaoutar-ouadihWhat are you most proud of, and what would you do differently next time?
I'm proud of completing this challenge!
What challenges did you encounter, and how did you overcome them?.
What specific areas of your project would you like help with?Anything that can help me improve.
P@srijanss- header landmark is used properly with nav and links within it, however the nav content is duplicated for desktop and mobile view. You can use CSS to make one nav content work for both mobile and desktop
- main element is used for the content, however the headings are not used properly. heading order goes from h2 to h4
- rather than using div for the content , you can look for section or article landmark element. These elements are accessibility friendly and gives purpose for the wrapped content
- layout looks good on all the screen sizes
- code is well-structured, readable and reusable
- solution differs a bit from the design, like the menu drawer in mobile devices is not full height, on large desktop screen content spans full width. With minor changes you can make your solution match the design
- @samir-DeveWhat are you most proud of, and what would you do differently next time?
...
What challenges did you encounter, and how did you overcome them?I did not face any challenge, it was fun to code this project. I coded it a little bit different than original design, so keep it in mind when reviewing the code and design :)
What specific areas of your project would you like help with?Any suggestion is appreciated !
P@srijanss- <fieldset> element is used to group the inputs but the legend is missing for some fieldset. <legend> element must be added inside fieldset so its announced to screen reader user what the group is about.
- similarly there are two header tags in one page, so there is the possibility of confusion on these headers
- all the elements on the page are not using keyboard, specially the radio buttons have no outline when focused
- layout looks good on all range of screen sizes
- coudn't access the github solution page, so didn't get the chance to review the code
