Night Coder Watch on YouTube

Membuat Website Portfolio Lengkap dengan HTML, CSS & Javascript | Responsive

3 min read 6 hours ago
Published on Feb 06, 2025 This response is partially generated with the help of AI. It may contain inaccuracies.

Table of Contents

Introduction

In this tutorial, you will learn how to create a complete responsive portfolio website using HTML, CSS, and JavaScript. This step-by-step guide will help you build a visually appealing and functional site to showcase your work, suitable for both beginners and those looking to enhance their web development skills.

Step 1: Set Up Your Project

  • Create a new folder on your computer for your project.
  • Inside this folder, create the following files:
    • index.html
    • styles.css
    • script.js
  • Link your CSS and JavaScript files in the index.html file.
<!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="styles.css">
    <title>Portfolio</title>
</head>
<body>
    <script src="script.js"></script>
</body>
</html>

Step 2: Create the Basic Structure

  • Use HTML to build the basic structure of your portfolio.
  • Include sections such as:
    • Header
    • About
    • Projects
    • Contact

Example structure:

<header>
    <h1>Your Name</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>
<section id="about">...</section>
<section id="projects">...</section>
<section id="contact">...</section>

Step 3: Style Your Portfolio

  • Open styles.css and start styling your portfolio.
  • Use CSS to make your layout responsive. Consider using media queries to adjust styles for different screen sizes.

Example CSS for basic styles:

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

header {
    background: #333;
    color: #fff;
    padding: 10px;
}

nav ul {
    list-style-type: none;
    padding: 0;
}

nav ul li {
    display: inline;
    margin-right: 20px;
}

Step 4: Add Content to Your Sections

  • Fill in the About section with a brief description of yourself.
  • Showcase your projects in the Projects section with images and descriptions.
  • For the Contact section, add a form to gather visitor information.

Example of a contact form:

<form action="https://formspree.io/your-email" method="POST">
    <input type="text" name="name" placeholder="Your Name" required>
    <input type="email" name="email" placeholder="Your Email" required>
    <textarea name="message" placeholder="Your Message" required></textarea>
    <button type="submit">Send</button>
</form>

Step 5: Enhance with JavaScript

  • Use JavaScript to add interactivity to your portfolio.
  • Consider implementing features like a mobile menu toggle or scroll animations.

Example JavaScript for a simple toggle:

const menuToggle = document.querySelector('.menu-toggle');
const nav = document.querySelector('nav');

menuToggle.addEventListener('click', () => {
    nav.classList.toggle('active');
});

Step 6: Optimize for Deployment

  • Make sure your website is fully responsive and tests well on different devices.
  • Use tools like Google Fonts for typography and Iconmonstr for icons to enhance your design.
  • Consider deploying your website using a platform like Netlify.

Conclusion

Congratulations! You have built a responsive portfolio website using HTML, CSS, and JavaScript. Remember to keep your content updated and improve your site based on user feedback. Explore further enhancements like animations or transitions to make your portfolio stand out. Happy coding!

Table of Contents

Recent