How to Make a Burger in HTML — A Beginner Tutorial

Do you know, Americans consume 13 billion hamburgers a year, enough to circle the earth 32 times!

To keep-up this spirit of Burgers let’s learn HTML and CSS by making a Burger.

First we need to list the components of the Burger:

• The Top Bun
• Green Lettuce leaf
• Tomato
• Cheese
• Pattie
• Green Lettuce leaf
• The bottom Bun

We have 7 components in this Burger. The first problem in making this Burger in HTML is that HTML doesn’t understand these components; HTML has it’s own components, these are called elements. One such element is “div”. The name “div” stands for division — a small division of the screen.

In HTML, the elements are defined by writing its tag name inside angular brackets. For example: <div></div> will define one “div” element.

Create a file named “burger.html”. Feel free to use editor of your choice(I recommend VS Code). Remember to save the file with “.html” extension. Once saved, if you double-click on the file it will open in your web browser.

It won’t display anything yet.

Look, every restaurant has different size of components inside their Burger, right? We haven’t yet described any size for the div element in our HTML, hence it will display a box with height 0px, that’s why we can’t see it.

Let’s give the our div element some height, width and color using what is called “style attribute” in HTML. Height of each component of our Burger will be 10px. We will write it as: <div style="height:10px">\<div>. Simple isn't it?

To write more than one style we separate it with a semicolon, like this: <div style="height:10px; width:100px; background-color:peru"></div>. Go ahead and update your burger.html file with this code, and open it in browser.

Our first component of burger is displayed; let’s make 7 more of them with different colors:

First version of our HTML Burger is ready:

It doesn’t look that delicious, right?

Let’s make the top and bottom boxes look rounded. We can do that using “border-radius” property in style. Each corner of div element has a “border-radius” property that we can modify.

We added 80px radius to the top-right and top-left corner of the Top Bun, and 20px radius to bottom-right and bottom-left corner of the Bottom Bun.

Our HTML Burger is starting to look good:

Let’s make our Burger look better by adding border-radius to all the components of the Burger; but before that, we need to organize our code, because the properties inside style=“…” is becoming bigger.

In HTML we can use a <style></style> to put all the styles separate from the elements.

Think of it like this: you don’t carry all your income as cash with you, instead you keep it in a bank. In the same way, we don’t put all the styles inside the element itself, but inside <style></style>— it's our bank for styles.

Also, how does the bank know which money is yours and which money belongs to other people? By your identity. Bank knows that out of the total 3000, 1000 belongs to Tony Stark, 1000 belongs to Bruce Banner, and 1000 to Steve Rogers. Bank knows who owns how much by their name.

In the same way, we need to give names to our elements so that the styles we put inside <style></style> knows which style is for which element. We do this by giving the elements an ‘id’:

We have added unique ids to each element so that we can identify them. Now lets put the styles in separate <style></style> tag:

Our code looks lengthy but much cleaner. All the styles that we were writing inside style=" ... "are now wrapped with “{“ and “}” and preceded with the id of that element which is in turn preceded with a “#” symbol — all placed inside <style></style> tag.

That’s how you write styles. This is CSS my friends, does that look difficult? :-)

You will notice we have one property that is same for all the elements: width (200px). Height of most of the elements is also same: 10px, except top-bun, patty and bottom-bun.

What if we could write the common properties once, and apply to all the elements? To this we can classify your elements into a class and write style to that class.

In our example, we can classify all the components of the Burger as: “burger-component”. Assign a class to an element with “class” attribute like this:

<div id="top-bun" class="burger-component"></div>

The above code means the div has a unique id “top-bun” and belongs to “burger-component” class. To write style for a class you use “.” instead of “#”. The style inside #top-bun{...} will be applied to the element that has id “top-bun” and the styles inside .burger-component{...} will be applied to all the elements that has class "burger-component".

Let’s update our code:

That reduced many lines of repeated code. At top you will see the style I wrote for the class “burger-component” and I also added class=”burger-component” to all the div elements. Notice I kept the unique styles inside the ids and kept the common styles inside .burger-component{...}.

Remember, in CSS, “.” means class, and “#” means id.

Now that we have organized our code, let’s add some border-radius to all the elements to make our Burger more beautiful:

Much better :)

Till now we created boxes and played with some of their styles (width, height, background-color, border-radius). We have not added any text yet. Let’s add some text.

