Common Page Templates - johnverz22/webdev1-lessons GitHub Wiki
When designing websites, using common templates can save time and ensure a consistent user experience. Below are some widely used templates for different types of web pages, along with their structure and purpose.
The homepage is the first impression of a website. It should be visually appealing and guide users to key sections.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Homepage</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Welcome to Our Website</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section class="hero">
<h2>Your Catchy Headline Here</h2>
<p>A brief description of what your site offers.</p>
<a href="#" class="cta-button">Get Started</a>
</section>
<section class="features">
<div class="feature">
<h3>Feature One</h3>
<p>Description of the first feature.</p>
</div>
<div class="feature">
<h3>Feature Two</h3>
<p>Description of the second feature.</p>
</div>
<div class="feature">
<h3>Feature Three</h3>
<p>Description of the third feature.</p>
</div>
</section>
</main>
<footer>
<p>© 2023 Your Company</p>
</footer>
</body>
</html>The "About Us" page provides information about the company, team, or mission.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About Us</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>About Us</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
</ul>
</nav>
</header>
<main>
<section class="mission">
<h2>Our Mission</h2>
<p>We aim to provide the best solutions for our customers.</p>
</section>
<section class="team">
<h2>Meet the Team</h2>
<div class="team-member">
<img src="team1.jpg" alt="Team Member 1">
<h3>John Doe</h3>
<p>CEO</p>
</div>
<div class="team-member">
<img src="team2.jpg" alt="Team Member 2">
<h3>Jane Smith</h3>
<p>CTO</p>
</div>
</section>
</main>
<footer>
<p>© 2023 Your Company</p>
</footer>
</body>
</html>A blog post page is used to display articles or news updates.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blog Post Title</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Blog Post Title</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>Introduction</h2>
<p>This is the introduction to the blog post.</p>
<h2>Main Content</h2>
<p>This is the main content of the blog post.</p>
<h2>Conclusion</h2>
<p>This is the conclusion of the blog post.</p>
</article>
<aside>
<h3>Related Posts</h3>
<ul>
<li><a href="#">Related Post 1</a></li>
<li><a href="#">Related Post 2</a></li>
</ul>
</aside>
</main>
<footer>
<p>© 2023 Your Company</p>
</footer>
</body>
</html>The "Contact Us" page allows users to get in touch with the company.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact Us</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Contact Us</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section class="contact-form">
<h2>Get in Touch</h2>
<form action="#" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="message">Message:</label>
<textarea id="message" name="message" rows="5" required></textarea>
<button type="submit">Send Message</button>
</form>
</section>
<section class="contact-info">
<h2>Our Office</h2>
<p>123 Main Street, City, Country</p>
<p>Email: [email protected]</p>
<p>Phone: +123 456 7890</p>
</section>
</main>
<footer>
<p>© 2023 Your Company</p>
</footer>
</body>
</html>This template is used to showcase products or services.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Product/Service Name</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Product/Service Name</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section class="product-details">
<img src="product.jpg" alt="Product Image">
<h2>Product/Service Description</h2>
<p>Detailed description of the product or service.</p>
<p>Price: $XX.XX</p>
<button>Add to Cart</button>
</section>
<section class="reviews">
<h2>Customer Reviews</h2>
<div class="review">
<h3>John Doe</h3>
<p>Great product! Highly recommend.</p>
</div>
<div class="review">
<h3>Jane Smith</h3>
<p>Excellent service and fast delivery.</p>
</div>
</section>
</main>
<footer>
<p>© 2023 Your Company</p>
</footer>
</body>
</html>The FAQ page answers common questions from users.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FAQ</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Frequently Asked Questions</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section class="faq">
<h2>General Questions</h2>
<details>
<summary>What is your return policy?</summary>
<p>Our return policy lasts 30 days. Please contact us for more details.</p>
</details>
<details>
<summary>How do I track my order?</summary>
<p>You can track your order using the tracking number provided in your confirmation email.</p>
</details>
</section>
</main>
<footer>
<p>© 2023 Your Company</p>
</footer>
</body>
</html>These templates provide a starting point for common web pages. Customize them to fit your brand and content needs. By following best practices for information architecture and design, you can create user-friendly and visually appealing websites.