the challenge I've encountered is that of displaying the icon-view when hovering the mouse and displaying the Cyan color on the card image.
I didn't know where to start, but after reading some articles I realized that you have to use ::after and the rest was a matter of framing the positioning in the image.
This challenge was fun because I got to play with grid a lot more. It is still something I have a difficult time grasping, but I feel much more comfortable with it in general the more I work with it.
One of the challenges I faced was with the mobile menu. As with most of my projects, everything is quite easy until I decide I want to add some animations or transitions.
What challenges did you encounter, and how did you overcome them?I ought to learn a more effective way to create mobile menus. I feel as though my solution for this was not very optimal, yet it isn't very clear to me what an optimal yet simple mobile menu would be.
Good job, it's quite close to the design. I like the animation on the menu. It's a nice touch. The transition between the icons was also smooth.
I noticed that the nav bar doesn't have spacing above when the viewport is on the desktop, and the navigation content's animation would flicker when adjusting the viewport too. I recommend using relative units for styling font size as absolute units are not quite accessible for those required to zoom in or out of the page. The picture element didn't have a source tag associated with it and the img of it doesn't have an alt tag. The hero title and body lack spacing between them on mobile. Perhaps the articles at the bottom could be broken into two columns on the tablet screen since there are empty spaces. When the menu is active, you could scroll on the body and you could tab to the elements outside the menu. From a user experience perspective, we should take disabling both of these actions into consideration. On the JavaScript side, you could use media queries and do conditional when it's matched. Also, a small note, remember to remove console.log after debugging is finished.
I hope these comments would be helpful. Happy coding.
Good job on completing the project. Here are some recommendations that could be implemented.
The main content is not centred responsively. The sections have extra padding/margin around them so they're not lined up with the main heading. There is a little bit too much spacing on the accordion text. You can't navigate anything on the page with tab other than the links at the bottom. Manually setting the inline style for the main element has caused unintended overflowing of the page; too much height. I recommend using relative units (em, rem, %, etc) to style the page as it is not quite responsive. The code needs to be formatted with consistent spacing, and unused variables/console logs need to be removed.
Hello, good job on finishing the component. It looks good, it's quite close to the design. Though some very minor spacing adjustments can make it even closer.
Code wise, you should clean up your files to reduce unnecessary blank lines and uneven indentations which can make the code difficult to follow. I recommend formatting on save. Try to avoid abbreviations as much as you can, and make your variables and class names as descriptive as possible. Please do remember to remove console.log once debugging is done.
Hopefully, these would be helpful. Have a good day.
I improved with my javascript but i need to learn to write it better without help.
What challenges did you encounter, and how did you overcome them?adding js to places i had passed, it was like re writing the logic.
What specific areas of your project would you like help with?java script writing.
Hello, and good job on completing the project. Here are some improvements I can recommend. You can center the title with text-align instead of hard coding a padding left. Some colours and spacing can be adjusted to match more on the design.
JavaScript wise, I noticed your functions could be a little bit too long-winded. You can try to break them down into descriptive methods to improve the readability so you don't have to describe everything with comments.
User experience wise, I noticed there is no validation on the bill input and I can't tell which tip option is being applied. The number arrows could make the input negative which can yield unexpected results from a user's perspective.
Other than those, I like the tip amounts are changing based on input change.
I hope these comments can help.
Me enconto poder manejar mas Grid y como este reto me llevo a usar javaScript, posiblemente mejoraria para el desarrollo tuviera mas cosas reutilizables.
What challenges did you encounter, and how did you overcome them?El desafio que encontre fue como cambiar los datos desde JavaScript puro y lo logre utilizando funciones, if y forech, etc.
What specific areas of your project would you like help with?Me encataría saber si hay la posiblidad de mejor en mi codigo JavaScript
That challenge was to create a page with sign up and then one success message, my difficult was email validation, but, learning more javascript I could make the email validation with js.
Hello, Veera. Good job implementing the design, but the functionality of the tooltip needs work. The tooltip is not centred above the share button. The tooltip should not appear on mobile but should show the icons on the left side of the share button.
I'm proud of the power of Grid Layout, especially the grid template areas with mobile-first responsiveness.
#MoreFeedbackPlease :)
What challenges did you encounter, and how did you overcome them?I face challenges without a Figma design layout, so I read other codes and apply them to my work. This helps me improve my coding skills and maintain DRY standards. I've noticed a big difference when we don't use Figma for design guidelines, such as padding and font sizes. I'm a slight perfectionist with pixel-perfect design to meet industry standards. Despite this, I enjoy using Grid Layout."
What specific areas of your project would you like help with?So far none.
Looks good, just need to add more padding to the card component
