How to Create a Cheeseburger Art with Pure HTML and CSS Code

By 01/18/2019 October 1st, 2019 Web Design

In this tutorial, we are going to have a little bit of fun. We are going to show you how to create a 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.

Did you know? Nearly 60-percent of all sandwiches sold worldwide are actually hamburgers.Click To Tweet

First, let’s go over the Ingredients:

  1. Top Bun
  2. Green Lettuce leaf
  3. Tomato
  4. Cheese
  5. Patty
  6. Bottom Bun
cheeseburger ingredients

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>

The first line of code above, <div id=”burger”> is the main container, inside are our ingredients.

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>

And here is your burger structure with the ingredients.

  1. Top Bun
  2. Green Lettuce leaf
  3. Tomato
  4. Cheese
  5. Patty
  6. Bottom Bun

<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>

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.

Make cheeseburger with HTML and CSS cod

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.

Leave a Reply

Made In Los Angeles

391 Shares
Buffer
Tweet
Share
Share
Pin