Workshop Kickoff

Welcome to Front-End Frenzy. Today's plan: type along, customize, share. You'll leave with a CodePen URL if you want one.

The arc of the workshop

  • Activity 1 — Kickoff (you're here): the plan, the privacy rules, open CodePen.
  • Activity 2 — HTML Skeleton: paste the starter HTML and replace every placeholder with your content.
  • Activity 3 — CSS Styling: paste the starter CSS and watch the page transform. Customize the theme.
  • Activity 4 — Make It Yours: pick from a menu of small, high-impact tweaks until your page feels like it represents you.
  • Activity 5 — Save & Share: create an account, save your pen, drop the URL, gallery-walk the room.

Open CodePen

Open codepen.io
  1. Open codepen in a new browser tab using the button above.
  2. Click Start Coding on the top left of the screen (or New Pen if you already have an account).
  3. You'll see four panes: HTML (top-left), CSS (top-middle), JavaScript (top-right), and the live preview (bottom).

We won't be writing JavaScript today, so feel free to minimize the JS pane using the down chevron in its top-right corner. Anything you type in HTML or CSS shows up live in the preview pane.

The two privacy rules

Your profile is public the moment you share the URL. Before you write a single word of personal content, read these two rules:

  1. Keep it professional. Write as if a teacher, a recruiter, and a university admissions officer are all reading every word on your page.
  2. Be careful with personal info. Any single detail is usually fine, but stacking them (Name + school + grade + contact) is how strangers become not-strangers. Skip the sensitive stuff entirely — phone number, home address, date of birth, full legal name. If someone needs to reach you, one email is enough. A "portfolio" email (firstname.lastinitial.portfolio@gmail.com) separate from your personal one is even better, and a placeholder email is fine for today.

These rules are mandatory. We'll point at them again in Activity 2 when you start writing content.

Workshop standards

Two rules while we work:

  1. Try before you ask. Re-read the instruction. Look at your code. Nine times out of ten the answer is in front of you.
  2. Ask 3 peers before an instructor. Your classmates are your first debugging partner.