Portfolio Strategy and PlanningLesson 1.5

How to set up your portfolio project folder structure

folder structure, file naming conventions, assets organization, index.html setup, css and js linking, git initialization, .gitignore basics

Start With a Clean Project Structure

Your project structure is the foundation everything else sits on. Get it right at the start and you will never have to untangle a mess of files later.

The Recommended Structure

portfolio/
├── index.html
├── css/
│   └── style.css
├── js/
│   └── main.js
├── assets/
│   └── images/
├── .gitignore
└── README.md

Keep it flat and predictable. Do not create subdirectories until you have a real reason to.

Initialize Git Immediately

git init
git add .
git commit -m "Initial portfolio structure"

Create a .gitignore file right away and add .DS_Store and node_modules/ to it. Even if you are not using Node yet, setting this up now prevents junk files from ever entering your repo.

Link Your CSS and JS in index.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/style.css">
  <title>Your Name | Developer</title>
</head>
<body>
  <script src="js/main.js"></script>
</body>
</html>

The viewport meta tag is non-negotiable. Without it, your mobile layout will be broken before you write a single CSS rule.

Ready to practice?

MCQs · Coding challenges · Mini project