In this tutorial, we are going to have a little bit of fun. We are going to show you how to create cheeseburger art using pure HTML and CSS code.
If you are just getting started working with HTML and CSS code, this tutorial will help you to become familiar with this type of coding. By the end of this article, you should be able to make your very own cheeseburger. Let’s see if are a great cook!
It is not as hard as it seems, we promise. So let’s have a little bit of fun and create a cheeseburger using code instead of graphic design software.
First, let’s go over the Ingredients:
- Top Bun
- Green Lettuce leaf
- Tomato
- Cheese
- Patty
- Bottom Bun
Now, let’s get cooking!
Create a file named burger.html, or any title you choose is fine.
Put the below HTML document type code <!DOCTYPE> in your blank file.
Please note that some HTML editors will automatically include the doctype, if that’s the case, skip this process.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>How to create a cheeseburger art with pure html and css code</title> <link rel="stylesheet" href="style.css"> </head> <body> </body> </html>
Next, insert the below code inside the <body></body> tags.
<div id="burger"> <div id="top-bun"></div> <div id="lettuce"></div> <div id="tomato"></div> <div id="onion"></div> <div id="cheese"></div> <div id="beef"></div> <div id="bottom-bun"></div> </div>
In HTML, the <div> tag defines a division of the document. Read more about div tags here.
The id attributes are the names for each <div>, this will help us select each section with CSS code and style the sections individually. Learn more about HTML id attributes here.
You can also use class attributes instead of id, however, for this tutorial we will use id attributes.
So, now your whole code should look like this.
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>How to create a cheeseburger art with pure html and css code </title> <body> <div id="burger"> <div id="top-bun"></div> <div id="lettuce"></div> <div id="tomato"></div> <div id="onion"></div> <div id="cheese"></div> <div id="beef"></div> <div id="bottom-bun"></div> </div> </body> </html>
We have created the HTML markup of the burger above and gave each section a unique ID so we can target with CSS code and style the burger.
We have matched the ID names with the ingredients.
- Top Bun
- Green Lettuce leaf
- Tomato
- Cheese
- Patty
- Bottom Bun
Styling the Burger with CSS
Now, let’s give our burger a look with CSS styles.
Copy and paste the below CSS code right under the ending of the title tag </title>.
<style type="text/css">
#burger {
width: 400px;
}
#burger #top-bun {
height: 100px;
border-radius: 900px 900px 10px 10px;
background-color: #A27732;
border-top: 9px solid #906725;
}
#burger #lettuce {
border-radius: 8px;
background-color: #80D041;
height: 8px;
border-bottom: 3px solid #0F6D12;
}
#burger #tomato {
border-radius: 14px;
background-color: #F13233;
height: 20px;
border-bottom: 5px solid #940C0E;
}
#burger #onion {
border-radius: 8px;
background-color: #B95381;
height: 13px;
border-bottom: 4px solid #7E1846;
}
#burger #cheese {
background-color: #E8EA02;
border-radius: 10px;
height: 15px;
border-bottom: 5px solid #EAB902;
}
#burger #beef {
border-radius: 15px;
background-color: #603102;
height: 30px;
border-bottom: 16px solid #402408;
}
#burger #bottom-bun {
background-color: #A27732;
border-radius: 10px 10px 50px 50px;
height: 60px;
border-bottom: 11px solid #724D12;
}
</style>
Your whole code should look like this:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>How to create a cheeseburger art with pure html and css code </title>
<style type="text/css">
#burger {
width: 400px;
}
#burger #top-bun {
height: 100px;
border-radius: 900px 900px 10px 10px;
background-color: #A27732;
border-top: 9px solid #906725;
}
#burger #lettuce {
border-radius: 8px;
background-color: #80D041;
height: 8px;
border-bottom: 3px solid #0F6D12;
}
#burger #tomato {
border-radius: 14px;
background-color: #F13233;
height: 20px;
border-bottom: 5px solid #940C0E;
}
#burger #onion {
border-radius: 8px;
background-color: #B95381;
height: 13px;
border-bottom: 4px solid #7E1846;
}
#burger #cheese {
background-color: #E8EA02;
border-radius: 10px;
height: 15px;
border-bottom: 5px solid #EAB902;
}
#burger #beef {
border-radius: 15px;
background-color: #603102;
height: 30px;
border-bottom: 16px solid #402408;
}
#burger #bottom-bun {
background-color: #A27732;
border-radius: 10px 10px 50px 50px;
height: 60px;
border-bottom: 11px solid #724D12;
}
</style>
</head>
<body>
<div id="burger">
<div id="top-bun"></div>
<div id="lettuce"></div>
<div id="tomato"></div>
<div id="onion"></div>
<div id="cheese"></div>
<div id="beef"></div>
<div id="bottom-bun"></div>
</div>
</body>
</html>
That is it, you have finished cooking your burger.
Now if you go back to your browser and open the burger.html file, you should have your cheeseburger.
It should look like this.
Creating a cheeseburger art with pure HTML and CSS code is actually pretty simple. Graphic design tools aren’t the only way to create art, you can create something from nothing with just a little bit coding. This is a great beginner lesson on coding, and hopefully, you had fun cooking your own burger.
To help us create more tutorials like this, please share and tweet this tutorial with your social audience.
