Daniel Haro• 50
@o0oDanielHaroo0o
Submitted
This is the first time I attempt to do a responsive page, I'm still kinda lost so I welcome any advice/comment/critique. Thanks
Mathieu
@mathcrln
All comments
- Mathieu• 295
@mathcrln
Posted
Hello Daniel, well done!
I don't have much to say, your design is very well implemented and especially smooth. Nicely done for the first time! Additionally, I checked out your code and it's very easy and agreeable to read with the spacing and the comments. It seems clean and simple, yet effective. Congrats 👏🏾
When it comes to feedbacks, around 1125 pixels, things can seem a bit constrained and can seem to "jump" at times. I see that you added varying padding on the .card__content class. Maybe instead you could a div for the information and rather play with the max-width to get the effect you want?
Between 700 and 1140 pixels, the title and the paragraph are very close touching, maybe you could improve the spacing on these elements.
Otherwise, well done! Good luck for your upcoming projects and challenges.
Marked as helpful
2 Hello👋!
I have to admit that the challenge was more difficult than I thought but it was fun to get throught the problems I faced. Here are few new things that i was able to bring in into my project:
:focus-visiblepseudo class (spec). This selector should now only indicate focus when it is helpful to the user - such as in cases where the user interacts with the page via a keyboard or some other non-pointing device.- This is first time i used @extend rule. Since my modifier classes
kv__hero-bg--1/2/3all uses styles fromkv__hero-bg. I extend this class and it allowed me to remove unnecessary class from HTML code. - Added sticky nav menu using Intersection Observer API. This time i make it to be just hamburger menu after scroll with background, not sure if it's pretty but i want to have some fun.
- Added backdrop-filter to opacity background when nav mobile is open. It provide effect such as blurring. (no Firefox support yet tho). Thanks to @ApplePieGiraffe. I found it in his solution.
- I experimented with
clip-pathto create this slide effect on my background slider. - Added
aria-live="polite"to my.kv__introelement to expose dynamic content changes in a way that can be announced by assistive technologies after my slider change content within that element. This one is from @Matt. - Implement
prefers-reduced-motionCSS media feature which is used to detect if the user has requested that the system minimize the amount of non-essential motion it uses. Prevent animations in brief.
Again thanks for @grace-snow for helping me. No specific questions here but any additional feedback will be appreciated!
Thanks! 😁
Mathieu• 295@mathcrln
Posted
Such amazing work, well done!
The UI implementation is amazing and smooth, and I actually learned quite a few things reading your code (like the @extend rule I hadn't heard about yet, amongst other things), so thank you for that!
Please keep up the great work 💪🏾
1- PJames English• 620
@anglicus
Submitted
I decided to create a tablet layout as well, rearranging the grid for widths around 768px. I think it came out pretty good, but feedback is appreciated.
Mathieu• 295@mathcrln
Posted
Beautiful implementation and your code is also clean and organized, well done! 👏🏾
1 - Ann Herbik• 230
@ann-dev
Submitted
Any feedback is welcome. First time using React-Hook-Form, had a lot of fun :)
Mathieu• 295@mathcrln
Posted
Amazingly implemented, well done for this challenge! 👏🏾
2 - Sergio Bernal• 40
@KRIMINALinc
Submitted
Mathieu• 295@mathcrln
Posted
Nice work ! 🙏🏾
0
