Submitted 16 days ago

Blog preview card using HTML and CSS

Patrick Cheruiyot Kirui•20

@Pc-Kirui

A solution to the Blog preview card challenge

Preview Code

Solution retrospective

What are you most proud of, and what would you do differently next time?

Did the projected as expected from me. Came up with a design that resembled the one I was given in the challenge. Purposing to go through hover and focus states use it to improve my design.

What challenges did you encounter, and how did you overcome them?

Did not encounter any challenge.

What specific areas of your project would you like help with?

Could you please help me in understanding how to use Figma files provided in the project description.
Have been provided with some fonts in the project but need some guidance on how to make use of them.

Code

Please log in to post a comment

Community feedback

Mustafa Sen•2,890
@mustafasen97
Posted 16 days ago
If you purchased a Frontend Mentor Pro subscription, you'll see a link to download the Figma file on the design page where the files are located. Click the download button to download the Figma file. You can then download Figma to your computer and open the file. Or, you can go to the Figma website and open the file there.

You can view all design screens, inspect elements, and see details like font names, sizes, colors, and spacing.

To see font details:
- Select a text element in Figma.
- Look at the right-hand panel where it shows the font family, font weight, font size, and line height.
You can use these font details directly to style your CSS.

You can then review the design in Figma, but you'll need some experience using the program. It's a good idea to check out Figma tutorial videos on YouTube.

How to Add Fonts from Google Fonts

If the font used in the design is available on Google Fonts, you can add it easily:
- Go to Google Fonts website.
- Search for the font name you found in Figma or design files.
- Select the font weights/styles you need.
- Copy the <link> tag provided by Google Fonts.
- Paste that <link> tag inside the <head> of your HTML file.
Example:
```
<head>
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet" />
</head>
```
Then, in your CSS, use the font family like this:
```
body {
  font-family: 'Roboto', sans-serif;
}
```
How to Add Fonts from Local Font Files (on Your Computer)

If you have font files like .woff, .woff2, .ttf on your computer, you can use them in your project with @font-face in CSS.

Example:
```
@font-face {
  font-family: 'MyCustomFont';
  src: url('./fonts/MyCustomFont.woff2') format('woff2'),
       url('./fonts/MyCustomFont.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}


body {
  font-family: 'MyCustomFont', sans-serif;
}
```
Place your font files in a folder in your project (e.g., /fonts).

Update the URL paths in the CSS to point to the correct location of your font files.

If you follow these steps, you will be able to open the Figma file, find out which fonts are used, and add them correctly to your project either via Google Fonts or local files.

I hope these helps you. Good luck your future designs.
P
Jon•270
@jonmc89
Posted 16 days ago
First of all, you have made a great attempt at this challenge. Regarding adding fonts, my method is to go to googlefonts, They have a method of adding them to your project with 1 line of code.

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