I used most of the CSS and HTML classes I took on Udemy.
Design comparison
Solution retrospective
I am proud of the fact that I can confidently say I understand the true use of CSS positions and how to apply them.
I would try to practice and experiment with the work before giving up.
What challenges did you encounter, and how did you overcome them?The positioning of my elements on my page.
I had to fully understand the CSS flex cheatsheet.
What specific areas of your project would you like help with?The font-family, I still had issues with incorporating the fonts.
Community feedback
- @A-noob-in-CodingPosted 3 months ago
To have a easy time working with custom fonts: if you have font files which are usually provided with the starter code in the assets/folder directory, you can use @font-face rule in CSS Type fontface and your ide would autocomplete it, now name the font you want to use (it could be anything) and provide the path of the font file, you need to provide the path of the .ttf files(these contains the font) if the directory is assets/font and the .ttf is inside the font folder the path would look like "/assets/font/fontname.ttf" HOPE IT HELPS 🙂
1@NapgoldenPosted 3 months agoI didn't really understand the whole font-face CSS rule stuff, if you could explain a bit further it would be greatly appreciated. @A-noob-in-Coding
0@A-noob-in-CodingPosted 3 months agoThe
@font-face
rule is used to include font files that are present in your project. That way, you don't need to rely on online fonts. The font files usually have a.ttf
extension. For example, a font Poppins would be likePoppins.ttf
.FEM challenges provide you with these font files to work with, and they are usually located in the
assets/fonts/
directory.To use these files:
@font-face { font-family: PoppinExtraBold; src: url("/assets/fonts/Poppins-ExtraBoldItalic.ttf"); }
the font-family is the name you want for the font you are retrieving from the
.ttf
file andscr: url()
needs the path to that.ttf
fileHope it helps 🥰
1@NapgoldenPosted 3 months agoThanks so much the image helped me understand it more. @A-noob-in-Coding
0 - @StroudyPosted 3 months ago
At different screen widths your card falls apart, I think its because you are using VW VH units, you can solve these issues using the correct REM / EM units and using @media Queries
1
Please log in to post a comment
Log in with GitHubJoin 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