Have you ever wondered how websites are made? How do they look so nice and work so well? In this post, I will show you how to bake a website using HTML and CSS, two of the most essential ingredients for web development.

By the end of this post, you will learn how to create a simple and beautiful website using HTML and CSS, and you will also learn some useful tools and resources to help you along the way. Let’s get started.

HTML and CSS

HTML stands for HyperText Markup Language, and it is like the ingredients and the recipe for your website. It tells the browser what content to display and how to structure it. CSS stands for Cascading Style Sheets, and it is like the decoration and the presentation for your website. It tells the browser how to style and layout the content.

Step 1: Gather Your Ingredients

Before you can start baking your website, you need to gather some tools and resources that will help you create and host your website. Here are some of the things you will need:

If you need more help with setting up your web server, domain name, and text editor, you can check out some of these tutorials and guides:

Step 2: Follow the Recipe

Create HTML and CSS files

Now that you have your tools and resources ready, you can start writing the code for your website. The first thing you need to do is to create a folder on your computer where you will store your website files. You can name it anything you like, such as “my-website” or “baking-website”.

Inside this folder, you need to create two files: one for your HTML code, and one for your CSS code. You can name them anything you like, but I suggest using “index.html” for your HTML file, and “style.css” for your CSS file. These are the standard names for the main HTML and CSS files of a website.

To create these files, you can use your text editor and save them with the appropriate extensions (.html and .css) in your website folder. Alternatively, you can use your file explorer and right-click on your website folder, then select “New” and “Text Document”. Then, you can rename the file with the appropriate name and extension.

Write HTML code

Once you have created these files, you can start writing your HTML code. HTML code consists of elements and attributes that define the content and structure of your website. Elements are enclosed by angle brackets (< and >), and they usually come in pairs: a start tag and an end tag. For example, <p> and </p> are the start and end tags for a paragraph element.

Attributes are additional information that modify the elements, and they are written inside the start tag. For example, <p class="intro"> is a paragraph element with a class attribute that has a value of “intro”.

The basic structure of an HTML document looks like this:

<!DOCTYPE html>
<html>
<head>
  <!-- This is where you put the information about your website, such as the title, the character encoding, and the link to your CSS file -->
</head>
<body>
  <!-- This is where you put the content of your website, such as the headings, the paragraphs, the images, and the links -->
</body>
</html>

The first line, <!DOCTYPE html>, tells the browser that this is an HTML document. The <html> and </html> tags enclose the entire HTML code. The <head> and </head> tags enclose the information about your website, such as the title, the character encoding, and the link to your CSS file. The <body> and </body> tags enclose the content of your website, such as the headings, the paragraphs, the images, and the links.

HTML elements and attributes

Here are some of the main HTML elements and attributes that you can use to create your website content:

<h1> to <h6> These are the heading elements, and they are used to create titles and subtitles for your website. The numbers indicate the level of importance, with <h1> being the most important and <h6> being the least important. For example, this is the main title of this blog post. <h1>How to Bake a Website Using HTML and CSS</h1>

<p> This is the paragraph element, and it is used to create blocks of text for your website. For example, this is a paragraph of text. <p>This is a paragraph.</p>

<img> This is the image element, and it is used to display images on your website. Unlike other elements, this element does not have an end tag. Instead, it has a self-closing tag that ends with a slash (/).

This element has two mandatory attributes: src and alt. The src attribute specifies the source of the image, which can be a URL or a file name. The alt attribute specifies the alternative text for the image, which is displayed when the image cannot be loaded or accessed.

For example, this is an image element that displays a cake image.

<img src="cake.jpg" alt="A delicious cake">

<a> This is the anchor element, and it is used to create links on your website. This element has a mandatory attribute href. The href attribute specifies the destination of the link, which can be a URL or a file name.

For example, this is an anchor element that creates a link to Bing.

<a href="https://www.bing.com/">This is a link to Bing</a>

Here is an example of the HTML code:

