Skip to main content
PZ
ProgZenith Workshop
Powered by ProgZenith
ProgZenith Web Development Workshop

Build original web projects that live up to Hack Club standards.

A focused, hands-on workshop where high school students code real websites from scratch — no templates, no AI shortcuts, and no recycled projects. Just your ideas, your code, and your craft.

Powered by Hack Club
High school students • 18 or below
Hands-on, project-based learning
Register now Plan my submission

This workshop emphasizes originality, learning, and effort over speed. The goal isn’t to finish first — it’s to ship something you’re proud of.

Eligibility

Who can participate?

ProgZenith is built for motivated high school students. You don’t need prior web development experience — just honesty, curiosity, and a willingness to learn.

Eligibility checklist

High school students only. You must currently be in high school or just finished.
Age 18 or below. If you’re above 18, you’re welcome to follow along, but your project won’t be evaluated.
Beginners welcome. You can join even if this is your first website, as long as you follow all workshop rules.

If you’re unsure whether you qualify, email the organizers using the contacts in the footer before you start coding.

What you’ll learn

  • How to structure a website using semantic HTML and meaningful sections.
  • How to design responsive layouts with flexbox or CSS grid that work on phones, tablets, and laptops.
  • How to add engaging details: hover effects, animations, transitions, and small JavaScript interactions.
Rules & Restrictions

Honor system: strict but fair

ProgZenith follows Hack Club’s zero-tolerance stance on academic honesty. The project you submit should clearly be your own work.

No shortcuts, no copy-paste projects
Breaking these rules can disqualify your submission and affect eligibility for future Hack Club programs.
No AI tools. You may not use ChatGPT, Copilot, Gemini, or any AI that suggests or generates code or content for your project.
No templates or copied code. Do not use pre-made themes, downloaded templates, or copy code from GitHub, YouTube, or blogs.
No old projects. You must build a fresh project for ProgZenith. Previously created websites (even if you tweak them) are not allowed.
All content must be yours. Every line of text, design decision, and code must be written and designed by you.

For this workshop to be officially approved, at least 3 participants must submit valid projects. Encourage your friends to build alongside you.

Project Requirements

What your final project must include

You’ll ship a two-page static site that demonstrates real front-end skills. Follow these requirements closely to make sure your project is valid.

Page & submission structure

  • Build two separate HTML pages — for example: index.html and about.html, or any two pages that make sense for your idea.
  • When you submit, upload both files (and any CSS/JS files) and provide a live link if you deploy your site (e.g. GitHub Pages).
  • Each page must contain real content — explanations, stories, or information. No lorem ipsum or empty sections.
  • Each page must include at least one meaningful image (e.g. photo, illustration, or diagram related to your topic).

Allowed tech & required features

  • Your site must be static only. You can use: HTML, CSS, and optional JavaScript.
  • No frameworks (React, Vue, Angular, etc.) and no CSS libraries (Bootstrap, Tailwind, etc.).

Each page must use at least five distinct HTML/CSS features such as:

Semantic HTML Forms & inputs Flexbox or CSS Grid Hover effects CSS animations Media queries Custom fonts CSS variables
Make It Yours

Your site should look and feel like you

The best ProgZenith projects are clearly personal. Use your website to tell a story, explore an idea, or showcase something you care about — not to recreate a generic template.

Ideas to personalize your project

Custom theme

Choose a color palette, typography style, and spacing system that matches your topic — from calm and minimal to bold and neon.

Creative layout

Use sections, columns, and cards to guide readers through your story. Think about hierarchy: what should visitors notice first?

Animations

Add subtle transitions, hover states, and scroll-based reveals that make the site feel alive without getting in the way.

Interactive JS

Use small JavaScript touches like toggles, tabs, filters, or light/dark modes (like this page!) to enhance your idea.

Hackatime Tracking

Set up Hackatime before you start coding

Hackatime is required for ProgZenith. It proves that you actually wrote your code and helps you understand your own workflow. Follow these steps carefully.

1
Create and verify your account

Do this once before you begin any serious coding for your project.

  • Go to hackatime.hackclub.com.
  • Sign in using your Hack Club Slack account.
  • Complete the National Citizenship ID verification process exactly as instructed.

If your account is not verified, your work might not count towards ProgZenith.

2
Install Hackatime in your editor

Choose your main editor and make sure coding time appears on your dashboard.

VS Code

1. Open the Extensions panel.
2. Search for “Hackatime”.
3. Install the extension.
4. Log in with Slack when prompted.

Replit

If you’re using Replit via Hack Club, Hackatime is usually enabled automatically after login. Confirm that time appears on your dashboard.

Other editors

Use the official Hackatime instructions to set up your preferred editor and IDE.

3
Verify that tracking works

Run this test before you start the main build so you don’t lose any untracked progress.

  • Open your ProgZenith project folder in your editor.
  • Code for at least 5–10 minutes.
  • Visit your Hackatime dashboard and confirm that your time has been recorded.

If you don’t see your activity, fix the setup first. Lost or untracked time cannot be reconstructed after you finish.

Final Review

Submission checklist

Before you submit, walk through this list and confirm every item. This is exactly what reviewers will look for in your project.

My project has two completed HTML pages.
The site is static only (HTML/CSS/JS, no backend or frameworks).
Each page has at least one relevant image.
Each page uses 5+ HTML/CSS features (semantic tags, forms, flexbox/grid, animations, etc.).
All content is original — no AI, templates, or copied code.
Hackatime is tracking my project work.
This is a recent build, made specifically for ProgZenith.
I understand that at least 3 participants must submit for the workshop to be approved.
Why Join

Why ProgZenith is worth your time

This workshop is designed for students who are serious about building real skills — not just collecting certificates.

Real web development skills

Learn how modern websites are structured, styled, and shipped without relying on drag-and-drop tools or AI-generated code.

Portfolio-ready projects

Finish with a concrete, two-page site that you can link on resumes, college applications, and public profiles.

Hack Club standards

Understand what Hack Club looks for in student work: originality, effort, clarity, and a focus on learning.

Better discipline

Hackatime and clear requirements help you build the habit of consistent, focused work over time.

Network with builders

Meet other serious students who want to build projects from scratch, not just follow tutorials.

Launchpad for more

Use this as a foundation for hackathons, internships, and future Hack Club programs. Your first real site often leads to many more.