💻 Unit 1 Project: Recipe Blog
Project Setup & Overview
It’s time to practice all of the HTML
and CSS
knowledge you have acquired! In this project, you are going to build a basic recipe blog website. The website will consist of one page which will have links to a few recipes.
📥 PROJECT SETUP & SUBMISSION INSTRUCTIONS
- Go to the public template repository for our class: BWL-CS HTML/CSS/JS Template
- Click the button above the list of files then select
Create a new repository
- Specify the repository name:
CS1-Unit-1-Project
- Click
Now you have your own personal copy of this starter code that you can always access under the
Your repositories
section of GitHub! - Now on your repository, click and select the
Codespaces
tab - Click
Create Codespace on main
and wait for the environment to load, then you’re ready to code! - 📝 Write code in this Codespace during class.
PART A: Build the HTML Structure 🧱
1. Create Initial Structure
- Within the project, navigate to the
index.html
file. - Ensure that it is already filled out with the usual boilerplate HTML, with a
head
andbody
section inside the opening & closinghtml
tags. - Add an
h1
heading inside thebody
section that describes the main title of the website (like “My Favorite Recipes” or “Sweet Treats for Fall”).
2. Start Recipe Section
- Create a new
div
element to group together the information for your first recipe on the page. - Specify a unique identifier within the
div
opening tag, like this:<div id="recipe-name">
You can use the name of your favorite dish or, if you need some inspiration, you can find a recipe to use at Allrecipes.
- Include a class name within the
div
opening tag, like this:<div id="lasagna" class="recipe-section">
This will help with styling all recipe sections later on!
- For now, just include an
h2
heading inside thediv
, with the recipe’s name as its content.
3. Fill in Recipe Content
Your new recipe div
section must include the following content:
- An image of the finished dish under the
h2
heading that you added earlier.You can find images of the dish on Google or Allrecipes.
- Under the image, it should have an appropriately sized heading (HINT: smaller than the recipe title heading) with the words “Description”.
- Following the heading, include a paragraph or two describing the recipe.
- Under the description, add an “Ingredients” heading, followed by an unordered list of the ingredients needed for the recipe.
- Finally, under the ingredients list, add a “Steps” heading, followed by an ordered list of the steps needed for making the dish.
Forgot how to write HTML
code for images, headings, paragraphs, or lists? Refer to your Unit-1-Notes
repository on GitHub or review the 📓 Notes 1.2: HTML Foundations!
4. Add More Recipes
- Add two more recipes with identical structures to the recipe
div
section you’ve already created, but replace the inner content.TIP: You can copy-paste your own code! Select from the opening
<div>
tag until the closing</div>
tag. - Don’t forget to add a link to each of the new recipes at the top of the page. This will help with navigation around your page, so users can click to jump to the recipe they want to see.
Each
div
section should have a uniqueid
, but you can leave theirclass
names the same.
5. Add In-Page Navigation Links
- Back at the TOP of the
body
section, under the firsth1
, add an anchor link to jump to each recipediv
section.Example:
<a href="#recipe-name"> Recipe Name </a>
.- The
href
attribute is directing the anchor to thediv
on the page that hasid="recipe-name"
. Replacerecipe-name
with your own identifier for that recipe. - The text of the link (between the
a
tags) should again be replaced with the actual recipe name.
- The
- Repeat to add links for the other two recipe sections.
Make sure to replace the
href
to match that recipe’sid
, and replace the text to match that recipe’s name.
PART B: Style with CSS 🎨
1. Apply general styles to the whole page
- In
style.css
, write a selector for the whole page. Remember that thebody
tag contains all the content:body { }
- Inside the curly brackets for that selector, change the
background
property to any color you like:background: pink;
- Set the text color for the whole page:
color: purple;
- Pick a
font-family
for your page:font-family: sans-serif;
🔡 Use one of the web-safe fonts to start out, but to really make your page stand out, you can import a custom font by following my Google Font Tutorial!
3. Style Your Headings
- Select your main title (the
h1
tag) and make it stand out by changing the following properties:color
text-align
font-size
- Select & style your recipe names (
h2
) so they look different from the page title. Change the following properties:color
font-size
- Give smaller headings (
h3
) a bold look. Change the following properties:font-weight
font-size
4. Add Borders and Spacing with the Box Model
- Give each recipe section (the
<div>
that holds the recipe) a border, padding, and margin. Example if your recipediv
s use theclass
namerecipe-section
:.recipe-section { border: 2px solid black; padding: 15px; margin: 20px 0; }
- Border adds a line around the box.
- Padding adds space between the text and the border.
- Margin adds space outside the border.
- Change the border
width
,style
, andcolor
to experiment with different looks.
5. Style Links
- Make your navigation links (
a
tags) look nicer by adding some simple styles:a { color: purple; text-decoration: none; font-weight: bold; }
6. Style Images
- Add a border to your recipe images. Example:
img { border: 2px solid black; }
- Add some space around them so they don’t touch the text.
Would this be
margin
orpadding
?
Minimum Requirements Checklist
By the end of PART A, your index.html
file should include, in this order:
- A
h1
heading that describes the theme of the blog - 3 links (
a
tags) that anchor to different sections on the page (referencingid
names) - 3 recipes, each contained in a
div
section with a uniqueid
name and a sharedclass
nameEach recipe section includes the following elements:
h2
with the recipe’s nameimg
of the finished dish- “Description”
h3
followed by ap
(paragraph) - “Ingredients”
h3
followed by aul
(unordered list) of ingredients - “Steps”
h3
followed by anol
(ordered list) of steps
By the end of PART B, your style.css
file should include:
- A background color for the page
- A custom text color and font family for the
body
- Styled headings (
h1
,h2
,h3
) with different sizes and/or colors - Borders, padding, and margins on your recipe sections
- Styles for links
- At least one set of styling rules for images
Extension Challenges
If you finish the required checklist, try adding some of these extras to make your recipe site more creative:
- Add even more recipes by repeating the
<div>
structure you used for the other recipes. - Incorporate emojis 🍝 to embellish your text content, if you like the way they look.
- Design a header image or logo for your recipe blog on Canva. After you’ve finished the design, follow these steps to include it on your page:
- Download it from Canva as a
.png
,.jpeg
, or.jpg
file onto your computer. - Drag it from your computer into your
File Explorer
tab in the Codespace to upload it to your project. - In your
HTML
code, add animg
element at the top of your page, before theh1
heading. Thesrc
attribute should be set to the name of the image file.
- Download it from Canva as a
- Background Gradients or Images:
- Instead of one solid background color, use a gradient. You can copy and paste a gradient from SheCodes Gradients.
Example CSS Rule:
background: linear-gradient(to right, #ffecd2, #fcb69f);
- Another option is to use an image. For best results, search “Seamless Pattern” on Google Images.
Example CSS Rule:
background: url("image-name.png");
- Instead of one solid background color, use a gradient. You can copy and paste a gradient from SheCodes Gradients.
- Different Fonts for Headings:
- You can set your
h1
,h2
, orh3
to use a differentfont-family
than the body text. - Example:
h1, h2, h3 { font-family: "Georgia"; }
🔡 Use one of the web-safe fonts to start out, but to really make your page stand out, you can import a custom font by following my Google Font Tutorial!
- You can set your
- Rounded Corners on Boxes and Images:
- Use
border-radius
property to soften the look of divs or images.
- Use
- Create “Button-Like” Links:
- Add background colors and padding to your
<a>
tags so they look more like buttons:a { background: lightgray; padding: 5px 10px; border: 1px solid black; }
- Add background colors and padding to your
- Centering Images:
- Wrap your image in a
<div>
with a class, then usetext-align: center
on the container. - Example in HTML:
<div class="centered"> <img src="lasagna.jpg" alt="Lasagna"> </div>
- Example in CSS:
.centered { text-align: center; }
- Wrap your image in a