Brian Design Watch on YouTube

HTML CSS and Javascript Website Design Tutorial - Beginner Project Fully Responsive

3 min read 1 year ago

Published on Aug 29, 2024 This response is partially generated with the help of AI. It may contain inaccuracies.

Table of Contents

Introduction

In this tutorial, you will learn how to create a fully responsive website using HTML, CSS, and JavaScript. This beginner project will guide you through setting up your project files, building a navigation bar, designing a hero section, and more. By the end, you'll have a functional website that you can customize and expand upon.

Step 1: Create Project Files

Create a new folder for your project.
Inside this folder, create the following files:
- index.html
- styles.css
- script.js
Additionally, create a folder named images to store any images you will use.

Step 2: Add Navbar Code

Open index.html and insert the following code to create a basic navigation bar:

<nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>

Step 3: Style the Navbar

Open styles.css to add styling for your navigation bar:

nav {
    background-color: #333;
}

nav ul {
    list-style-type: none;
}

nav ul li {
    display: inline;
}

nav ul li a {
    color: white;
    padding: 14px 20px;
    text-decoration: none;
}

Step 4: Add Font Awesome Icons

Include Font Awesome for icons by adding the following line in the <head> section of your index.html:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

Step 5: Create Hero Section

In index.html, add the following code after the navbar to create a hero section:

<section class="hero">
    <h1>Welcome to Our Website</h1>
    <p>Your success starts here</p>
</section>

Step 6: Style the Hero Section

In styles.css, add styles for the hero section:

.hero {
    background-image: url('path-to-your-hero-image.jpg');
    height: 400px;
    color: white;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

Step 7: Add Google Fonts

Choose a Google Font and link it in your index.html:

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap" rel="stylesheet">

Update your styles.css to use this font:

body {
    font-family: 'Roboto', sans-serif;
}

Step 8: Create Services Section

Add a services section in index.html:

<section class="services">
    <h2>Our Services</h2>
    <div class="service-item">Service 1</div>
    <div class="service-item">Service 2</div>
    <div class="service-item">Service 3</div>
</section>

Step 9: Style the Services Section

Add styles for the services section in styles.css:

.services {
    display: flex;
    justify-content: space-around;
    padding: 20px;
}

Step 10: Add Footer Section

Add a footer at the bottom of your index.html:

<footer>
    <p>&copy; 2023 Your Website. All rights reserved.</p>
</footer>

Step 11: Style the Footer

Style the footer in styles.css:

footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 10px 0;
}

Step 12: Link to Another Page

To create navigation to another page, make sure to create an about.html file and link it in your navbar:

<li><a href="about.html">About</a></li>

Conclusion

You've successfully built a responsive website using HTML, CSS, and JavaScript. You can now add more functionality and customize the design to make it truly yours. Consider exploring hosting options to make your website live, or dive into more advanced topics such as JavaScript interactivity and responsive design techniques. Happy coding!

Table of Contents

Recent