<!DOCTYPE html>
<html>
<head>
  <title>How to Bake a Website Using HTML and CSS</title>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>How to Bake a Website Using HTML and CSS</h1>
  <p>Have you ever wondered how websites are made? How do they look so nice and work so well? Well, in this blog post, I will show you how to bake a website using HTML and CSS, two of the most essential ingredients for web development.</p>
  <img src="baking-website.jpg" alt="A website with a baking theme">
  <p>HTML stands for HyperText Markup Language, and it is like the ingredients and the recipe for your website. It tells the browser what content to display and how to structure it. CSS stands for Cascading Style Sheets, and it is like the decoration and the presentation for your website. It tells the browser how to style and layout the content.</p>
  <p>By the end of this post, you will learn how to create a simple and beautiful website using HTML and CSS, and you will also learn some useful tools and resources to help you along the way. Let's get started!</p>
  <a href="#step1">Step 1: Gather Your Ingredients</a>
  <a href="#step2">Step 2: Follow the Recipe</a>
  <a href="#step3">Step 3: Decorate Your Website</a>
  <a href="#step4">Step 4: Add Some Flavour</a>
</body>
</html>

Step 3: Decorate Your Website

Styling with CSS

Now that you have written your HTML code, you can start styling your website using CSS. CSS code consists of rules that define how the HTML elements should look and behave.

Each rule has two parts: a selector and a declaration. The selector specifies which HTML element(s) the rule applies to, and the declaration specifies the style properties and values for that element.

For example, p { color: blue; } is a CSS rule that applies to all paragraph elements and makes their text color blue.

To link your CSS file to your HTML file, you need to add a <link> element inside the <head> element of your HTML document. The <link> element has two mandatory attributes: rel and href.

The rel attribute specifies the relationship between the HTML document and the linked file, which in this case is “stylesheet”. The href attribute specifies the location of the linked file, which in this case is “style.css”. For example, this is a link element that connects your HTML file to your CSS file.

<link rel="stylesheet" href="style.css">

CSS properties and selectors

Here are some of the main CSS properties and selectors that you can use to style your website.

color
This property sets the color of the text for an element. You can use different values for this property, such as color names, hexadecimal codes, RGB values, or HSL values.

For example, these are all different ways to specify the color red.

color: red;
color: #FF0000;
color: rgb(255, 0, 0);
color: hsl(0, 100%, 50%);

font-family
This property sets the font of the text for an element. You can use different values for this property, such as generic names, specific names, or web fonts.

For example, these are all different ways to specify the font of the text.

font-family: serif;
font-family: Times New Roman;
font-family: 'Roboto', sans-serif;

margin
This property sets the space around an element, outside of its border. You can use different values for this property, such as pixels, percentages, or auto.

For example, these are all different ways to specify the margin of an element.

margin: 10px;
margin: 5%;
margin: auto;

.class
This is a class selector, and it selects all elements that have a specific class attribute.

For example, .intro selects all elements that have class=”intro” in their start tag. You can use this selector to style multiple elements with the same style rules, or to style specific elements that have a common characteristic.

// html
<p class="intro">Paragraph goes here</p>

// css
.intro {
    color: red;
}

#id
This is an id selector, and it selects the element that has a specific id attribute.

For example, #step1 selects the element that has id=”step1” in its start tag. You can use this selector to style a unique element with a specific style rule, or to create anchors for your links.

// html
<p id="step1">This is the first step.</p>

// css
#step1 {
    text-weight: bold;
}

Here are some examples of the CSS.

/* This is a comment in CSS */

/* This rule applies to the body element
 and sets the background color to light yellow */
body {
  background-color: #FFFFE0;
}

/* This rule applies to all heading elements
 and sets the font family to Arial,
 the font size to 32 pixels,
 and the text alignment to center */
h1, h2, h3, h4, h5, h6 {
  font-family: Arial;
  font-size: 32px;
  text-align: center;
}

/* This rule applies to all paragraph elements
 and sets the font family to Georgia,
 the font size to 18 pixels,
 and the line height to 1.5 */
p {
  font-family: Georgia;
  font-size: 18px;
  line-height: 1.5;
}

/* This rule applies to all image elements
 and sets the width to 80% of the parent element,
 the height to auto,
 and the display to block */
img {
  width: 80%;
  height: auto;
  display: block;
}