To put some content inside a div we write it between its opening tag: <div>, and it's closing tag: </div>. Let's go ahead and create a new div with our content in it:

<div>
  HTML Burger
</div>

Place this code at the bottom of your burger.html file, and open it in your browser.

Our text is displayed, but it’s not in centre. To align the text to centre we use “text-align” property. Let’s give our div an id so that we can refer it inside <style></style>. Below is our final code with text-align property set to centre:

And here is our output:

This is delicious, isn’t it?

Now that our delicious HTML Burger is ready, we have some formalities to be taken care of. Like any other programming language, HTML has gone through many versions since its birth year: 1990. The current version of HTML is HTML5.

How would the browser know which version of HTML you are using to code your page? To tell the browser that you are using HTML5 you need to include <!DOCTYPE html> at top of the page. For older versions of HTML this top line used to be different, but you don't need to learn that, because we don’t uses it any more.

Also, in previous HTML versions, we used to encapsulate the entire document inside <html></html> tag, and the entire file was divided in two major sections: Head, inside <head></head>, and Body, inside <body></body>. This is not required in HTML5, but we still do this for compatibility reasons. Let's update our code with Doctype, <html>, <head> and <body>:

You will notice that style element went inside “head” and all the div elements went inside “body”. We load our styles and other meta information inside head section, and all the elements which are going to be displayed in browser are kept inside body.

We are defining our styles in a separate section, what if we could put it in a separate file? Our code will look much cleaner that way. As you move to bigger projects, you will start to add more and more elements and styles to your document, your code will become messy very soon.

So, let’s write our styles in a separate file and link it to our html file. In HTML we can link to another file using <link> element. Create a new file named "styles.css" and paste all the content inside <style>...</style> in it, and link to it from Burger.html using <link> element.

style.css:

burger.html:

New things about <link>:

• rel: Relation. What relationship the linked file has to the document. The file with .css extension are called stylesheets, and hence we keep rel=“stylesheet” (BTW, full form of CSS is Cascading Style Sheet).
• type: Type of the linked file; it’s “text/css” for a CSS file.
• href: Hypertext Reference. Location of the linked file.
• there is no </link> at the end of link element. Some HTML elements don't require closing, these are called self-closing tags.

If only getting a Girlfriend was so easy :D

<link rel="gf" type="cute" href="girl.next.door">

Nah, that’s not gonna happen, let’s move ahead.

We’ve got our hands on practical HTML and CSS, now let’s get familiar with some terminologies.

Parts of HTML elements:

• Tag name: div, link, style, etc. These are tag names.
• Attributes: all the properties of an element that we set with “=” sign are called attributes of the element. For example: id, class. rel, type, href.
• Closing Tag: </div>,</style>,</html> — These are closing tags of the element. Remember some elements like <link> don’t need a closing tag and are called self-closing tags.

Parts of styles:

• Selector: Remember we used “.” to apply style to a class and “#” to apply style to an id? The part after the “.” or “#” and before the “{“ is called selector. Selectors define the style will be applied to which element.
• Properties: height, width, background-color, border-radius, these are all called properties.

Great, you know the basics of HTML and CSS now. We need to cover one last thing before we close.

Did you notice what your “tab” reads in the browser when you open your html file in the browser?

It will be displaying the file’s path, like this:

We can change this by using “title” tag. Simply write <title>HTML Burger</title> inside the <head> section and reload the page to see the difference.

With this, we are done for the day my friends.

Congratulations, you are a HTML Burger Maker now!

A Quick recap of what we learned:

Concepts:

• Structure of an HTML document
• How to write elements in HTML (<div></div>)
• Concept if “id” and “class” of an element
• How to give id and class to an element
• How to write styles inside the element using style=“…” (this is called inline styling, avoid this as much as you can)
• How to write styles of an element inside <style>…</style> (this is called embedded styling)
• How to write styles in a separate file and link to it in HTML using <link> (this is called linked stylesheet)
• What is tag name, attribute and closing tag
• Class (.) and id (#) selectors in CSS

We covered following HTML Tags:

• <div>
• <html>
• <head>
• <body>
• <title>
• <link>
• <style>

We used following CSS Properties:

• width
• height
• background-color
• border-radius
• text-align

Subscribe at supersarkar.com for more fun Programming lessons.

Thanks for reading! :)