All solutions

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

This was a great project to get comfortable with grid, both using the grid-column settings and grid-template-areas. However, the two aspects which I learned the most about were background images and box shadows.

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

Finding a suitable breakpoint to snap from the mobile column layout to the grid was tricky. In the end I set a rather small max-width on the cards so that the layout stays in one column until very large screens. It would probably have been better to design and implement an intermediate grid layout which is less wide, suitable for screens of about 800-1200px.

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

I am keen to understand sizing differences between browsers. When I view my page on Chrome, it fits comfortably on the screen with plenty of whitespace around it. But in Safari, there is a vertical scrollbar. If anyone knows why this occurs and how to manage it, I would be open to learning!

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

I learned quite a lot of more refined CSS techniques, such as applying a mask to a background image using pseudo-elements, the fine details of box shadows, and getting flex/grid containers to change based on media queries.

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

Getting the overflowing image to look correct was very difficult. In the end, I have toned down the degree of overflow to something which I think looks good at most screen sizes. I achieved this by just setting a large negative margin-left on the image container. But I would be keen to hear of other ways to achieve this effect.

The other thing I couldn't really figure out was the left-aligned footer nav on the desktop design, but I also felt that a centred nav both looked better and was easier to implement, so I just used that instead.

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

Any advice on how to approach the overflowing image or the left-aligned grid footer nav would be very welcome.

I also know my CSS is a bit of a mess, so some organisational tips would also help me a lot.

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

This project increased my comfort with using flexbox, and more generally using inheritance to lay out and space components. I'm happy with this project although I found some aspects of the sizing quite puzzling (the final version doesn't fit onto a single page in my browser, but based on the font the sizing looks correct...). I also liked the aesthetics of this design, and will definitely take some of those ideas forward into my own projects (especially the coloured band on top of the cards).

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

I started with a multiple nested flexbox solution for the dynamic layout that was way too complicated. In the end, removing some of those divs helped make my layout work as intended! I still ran into this issue even though I used a mobile-first approach. The lesson I've learned is to build complex layouts one step at a time: you might find that the job is done a few steps earlier than you originally thought.

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

I tried hard to get the shadow effect on the cards looking correct, but I still have no idea what was actually used in the design! Any pointers here would be appreciated.

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

This challenge really got me to figure out using grid and flex box for nice, evenly spaced layouts. I am also really happy with the time this took me: no more than 2 hours of coding. I also think my abilities to judge sizes and text styles (especially the actual CSS properties which produce certain appearances) is improving.

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

It took me a while to realise that using margins on everything was not a smart way to create a good-looking responsive layout, and eventually I settled on using flex box to align and space all of the text elements in this design.

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

I am still unsure about general best practice for media query breakpoints, and whether it's important to consider certain atypical layouts for a given project (in this case, landscape orientation for mobile). Any advice on how others think through this would be great.

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

I learned how to fit an image flush to a container, which was a cool technique (my first use of the calc function). I also learned a lot about styling tables and lists.

I also thought a fair amount about the semantic HTML and have hopefully done a good job of that (e.g. making an invisible table header).

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

I don't think I nailed the spacing (hard to do from just a jpg of the design) but in the end I settled with some rules which I think look good and provide a consistent sense of space on the page.

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

Safari seems to not like the header font; things look a lot better in Chrome. It's good to be aware of these discrepancies but I would like to learn more about how they can be resolved (if at all).

Feedback on my semantic HTML would be welcome.

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

This was a nice quick challenge for me which helped me understand how to use flexbox to create nicely spaced layouts.

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

I am unsure whether just setting the width of the card (the in my code) in rem is the best way to get the size I want...

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

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

I solved some issues from my previous challenge attempt (centring the card nicely in the page using grid, getting Google font API to work in Safari). I'm really happy with the responsive text sizing.

One thing I'm unsure about (although it's minor) is why in the design files the image zooms in, whereas in my solution it simply widens a little bit. Would be interesting to see how others managed the size of the image.

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

Getting the Google fonts API to work in Safari was a real learning experience: so many things to go wrong with no real way to test apart from trying it out!

This stack overflow page was very helpful: https://stackoverflow.com/questions/24061808/google-font-not-working-on-safari

Having tried a few things on there, in the end it was replacing '&' with '&amp' in my link url which solved the problem.

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

I'm interested to see how I could get the image to match the design file in the mobile layout. In my solution, the dimensions are about right, but the image seems zoomed in in the design file.

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

Positives

1. Replicated the designs accurately

Negatives

1. Abused the static nature of the design to get formatting right (or as close as possible...)
2. Unsure about semantics of my HTML - probably not that vital for this project

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

It took me a long time to realise I could just set the width of the main div to a static pixel value! Again, definitely exploiting the static/non-responsive nature of the task.

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

Some advice on a better/more 'correct' setup for the formatting would be welcome. I only used one container div with a vertical flexbox.