Submitted 12 days ago

Recipe Page using HTML and CSS

Boffdub• 30

@Boffdub

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Recipe page

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

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

I had been doing tutorials on W3 Schools and watched a lot of youtube tutorials but I have never built a site before. It's not 100% exactly like it was drawn up. But I'm proud that even when I struggled, I was able to figure out how to make it close to what it looked like.

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

I had trouble trying to figure out the table. Because I wasn't sure if the td or the th tag. I eventually figured it out by using the inspect tool in Chrome and as I know basic HTML and CSS, I could figure out that it was a padding issue.

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

I wasn't sure what font-family was and I got that wrong. But wasn't sure how to change it. So, I'd want help on that.

I also feel like there was an easier way of how to do all of these things than I made so I'm curious about that.

Community feedback

edpau• 400

@edpau

Posted 12 days ago

The font detail is in the style-guid.md

- Family: [Young Serif](https://fonts.google.com/specimen/Young+Serif)
- Weights: 400

- Family: [Outfit](https://fonts.google.com/specimen/Outfit)
- Weights: 400, 600, 700

Since this challenge they provided you the font in the asset folder, you can use it from there. Please read below for more detail. How to use @font-face in CSS

or you can download it from google font, and connect it as below. Get Started with the Google Fonts API

or you can see how other people change the font in their code.

I also suggest to use a Chrome extension, WhatFont, to check what the font is on your website. WhatFont

Marked as helpful

Boffdub• 30

@Boffdub

Posted 12 days ago

@edpau Thank you. I did see that.

However, the thing that confused me is that I wasn't sure when to use young serif and when to use Outfit. Because neither seemed to be the right match. But I can play around some more this weekend.

edpau• 400

@edpau

Posted 10 days ago

@Boffdub I see what you mean now, you used Young Serif for the heading, and Outfit for the first paragraph, they are correct. Try adjusting the font colour and font-size, line-height and font-weight to make them match.

You can also use an extension call Perfect Pixel to compare your webpage with the design.

Hope this helps.

Marked as helpful

Please log in to post a comment

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