one my best projects ever! loved doing js here since it was my first time
What challenges did you encounter, and how did you overcome them?hamburger menu, did some classlist.toggles to fix it
What specific areas of your project would you like help with?everything
Hi @geomydas!
You did an awesome job completing this challenge!
I just wanted to give you some feedback on some style details.
It looks like the paragraph and the 'see all' button are styled differently than the original design, so it might be worth reviewing that. Additionally, adding an aria-label to the section element could improve accessibility and make it easier for users to navigate your page.
Happy coding!
What I am most proud of??? I don't know maybe I completed the challenge and most importantly i am submitting the Challenge.
What challenges did you encounter, and how did you overcome them?Creating custom color CSS was a challenging part. I was doing a silly mistake of not putting ; at the end of code for example
the correct way
--Very-dark-blue-mainBG: hsl(217, 54%, 11%); --Very-dark-blue-cardBG: hsl(216, 50%, 16%);
i was forgetting ; at the end so i was not able to use it. And there is part where when in active state NFT image had a overlay of cyan background whit an eye symbol, ion hovering my eye symbol opacity was also getting changed which i was not able to solve.
What specific areas of your project would you like help with?there is part where when in active state NFT image had a overlay of cyan background whit an eye symbol, ion hovering my eye symbol opacity was also getting changed which i was not able to solve.
Hi @7juned7!
Great job on completing this challenge!
To know more about custom properties and their usage you can read this CSS Custom Properties Guide by Chris Coyier.
Hope this will help you!
Happy coding!
I have learnt how to make accessible forms by
I had some issues using aria-invalid attribute and removing error messages when user starts filling forms
Is my solution accessible? How can I improve the a11y of the solution.
Hi @srijanss!
You did a fantastic job completing this challenge!
Just a quick note to review the use of the aria-invalid attribute on the input radio type.
I hope this will help you improve your coding skills!
Happy coding!
Hello @AnaCarol2001!
Great job on finishing this challenge!
I'd suggest including some ARIA attributes such as aria-expanded (which indicates whether the content is visible) and aria-controls (which links the element to the content).
I hope this advice will help you improve your coding skills!
Happy coding!!!
Hello @Yago14,
Good job on completing this challenge!
I'd suggest including semantic HTML, like <main> instead of the <div> element and using attributes like type and title on the <button> element to improve accessibility.
I hope this will help you improve your coding skills!
Happy coding!!!
Please help with mobile responsiveness. Thanks in advance
Hi Joseph5404!
Great job in completing this challenge!
To improve your solution you can:
Use max-width and margin: auto properties in your main container.
For example, for the max-width property, you can write { max-width: 90% } for
small devices and { max-width:52rem} for bigger ones ;
Use grid-template-areas and grid-area properties for placing elements using named template areas.
Here there is a link that can help you: Css-tricks: grid-templat-area
Hope this will help you!
Happy coding!
I was not able to change color of image from black and white to purple .. please viewers also do help me for the same.
Hello NIKHILKUSHWAHA9877!
Great job in completing this challenge!
To solve your issue you can:
-set a background-color: hsl(277, 64%, 61%) on the parent element ;
-use the mix-blend-mode: multiply property and an opacity of 0.5-0.7 on the child element;
In your case it should be something like this:
.img {
display: flex;
background-color:hsl(277, 64%, 61%);
}
.img img {
width: 100%;
height: 100%;
opacity: 0.7;
mix-blend-mode: multiply;
}
Happy coding!!!
My second project on react. Would love some feedback.
Hi oc-garcia! Great job in completing this challenge!
To improve your solution you can:
-use box-sizing: border-box property for all elements to include the padding and border in an element's total width and height:
*{
box-sizing:border-box
}
-add max-width and margin: auto-properties in the "page-container" class (es. max-width: 90% for small devices, max-width: 58rem for bigger ones) to view the optimal layout based on the device's screen size.
Happy coding!!