Scribd
Upload
13 views

Tutorial 1

Uploaded by

poolshane77
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
13 views

Tutorial 1

Uploaded by

poolshane77
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

Tutorial 1: How to Create a Simple Website with HTML and CSS

Introduction

Creating a website is a great way to showcase your work, share your thoughts, or build an
online presence. In this tutorial, we will create a simple website using HTML and CSS.

Step-by-Step Guide

1. Set Up Your Environment


o Install a text editor like Visual Studio Code or Sublime Text.
o Create a new folder for your project and open it in your text editor.
2. Create the HTML File
o Create a new file named index.html and add the following code:

html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Simple Website</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Welcome to My Website</h1>
</header>
<main>
<section>
<h2>About Me</h2>
<p>This is a brief introduction about me.</p>
</section>
<section>
<h2>My Projects</h2>
<p>Here are some of my recent projects.</p>
</section>
</main>
<footer>
<p>&copy; 2024 My Website</p>
</footer>
</body>
</html>

3. Create the CSS File


o Create a new file named styles.css in the same folder and add the following
code:

css
Copy code
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f0f0f0;
}

header {
background-color: #333;
color: #fff;
padding: 1rem;
text-align: center;
}

main {
padding: 2rem;
}

section {
margin-bottom: 2rem;
}

footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 1rem;
position: absolute;
bottom: 0;
width: 100%;
}

4. Open Your Website


o Open the index.html file in your web browser to see your simple website.
5. Customize Your Website
o Modify the HTML and CSS to add your own content and style.

You might also like