Minimalistic Black and White Portfolio Website Tutorial

Overview

• Purpose: Create a basic portfolio website using HTML, CSS, and JavaScript.
• Features:
  • Navbar with sections: About Me, Experiences, Projects, Contact Me
  • Fully responsive design with a hamburger menu for mobile
  • Links to live projects and GitHub repositories
  • Downloadable CV and contact info
  • Built using vanilla HTML, CSS, and JavaScript
  • Hosted on Netlify, version control via GitHub

Steps to Create the Website

Initial Setup

1. GitHub and GitHub Desktop

   • Create a GitHub account
   • Download and install GitHub Desktop
   • Create a new repository for the project

2. Visual Studio Code

   • Download and install Visual Studio Code
   • Set up the project folder and files: index.html, style.css, media-queries.css, script.js
   • Install essential extensions: Live Server, Prettier Code Formatting

Adding Assets

• Create an assets folder
• Download project assets (images, logos, resume)
• Add all assets to the assets folder

Writing HTML Structure

1. Boilerplate Code

   • Basic HTML structure with title: “My Portfolio”

2. Navigation Bar

   • Desktop navigation with links to About, Experience, Projects, Contact sections

3. Profile Section

   • Profile picture
   • Introduction text: “Hello, I’m John Doe, Front End Developer”
   • Buttons for downloading CV and getting in contact