CourtSantos

Just another WordPress site

You are here: Home / Web Design & Development / Build a Simple HTML 5 Responsive Web Template

Build a Simple HTML 5 Responsive Web Template

by

Here’s a simple, fully responsive HTML5 one-page template.

It includes a basic layout with sections for a header, about, services, portfolio, and contact information, along with basic CSS for styling and responsive behavior.

We’ll start with a simple explanation of HTML and CSS before we dive into each section.

Introduction: Understanding HTML and CSS

  • HTML (HyperText Markup Language): This is the structure of your web page. Think of it as the blueprint that organizes and arranges text, images, and sections on your webpage.
  • CSS (Cascading Style Sheets): This is the styling language that makes your webpage look beautiful. CSS is like the interior design, adding colors, sizes, spaces, and making the page responsive (which means it looks good on both big screens and small screens).

Step 1: Creating the HTML Structure (index.html)

Let’s start by creating the basic HTML file. This will include all the sections we want on our webpage.

  1. Open a text editor: You can use Notepad (on Windows) or TextEdit (on Mac), though a specialized editor like VS Code will make things easier with color coding.
  2. Create a new file and save it as index.html.

Here’s the code, followed by an explanation of each part.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>One Page Template</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>

    <!-- Header Section -->
    <header id="header">
        <div class="container">
            <h1>Welcome to My Website</h1>
            <p>Your short description goes here</p>
            <a href="#about" class="btn">Learn More</a>
        </div>
    </header>

    <!-- About Section -->
    <section id="about">
        <div class="container">
            <h2>About Me</h2>
            <p>Brief information about you or your company.</p>
        </div>
    </section>

    <!-- Services Section -->
    <section id="services">
        <div class="container">
            <h2>Our Services</h2>
            <div class="service-box">
                <h3>Service 1</h3>
                <p>Description of service 1.</p>
            </div>
            <div class="service-box">
                <h3>Service 2</h3>
                <p>Description of service 2.</p>
            </div>
            <div class="service-box">
                <h3>Service 3</h3>
                <p>Description of service 3.</p>
            </div>
        </div>
    </section>

    <!-- Portfolio Section -->
    <section id="portfolio">
        <div class="container">
            <h2>Portfolio</h2>
            <div class="portfolio-item">Project 1</div>
            <div class="portfolio-item">Project 2</div>
            <div class="portfolio-item">Project 3</div>
        </div>
    </section>

    <!-- Contact Section -->
    <section id="contact">
        <div class="container">
            <h2>Contact Us</h2>
            <p>Email: example@example.com</p>
            <p>Phone: 123-456-7890</p>
        </div>
    </section>

</body>
</html>

Explanation of HTML Structure

  1. DOCTYPE and <html> Tags: The line <!DOCTYPE html> tells the browser that this is an HTML5 document. The <html> tag contains all of the content for the webpage.
  2. <head> Section:
    • This section doesn’t display anything directly on the page but contains important settings.
    • <meta charset="UTF-8">: This ensures the page supports different characters, including symbols and languages.
    • <meta name="viewport" content="width=device-width, initial-scale=1.0">: This makes the webpage responsive (adjusting automatically for different devices).
    • <title>One Page Template</title>: The text in the browser’s tab.
    • <link rel="stylesheet" href="styles.css">: This connects the CSS file (styles.css) to style the HTML.
  3. <body> Section:
    • The <body> tag holds all content that will show up on your webpage.
    • Inside it, each section (header, about, services, etc.) contains a unique part of the page.

Step 2: Styling with CSS (styles.css)

Now let’s create the styles.css file to add color, alignment, and more styling details. Save this file in the same location as index.html.

/* Basic Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    color: #333;
}

/* Header Section */
header {
    background: #0073e6;
    color: white;
    padding: 100px 0;
    text-align: center;
}

header h1 {
    font-size: 2.5em;
}

header p {
    margin: 20px 0;
}

header .btn {
    padding: 10px 20px;
    background: white;
    color: #0073e6;
    border: none;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
}

/* Container */
.container {
    width: 90%;
    max-width: 1200px;
    margin: auto;
}

/* Section Styling */
section {
    padding: 60px 0;
    text-align: center;
}

section h2 {
    margin-bottom: 30px;
}

/* Services Section */
#services .service-box {
    background: #f4f4f4;
    margin: 15px 0;
    padding: 20px;
    border-radius: 5px;
}

/* Portfolio Section */
#portfolio .portfolio-item {
    background: #f4f4f4;
    padding: 40px;
    margin: 15px 0;
    border-radius: 5px;
}

/* Contact Section */
#contact p {
    margin: 10px 0;
}

/* Responsive Styling */
@media (min-width: 768px) {
    #services {
        display: flex;
        justify-content: space-between;
    }
    #services .service-box {
        width: 30%;
    }
    #portfolio {
        display: flex;
        justify-content: space-between;
    }
    #portfolio .portfolio-item {
        width: 30%;
    }
}

Explanation of CSS Rules

  1. Basic Reset (*):
    • margin: 0; padding: 0;: Removes all default spacing, so the elements will follow only our specific rules.
    • box-sizing: border-box;: Makes sure padding and borders are counted in an element’s size.
  2. Body Styling (body):
    • font-family: Arial, sans-serif;: Sets the font type.
    • line-height: 1.6;: Makes text spacing easier to read.
    • color: #333;: Sets text color to dark gray.
  3. Header Styling:
    • background: #0073e6;: Sets a blue background.
    • padding: 100px 0;: Adds spacing above and below.
    • .btn: Styles the button with padding, background, and color.
  4. Container (.container):
    • width: 90%; max-width: 1200px;: Adjusts the content width for readability on any screen size.
    • margin: auto;: Centers content.
  5. Section Styling:
    • padding: 60px 0;: Adds space around each section.
    • text-align: center;: Centers all text.
  6. Responsive Styling:
    • @media (min-width: 768px): When the screen is 768 pixels wide or more, this styling kicks in.
    • display: flex; justify-content: space-between;: Lines up services or portfolio items side-by-side with even spacing on wider screens.

And that’s it! Your one-page template is now styled and responsive. Feel free to modify text, colors, and sections as needed. This should be a great starting point for exploring and creating web pages!

You can visit my GitHub page to see a live demo of this sample web template.