Results Summary Component

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

I'm proud of the fact that I learned a couple of concepts working on this challenge such as new css at rules. variable fonts and what's different about them than static fonts. I also learned about the DOMParser interface and BEM methodology to organise CSS Code.

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

There were three challenges I had to overcome during this challenge:

• Code Structure and readability.
• Locally located font files and fallbacks
• Getting the data to populate the web interface from a local json file.

For the first challenge I tried to use BEM (Block, Element, Modifier methodology).

I have to be honest I didn't read a lot about it before implementing it. but I already saw a some of the code that implements it. and tried to do the same. however it seems quite simple.

For the second challenge this was my first time using locally located font-files the challenge supplied us with static font files for each font weight and one variable font file.

So I used @font-face rule to load the static files if the browser doesn't support variable fonts. checking that using an @supports rule. otherwise we load the variable font file using @font-face rule.

For the third challenge I used fetch to grab the locally json file. loops through the data. grab the svgs using fetch and used the DOMParser interface to turn the svgs string into an XMLDocument which I insert into the appropriate page.

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

I'd like to know if my code structure is readable and understandable to other web developers. I'd also like to know if I'm adhering to best practices.

Thank you for viewing my solution!