Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Order Summary

Kenisaโ€ข 90

@KenisaRenee

Desktop design screenshot for the Order summary component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I know pixel perfection is nearly if not completely impossible, but I felt like there was a way to get the text to look more similar to the design. Is there something I could have done better with that?

Also I was wondering if I could get an explanation of the difference (if there is any) between doing @import in CSS and rel=preconnect in HTML for implementing a font?

And of course, if there is any other feedback, I'm happy to read it!

Community feedback

Lucas ๐Ÿ‘พโ€ข 104,440

@correlucas

Posted

๐Ÿ‘พHello Kenisa, congratulations for your solution!

Answering your question:

The difference between the insert the font by the HTML inside the <head> with preconnect and into the CSS sheet with @import is that using the first method with preconnect the font-family load faster as the preconnect says to the html to read that information first.

There's a common use that people prefer just to drop the font code @import into the css because is really fast to do that instead than doing that on the html.

This article explain better how to make fonts load faster and the difference between these methods: https://sia.codes/posts/making-google-fonts-faster/

Hope it helps with your doubt Kenisa, happy coding!

Marked as helpful

1

Kenisaโ€ข 90

@KenisaRenee

Posted

@correlucas Awesome! Thanks for taking the time to answer my question and provide a link with more information!

1
Lucas ๐Ÿ‘พโ€ข 104,440

@correlucas

Posted

@KenisaRenee You're welcome Kenisa, I was wondering the same question these days, but even knowing which method is faster I still using @import just because is practical.

Happy to hear that was useful, happy coding.

1

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord