All solutions

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

Most proud of using grid seamlessly and combining it with flex in the card elements to create an easy to build layout.

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

The biggest challenge I had, was that I started building before having a firm mental model of how to organize classes and the layouts. As a result, I settled for less-mantainable code that I knew was of lower quality than if I had been more thoughtful before jumping right into the code. Still happy with how it turned out.

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

How would you recommend doing classes differently?

I think I would have had 2 card classes, one dark card, and one light card.

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

This was my first attempt at using grid in order to style the different sections of the page. I was happy with how I was able to use the "align-self" attribute to position and align the cards the way I wanted.

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

Similarly to above, the most difficult part was certainly wrapping my head around grid for the desktop design. Specifically, I would say the most difficult part was figuring out that I would need 3 columns and 2 rows to actually make the layout that I wanted. I saw Kevin Powell recommend actually drawing over the design to figure out how many columns one would need, and that helped me.

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

Mostly on my CSS. If there is any feedback on how I used grid, that would be great.

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

I am proud of how I had well-organized semantic HTML, used mobile-first design, and lastly, used good use of media queries and BEM to keep everything nicely organizedd.

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

Using the different images for different screen sizes. Using the picture HTML element helped with this. Also, learning flexbox basics was a bit of a challenge at first, but I eventually got the hang of it.

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

Maybe on my CSS if there are any recommendations? This project was fairly simple so not too many specific areas.

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

I am most proud about designing responsively using media queries -- specifically, I designed for the smallest screen first and then gradually expanded.

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

I ran into some challenges with the table, specifically, getting the correct indentation, and correct elements together. I was able to solve this by using custom classes for the table data and table headers.

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

Feedback on the organization of my CSS and class structure would be great. I tried my best to use good semantic HTML, and follow BEM standards as much as I could, but some feedback on this would be great.

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

I am most proud of using proper BEM formatting when styling my SCSS styling. I think this helps keep my CSS readable for another user.

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

One of the main challenges was learning how to properly do the margins and use the box model correctly. I was able to overcome them by understanding the difference between content, padding, border, and margin correctly.

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

Because the nature of this design is rather narrow it already works well on smaller phone screens. I would like feedback on the responsiveness of the design. Do we always need to use media queries? Or for a design like this is it okay to design it such that it works on the smallest screens first, and then progressively gets bigger?

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

Most proud of getting the visuals very similar to the original design. It looked challenging at first, but once I figured out how to correctly add box shadows with the correct offset, I was able to make the card look how I wanted.

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

The biggest challenge was trying to eyeball the designs and get them to look similar to the original design. What I ended up doing was setting the design as the background to my HTML page, and then comparing my card dimensions to that of the actual design.

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

I would like feedback on my responsive layout/design. The card only looks as intended in full screen on a 16:9 aspect ratio screen. However, when I narrow the viewport, the card doesn't look as clean. What is a good way to handle this for a design where the elements will shift a lot depending on how narrow or wide the viewport is?

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

Most proud of completing it quickly within an hour and learning the proper way to format rounded corners, drop shadow, and align using CSS.

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

I eye-balled the dimensions of the qr code and the text size. I could do better to get the exact dimensions to understand how to replicate the design more closely.

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

I would specifically like help on my CSS and if I structured my CSS in the most effective way. For example, in my styles.scss file, I set a variable for the distance between elements and made all distances on the page between elements a multiple of that initial value, which I think was a good practice. Are there other good practices like that that I should consider for future projects?