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 landing page using HTML and CSS

@Auto-Yahwin

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


Please let me know how how it looks and how to improve it. I'd really appreciate your feedback, thanks.

Community feedback

@Kareemah-codes

Posted

Hello, you did great. Here are a few notes I have:

  1. Try to make your class names more readable. Naming them "class4" or" class5" doesn't make the CSS easy to read by you and others. Something I like to keep in mind when naming classes is to give them names that describe what they do.
  2. Use google fonts, I think the font for this challenge is Roboto. That's about it!

Marked as helpful

1

@Auto-Yahwin

Posted

Thank you for your feedback. Concerning the font, the stylesheet gave the font as a URL. I don't know how to implement a font through a URL

1
Ines Riahi 110

@inesriahi

Posted

Great Work! There is a style guiding file attached to the downloaded files. You can use it to set the colors and font as given.

Marked as helpful

1

@Kareemah-codes

Posted

Hi !, I am glad my feedback was helpful. So for the font, It is really quite easy. Here are the steps you should take:

  1. Click the link.
  2. To your right, there will be some sort of menu. Look towards where you have "link" and "import". Side note: "link" is for if you want to enable the font through your HTML file, while "import" is for the CSS file. They both do the same thing, so you can pick anyone, but I prefer to use import and put it in the CSS file(I also notice it is the same for other people I know). If you prefer to use CSS, good design practice is to put the @import link as the first thing on your CSS file.
  3. Once you are done with this, copy the CSS styling and paste it into your CSS file or style tag.

Voila!, you are done. I would advise going to the google font website (https://fonts.google.com/) and trying to implement a font of your choice for a previous project you have done, just so the process sticks. Try reading this article for a better explanation, https://www.freecodecamp.org/news/how-to-use-google-fonts-in-your-next-web-design-project-e1ad48f1adfa/

Marked as helpful

0

@Auto-Yahwin

Posted

@Kareemah-codes Thank you so much. I'll try that

0

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