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

Css Html

OLLEMS• 40

@OLLEMS

Preview site(opens in new window)View code(opens in new window)
Desktop design screenshot for the QR code component coding challenge

This is a solution for...

QR code component
  • HTML
  • CSS
1newbie
View challenge

Design comparison

SolutionDesign

Solution retrospective

I found it a little easy, but I had difficulties and felt insecure with CSS, especially when creating geometric shapes, I looked for ways to understand my problems, and I managed to solve them, I didn't like the semantics of my code, but I'm going to work on it, I loved using the @font-face, gave me confidence in what I did and git was complicated, because I ended up forgetting to commit changes along the way, however it is my first solo project, I will work on it!

Community feedback

P
newtothis90• 240

@newtothis90

Posted

Your font isn't showing up as it is supposed to.

I don't believe you can just link to the google fonts URL using font-face.

I'd look into just going to the google webfonts page and using their <link>

such as:

<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Outfit&display=swap" rel="stylesheet">

You would place those tags in the <head> of your html document and then you are free to use the font wherever you would like!

Good Job and Happy Coding!

Marked as helpful

0
OLLEMS• 40

@OLLEMS

Posted

@newtothis90 awww, Ok, let me try this, thank you for your feedback, i have to much problems, its is my first code alone, thank u so much! :D

0
OLLEMS• 40

@OLLEMS

Posted

i put your tip in comment on my code, thk u @newtothis90

1
P
newtothis90• 240

@newtothis90

Posted

@OLLEMS

How did it work out?

0
OLLEMS• 40

@OLLEMS

Posted

@newtothis90 perfectly :D

1
_nehal💎• 6,710

@NehalSahu8055

Posted

Hello Coder 👋.

Congratulations on successfully completing the challenge! 🎉

Few suggestions regarding design.

  • Remove margins from body as it will not dynamically center the card.

  • To properly center the card

  • USING FLEXBOX

body{
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
  • Use Semantics for the proper design of your code.
  • In this project we do not need <nav> so remove it
<body>
<main>
your main content goes here...
</main>
<footer>...</footer>
wrap up `.attribution(challenge by....)` div inside your footer.
</body>

  • For non-decorative images give meaningful and descriptive alt like alt= "QR code to frontend mentor website".

  • Use responsive units(rem, em, %) from next project. Explore respective use cases on google.

  • Replace width with max-width to make your card more responsive.

link.

I hope you find this helpful.

Happy coding😄

Marked as helpful

0
OLLEMS• 40

@OLLEMS

Posted

@NehalSahu8055 Hi :D i try do it, thanks for your report, it's so helpful! Thank you so much!

1
OLLEMS• 40

@OLLEMS

Posted

i put your tip in comment on my code, thk u @NehalSahu8055

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