All solutions

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

I didn't enjoy this one... It was tricky to position the hero image(s) and using absolute positioning caused some headaches.

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

Positioning. Researching more about how to use position: absolute in combination with Grid was useful and good learning.

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

• More maintainable ways to use different flavours of position. Or alternative solutions...
• Responsive images - what CSS properties are good to set to make the code maintainable and which are to be avoided;
• Feedback on CSS organisation. Following the CUBE CSS methodology - there are some grey areas - when is it best to use utilities, when blocks?

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

It was fun experimenting with the CUBE CSS methodology. I liked categorising the CSS into composition and blocks in particular. It made it easier to manage and tweak.

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

I didn't stick to the font sizes in the style sheet as they were smaller than 16px. This made it challenging to match the designs. I researched CSS Grid more, to try to keep a similar formatting for the cards.

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

Headings:

• In the end I went for the bold headlines as the h2s but was torn between these and the names. Is this the right choice?

Grid:

• In the design, the end of the paragraph box containing the quote is the same distance from the container edge. It was difficult to achieve this, while maintaining cards with balanced proportions display: grid and align-self: end pulled some of the cards out of whack. Is there a way to shift any existing space between elements within a container, without enlarging the container itself?

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

It's tricky, not being too familiar with CSS Grid, to find the right combination of properties to keep the CSS succinct. I read general documentation and looked at specific uses of Grid to improve my first solution.

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

Semantic HTML. I chose to code the cards as `` elements with aria-label attributes. Is this a good choice for accessibility, or would a different HTML element be better for this?

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

It was rewarding to learn more about, and implement, semantic HTML.

More specifically, it was useful to wrestle with responsive images and be pushed to explore the picture element in HTML.

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

A general challenge is knowing how closely to stick to the exact specifications of the design vs creating more readable code that deviates slightly.

It required some thought (and research) to work out which text elements made sense to be in h tags.

The CSS file is quite bloated. I'm keen to explore methodologies for making CSS more organised and readable, and avoiding repitition as much as possible.

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

Any suggestions for improvements in HTML / CSS!

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

Working off the figma design, I'm not sure the font weights of both the title and the paragraph match the design... Curious to hear about whether this is common with bold/regular not matching to the google fonts' weighting.

Also - curious to learn more about organising CSS and the use of HTML elements (content sectioning and otherwise!)