@yfeienzoSubmitted 5 months ago
What are you most proud of, and what would you do differently next time?
I don't know how to import custom font using nextjs tailwind
Abdur Rahman
@nuraf9607All comments
- @nuraf9607Posted 5 months ago
- Visit the Google Fonts website.
- Select a font that suits your needs.
- Click on "Get Font."
- Click on "Get Embedded Code."
- Choose the @import option.
- You'll find a link like this:
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap'); - Copy the @import link and paste it at the top of your CSS file.
- You've now successfully imported the font.
- To use it, refer back to where you copied the link. Below it, you’ll see the appropriate
font-familyvalue to use in your CSS.
0 - @Black1ukSubmitted 5 months agoWhat are you most proud of, and what would you do differently next time?
I'm proud that I am able to finish the challenge
What challenges did you encounter, and how did you overcome them?inserting fonts
What specific areas of your project would you like help with?importing fonts
@nuraf9607Posted 5 months ago- Put these on the top of your CSS file:
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');- and then use either of these two based on the need:
font-family: "Fraunces", serif; font-family: "Montserrat", sans-serif;0 - @kaustubhyaSubmitted 5 months agoWhat are you most proud of, and what would you do differently next time?
Responsiveness
What challenges did you encounter, and how did you overcome them?Was not able to tackle the image overlay effect.
What specific areas of your project would you like help with?Ideas on how to build on top from this??
- @novanAfndSubmitted 5 months agoWhat are you most proud of, and what would you do differently next time?
I'm proud to have learned about hover in CSS. In the future I will try more difficult challenges and maybe challenges that use JS.
What challenges did you encounter, and how did you overcome them?I found a problem with the bem. When an html element is nested too deep. the naming became confusing so I made the naming bem by changing it a little according to my understanding.
What specific areas of your project would you like help with?Please give me feedback for naming using bem when we have html code that is nested too deep.
@nuraf9607Posted 5 months agoWhile you did fairly well, there could be some improvements such as "plan__plan-description" Instead of doing this you could do "plan-description", and also "text__upper-text" you could do "plan-description__lower-text" which Is more descriptive and follows BEM rules.
Marked as helpful1 - @hvQuoc133Submitted 5 months agoWhat are you most proud of, and what would you do differently next time?
Doing this project helps me learn more about Html and Css.
What challenges did you encounter, and how did you overcome them?There are CSS properties that I don't know about.
What specific areas of your project would you like help with?Please help me consider the appropriate way to use tags in Html?
@nuraf9607Posted 5 months agoFor semantics, You could consider using the main tag for the primary content container, and also instead of using h4, it would be best to use the p tag instead, after all this isn't a heading. lastly, change h2 to h1 because that's the primary text that people would focus on while visiting the page, I hope I helped you.
Marked as helpful0
