Skip to content
Submitted about 1 month ago

Recipe Page using HTML and CSS

Boffdub•60
@Boffdub
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Recipe page
  • HTML
  • CSS
1newbie

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•440
    @edpauPosted about 1 month 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
    0
    Boffdub•60
    @BoffdubPosted about 1 month 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.

    0
    edpau•440
    @edpauPosted about 1 month 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
    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