All solutions

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

I am very satisfied with the markup and its simplicity, but I am sure I can leverage other solutions to refine it further.

I am happy for the time it took me to implement it because it matches my estimate.

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

I questioned a little my choice of making the input radio visually hidden because I thought that I had lost keyboard access to it, but instead it was preserved.

I used axeDevTools to check that the rating values were indeed still accessible.

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

I would like to see how others implemented the radio buttons while maintaining full keyboard functionality.

Also, I would like to understand better why the colors I copy from the style guide file different from those that they appear in the Figma design. It's a bit annoying, but I am sure it is my ignorance in the usage of the tools. Please help :-)

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

I am very satisfied with the following:

• lean HTML structure
• no need to use inline styles
• implementation of social media icons with SVG

Things I will do differently:

• typeface implementation - this time I used classes, but I don't like the repetition, so I want try something different;

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

I found challenging to implement a fluid responsive layout using flex without using max-width values.

I noticed, once again, the color contrast provided in the design was insufficient for WCAG 2 AA, so I created alternatives.

I am intentionally not using CSS nesting because it's something done by post-processing tools, and at the moment I don't want to complicate the toolchain.

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

I kindly request some help in achieving full fluid/responsive layout without any kind of query (being @container or @media).

I would like to see the minimal skeleton necessary (without negative margins, relative positioning) what maintains the current design, but as we move from 320px to 2000px of viewport's width, the elements position themselves and preserve their maximum design's width.

Thank you!

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

I started using Responsively locally to test on multiple devices and noticed problems with CSS nesting support, so I decided to remove it.

Next time I will not use it. I think pre-processors are best for CSS management.

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

The most challenging part was the footer, with the background image blended with a background color. I spent most of the day on that part alone when I noticed the image actually appeared behind half of the circle.

I ended up reworking the implementation and then using a separate element to create the overlay.

I also found very challenging maintaining fidelity to the design in between the breakpoints but I think the result is very good.

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

I would like help in two areas:

1. The hero image/s without using the translate function. I still did NOT find a way to replicate the design responsively. I managed to offset it a bit with position: relative and a negative value but it's not as fluid as I wanted.

2. The image background in the footer blended with some color: I used an overlay with a fill color, but can we also use gradients?

3. The contrast ratio of the colors provided in the design it often does NOT pass WCAG 2 AA requirements. I have a problem with this and I think that maybe I am not understanding how to read the design documents.

Thank you for any help.

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

I really liked using the grid features, but I didn't utilize a fluid approach, which I will try in the future.

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

Initially I tried using flexbox layout but ran into too many issues, so I decided to revert to a grid layout.

I also noticed the style guide regarding colors to conflict with color contrast. I choose to obey my understanding of the style guide rather than "fixing" the critical accessibility issues.

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

I would like more help in understanding better the style guides.

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

I like the way I used the grid layout with named template areas to simplify the placement of the feature cards.

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

I am glad I got to implement Rich Data. Next time I would use a different approach for type setting and assign properties based on element selectors.

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

It was tricky to get the image to be responsive.

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

What do you guys suggest to place the image? Is it better to use only the picture tag and forget 15+ years old browser?

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

I am very satisfied with the time it took me to complete the challenge.

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

This challenge did not present any problem to me. Obviously, I will be very kind to anyone who can point out to me areas of improvement that I have overlooked.

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

I would like to know alternative ways to utilize images and also how to consider more responsive approach.

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

The biggest challenge was finding an acceptable compromise in the use of viewport width values.

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

I would like to know other ways to achieve font scaling without using clamp() function or media queries.

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

Minimal amount of HTML, accessibility compliance.

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

I had issues switching images based on screen width, but then I remembered about the picture tag and its use.

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

I'd like to know if it's possible to reduce further the usage of width and max-width properties.

1. Has anyone tried to use an anchor tag rather than a button for the "Learn More" link? I believe it is more semantic to use an anchor tag, but I found it very hard to implement the color changes.
2. I noticed that the color palette given in the style-guide.md for this challenge has low contrast ratio: is it worth it modifying it in order to comply with WCAG 2.1 AA?

1. In the Summary pane, what is the most reliable way to make each one of the values in the category stay without wrapping even while the user resizes the viewport?

2. What's another approach to display the results in the "circle gradient"?