How to Set Up Recipe Cards HTML File

Today we are going to start building our recipe card website. In Skillcrush 101, students are given the starter code files with everything they need to make the recipe card website from the stylesheets to the images. You are going to recreate the Skillcrush HTML file yourself.

I’ll walk you through the steps to getting your HTML file ready with all the code you need to make your recipe card website. We will also set up the normalize.css file so your recipe card website will be compatible with all browsers.

Workspace Setup

Before you can start writing any HTML code, you need to get your workspace organized and have all the files ready to go so you can access them easily when you begin coding. I recommend you keep my guide about setting up your coding workspace open in another tab on your browser as you do this. This guide walks you through the steps of setting up the meta tags, what extensions you need to save your files as, and more.

How to Set Up Your Coding Workspace

Sarah Dye ・ Mar 22 '21

#coding #webdev #productivity

First, create your project folder on your desktop. I’m naming this folder recipe-cards, but you can pick a different name if you like. Once your folder has been created, open it. Now that we are inside our new folder, we can start adding the files and folders we will need so we can find the information very quickly.

The index.html file

The first file you will create in your new project folder is the index.html file. This file is where you put all your HTML code and where we will be writing all of our code today. Follow the instructions in the How to Set Up Your Coding Workspace guide to create your index.html and put in the boilerplate code. Save your index.html file then leave this file open. We will be back to this file shortly.

The css folder

Let’s create a folder to hold all the stylesheets for your project. Create a new folder inside your root directory and give it the name css. Open your css folder.

Inside your folder, we are going to create two stylesheets. Save the first stylesheet as style.css. The style.css file is where we will put all of our CSS styles. Close style.css then create a second stylesheet. Save this one as normalize.css.

The img folder

We only need one more folder inside the recipe-cards folder. Create a new folder in your root directory. Name this folder img.

The img folder is where you will put all your images and icons. You will need three images and four icons for your project. In the Skillcrush starter, students are given the images and icons needed for the recipe card website.

I’ll be using the images and icons from the starter code for my project, but you can use any images and icons you like. You can use stock photos if you like or use a link to an image you found on the web. You can also use your images if you like for your recipe card website.

If you are using any images you have locally on your computer, make sure you put them in your img folder. If you are looking for icons, a great place to find icons is the Font Awesome. The Font Awesome library has tons of icons developers can use for their websites. You can use the Font Awesome documentation to help you get access to the icons and steps to add them to your website.

==> Click here to access the Font Awesome library!

The Style Guide and Design Comp

Skillcrush provides students with a second file in the starter files. This file is the style-guide.md file. This file is the style guide for the entire project.

The md extension at the end of this file lets the computer know what type of file this is going to be. When the computer sees the md extension, it lets the computer know to interpret and read this file as a plain text file. You won’t have access to the style-guide.md file, but I will post the contents of the style-guide.md file in this post.

Below you will see all the colors and fonts you need to make this project. The guide includes the hex codes for the colors and the font sizes.

# Recipe Card Project Style Guide

