Submitted 7 months ago

Recipe page using Taildwind CSS and HTML5

Donovan Romero•100

@nsvonod12

Preview site View code

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 am proud of all the knowledge I have developed in this challenge.

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

I had small problems with the deploy, because in the Github pages it did not detect the path where the index.html is on the main page.

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

When I create a new project only with html and for example, Tailwind and I install dependencies through NPM, What steps should i have to follow for deploy?

Community feedback

Vanessa•150

@petrihcourPosted 3 months ago

Hi! You did an awesome job!

Keep an eye out for the spacing. The main content has more padding than it should compared to the original, and should be evenly aligned with the image.

With this project being fairly simple, you don't need to use NPM to use Tailwind CSS, especially if you're only using HTML and some custom CSS.

Next time, I recommend following the instructions on Tailwind's Website to avoid you needing to make extra files like a src file, etc. You can use Tailwind's CDN, add it into your html file in the header, and add your Tailwind properties into that like so:

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- displays site properly based on user's device -->

  <link rel="icon" type="image/png" sizes="32x32" href="./assets/images/favicon-32x32.png">

  <title>Frontend Mentor | Recipe page</title>

  

  <!-- google fonts -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Outfit:[email protected]&family=Young+Serif&display=swap"
    rel="stylesheet">


  <!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
  
</head>

Hope this helps!

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