/* This rule applies to all anchor elements
 and sets the color to blue,
 the text decoration to none,
 and the display to inline-block */
a {
  color: blue;
  text-decoration: none;
  display: inline-block;
}

/* This rule applies to the element with the id of step1
 and sets the margin to 20 pixels */
#step1 {
  margin: 20px;
}

/* This rule applies to the elements with the class of intro
 and sets the font style to italic
 and the font weight to bold */
.intro {
  font-style: italic;
  font-weight: bold;
}

Step 4: Add Some Flavour

Utilize CSS framework

Now that you have styled your website using CSS, you can add some flavour to your website using Bootstrap, a popular CSS framework that makes your website more responsive and attractive.

Bootstrap is a collection of pre-made CSS rules and components that you can use to create modern and professional-looking websites.

To use Bootstrap, you need to download and include it in your project. You can either download the Bootstrap files from Bootstrap website and link them to your HTML file, or you can use a CDN (Content Delivery Network) to link to the Bootstrap files online.

For example, you can add these two <link> elements inside the <head> element of your HTML document to use Bootstrap from a CDN like this:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap-theme.min.css">

Bootstrap features

Here are some of the main Bootstrap features and components that you can use to enhance your website.

Grid system

This is a system that divides your website into 12 columns, and allows you to create responsive layouts that adapt to different screen sizes.

You can use the <div> element with the class of container to create a fixed-width container for your content, or the class of container-fluid to create a full-width container.

You can also use the <div> element with the class of row to create a horizontal group of columns, and the class of col to create a column.

You can also add modifiers to the col class to specify the size and position of the column, such as col-sm-6 or col-md-offset-3.

For example, this creates Bootstrap grid that creates two equal width columns on small screens and above.

<div class="container">
  <div class="row">
    <div class="col-sm-6">This is a column</div>
    <div class="col-sm-6">This is another column</div>
  </div>
</div>

Typography

This is a set of CSS rules that improve the appearance and readability of your text. You can use the <h1> to <h6> elements with the class of display-1 to display-4 to create large and bold headings, or the class of lead to create a large and emphasized paragraph.

For example, this uses Bootstrap typography that creates a large and bold heading, a large and emphasized paragraph, and a normal paragraph with a small and faded text and a highlighted text.

<h1 class="display-3">How to Bake a Website Using HTML and CSS</h1>

<p class="lead">This is a large and emphasized paragraph.</p>

<p>This is a normal paragraph.
  <small class="text-muted">This is a small and faded text.</small>
  <mark>This is a highlighted text.</mark>
</p>

Buttons

These are components that create clickable elements that perform an action or a navigation. You can use the <button> element with the class of btn to create a button, and add modifiers to the btn class to specify the size, color, and style of the button, such as btn-lg, btn-primary, or btn-outline-secondary.

For example, these are Bootstrap button that create a large and blue button and a small and gray button.

<button class="btn btn-lg btn-primary">This is a large and blue button</button>

<button class="btn btn-sm btn-outline-secondary">This is a small and gray button</button>

If you are interested in Bootstrap, here are some references to get started.

Things to Keep in Mind When Starting to Code

Before you dive into building your website, here are some key points to keep in mind. These aren’t strict rules, but they’re helpful coding tips that will serve you well from beginner to expert.

  1. Keep class names consistent
    • Use meaningful names to make it clear what each class is for
    • Choose names like btn-send or card-highlight that describe their purpose
  2. Write readable code
    • Use proper indentation to keep the structure clear
    • Add line breaks where needed to keep your code organized
  3. Use comments effectively
    • Add comments to complex sections or parts that may need adjustments later
    • Clear and helpful descriptions. It should be like these in HTML: <!– Main navigation –>, in CSS: /* Card component styles */
  4. Start small and check as you go
    • Instead of building everything at once, write small sections of code and check them in the browser frequently
    • Use browser developer tools to inspect layout and styles as you go

In Closing

In this post, you learned how to bake a website using HTML and CSS, two of the most essential ingredients for web development. You also learned how to use some useful tools and resources, such as Bootstrap, to make your website more responsive and attractive.

I hope you enjoyed this post and found it helpful. If you have any questions or feedback, please feel free to drop a message.