Save & Share

Last 10 minutes. Save your work and take a look at what everyone built.

Save your work — two options

Pick one. Anonymous pens that aren't saved or copied out disappear when you close the tab — so do this before anything else.

Option 1 — Free CodePen Account (recommended)

If you want a permanent URL you can paste anywhere:

  1. Click Save in the top-right of CodePen.
  2. CodePen prompts for sign-up — email and password (~30 seconds).
  3. Done. The URL in the address bar (looks like codepen.io/yourusername/pen/abc123) is permanent.

Your username is public, so pick something you'd be comfortable putting on a resume.

Option 2 — Manual copy/paste to local files

If you don't want to create an account, you can still keep your code on your own laptop:

  1. Open a plain-text editor (Notepad, TextEdit in plain-text mode, VS Code, etc.).
  2. Copy the contents of CodePen's HTML pane and paste them into a file called index.html.
  3. Copy the contents of CodePen's CSS pane and paste them into a file called style.css in the same folder.
  4. Add <link rel="stylesheet" href="style.css"> inside an <head> tag at the top of index.html so the page picks up your styles, then open index.html in any browser.

Gallery walk

Leave your CodePen open on your computer. Stand up, stretch, walk around. Look at 2–3 other people's pages.

Find one thing you genuinely liked and tell them on a sticky note. Specific praise beats generic praise:

  • ❌ "Cool page."
  • ✅ "I like how you described your volunteering experience."
  • ✅ "The dark-mode + yellow accent is a great call."

Reflection — name what's next

Open a notes app (whatever you already use on your laptop) and write one sentence for each prompt. Title the note something findable like Front-End Frenzy — what's next.

  1. One thing I learned today.
  2. One thing I want to try next.

What you learned today

In the last 80 minutes, you used:

  • Semantic HTML — <header>, <section>, <article>, <footer>, lists, headings, links, <strong>, <em>, <mark>.
  • CSS variables — modern theming. Change one value, the whole page updates.
  • Flexbox and grid — the layout systems used by literally every website.
  • Hover transitions — interactivity.
  • Responsive design — @media queries that change the layout for phones.
  • Web typography — Google Fonts and font fallbacks.

Those aren't toy concepts. Working developers use all of them every day.

Where to keep going

If you want to keep building from here:

  • MDN Web Docs — the reference every professional has bookmarked. Look up any HTML tag or CSS property.
  • CSS Tricks — short, practical tutorials on real-world CSS problems.
  • Frontend Mentor — free design briefs to build from when you want a project that isn't your own profile.

Put your URL somewhere

If you have a URL, a few places to drop it from today forward:

  • The same line as your contact info on a resume.
  • The Websites section of your LinkedIn profile.
  • The "personal website" field on volunteer applications, scholarship forms, internship apps.
  • Your email signature.

Keep it updated when you've done more things worth listing.