All solutions

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

Despite a lot of struggling, I did finish the project and it looks...somewhat like the mockup. I am not well-versed with Grid yet and it shows. I think I made quite a few errors, but I stuck with it and finished and that's what I'm most proud of. While I did not have access to the tablet mockup, I did try to make sure the grid reduced appropriately regardless.

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

Working with the grid attributes to get the layout correct. This is the first time I've ever attempted this style of layout and it was very frustrating. I relied heavily on the browser inspector to give me a more visual idea of what was happening with my code as I was coding. The rulers and grid section numbering inside of Chrome's inspector was invaluable to this project, but also shows that I just don't have the experience with Grid yet to feel confident in doing it and doing it well.

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

1. What could be refactored in my CSS to make it simpler? I tried combining as much code as I could and ultimately found that I was overwriting myself as I was doing it which results in me splitting EVERYTHING into classes so I could better track where I was getting stuck. My primary cards have a total of three classes on just the top level card and that seems excessive.

2. On desktop, what could I do to improve the handling of the grid layout? It feels very clunky to me. I'm not sure if that's just my lack of understanding the concepts of Grid or if I'm overthinking it. Realistically I would have liked this to reduce from desktop to mobile and back again with a little less reliance on media queries, but as I worked through this I genuinely could not figure out a way to make that possible. It feels like grid is intended to be very precise whereas flex allows you to utilize percentages and math to scale responsively.

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

I'm proud that I got through it, honestly. It seemed simple enough at first but by taking a mobile-first approach and knocking out what felt like a simple layout, the desktop layout absolutely threw me for a loop. I kind of wish I had started from the desktop layout and then reduced to mobile as a single column was easy enough but the varying positions of the cards in the desktop layout was a lot harder to tackle than I thought it would be.

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

Getting the left and right cards on the desktop to align to the vertical center of the container. At first, I tried using flex and separating everything into its own column but that messed with the mobile layout and felt clumsy overall. I ended up changing the layout from flex-based to grid-based on desktop. I don't have a ton of experience using Grid so I had to do some research on MDN to see how I could use Grid attributes to achieve the desktop design and it took a while.

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

Is there a more efficient, less complicated approach to this? Is mixing Grid and Flex okay as long as it achieves the solution or should I have stuck to one or the other and worked my way through it? This project was frustrating and I'm not sure if I just made it more complicated than it had to be and that's why I struggled with it so much.

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

I think I kept the code simple and got close on the design. I don't know that I would have done anything differently, I felt like I had a good flow going with this project.

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

The image swap. I couldn't remember how to do that, but I ended up using CSS and content: url() and that worked for me and made it easy enough to control.

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

Ensuring that my HTML is clean and I kept the CSS simple. I tried hard not to "over code" this time.

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

I think I got the design close, but my biggest personal goal was to have clean, simplified semantic HTML and CSS—as little as I could get away with to accomplish what I needed.

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

Due to my choosing to add padding on the `` container, I had a hard time getting the header image to fill the width of the screen on mobile. My workaround for this was to use negative margins and calc width to force overflow, but I believe there is a cleaner solution to this. It works, it's just not pretty on the backend.

main img {
    width: calc(100% + 3rem);
    height: 10rem;
    object-fit: cover;
    border-radius: 0;
    margin: -1.5rem -1.5rem 0 -1.5rem;
  }

Also, a minor problem: in the Instructions section, the 1 marker has a serif character instead of sans-serif like the design, even though I believe it's the same font. I even tried overriding the font just to be sure. I'm not sure if that's something I did wrong or if it's just a small error with the image file provided.

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

Ensuring correct HTML tags were used and if there's a suggestion on how to handle my issue with the header graphic better.

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

I tried to keep the HTML nice and simple so it was easier to navigate and troubleshoot and focus more on using the baseline styling in my CSS

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

None that I can think of, tried to keep myself from overcomplicating the code and I think I managed to do that.

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

Ensuring that I used correct semantic HTML, especially with regards to accessibility since that was a huge problem on my last project.

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

I got the design pretty close and the hover and focus states seem to work

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

Mostly just trying to get the design as close as possible on desktop and mobile. I used a media query to tweak the mobile version just a little bit to match the image.

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

Ensuring that I got the accessibility portion correct this time, as I did not do that on the first project. I think the code is sound though.

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

Kept it simple with basic HTML and CSS. I'd probably try using viewport units next time for better responsiveness if I did this again.

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

I didn't quite figure out the text break on the third line. Mine is 4 words long, the example is only three. I also had a really hard time figuring out GitHub. I've never worked with it before. Hopefully it displays correctly.

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

Could I have simplified the code any further? Is there anything redundant or otherwise unnecessarily declared that could have saved me time and the overall amount of code?