I took too much time to make this so i'll try to optimize my time next time.
What challenges did you encounter, and how did you overcome them?I didn't remember how to do some things, but I searched it out and got it right I guess.
What specific areas of your project would you like help with?I probably complicated things more than it was supposed to, so any help would be welcome.
Hey @Klyyyf,
Good job on completing this solution. For your css file, you can add @font-face, :root css selector to your css code.
:root {
:root {
--white: hsl(0, 0%, 100%);
--light-gray: hsl(212, 45%, 89%);
--grayish-blue: hsl(220, 15%, 55%);
--dark-blue: hsl(218, 44%, 22%);
}
@font-face {
font-family: Outfit;
src: url("./fonts/Outfit.ttf");
}
My first submit. Feel free to send your tips. I had difficulties using pixels, rem, percentage... Still trying to learn
Hey @wallace-bc,
You did a great job on your first coding project. One step closer to getting better at coding. That is a giant step and I applaud you for that.
First and foremost you can keep for hsl colors the root pseudo-class
Here's an example:
:root {
--white: hsl(0, 0%, 100%);
--light-gray: hsl(212, 45%, 89%);
--grayish-blue: hsl(220, 15%, 55%);
--dark-blue: hsl(218, 44%, 22%);
}
You can even keep your fonts organized with @font-face
@font-face {
font-family: "Outfit", sans-serif;
src: url(./assets/fonts/Outfit.ttf);
}
Here are some links to help you understand the root pseudo-class and font-face class
Hope this helps
Happy Coding*
Hey @litewskidev, Good Job on your challenge. It looks amazing and it matches just like the design. I hope to take inspiration from this.
Happy Coding!
How did you approach centering the QR code design on the webpage? I implemented it somehow but I'm not sure if I used the right approach.
Good Job on Finishing your First challenge
For your HTML img element src attribute you forgot to add a dot before the slash
Change from:
<img src="/images/image-qr-code.png">
To
<img src="./images/image-qr-code.png">
Also put your attributes stuff below your qr-component code. That should fix it
Hope that helps
-What are the best practices that I missed? -How could I have organized my code better? -Is this the best way to center an element vertically and horizontally?
When you use the root element make sure to use it. You don’t need to assign the hsl, or rgb to the property if it’s in root.
:root {
-background-color: -background-color: hsl(212, 45%, 89%);
}
background-color: var(-background-color);
After a long break, I am started relearning web development. but I did pretty well now.
What challenges did you encounter, and how did you overcome them?I struggled to find the dimensions of the card.
What specific areas of your project would you like help with?It is a basic project.
Hey. good job on finishing your first front end mentor challenge.
You’re code looks clean, and readable. Good job
For css, you can use the :root pseudo class to put all your css hex, rgb and hsl in there. Root pseudo class documentation.
Only HTML and CSS were used.
I didn't think this was difficult at all. I know my design isn't exactly the same and I am only missing cosmetic changes.
My only question, is there a better way to write my current code? Can I make my code more efficient?
Good Job on creating and finishing your first frontend mentor post
The code you posted is good but here are some changes you can make to have it more readable.
I hope this feedback helps. Good job on finishing your first frontend mentor post
I find it difficult arranging the cards, other than that it was cool.
Hey nice job on coding and finishing this project. You did great. I also struggling with arranging the cards.
Just some tips you can look at to help if you want:
Hopefully this helps you. Anyways good job on your project. Hope you continue to do these challenges
