CSS Empowerment: Elevate Web Development
Explore the comprehensive guide to crafting a straightforward 5-page website using CSS. This tutorial provides clear, step-by-step instructions that provide you the help you need to complete your CSS assignment, equipping you with the skills to create impressive and functional websites. Whether you're a beginner or looking to enhance your web development expertise, this guide is your pathway to success.
Step 1: Set Up the Project Structure
- Begin by creating a new folder named "simple-website" on your computer.
- Inside the "simple-website" folder, create two subfolders: "css" and "images".
- Store any images you plan to use in the "images" folder.
Step 2: Create the HTML Template
Inside the "simple-website" folder, create a new HTML file named `index.html` and input the provided code:
```html
< !DOCTYPE html >
< html lang="en" >
< head >
< meta charset="UTF-8" >
< meta name="viewport" content="width=device-width, initial-scale=1.0" >
< link rel="stylesheet" href="css/styles.css" >
< title >Home | Programming Homework Help< /title >
< /head >
< body >
< header >
< h1 >Programming Homework Help< /h1 >
< /header >
< nav >
< ul >
< li >< a href="index.html" >Home< /a >< /li >
< li >< a href="about.html" >About< /a >< /li >
< li >< a href="services.html" >Services< /a >< /li >
< li >< a href="portfolio.html" >Portfolio< /a >< /li >
< li >< a href="contact.html" >Contact< /a >< /li >
< /ul >
< /nav >
< main >
< section >
< h2 >Welcome to Programming Homework Help< /h2 >
< p >Your go-to source for programming assistance.< /p >
< /section >
< /main >
< footer >
< p >© 2023 Programming Homework Help. All rights reserved.< /p >
< /footer >
< /body >
< /html >
```
Repeat this process for the remaining pages: "about.html", "services.html", "portfolio.html", and "contact.html".
Step 3: Create the CSS Styles
Within the "css" folder, create a file named `styles.css` and include the following CSS code:
```css
/* Reset default margin and padding */
body, h1, h2, h3, p {
margin: 0;
padding: 0;
}
/* Global styles */
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
}
header {
background-color: #333;
color: white;
text-align: center;
padding: 1rem;
}
nav {
background-color: #444;
color: white;
text-align: center;
padding: 0.5rem;
}
nav ul {
list-style: none;
}
nav ul li {
display: inline;
margin: 0 10px;
}
nav a {
text-decoration: none;
color: white;
}
main {
padding: 1rem;
}
section {
background-color: white;
padding: 1rem;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
footer {
background-color: #333;
color: white;
text-align: center;
padding: 0.5rem;
}
```
Step 4: Customize Each Page
For each page (index.html, about.html, services.html, portfolio.html, and contact.html):
- Duplicate the HTML template from Step 2 into the respective HTML file.
- Personalize the page title, header text, and main content to match the content of each page.
- Update the navigation links in the `<nav>` section to point to the appropriate HTML files.
Step 5: Upload to Web Server
Upload the "simple-website" folder, including the HTML files, the "css" folder, and the "images" folder, to your web server or hosting platform. Ensure the folder structure remains consistent.
Conclusion
In conclusion, by following this comprehensive guide, you've learned how to create a simple 5-page website using HTML and CSS. Through step-by-step instructions, you've gained insights into project structuring, styling, and navigation, enabling you to build a cohesive and user-friendly website. Armed with these fundamental skills, you're well-equipped to continue exploring the exciting world of web development and crafting engaging online experiences.