@ofentse-freecodeSubmitted 4 months ago
Abdelrahman mohamed
@Tayara97All comments
- @josh-condeSubmitted 6 months agoWhat are you most proud of, and what would you do differently next time?
.
What challenges did you encounter, and how did you overcome them?.
What specific areas of your project would you like help with?.
- @jasoneczekSubmitted 6 months agoWhat are you most proud of, and what would you do differently next time?
For this challenge I implemented a tab interface for the first time. This challenge also involved creating clickable cards, which I did have some experience with, however, this time, the card contains another interactive element, a disclosure button. I was very happy that I can activate the hover states for the cards by hovering with the mouse, but also tabbing through each each. But moreover, that the hover state is de-activated by either hovering or tabbing to the ellipsis button within the card.
What challenges did you encounter, and how did you overcome them?Particularly difficult for me was implementing the arrow key navigation in the tab panel. For this I set an event listener for a keydown event and a switch statement to determine the direction of the arrow key press (left, right, up, or down). Based on the direction it calculates the index of the next tab to focus on. I used the modulus operator
%to ensure that the index of the next tab loops back to the beginning or end of the array when navigation with the arrow keys.I also encountered an issue where the background colors for each different activity type were overlapping the bottom corners of the cards, exposing a sliver of color. For this I created a pseudo element for each card, on the div containing the whole card, giving it an absolute position and 50% bottom. By applying the background color to this pseudo element, the color never reaches the bottom of the card, thus avoiding any color overflow on the bottom corners.
What specific areas of your project would you like help with?I am always looking to improve accessibility best practices.
- @joacomendaSubmitted 7 months agoWhat are you most proud of, and what would you do differently next time?
I'm most proud of the use use clamp in my font-sizes, this helped me to adapt the font sizes of my content to all mobile designs and desktop designs.
What challenges did you encounter, and how did you overcome them?It was hard at first the create the mobile design because of the jump in height of all the different mobile devices, but thanks to using clamp in my font-sizes, margins and paddings, I achieved a design that I was really pleased with.
What specific areas of your project would you like help with?For the moment, nothing.
- @wazirwazirSubmitted 7 months agoWhat are you most proud of, and what would you do differently next time?
Made me realize I've come a long way
What challenges did you encounter, and how did you overcome them?Fixing the hover effect was a bit challenging but a little JavaScript fixed it
What specific areas of your project would you like help with?All reviews will be appreciated
- @ajibonaSubmitted 7 months agoWhat are you most proud of, and what would you do differently next time?
I spent more time on it trying to figure out what works and not. I learned a lot from these projects how to make flex work and setting things out. It's fun and I'm really happy to get it done.
What challenges did you encounter, and how did you overcome them?I finally decided to use flexbox after thinking about which CSS style would work best for it. It's really hard to use grid, so I try to refine it, and I think using display:flex suits these components well.
What specific areas of your project would you like help with?Any feedback is really welcome it helps to learn and keep growing
- @Lbaranda26Submitted 7 months ago
- @lifeguard1Submitted 7 months ago
