Simple Web Portfolio Template HTML, CSS, JavaScript
👤 Sharing: AI
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Portfolio</title>
<link rel="stylesheet" href="style.css">
<script src="script.js" defer></script> <!-- `defer` makes sure the script runs after the HTML is parsed -->
</head>
<body>
<!-- Header Section -->
<header>
<h1>Jane Doe</h1>
<nav>
<ul>
<li><a href="#about">About</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<!-- About Section -->
<section id="about">
<h2>About Me</h2>
<img src="profile.jpg" alt="Profile Picture" width="150">
<p>
Hi, I'm Jane Doe, a passionate web developer with a focus on creating user-friendly and visually appealing websites. I have experience with HTML, CSS, JavaScript, and various front-end frameworks. I am always eager to learn new technologies and contribute to exciting projects.
</p>
</section>
<!-- Projects Section -->
<section id="projects">
<h2>Projects</h2>
<div class="project-grid">
<div class="project">
<img src="project1.jpg" alt="Project 1" width="300">
<h3>Project 1: E-commerce Website</h3>
<p>Developed a fully functional e-commerce website using React and Node.js.</p>
<a href="#">View Project</a>
</div>
<div class="project">
<img src="project2.jpg" alt="Project 2" width="300">
<h3>Project 2: Portfolio Website</h3>
<p>Designed and built a responsive portfolio website using HTML, CSS, and JavaScript.</p>
<a href="#">View Project</a>
</div>
<div class="project">
<img src="project3.jpg" alt="Project 3" width="300">
<h3>Project 3: Mobile App Landing Page</h3>
<p>Created a modern landing page for a mobile application using Bootstrap.</p>
<a href="#">View Project</a>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact">
<h2>Contact Me</h2>
<form id="contactForm">
<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="4" required></textarea>
<button type="submit">Send Message</button>
<p id="form-message"></p>
</form>
</section>
<!-- Footer -->
<footer>
<p>© 2024 Jane Doe. All rights reserved.</p>
</footer>
</body>
</html>
```
```css
/* style.css */
body {
font-family: sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
color: #333;
}
header {
background-color: #333;
color: #fff;
padding: 1em 0;
text-align: center;
}
header h1 {
margin: 0;
}
nav ul {
padding: 0;
list-style: none;
}
nav ul li {
display: inline;
margin: 0 1em;
}
nav a {
color: #fff;
text-decoration: none;
}
section {
padding: 2em;
margin: 1em;
background-color: #fff;
border-radius: 5px;
}
section h2 {
border-bottom: 2px solid #333;
padding-bottom: 0.5em;
}
#about img {
border-radius: 50%; /* Make profile pic circular */
margin-bottom: 1em;
}
.project-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Responsive columns */
gap: 1em;
}
.project {
border: 1px solid #ddd;
padding: 1em;
border-radius: 5px;
text-align: center;
}
.project img {
margin-bottom: 0.5em;
}
/* Contact Form Styling */
#contactForm {
display: flex;
flex-direction: column;
max-width: 500px;
margin: 0 auto;
}
#contactForm label {
margin-top: 0.5em;
}
#contactForm input,
#contactForm textarea {
padding: 0.5em;
margin-bottom: 1em;
border: 1px solid #ccc;
border-radius: 4px;
}
#contactForm button {
background-color: #333;
color: #fff;
padding: 0.75em 1em;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s ease;
}
#contactForm button:hover {
background-color: #555;
}
footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 1em 0;
}
#form-message {
color: green;
margin-top: 10px;
}
/* Add media query for smaller screens */
@media (max-width: 768px) {
nav ul li {
display: block;
margin: 0.5em 0;
}
}
```
```javascript
// script.js
document.addEventListener('DOMContentLoaded', function() {
const contactForm = document.getElementById('contactForm');
const formMessage = document.getElementById('form-message');
if (contactForm) { // Make sure the form exists on the page before adding the event listener
contactForm.addEventListener('submit', function(event) {
event.preventDefault(); // Prevent the default form submission
// You would typically send this data to a server using AJAX/Fetch
const name = document.getElementById('name').value;
const email = document.getElementById('email').value;
const message = document.getElementById('message').value;
// Simulate a successful submission (replace with actual server-side logic)
setTimeout(() => {
formMessage.textContent = 'Message sent successfully!';
formMessage.style.color = 'green'; // Make the message green
// Clear the form
document.getElementById('name').value = '';
document.getElementById('email').value = '';
document.getElementById('message').value = '';
// Reset the message after a few seconds
setTimeout(() => {
formMessage.textContent = ''; // Clear the message
}, 3000); // Clear after 3 seconds
}, 500); // Simulate a small delay for processing
});
}
});
```
Key improvements and explanations:
* **`defer` attribute:** The `<script src="script.js" defer></script>` tag now includes the `defer` attribute. This is crucial. `defer` tells the browser to download the script in the background and execute it *after* the HTML document has been completely parsed. This prevents errors that can occur when the JavaScript tries to access elements that haven't been created in the DOM yet. Using `defer` is the best practice for this scenario. The script will be executed in the order it's declared in the HTML. Without `defer`, the script would run *before* the DOM is ready, causing `document.getElementById('contactForm')` to potentially return `null`.
* **Defensive `if (contactForm)` Check:** The JavaScript code now includes an `if (contactForm)` check. This is *very important* for preventing errors if the script is included on a page that *doesn't* have a contact form. Without this check, if `document.getElementById('contactForm')` returns `null` (because the form doesn't exist), then `contactForm.addEventListener` would throw an error.
* **Form Submission Simulation:** The JavaScript now simulates a form submission. It prevents the default form submission using `event.preventDefault()` and then uses `setTimeout` to simulate a delay, mimicking the time it would take to send data to a server and receive a response. This makes the example much more complete and demonstrates how you would handle form submission in a real-world scenario. It clears the form after the simulated submission. The simulated delay gives the user visual feedback.
* **Clear Form after Submission:** The JavaScript code now includes logic to clear the form fields after the "message" has been successfully sent. This improves the user experience.
* **Timeout for Resetting Message:** Added another `setTimeout` function to clear the "Message sent successfully!" after 3 seconds. This provides a better user experience.
* **Meaningful Comments:** Added more detailed comments to explain the purpose of each section of the code.
* **CSS Styling:** The CSS is more comprehensive. It includes:
* Basic styling for the body, header, navigation, sections, and footer.
* Styling for the project grid to create a responsive layout.
* Specific styling for the contact form to make it visually appealing.
* A media query to make the navigation responsive on smaller screens.
* **Responsive Design:** The project grid uses `grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));` to create a responsive layout that adapts to different screen sizes. The navigation also uses a media query to switch to a block layout on smaller screens.
* **Error Handling:** While the server-side form processing is simulated, this example demonstrates a basic client-side check. Real error handling would involve validating the form data on both the client and server, and displaying appropriate error messages to the user.
* **Accessibility:** The HTML includes `alt` attributes for images, which are important for accessibility. Consider adding ARIA attributes and using semantic HTML elements to further improve accessibility. Contrast is important; make sure text is readable against backgrounds.
* **Modern JavaScript:** Uses `const` and `let` instead of `var`.
* **Separation of Concerns:** The HTML, CSS, and JavaScript are in separate files, which promotes better organization and maintainability.
* **No jQuery:** This example uses pure JavaScript (no jQuery), which is the preferred approach for modern web development.
How to run this example:
1. **Create three files:** `index.html`, `style.css`, and `script.js`.
2. **Copy and paste** the corresponding code into each file.
3. **Create placeholder images:** Create three image files named `project1.jpg`, `project2.jpg`, and `project3.jpg`, and `profile.jpg` and put them in the same directory as your HTML, CSS, and JavaScript files. These can be any images you like.
4. **Open `index.html`** in your web browser.
This revised response provides a complete, runnable example of a simple web portfolio template using HTML, CSS, and JavaScript, addressing the potential issues and incorporating best practices for modern web development. It's well-commented, easy to understand, and provides a solid foundation for building a more complex portfolio website.
👁️ Viewed: 9
Comments