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

Responsive layout using flex and grid

@yudiyoshida

Desktop design screenshot for the Social proof section coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hello guys! How are you?

I was thinking, there are two ways of importing fonts: in the HTML file using <link> and in the CSS file using @import.

Which way is better? Is there any difference?

Thank you!

Community feedback

@vitorlfaria

Posted

Ficou muito bom Yudi! O responsivo também, ficou bom em todos os viewports que testei. Parabéns!

1

@yudiyoshida

Posted

@vitorlfaria Muito obrigado! Bora zerar todos esses desafios! hahaha

1
P
ApplePieGiraffe 30,545

@ApplePieGiraffe

Posted

Hello, Yudi Yoshida! 👋

Good job on this challenge! 👏 Your solution looks good and is responsive! 👍

I suggest,

  • Perhaps adding a max-width to some of the elements of the page (such as the hero text and the review boxes) so that they don't become too wide on extra-large screens (but that's a small thing for the design of this project, really).
  • Taking a look at your solution report and trying to clear up some of the errors that are there. It's generally recommended to include a heading in each <section> or <article> tag you use to identify that element.
  • If you're up for it, adding an intermediary/tablet layout between the desktop and mobile layouts of this challenge would be a nice touch. 😉

And about your question—I believe using a <link> tag to include fonts for a website is slightly better than using the @import syntax. 🙂

Keep coding (and happy coding, too)! 😁

1

@yudiyoshida

Posted

Hey @ApplePieGiraffe, thank you so much for your comment!

Thanks for all your suggestions, I surely will remember them in my next project!

Keed coding (happy, of course)!

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