All solutions

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

I am proud of going a step further with the responsive design and adding a mid-size screen breakpoint with a third layout of the 4 cards.

I was also proud to accurately dial in the little colored accent lines at the top of each card and get the box-shadow effect very close to the design.

Next time I will try to pace myself better. I got a bit manic with my styles and started getting sloppy with writing my code. This made more work for me later in tidying things up.

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

I had a much harder time getting the colored accent stripe right on the top of each card. I first tried just a top border but it didn't look right. Then I tried creating a separate div inside the card but that didn't achieve the right look either. Finally, I created a linear gradient in the background and I think that did the trick.

I also spent more time that I would have like tweaking details like margins and padding in the desktop layout.

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

In terms of layout and sizing, where is it OK to use absolute units like px and when should I be using em or rem?

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

I'm proud of improving my workflow and focusing on efficiency in order to speed up my completion of this challenge.

I'm proud of using gap values to very quickly create general spacing around elements that approximates the design fairly closely. It isn't pixel perfect, but I didn't need to spend a lot of time adding padding or margins to each individual element. I'm happy with the result.

I used flexbox a lot - even within the button to space/place the icon and text.

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

I wasn't sure how to make use of the two main image sizes for mobile and desktop but I searched and learned how to have both img elements in my html and show or hide those elements using media queries in my css.

I tried to define element sizes as little as possible to help with responsiveness. It was a challenging to ignore some of the clear widths and heights in the figma file and use relative values in my css to achieve what I was after.

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

What is considered "close enough" in terms of balancing efficient time use vs pixel-perfect conformity to the design files? Do employers tend to place higher value on exact precision or a quick turnaround time?

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

I'm proud of further refining my workflow to help stay organized. There was a lot of small detail tweaks required to come as close to the design as possible and my CSS would have been much more confusing to get around if I hadn't tried to keep it reasonably organized.

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

I had quite a lot of difficulty with styling the table to look like the design. Particularly in getting the column padding and spacing to match the design closely.

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

How can I get the bullets to align vertically in the middle of the list item (as seen in the mobile design where the text is in two rows)? I was unable to find a solution that achieved this.

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

I'm most proud of making good use of resets to help the layout work in a more straightforward manner. Most of my code writing actually did what I wanted it to with less fiddling required.

Next time I will organize my styles in advance and I will commit more frequently to my github.

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

My CSS was getting longer and hard to navigate so I used more comments to mark sections.

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

How do I use landmark elements for accessibility in a simple component like this?

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

I'm most proud of feeling more comfortable with Flexbox and not needing to look at the documentation so much to achieve the layout I was after.

Next time I will add font-sizes in rems as custom properties in :root to make text scaling easier.

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

1. I thought I had completed the challenge and then realized the font sizes were different in desktop vs mobile layout (should have read the instructions more closely). I needed to revisit my font-size units in order to scale them for the different display sizes.

2. Using Flexbox and auto margins to horizontally and vertically center the main card worked great except that it shoved the attribution element out of view at the bottom of the page. I fixed this by applying auto margins to the attribution element as well.

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

How can I better organize my CSS code to make it cleaner?

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

I was proud of figuring out height: 100vh to center things vertically even though I know I was reinventing the wheel and I'm sure I saw it before in my introductory coursework. It was a solution that I worked out without a web search, which is kind of rare.

Next time I will think through and organize my approach in more detail before beginning any coding. I have subsequently done this with a different project and it made a huge difference in efficiency and keeping organized.

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

I wanted to use flexbox as a layout tool even though it wasn't necessary. I struggled with understanding how to align elements after I had changed to a column layout. Understanding how the axis for alignment changes based on flex-direction made a big difference.

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

1. How can I use comments effectively to organize my code as my projects get bigger?
2. What are strategies to organize my CSS for easier navigation (group by element or by layout/color/font)?

Appreciate any tips!