Time Tracking App

What are you most proud of, and what would you do differently next time?

I am most proud of being able to implement a dynamic and responsive layout that adapts between mobile and desktop views using CSS Grid and Flexbox. Getting the appContainer to center and the individual cards to lay out correctly on different screen sizes was a significant challenge. By making the User card span two rows and ensuring all the other cards fit neatly into the grid, I feel that I achieved the provided design. The use of Flexbox within the individual card components to handle content distribution was also a key part of this success, preventing the content from being cut off.

Next time, I would focus more on building components to be inherently flexible from the start. I spent a lot of time debugging why elements weren't expanding or centering correctly because I was using fixed heights and widths in some places. I learned that designing with Flexbox and CSS Grid from the beginning, and letting the content dictate the height, would have saved a lot of time and refactoring. Additionally, I would have set up a more robust component-level styling architecture to prevent styles from one component from unintentionally affecting another, which happened with the .userCard and .card components.

What challenges did you encounter, and how did you overcome them?

The main challenge I faced was with CSS layout and component sizing, specifically:

• Vertical Centering: Initially, the entire application container appContainer wasn't centered on the page.
• Card Overflow: The individual cards, especially the User card, were getting cut off on larger screens. The grid-row: span 2 property was causing the component to be a certain size, but the content inside wasn't growing to fill that space.
• Inconsistent Sizing: The User and Card components had a mix of fixed heights and flexible layouts, which created conflicts when trying to achieve a responsive design.

How I overcame Them:

• Centralizing the Layout: I solved the layout issue by applying CSS Grid directly to the main element of the page component. This allowed me to define a clear, four-column structure for the desktop view and a single-column layout for mobile.

• Preventing Card Overflow: I made the cards' layouts flexible by using height: 100% on both the Card and User components. This ensured they would fill the height of their respective grid cells.

• Staggering the User Card: By using grid-row: span 2 on the User component, I was able to make it take up two rows in the grid, creating the unique staggered layout without it being cut off.

• Aligning Content: I used a combination of margin: 0 auto; and align-content: center on the main element to center the entire grid, both horizontally and vertically, on the page.

What specific areas of your project would you like help with?

I would like to ensure that accessibility is being implemented such as keyboard use and that screen readers are able to read the content appropriately.