🎨 Codefolio

Build Your Own Portfolio Website

🗓️ Date:

17th May

🏫 Mode:

Offline

📍 Venue:

Techno India University Campus

⏳ Duration:

3 Hours

👥 Audience:

First-Year Students & Web Dev Beginners

👨‍💻 Organized by:

GDG on Campus, Techno India University

🏆 Rewards & Swags

🥇 Top 3 Websites: Win exciting gift vouchers

🧢 Top Performers: Get Official Google Developer Swags

📜 All Attendees: Receive Certificate of Participation

🏛️ Recognition: Entry into Codefolio Hall of Fame (Notion)

💬 Community: Access to Private Discord Server for mentorship

🧭 Event Overview

A fun, hands-on, and offline bootcamp to:

🚀 Build & deploy your personal portfolio website in just 3 hours

👶 Perfect for complete beginners — no coding experience required

🧩 Get pre-built snippets for hero sections, navbars, cards, and more

👨‍🏫 Learn in real-time with mentors and peers

🎯 Complete live challenges and win gamified rewards

🌐 Showcase your site at the end of the event!

📚 What You’ll Learn

💻 Setting up your dev environment in CodeSandbox

🔧 Structuring clean HTML documents

🎨 Styling with modern CSS: Flexbox, Grid, Custom Fonts

⚙️ Adding interactivity using JavaScript (menus, modals)

🚢 Deploying live websites using Netlify/Vercel

📱 Making your site responsive and interactive

🛠️ What You’ll Build

✨ Animated techy background

👋 Personalized hero section

🧭 Responsive navbar

👨‍💻 About and Projects grid layout

📲 Call-to-action buttons and link sections

🃏 Interactive cards and modals

📩 Contact form with validation

🌐 Fully deployed portfolio website with your name on it

🕹️ Gamified Progress & Badges

🎯 Points System

Milestone Points

Setup 30 pts

Hero Section 25 pts

Navbar 25 pts

Projects/About 35 pts

Typography & Fonts 20 pts

Buttons 20 pts

Cards & Modals 30 pts

Deployment 10 pts

Total 195 pts

🏅 Digital Badges

HTML Rookie

Style Sprinter

Portfolio Pro

Deployment Champ

💡 Leaderboard Tiers: Beginner • Intermediate • Pro

🧭 Event Flow

Time Activity

0–20 min Gradient & Particle Backgrounds

20–45 min Hero Section

45–70 min Responsive Navbar

70–80 min Break + Interactive Quiz

80–105 min About & Projects Sections

105–125 min Typography + Custom Fonts

125–145 min Buttons & CTAs

145–165 min Cards + Modal Windows

165–180 min JS Enhancements + Deployment

🧰 Tools You’ll Use

💻 CodeSandbox (Live Coding)

🧾 Notion (Snippet Library & Checklist)

🌍 Netlify / Vercel (Deployment)

🖥️ VS Code (Optional for local development)

📋 Google Forms (Feedback & Submissions)

✅ What You Need to Bring

💻 Your own laptop with internet access

🌐 A web browser

🔥 Enthusiasm to build something cool from scratch

🌟 Event Outcomes

✅ A fully deployed, shareable portfolio website

🧠 Hands-on learning of HTML, CSS, and JS fundamentals

🛠️ Experience with modern dev tools

💼 A standout portfolio project for your resume

🏅 Earn digital badges and leaderboard status

🎁 Swags, vouchers, and official recognition from GDG

Let me know if you want this exported to PDF, Google Docs, Notion format, or converted into a website/poster version.