All solutions

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

I learned a lot from this challenge.

Had different issues in CSS:

• Adjusting the space between the list items and its markers.

  • This requires using the list styling list-style-type:none and using ::before pseudo selector to make the markers myself so I can manage them as I want and adjust the spacing as needed.

• In the mobile design, the image is full width which I didn't notice at first and my styling needed some refactoring to make it work in both desktop and mobile views.

• A weird behaviour of the body element's height isn't enough for the content inside it which causes overflow and layout issues although its height property was set to 100%. Changing the height to auto resolved this issue.

  • This causes no margin or any space around the body content which makes the content stick to the edges but I needed the content to breath a little. So, I used margin with a percentage value to the main element which is much better now.

Overall, I'm happy with the result.

Hope you are too!

Edit: changed height: auto to min-height: 100vh on body element.

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

If you have any suggestions or fixes, I would appreciate it.

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

The HTML & CSS foundations hover effect was on when I hover next to it because the element was 100% width. So, i used width set to fit-content.

Also, to make the image and the name on the same line horizontally, I used flexbox to do it.

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

Any suggestions or recommendations about accessibility, would be appreciated.

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

I have done my best to ensure that the design closely matches the required one.

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

I would appreciate any tips or advice on how to improve it.