Front-end for back-end engineers

Task: Building a Simple Recipe Webpage

Your challenge is to build out this recipe page and get it looking as close to the design as possible.

Task

  • Download desktop design and mobile design first.
  • Then download all assets here.
  • Take a look at the style guide on this page.
  • Start implementing this page and make sure it is responsive.

💡 While implementing this design you may face some new challenges that I haven't taught you(like using fonts and favicon)! Just try to tackle these problems using Google and any tools which you prefer like AI. In the next session, I will provide the complete solution.

Style Guide

Layout

The designs were created to the following widths:

  • Mobile: 375px
  • Desktop: 1440px

Colors

  • Background: #f9f3ef
  • Text color: #4a4a4a
  • Text color light: #666
  • Heading color: #333
  • Pink: #7B284FFF
  • Pink light: #fbeff3
  • Brown: #854632FF
  • Orange: #b45f06
  • Border color: #ddd

Typography

  • Font size (paragraph): 16px
  • Font size (Heading 1): 32px
  • Font size (Heading 2): 24px
  • Font size (Heading 3): 18px

Fonts