Code Lesson 001
Back to Code Lessons
CODE LESSON 001 Beginner

Build an Interactive Profile Card

Create a responsive personal profile card using HTML, CSS, and JavaScript. You control the design, layout, content, and interaction.

HTML CSS JavaScript
01 / THE MISSION

Build it without being handed the answer.

Your mission is to create a single-page profile experience that introduces a person, creator, developer, business, fictional character, or brand.

The finished page should feel complete, work properly on mobile and desktop, and contain at least one useful JavaScript-powered interaction.

There is no answer key. Research. Experiment. Break things. Debug them. Build your own solution.
02 / WHAT YOU WILL PRACTICE

Skills this challenge is designed to exercise

HTML Structure
CSS Styling
Responsive Design
JavaScript Events
Project Organization
Website Deployment
03 / REQUIREMENTS

Your finished project must include:

  • A profile image, avatar, logo, or original visual
  • A name or project identity
  • A short biography or description
  • At least three working links or buttons
  • Your own color palette
  • Responsive mobile and desktop layout
  • At least one JavaScript-powered interaction
  • A proper page title
  • A favicon
  • A publicly accessible finished website
04 / MAKE A DECISION

Choose your JavaScript interaction.

Do not add JavaScript just because the challenge requires it. Choose something that improves your page.

Theme Switcher Copy Email Button Expandable Bio Random Quote Live Clock Visitor Greeting Animated Control Your Own Idea
05 / PROJECT STRUCTURE

Start with an organized project. 

profile-card/
│
├── index.html
├── styles.css
├── script.js
│
└── assets/
    ├── images/
    └── favicon/

You are allowed to organize your project differently. This is only a recommended starting point.

06 / RULES

Use resources. Do not outsource the thinking.

You may

  • Search Google
  • Read documentation
  • Use MDN
  • Read Stack Overflow
  • Watch coding videos
  • Use AI to explain concepts
  • Use AI to help debug errors

Do not

  • Copy someone else's finished project
  • Submit an unchanged template
  • Submit code you cannot explain
  • Use fake links to satisfy requirements
  • Submit someone else's work as your own
07 / RESOURCES

Places to research when you get stuck

HTML Documentation MDN Web Docs
CSS Documentation MDN Web Docs
JavaScript Documentation MDN Web Docs
GitHub Pages Publish your project
08 / HINTS

Only open these when you need them.

Hint 1 — HTML Structure

Start with the information you want your page to contain before thinking about colors or animation. Group related information together and use meaningful HTML elements.

Hint 2 — Responsive Design

Try building the smallest version of the page first. Once it looks good on a phone, decide whether anything should change when more screen space becomes available.

Hint 3 — JavaScript

Pick something your visitor can interact with. Listen for that event and then make something visible happen on the page.

Hint 4 — Debugging

Use your browser developer tools. Check the Console for JavaScript errors and inspect elements when your CSS is not behaving the way you expected.

09 / DEFINITION OF DONE

Test your work before submitting it.

  • Every required feature exists
  • Every link works
  • JavaScript works without console errors
  • The page works on a phone
  • The page works on a desktop
  • The live URL loads publicly
  • You can explain how your project works
10 / SUBMIT YOUR BUILD

Finished the challenge?

Submit your live project below. Your submission will be reviewed before it appears publicly on this lesson page.

Your name and approved project links may be displayed publicly on this lesson page.

COMMUNITY BUILDS

Completed Projects

Different developers can solve the same challenge in completely different ways. These projects have been reviewed and approved.