## Colors
- Light blue (#DAF7F6)
- Red (#F16059)
- White (#FFFFFF)
- Dark gray (#3B3B3B) 


## Images
Images are in the 'img' folder

## Fonts
- 'Open Sans' -> Main font
- 'Montserrat' -> Accent font (headers)
- Sizes: small = 12px | medium = 24px | large = 48px

If you want to save these styles in a md file in your project folder, just open a file in your text editor. Copy-paste the text into the file. Click save as and make sure you select the md extension.

Name your file style-guide then click save. During this lesson, Skillcrush shares the design comp for this project with the students. This PDF file shows students how the finished website needs to look.

The design comp is there for students to reference as they build their projects. Below is a screenshot of the design comp for the recipe card website. You can save this image in your project folder if you would like to refer back to the design comp throughout this series.

Objective 1: Set up the normalize.css file!

Before we can begin writing any HTML code, let’s take care of the normalize.css file first. The normalize.css file is where we will put all the cross-compatibility styles. The nice thing about this stylesheet is that we will only need to open this file once to write our code then we won’t have to open it again throughout this project.

Go to your css folder and reopen your normalize.css file. Instead of writing all of our cross-compatibility code, we are going to use code from necolas.github.io. This site has all the cross-compatibility code available for developers to use.

You can read the comments on the website to understand what the code is doing and what it does to websites on different browsers. Simply copy all the code from this site then paste it inside your normalize.css file. Save your file when you are finished and close your file. Now your website can work on all different types of browsers.

==> Click here to get the normalize.css code from necolas.github.io!

Objective 2: Start adding HTML code!

Now we are ready to start working on the HTML code. Go back to your index.html file. Today we are going to get all the HTML on our website.

By the end of this post, your website will have all the text, images, and icons on the site. Before you start coding any HTML, make sure you copy-paste the boilerplate code from the How to Setup Your Coding Workspace post first.

Head

We begin with the head tag first. Inside your head tag, make sure you have the meta tag with the charset attribute set to utf-8. Underneath the meta tag, you should also have a title tag with the title of the site between the opening and closing tags.

The Skillcrush starter files use Recipe Card Projects as the title, but you can use any title you like here. All that we need to add in the title tag right now is a link to our fonts. Skillcrush provides the students with the Google Fonts link in the starter file, but you can add this link to your index.html file yourself. You can use my post A CSS Guide to Fonts to help you with this step.

A CSS Guide to Fonts

Sarah Dye ・ Mar 10 '21

#css #skillcrush

Go to Google Fonts. The style guide wants the fonts Open Sans and Montserrat for the recipe card website so search Google Fonts for these fonts. As you select your fonts, you can select what styles you’d like to use.

You will want to make sure you select regular 400 and bold 700. That’s all we need for our head tag for right now. All you need to do is save your file.

If you encounter any issues with your fonts, you can go back and double-check your Google Fonts link. We will add a link to the style.css file in next week’s post.

==> Click here to find your fonts on Google Fonts!

<head>
        <meta charset="utf-8">
        <title>Recipe Cards Project</title>
        <link href="https://fonts.googleapis.com/css?family=Montserrat:700%7COpen+Sans&display=swap" rel="stylesheet">
</head>

Font Awesome

If you want to use Font Awesome icons on your website, you will If you plan on using the Font Awesome library to get the icons for this site. There are plenty of ways to get access to the Font Awesome library. Font Awesome has directions for installing them in all different ways on the Start page. I’m going to show you how to use the Download option and serve the icons yourself.

1. Go to the Font Awesome website and click the start page. On the start page, you want to click the Download button. This will start downloading a folder to your computer.

2. Find the folder in your downloads folder then extract the files. Click to go inside the folder and rename the folder to font-awesome. Inside this folder will be a css folder with all the Font Awesome stylesheets. Move the font-awesome file into your img file in your recipe-cards project folder.

3. Go back to your index.html file. We are going to connect the Font Awesome stylesheets to our index.html file. Go back to your head tag.

Underneath your Google Fonts link, you will use a link tag with the href and rel attributes. Set the rel attribute to a stylesheet. The href attribute will have a link to the all.css file.

Computers need a specific location to get the file so you will need to tell your computer how to navigate to this file. So you will need to tell the computer to go into the css folder to find the Font Awesome file and the css folder inside of it. So your code will look like the below:

link href="css/font-awesome/css/all.css" rel="stylesheet">

1. Save your index.html file. Now your Font Awesome stylesheet is connected to your index.html. If you find that your icons aren’t appearing on your site later throughout this series, go back to your head tag and double-check this link to make sure your computer is being sent to the right place the Font Awesome stylesheets are.

Body

You are ready for the body of this website. There’s a lot of code in the body of this site, so we are going to tackle the body into two sections. First, we are going to make the header.

The header has the headline Recipe Collection and the chef icon on the design comp. Next, we will start making the recipe cards. In this tutorial, I’m going to show you how to make one recipe card, but you can copy-paste your code once you are finished to make the other two recipe cards.

Header

1. Underneath the opening body tag, add a header tag. We are going to have two tags inside our header. One is going to be the headline and the other is an icon.

2a. Let’s add an icon. In this tutorial, I am using the image from the Skillcrush starter file. To add the chef icon, I will use an img tag.

The img tag will have two attributes. One is the src while the other is alt. Set the src attribute to the link where your chef icon is at.

The chef icon is in the img file so I will tell the computer the file is in the img folder and the name of my folder. So it will look like the following:

<header>
    <img src=”img/chef-hat.png” alt=”chef hat”>
</header>

After the src attribute, I will set the value for the alt attribute. Skillcrush keeps it simple by calling it chef hat. Save your file then check to see if your chef hat appears on the browser.

2b. If you are using Font Awesome, you will want to pick any icon you want for your project. Once you have an icon picked out, you will copy the i class code at the top of the icon. Paste that code underneath the opening body tag.

This code will look like the code below. Save your code when you are done and double-check your site in the browser to see if the icon appears on your website.

<header>
  <i class="fas fa-cheese"></i>
</header>

3.The last thing we need to do is add a headline. Underneath your icon code, you will want to put an h1 tag. Inside your h1 tag, you will put Recipe Collection.

Save your file then double-check your site in the browser. The text will be right next to your icon.

<header>
  <img src="img/chef-hat.png" alt="chef hat">
  <h1>Recipe Collection</h1>
</header>

Recipe Card

1. Underneath the closing header tag put a main tag. This is where all your recipe cards will go on your website.

2. Inside the main tag, you will create three article tags. Every article tag will have both a class and id attribute. Give each article tag a class with the value card.

For the id attribute, you can give each tag a different id name. In the Skillcrush starter, the names they use for the ids are cookies, pesto, and salad.

3.Now let’s go inside the article tags. Inside the article tag, put two div tags. For the first div tag, give it a class name image. The second div tag will have the class name recipe.

4.Go to the recipe div tag. Inside this div tag, we are going to add the following div tags and class names in order. Save your file when you are done and double-check how everything looks in the browser.

• H2 tag. Put the name of the recipe here. On the Skillcrush starter file, they put Gluten-Free Sugar Cookies.
• Div tag with class name time. Make sure this is underneath your h2 tag.
• P tag with class name description. You can put the recipe description inside your p tags. You can also use lorem ipsum text here in case the recipe you want to use doesn’t have one.
• Div tag with class name columns.

5.Go back to the time div tag. Inside the time div tag, we will add 3 more div tags. Give each of the div tags the following class names.

• Prep
• Cook
• Total

6.Prep, cook, and total div tags are each going to have an img and some text. Go to the prep div tag. Inside, you will put an image tag with the src and alt attributes.

Put a link to an icon here. Skillcrush students will want to use the image of the spoon from their img folder. Make sure you give your img an alt value. The Skillcrush starter uses prep time as the alt value for the prep image.

After the img tag, put a p tag. Give the p tag a class name called time-details. Inside the p tag, you will want to write Prep Time: first then the amount of prep time listed in the recipe.

Wrap Prep Time: in between strong tags. Save your code file and double-check how your prep div looks on your site.

7.You can now copy-paste the contents of your prep div into the cook and total div tags. You will just need to change the images, alt values, and p tags. Save your file again once you’ve made these changes and double-check how everything looks in the browser.

8.Go to the columns div tag. Inside your columns div tag, we are going to add two section tags. The first section tag will have the class name ingredients while the other will have the class name directions.

9.We are going to start adding ingredients to our recipe. Inside the recipe section tag, put an h3 tag. Put ingredients in between the h3 tags.

Underneath your h3 tag, put an ul tag. The list items will be all the ingredients for the recipe. Add as many li tags as you need for your recipe. Save your code file once you are done.

10.Go to the directions section. This is where you will put the recipe instructions. Inside the section tag, put an h3 tag.

Put directions inside the h3 tags. Underneath the h3 tag, put an ol tag. This is where you will list all the steps in the recipe.

Add as many li tags as you need for the instructions. Save your code file when you are done.

11.Repeat steps 3-10. Just copy everything inside your article tags and paste it into each of the article tags on your website. Change the text inside of your names for every recipe on your website. Save your file when you are done.

Conclusion

Congratulations! You’ve just recreated the Skillcrush recipe card starter code from scratch. You are now ready to start adding styles to your recipe card website.

Right now your website will look similar to the image I posted earlier. All the text will be on our website, but it doesn’t quite look like the design comp yet. As you move throughout the next lessons, it will slowly transform into the design comp.