Design comparison
Solution retrospective
Spacing the columns to align both horizontally was a challenge, but googling and reviewing others similar designs helped.
Community feedback
- @sinjin25Posted about 1 year ago
Hey Lefty, nice job on the project.
One thing that'll help you out a lot going forward is making sure you've got your fonts right. This is a big deal because different fonts have different heights which makes it difficult to get your design to match up with the design docs. The process is not very obvious when the fonts don't come on your system either so that tricks up a lot of people :(
- Check the style-guide.md. It'll say the font family and the weights required.
- Go to google fonts and search up the family (ex: https://fonts.google.com/specimen/Lexend+Deca?query=lexend+deca)
- Select the font weights required (400, 700)
- Follow the instructions on the right so:
<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=Lexend+Deca:wght@400;700&display=swap" rel="stylesheet">is placed inside the
<head>and
font-family: 'Lexend Deca', sans-serif;can be added as a CSS rule to.body {}(or anywhere you want).You aren't told very well if you're using the font correctly. On firefox you can go inspect a text node -> check for "fonts" (near computed) -> make sure the font family is correct and not falling back to times new roman or something. On chrome you can inspect a node. Checkout the "computed" tab and scroll down to the bottom where it says "rendered fonts". Make sure it's the correct one and not a fallback.
Good job and good luck on your next projects :)
0
Please log in to post a comment
Log in with GitHub
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