Homework: Build Your 3D Site

One task. One URL. Post it in the community when you are done.

Your assignment

Build a 3D website for a real purpose: your portfolio, your service, your product, or your personal brand. It must have at least one working 3D effect from this course.

Minimum requirements: three files including index.html, style.css, and main.js, one Three.js effect from particle background, rotating object, or scroll animation, at least two sections with real content and no lorem ipsum, a mobile layout that works at 375px width, and a live Netlify URL to share.

Step 1: Make three decisions

Before opening Claude Code write down these three things.

Your effect: particle background, rotating object, or scroll animation. Pick one.

Your colours: write down your background hex code, your text hex code, and your accent hex code. Go to coolors.co and press spacebar to generate palettes if you need help choosing.

Your font: pick a Google Fonts pairing from the previous courses. DM Serif Display paired with DM Sans is reliable and works for almost any site.

Write these down before continuing. They go directly into the master prompt.

Step 2: Write your real content

Fill in four things before writing the prompt. Your headline which is what the site says. Your subheadline which tells visitors who it is for and what they get. Your CTA button text. And two to three feature descriptions if you plan to have a second section.

Real content in the prompt means real content in the output. Placeholder content in the prompt means you will need to go back and replace it later.

Step 3: Fill in the master prompt

Use the master prompt from the master build prompt lesson. Replace every placeholder with your real values. Do not skip placeholders. An empty placeholder is a missed instruction and Claude will guess. Guesses in 3D sites create debugging sessions.

Step 4: Run it in Claude Code

Open your project folder in Claude Code. Paste the completed prompt. Wait for the three files to be created. Do not interrupt while Claude is working through the build.

Step 5: Test locally

Open index.html in Chrome and check all four of these before deploying.

3D effect visible: the effect appears and animates when the page loads. Console clean: press F12, go to the Console tab, and confirm zero red errors. Mouse interaction works: moving the cursor over the 3D area produces a visible response. Mobile layout holds: resize the browser to 375px and the page remains readable and usable.

Fix any issues with focused follow-up prompts before moving to deployment.

Step 6: Deploy

Drag your project folder to app.netlify.com/drop. Get your live URL. Open it in a new tab and confirm the 3D effect loads on the live version. Then test it on a real phone.

Step 7: Post in the community

Go to the Claude Codex Mastery community and create a post titled "3D Websites Homework." Share your live URL. Write one sentence about what effect you used and what the site is for.

Stretch goals

If the basic assignment felt fast, try one of these additions.

Combine effects: add the cursor spotlight from the interactive effects lesson to your particle background site. They operate at different z-index layers and do not conflict with each other.

Add a contact form: add a standard HTML contact form to your 3D site. Use Netlify Forms by adding data-netlify="true" to the form tag so submissions are captured without any backend, exactly as you learned in the Landing Pages course.

Animate the hero text on load: add a GSAP entrance animation for the heading and subheading. They should fade in and rise from 20px below their final position when the page first loads.

Custom subdomain: create a free Netlify account and change your URL from the random generated string to something that reflects what the site is for.

What a strong submission looks like

The community posts that get the most responses share three things. A live URL that actually loads and works. A screenshot of the 3D effect in action. And one sentence on what was the hardest part to get right.

The URL is what matters most. Deployed and working beats polished and local every time.