It'd be interesting to know if there is a more elegant way to handle the form validation on submission - there are a lot of if conditions to handle all the possible scenarios.
Any accessibility specific feedback would be very welcome.
I am proud that I can make the designs more easily.
What challenges did you encounter, and how did you overcome them?Aligning the content was what was most difficult for me
What specific areas of your project would you like help with?In the management of the FlexBox and Grid
Hi Javier,
Glad to hear the designs are getting easier - keep going!
A few bits of feedback to help match the design a little more:
min-height: 100vh; to your <body> and remove the margin top/bottom on the .portafolio class to centre the design nicely in the veiwportbackground-color: hsl(0, 0%, 12%); to .portafolio, you'll need some padding and border-radius toobackground-color: hsl(0, 0%, 20%); to your buttonscursor: pointer; on the buttons to help indicate visually you can interact with themA couple of pointers regarding semantic html:
<main> for this element .portafolioa's in a ul listbutton's with a tags. You probably just need the links and not the button on this designI hope this helps. Happy coding 🤙
Hi Zoulander,
I think your question would be better resolved using semantic html and css instead of JavaScript.
<input type="radio"> this has many more built in accessibility benefits and makes styling the input with :focus easier achieving the 'active' stateExtended content:
<form>, <fieldset>, <label> and <input>'s too<form> you'll need to consider the submit event instead of onClickI hope that helps, any questions let me know.
Happy coding!
Hi Ibrahim,
Overall a really decent solution and responsive - well done!
A few bits of feedback for your consideration:
{cursor: pointer;} to your buttons<div class="grid container"> to a <main>. Semantic html is really important for accessibility and it should clear your report.<p> were different lengths in the design you'd come up against the same challenge. I created this codepen that uses flex:1 and justify-content: space-between as potential solutionsI hope that all makes sense, any questions let me know.
Happy coding!
Hi Aksinya,
Really nice work on this one, good solution.
I think your approach to CSS is completely fine on this size project. When your projects grow you could consider BEM to make building modular styles easier coupled with SASS to create multiple css files (partials) that relate to each component and compile to one style sheet.
Also you should embed some best practices resolving your accessibility report. Your .container <div> could be a <main> tag and your .card-title <p> could be a <h1>. Semantic html is really important.
I hope that helps!
Hi Erkin,
I really like your solution, it looks great!
Your accessibility report is highlighting a few tweaks you could make:
.container <div> with a <main>.attribution <div> with a <footer><h2> with a <h1>Using semantic html is a really fundamental part of building an accessible page. Also Heading hierarchy is important!
min-height: 100vh; to your <body> to help nice centre the design in the viewportI hope that helps!
Hi Mohsin,
Really nice work on this challenge, well done.
And great perseverance to complete the solution with radio buttons too!
Some considerations for you:
.rating-container. It is a semantic element to choose compared to a div and has some interesting attributes you might use in the futurecursor: pointer; to your interactive elements to give that additional feedback to the user on desktop<main>, here is some more information for youOverall you smashed it, with a few tweaks you could level it up even further!
All the best!
