 |
*Introduction:*
Welcome to this comprehensive guide on creating your first HTML project! HTML (HyperText Markup Language) is the standard markup language used to create web pages. In this tutorial, we'll take you through a step-by-step process of building a simple HTML project from scratch.
*Project Overview:*
Our project will be a basic personal profile page that includes:
- A header with a profile picture and name
- An about section with a brief bio and interests
- A skills section with a list of technical skills
- An experience section with a summary of work or educational experience
- A contact section with a contact form and social media links
*Step 1: Set Up Your Project Files*
1. Create a new folder for your project and name it (e.g., "personal-profile").
2. Inside the folder, create the following files:
- `index.html` (our main HTML file)
- `styles.css` (our CSS file for styling)
- `script.js` (our JavaScript file for interactivity)
*Step 2: Write Your HTML Code*
In your `index.html` file, add the following code:
<!DOCTYPE html>
<html>
<head>
<title>Personal Profile</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Header -->
<header>
<!-- Profile picture and name -->
<img src="profile-picture.jpg" alt="Your Name" class="profile-picture">
<h1>Your Name</h1>
</header>
<!-- About -->
<section id="about">
<!-- Bio and interests -->
<h2>About Me</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet nulla auctor, vestibulum magna sed, convallis ex.</p>
<ul>
<li>Interest 1</li>
<li>Interest 2</li>
<li>Interest 3</li>
</ul>
</section>
<!-- Skills -->
<section id="skills">
<!-- Technical skills -->
<h2>Technical Skills</h2>
<ul>
<li>HTML5</li>
<li>CSS3</li>
<li>JavaScript</li>
</ul>
</section>
<!-- Experience -->
<section id="experience">
<!-- Work experience -->
<h2>Work Experience</h2>
<ul>
<li>
<h3>Job Title, Company Name</h3>
<p>Employment Dates</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet nulla auctor, vestibulum magna sed, convallis ex.</p>
</li>
</ul>
</section>
<!-- Contact -->
<section id="contact">
<!-- Contact form -->
<h2>Get in Touch</h2>
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>
<label for="message">Message:</label>
<textarea id="message" name="message"></textarea><br><br>
<input type="submit" value="Send">
</form>
<!-- Social media links -->
<h3>Follow Me</h3>
<ul>
<li><a href="#" target="_blank">Twitter</a></li>
<li><a href="#" target="_blank">LinkedIn</a></li>
<li><a href="#" target="_blank">GitHub</a></li>
</ul>
</section>
<script src="script.js"></script>
</body>
</html>
*Step 3: Add CSS Styles*
In your `styles.css` file, add the following code:
```
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
header img {
border-radius: 50%;
width: 100px;
height: 100px;
margin: 20px;
}
section {
padding: 20px;
}
h1, h2, h3 {
margin-top: 0;
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
li {
margin-bottom: 10px;
}
a { y
text-decoration: none;
color: #337ab7;
}
a:hover {
color: #23527c
Good
ReplyDelete