Introduction: Designing a Simple Webpage Using HTML and CSS

In this guide, I will take you through the process of building a basic webpage from scratch and teach you some of the fundamentals of HTML (Hypertext Markup Language) and CSS (Cascading Style Sheets) – the building blocks of web design. Whether you're a complete beginner or looking to refresh your web development skills, this tutorial will help you get started!

Before we start coding, you'll need to create a folder to put all your webpage files in. Placing related files, such as HTML, CSS, and images in the same folder makes it easier to locate and manage them. This tutorial will be using CotEditor on Mac, as the software is super user-friendly for beginners. You can download this text editor free on the App Store.

Supplies

  • Text editor (Notepad ++ recommended for Windows and CotEditor recommended for Mac)
  • Google Chrome
  • Firefox

Step 1: Creating the HTML File

The first step to creating a webpage is building the HTML for it. Open a new document in your text editor and save it as "index.html". It's best to only use lowercase letters, numbers, and underscores for filenames in web design.

Now we must first declare the document type and set the document language to English:

<!DOCTYPE html>

<html lang="en">

You can also add a comment containing your name, date, and the filename using the opening <!-- and closing --> characters. Comments are not displayed on the webpage but are used to provide additional information about your HTML source code for anyone who reads it.

Step 2: Creating the Head Section

To create a head element, we have to use a head tag <head></head>. All elements must have an opening and closing tag, with the closing tag including a "/" before the element type. The head section contains information about our HTML document such as the metadata and the type of character encoding. The first line in the head section should be the <meta charset="utf-8"> element. The head section is also where you specify the title of your webpage using a title tag <title></title> . Insert your title inside the tag. Your title will appear in the browser's title bar or tab. In this case, my title will be "Max's Webpage".

Next, within the head section, we must link our HTML document to the CSS style sheet using the <link href="styles.css" rel="stylesheet"> element, which we will use to style our webpage. The 'rel' attribute indicates to the browser that the linked file contains styles that should be applied to the HTML content. Once this is done, we can move on to the body content of our webpage.

Step 3: Creating the Body Content

To add some body content to our webpage, we'll start by using a body tag <body></body>. Within the body element, we will add our header text using an h1 tag <h1></h1>. Inside this tag, type your header. In this case, the header is "My Best Friend Max". Headings come in six levels in HTML with <h1> having the highest importance and biggest font size and <h6> the lowest importance and smallest font size.

Next, we will add standard paragraph text using a p tag <p></p>. You can use this tag to put some information about yourself, general information you would like to share, or anything else text related. For this example, we're just going to include a simple sentence inside our p tag that says, "This is my puppy <i>Max</i>. He's a purebred <b>Golden Retriever</b>, and he's two months old. Max is super energetic and loves to play fetch." The <i> tag is used to italicize text, and the <b> tag is used to bold text.

Step 4: Adding an Image

Now we're going to add an image to our webpage. PNG is typically the format used for images in HTML for quality purposes. For this project, I'll be using an image of a Golden Retriever puppy. You can find this picture on Google at https://images.app.goo.gl/Htdv3tyykECcNwNd9. Be sure to save the image as "puppy_max.png" and upload it to the folder containing your HTML file. Once you download the image, go back to your index.html file in your text editor and add the following line under the p tag in the body element:

<img src="puppy_max.png" alt="max" class="puppy">

This will embed the image into your webpage. We added a class of “puppy”, which we will use to style the image later in the CSS file. Make sure to save your index.html file to view the updates on the webpage.

Step 5: Creating the CSS File

Open a new document in your text editor and save it as "styles.css" in the same folder as your HTML file and image. Start by declaring the character encoding of the CSS file by typing the line, @charset "utf-8";

Similar to what we did in our HTML document, we're going to make a comment with our name, date, and filename using an opening /* and closing */ characters. Simply copy the same information from your index.html file and paste it into the CSS document.

Step 6: Styling the Body Element

Now we can start styling the body content of our webpage. To style elements in CSS, you must use opening and closing curly braces { } after typing the element tag, and each property you define within the braces must end with a semicolon. The semicolon at the end of every property is extremely important. Without it, your styles will be incomplete and won't display on your webpage. So each element style should look something like this for example:

body {

font-size: 10px;

}

We're going to add the following styles to our body element:

  • Set the background color of the webpage to a light shade of yellow with the hex code #FFFFB8 using the "background-color: #FFFFB8;" property (If you want to use another specific color, simply copy and paste the color's hex code into the property).
  • Set the font style to Garamond using the "font-family: Garamond, serif;" property. (You can find different font styles at https://www.w3schools.com/css/css_font.asp). To enter font styles in CSS, always start with the font name in quotations followed by the generic font family, using a comma to separate the two.
  • Center the text content horizontally in the webpage using the "text-align: center;" property.
  • Center the body element horizontally & vertically in the webpage using the "margin: auto;" property.

Step 7: Styling the Header & Paragraph Elements

To style our h1 element, we're simply going to set the text color to brown using the "color: brown;"property.

Next, we'll style our paragraph element by setting the text color to a dark green color using the "color: #014421;" property and the font size to 20 pixels using the "font-size: 20px;" property.

Step 8: Styling the Image

The last step is to style our image. We're going to set the image's width to 60% using the "width: 60%;" property and add a solid brown border around the image that is 8 pixels wide using the "border: 8px solid brown;" property.

Step 9: Validating Your HTML & CSS Files

It's very important to always validate any HTML and CSS files used to design your web pages. Validation helps you identify and fix errors or issues in your code. This includes syntax errors, missing or incorrect tags, attributes, or values. By resolving these issues, you ensure that your web pages work correctly and consistently across different browsers and devices.

To validate your HTML file, go to https://validator.w3.org/ To validate your CSS file, go to https://validator.w3.org/. For both sites, use the "validate by file upload" option, upload your file, and then click the "check" button.

A green message means everything validated correctly. A yellow/warning message means everything validated, but there could be additional elements that may cause issues (but not likely).

A red/error message means something went wrong and tells you the line number containing the error. If you need help fixing an error in your coding, just copy and paste the error message into Google, and you'll find results on what it means and how to fix it.

Step 10: Congratulations!

Congratulations on completing this step-by-step guide to creating and designing a simple webpage using HTML and CSS! You've taken a significant step in your web design journey, and you now have the skills to craft your own web content. Whether it's a personal blog, a professional portfolio, or anything else you can imagine, your newfound knowledge will help you bring your ideas to life on the web. Thank you for choosing this guide, and I wish you the best of luck in all your web development endeavors.