Code a Pookalam @ SBCE

Register & Join (via Tally)

Use the form to register, tell us if the app is installed, and join the event in the app.

• Register with your details
• Select Yes/No for the app question
• Join the Code-a-Pookalam event in the app

Get the Starter Template

Before you start designing your pookalam, you’ll need a simple project setup. We’ve prepared a starter template that acts as your digital canvas. Follow these steps carefully:

• Fork the repository: Click the “Fork” button on GitHub to make your own copy of the starter project. This way you won’t affect the original.
• Clone your forked repo: Download your fork to your computer using git clone. If you’re new to GitHub, check the guide linked below.
• Open the project folder: Navigate into the folder using your favorite code editor (VS Code recommended).
• Understand the files you’ll see:
  • index.html → The page structure
  • styles.css → Your creative playground 🌸
  • README.md → Instructions and project info
• Why fork? Because forking lets you freely experiment, commit, and push changes without worrying about breaking the main repo.

Edit Your Pookalam

Play with colors, shapes, and effects inside styles.css.

/* Colors */
:root {
  --p1: #ffba08; /* marigold */
  --p2: #ff477e; /* rose */
  --p3: #0ad68d; /* leaf */
  --bg: #f9fbf9; /* backdrop */
}

/* Shapes */
.petal { width: 120px; height: 120px; border-radius: 60px 4px 60px 4px; }

/* Effects */
.glow { box-shadow: 0 0 0 8px rgba(255,186,8,.15); }

Sample Pookalam Design

Test Your Design

Now that you’ve started making changes in styles.css, it’s time to preview your pookalam. Testing helps you immediately see how your edits look and allows you to refine your design step by step.

• Open the project: Double-click index.html to launch it in your browser (or right-click → “Open with browser”).
• See your changes instantly: Every time you save styles.css, reload the page to view updates.
• Iterate quickly: Edit → Save → Refresh — repeat this cycle until you’re satisfied.
• Focus on design quality: Pay attention to symmetry, spacing, and color balance. Small tweaks make a big difference.
• Stay organized: Keep your CSS neat with comments so you can revisit and adjust easily later.

💡 Tip: If your changes don’t appear, double-check that you saved the file and refreshed the correct browser tab.

Host Your Project Online

Once your design looks great locally, it’s time to make it public so others can see it! You can choose either GitHub Pages (built right into GitHub) or Vercel (easy one-click deploy).

🌐 Option A: Host on GitHub Pages

1. Push your changes to your GitHub repository (Beginner’s Git/GitHub Guide).
2. Go to your repo on GitHub.com.
3. Click the Settings tab at the top.
4. Scroll down to the Pages section.
5. Select Deploy from a branch.
6. Choose the main branch and click Save.
7. Wait 2-3 minutes → GitHub will give you a live website link you can share.

⚡ Option B: Host on Vercel

1. Go to vercel.com and log in with GitHub.
2. Click New Project and import your pookalam repo.
3. Keep the default settings and click Deploy.
4. In a few seconds, Vercel will generate a live link like https://yourproject.vercel.app.

✨ Both methods are free — GitHub Pages is simplest if you’re already using GitHub, while Vercel is great if you want super-fast deployment and auto-updates on every push.

Submit Your Entry

Submit these items through the Google Form:

• Your GitHub repository link (so we can see your code) — include an updated README.md that has a screenshot of your pookalam.
• Your live website link (from GitHub Pages / Vercel).
• Screenshot of your design.

Cheer & Share

Post a teaser on Instagram/LinkedIn and tag @tinkerhub.sbce. Spread the festive vibes! 🌟