Introduction

Project Overview

In this course, we will design a modern portfolio website completely from scratch using Figma, and then build it into a real, live website using the Astro framework. The entire workflow mirrors what professional developers and designers use in the industry.

Why Figma?

Figma is a free, browser-based, collaborative interface design tool. It is the industry standard used by teams at Google, Microsoft, and thousands of startups. By designing first, we can perfect every pixel of our layout before writing a single line of code.

Why Astro?

Astro is a modern web framework built specifically for content-rich static websites. Unlike React or Next.js, Astro ships zero JavaScript to the browser by default. This means your site loads incredibly fast, scores perfectly on Lighthouse, and is ideal for portfolios, blogs, and marketing pages.

What You Will Need

• A free Figma account (sign up at figma.com)
• Node.js version 18 or higher installed on your computer
• A code editor like VS Code
• A basic understanding of HTML, CSS, and JavaScript
• A terminal application (Terminal on Mac, Windows Terminal, or Git Bash)

What You Will Build

By the end of this course, you will have a fully responsive, beautifully designed portfolio website. You will understand how to go from a blank Figma canvas to a deployed, production-ready site that you can share with the world.