In this project I had some difficulties with flex box and grid layout since I'm a new in front-end development, but I think I got a basic solution for this challenge. Any advice for improvements will be gratefully acepted.
A good little rule I used to help me make a decision on layouts is which axises am I trying to manage. Now I'm not saying this is a hard and fast rule, but he does help for simple layouts. I use flexbox when I want to mange either vertical or horizontal layouts. Think micro-layouts. I use grid when I need to manage vertical and horizontal layout. Think macro-layout. Again this isn't the final ruling because flexbox and grid aren't mutually exclusive and actually work well together.
This was my first JavaScript program. Please give me feedback. I am still learning. Your help is appreciated. Thank you.
Great job on it. The javascript works and that is the really important part of starting out. Something that I noticed is that before selecting a rating your rating buttons all have a hover effect, but once a rating is selected none of them get the hover effect anymore. This could be considered a usability issue since it may appear to the user that they can't change their rating. For the structure in general, I would have wrapped my rating options in a form and used some radio buttons with custom styles so that I could use a FormData object to manage form state more easily. I know that is a lot, I'm not dumping on your solution, you did a really good job, keep it up.
Your implementation is spot on for the 375px and 1440px screens, but for other mobile devices the layout breaks down. I don't know if you are interested in that, but just wanted to let you know. If you do want to fix it, you should look into adjusting your breakpoints.
Awesome job. Is there any particular reason you went with the mobile layout for medium screens. I did that at first but didn't like the stretching of the elements. I know that the design is only for 375px and 1440px, but I always check the intermediate layouts too.
Not according to the Design but i thought of doing it on my own way. Would appreciate any feedback i receive. Thanks
This is a beautiful touch on the design. I like the glass style. One suggestion would be to lighten up your dark text. It could be a little difficult to read. Not super light, but just lighter than almost black.
I enjoyed doing this challenge. I cannot figure out how to get the tiny white line removed from underneath the photo on the left if anyone has any feedback that would be greatly appreciated!
Great job. In regard to the little white space below your image, CSS can be a bit of a pain like that, but I was able to remove it by also setting the height property to 100%. I also noticed that your design isn't responsive to mobile screens. Have you checked out flexbox and grid to help create a responsive design?
Very good solution attempt. However, your image doesn't respond to viewport resizing very well (specifically the height). It looks like you lock the width with at 50%. You may want to explore the object-fit property to make it respond better. Also, in edge browser once the viewport reaches mobile sizes the image source breaks and never recovers.
Hi there 👋, I’m Melvin and this is my solution for this challenge. 🚀
Help:
I added:
Built With:
Any suggestions on how I can improve and reduce unnecessary code are appreciated!
Thank you. 😊✌️
This absolutely amazing. Your dropdown motion is quite unique. Great job!
