All solutions

Don't know how to reproduce the fancy quote symbol on the design (the font looks different for that glyph).

I used CSS Grid to move the elements around, I think it works quite well. Also this time I tried the 7-1 Sass folder structure to organize my project.

As always, any constructive feedback is welcome, thanks.

The most challenging part was to overlap the avatar image with the card background, without hard-coding their pixel height. I managed to do that using negative margins and a wrapper <div> as a reference for percentage units.

As always, any constructive feedback is welcome.

Any constructive feedback is appreciated

This is my take on what I think is the most difficult (free) challenge in "newbie" category. Making the layout responsive, matching the design screenshots and maintaining a clean source code has been really challenging.

I have a main.scss file which is "customized" by main-desktop.scss and main-mobile.scss, so I guess the workflow isn't mobile first nor desktop first. 😜

In some cases I have favored responsiveness over matching the design, for example the two columns are not vertically aligned to the design.

The SVG mockups image resizes both horizontally and vertically. To do that however I needed to resize the SVG image with Inkscape.

All in all I think I struggled too much for such a simple layout, hope it'll get easier with practice.

How to specify pixel units independently from the device pixel ratio? Can BEM class naming be improved?

How to improve semantic markup? How to improve accessibility?