Let's create a simple web page for an "HTML Developer Profile" website. This hands-on exercise will guide you through creating a basic HTML structure, adding some styling with CSS, and enhancing the page with a bit of content.
Exercise Overview
The goal is to build a single-page profile for an HTML developer. The page will include sections like a header, a brief introduction, skills, projects, and contact information.
Step-by-Step Guide
1. Create the HTML Structure
First, let's set up the basic HTML structure for our profile page.
HTML File (index.html)
html code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Developer Profile</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>John Doe</h1>
<p>HTML Developer</p>
</header>
<nav>
<ul>
<li><a href="#about">About</a></li>
<li><a href="#skills">Skills</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
<main>
<section id="about">
<h2>About Me</h2>
<p>Hello! I'm John Doe, an experienced HTML developer with a passion for creating responsive and user-friendly web pages. I have a strong foundation in web design and enjoy bringing ideas to life through code.</p>
</section>
<section id="skills">
<h2>Skills</h2>
<ul>
<li>HTML5</li>
<li>CSS3</li>
<li>JavaScript</li>
<li>Responsive Design</li>
<li>Web Accessibility</li>
</ul>
</section>
<section id="projects">
<h2>Projects</h2>
<ul>
<li><a href="#">Project One</a></li>
<li><a href="#">Project Two</a></li>
<li><a href="#">Project Three</a></li>
</ul>
</section>
<section id="contact">
<h2>Contact</h2>
<p>Email: johndoe@example.com</p>
<p>LinkedIn: <a href="#">linkedin.com/in/johndoe</a></p>
</section>
</main>
<footer>
<p>© 2024 John Doe. All rights reserved.</p>
</footer>
</body>
</html>
2. Add CSS Styling
Next, let's add some styling to enhance the appearance of our page.
CSS File (styles.css)
css code/* Reset default margin and padding */
body, h1, h2, p, ul {
margin: 0;
padding: 0;
}
/* Set base font styles */
body {
font-family: Arial, sans-serif;
line-height: 1.6;
background-color: #f4f4f9;
color: #333;
}
/* Style the header */
header {
background-color: #333;
color: #fff;
text-align: center;
padding: 20px 0;
}
header h1 {
margin-bottom: 10px;
}
header p {
font-size: 20px;
}
/* Style the navigation menu */
nav {
background-color: #444;
text-align: center;
padding: 10px 0;
}
nav ul {
list-style: none;
display: inline-block;
}
nav ul li {
display: inline;
margin: 0 15px;
}
nav ul li a {
color: #fff;
text-decoration: none;
font-weight: bold;
}
nav ul li a:hover {
color: #ff6347;
}
/* Style the main content */
main {
padding: 20px;
max-width: 800px;
margin: 0 auto;
}
section {
margin-bottom: 40px;
}
section h2 {
color: #333;
margin-bottom: 10px;
border-bottom: 2px solid #ff6347;
display: inline-block;
padding-bottom: 5px;
}
section p, section ul {
margin-bottom: 20px;
}
section ul {
list-style: disc;
margin-left: 20px;
}
section ul li {
margin-bottom: 10px;
}
/* Style the footer */
footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 10px 0;
position: fixed;
bottom: 0;
width: 100%;
}
Explanation of the Styles
- Reset Styles: Reset default margin and padding for consistency across browsers.
- Base Styles: Set font family and line height, and choose a background color for the page.
- Header: Style the header with a dark background and center-align the text.
- Navigation: Create a horizontal navigation bar with hover effects on links.
- Main Content: Center the main content and style headings and lists for readability.
- Footer: Fix the footer to the bottom of the page with consistent styling.
Instructions
Set Up Your Environment: Create a new project folder and save the HTML and CSS files in it.
Open in a Browser: Open the
index.htmlfile in your web browser to see the styled profile page.Experiment with Styles: Try changing colors, fonts, or adding more content to customize the page further.
Conclusion
This exercise demonstrates how to create a simple web page using HTML and CSS, focusing on structuring content and applying basic styles. By experimenting with different styles and layouts, you can develop your skills in web design and build more complex and visually appealing websites. Feel free to explore additional CSS properties and techniques to enhance your designs!
No comments:
Post a Comment