Frontend Design & Development Bootcamp for Teens

An exciting and interactive bootcamp designed for teenagers (ages 13-20) to learn frontend web design and development. Build stunning websites, create animations, and bring your creative ideas to life using HTML, CSS, and JavaScript. No prior experience required!

Welcome to the Frontend Design & Development Bootcamp for Teens!

This bootcamp is specially designed for young learners between the ages of 13 and 20 who are passionate about technology, design, and creativity. Whether you want to build your own website, create interactive games, or start a career in tech, this program will give you the skills and confidence to succeed.

What Makes This Bootcamp Special

Designed for Teens: Age-appropriate content and teaching methods
Fun & Interactive: Learn through hands-on projects, games, and challenges
Creative Focus: Combine design thinking with coding skills
No Experience Needed: Start from absolute beginner level
Real Projects: Build websites, portfolios, and interactive pages
Portfolio Building: Create a professional portfolio to showcase your work

What You Will Learn

HTML: Structure web pages and create content
CSS: Style websites with colors, fonts, and layouts
JavaScript: Make websites interactive and dynamic
Design Principles: Color theory, typography, and user experience
Responsive Design: Make websites work on phones, tablets, and computers
Animation: Add cool animations and effects to your websites

Why Frontend Development?

Express your creativity through design and coding
Build things you can see and share with others
High demand for frontend developers globally
Great starting point for a career in tech
Learn skills that can lead to freelance opportunities

Who Is This For?

Teenagers aged 13-20 interested in technology
Students who love design and creativity
Young people wanting to learn coding in a fun way
Beginners with no prior coding experience
Students looking to build a tech portfolio
Young entrepreneurs wanting to build their own websites

What You Will Achieve

Build a professional portfolio of projects
Create websites you can share with family and friends
Develop critical thinking and problem-solving skills
Gain confidence in using technology
Certificate of completion for your resume
Foundation for advanced web development

⭐ Why Choose This Bootcamp

✅ Age-appropriate curriculum designed for young learners
✅ Patient and supportive instructors
✅ Small class sizes for individual attention
✅ Project-based learning with real-world applications
✅ Safe and encouraging learning environment
✅ Fun activities and group projects
✅ Certificate of completion

What You Need

A laptop or desktop computer (Windows, Mac, or Linux)
Google Chrome or any modern browser
A text editor (we'll guide you)
Excitement and curiosity to learn!

Ready to start your journey into the exciting world of web development? Join us and let's build amazing things together!

Learning Objectives

By the end of this bootcamp, students will be able to:

Create well-structured web pages using HTML5
Style websites professionally using CSS3
Make websites interactive using JavaScript
Apply design principles including color theory and typography
Build responsive websites that work on all devices
Create animations and transitions for engaging user experiences
Understand basic design thinking and user experience concepts
Work with images, icons, and multimedia content
Use developer tools to inspect and debug code
Build a personal portfolio website to showcase projects
Collaborate with peers on group projects
Present and explain their work confidently
Understand the process of planning and building a website
Develop problem-solving and critical thinking skills
Gain confidence in using technology

Prerequisites

This bootcamp is designed for beginners. No prior experience is required!

Requirements:

Age: Between 13 and 20 years old
Basic computer literacy: Able to use a browser and type
Device: Personal laptop or desktop computer
Internet: Stable internet connection
Mindset: Curiosity and willingness to learn
Language: Basic English reading and comprehension

What you DON'T need:

❌ No coding experience required
❌ No design experience required
❌ No expensive software required
❌ No prior technical knowledge required

We will guide you through everything step by step!

Curriculum

MODULE 1: Introduction to Web Development (Week 1)

Lesson 1.1: Welcome to the Web!

What is web development?
How websites work (client-server explained simply)
Browsers and how they display websites
Introduction to development tools

Lesson 1.2: Setting Up Your Workspace

Installing a text editor (VS Code)
Setting up project folders
First look at a web page

Lesson 1.3: Understanding the Web Design Process

Planning a website
Sketching and wireframing
Thinking about users

Lesson 1.4: Fun Activity

Create your first simple web page
Share with classmates

MODULE 2: HTML5 - Building Your First Website (Week 2)

Lesson 2.1: HTML Basics

HTML document structure
Headings, paragraphs, and text formatting
Lists and links

Lesson 2.2: Adding Multimedia

Inserting images
Adding videos and audio
Using icons and emojis

Lesson 2.3: Forms and Tables

Creating forms for user input
Building tables for data
Input types and attributes

Lesson 2.4: Project - Build Your "About Me" Page

Create a personal introduction page
Add photos and interests
Share with the class

MODULE 3: CSS3 - Designing Your Website (Week 3)

Lesson 3.1: Introduction to CSS

How CSS works with HTML
Colors, fonts, and text styling
Backgrounds and borders

Lesson 3.2: Layout and Positioning

Box model explained simply
Display and positioning
Floats and layouts

Lesson 3.3: Flexbox - The Magic Layout Tool

Introduction to Flexbox
Aligning items
Building flexible layouts

Lesson 3.4: Project - Style Your "About Me" Page

Add colors, fonts, and layout
Make it look professional
Present your design

MODULE 4: Design Principles & Creative Design (Week 4)

Lesson 4.1: Color Theory for Beginners

Understanding colors
Color combinations that work
Psychology of colors

Lesson 4.2: Typography

Choosing the right fonts
Font sizes and hierarchy
Making text readable

Lesson 4.3: Visual Design

Using images effectively
Icons and graphics
White space and balance

Lesson 4.4: Project - Design a Theme

Choose a theme (sports, music, travel, etc.)
Create a color palette
Select fonts and design elements

MODULE 5: Responsive Web Design (Week 5)

Lesson 5.1: What is Responsive Design?

Why websites need to work on all devices
Viewport and media queries

Lesson 5.2: CSS Grid

Introduction to CSS Grid
Creating responsive layouts
Grid vs Flexbox

Lesson 5.3: Mobile-First Design

Designing for mobile first
Adapting for tablets and desktops
Testing on different screen sizes

Lesson 5.4: Project - Responsive Website

Build a website that works on all devices
Test on phone, tablet, and computer
Finalize your design

MODULE 6: JavaScript - Bringing Websites to Life (Week 6)

Lesson 6.1: JavaScript Basics

What is JavaScript and why use it?
Variables and data types
Basic operations and math

Lesson 6.2: Making Decisions

If/else statements
Comparing values
Logic in coding

Lesson 6.3: Loops and Repetition

For loops
While loops
Repeating tasks

Lesson 6.4: Project - Interactive Quiz Game

Build a simple quiz game
Track scores
Show results

MODULE 7: Interactive Web Pages (Week 7)

Lesson 7.1: DOM Manipulation

What is the DOM?
Selecting elements
Changing content and styles

Lesson 7.2: Events

Click events
Hover effects
Keyboard and form events

Lesson 7.3: Functions and Interactions

Writing functions
Adding interactivity
Building a calculator

Lesson 7.4: Project - Interactive Portfolio

Add animations to your portfolio
Interactive buttons and menus
Showcase your projects

MODULE 8: Animations & Advanced Effects (Week 8)

Lesson 8.1: CSS Animations

Transitions and transformations
Keyframe animations
Creating smooth effects

Lesson 8.2: Advanced Animation Techniques

Parallax scrolling
Loading animations
Interactive animations

Lesson 8.3: JavaScript Animations

Using JavaScript for animations
Interactive effects
Building a carousel/slider

Lesson 8.4: Project - Animated Landing Page

Create a stunning landing page
Add animations and interactions
Make it memorable

MODULE 9: Portfolio Development (Week 9)

Lesson 9.1: Building Your Portfolio

Why you need a portfolio
What to include
Design tips

Lesson 9.2: Creating Your Personal Brand

Choosing a name and logo
Creating a consistent look
Writing about yourself

Lesson 9.3: Showcasing Your Work

Organizing your projects
Writing project descriptions
Making your work shine

Lesson 9.4: Project - Complete Portfolio

Build your professional portfolio
Include all your projects
Present your work

MODULE 10: Web Development Best Practices (Week 10)

Lesson 10.1: Clean Code

Writing readable code
Comments and documentation
Organizing your files

Lesson 10.2: Performance and Accessibility

Making websites fast
Making websites accessible
Inclusive design

Lesson 10.3: Publishing Your Website

Getting a domain and hosting
Uploading your website
Sharing your work

Lesson 10.4: Project - Publish Your Portfolio

Put your portfolio online
Share with the world
Celebrate your achievement

MODULE 11: Design Thinking & Creativity (Week 11)

Lesson 11.1: What is Design Thinking?

Understanding users
Empathy in design
The design process

Lesson 11.2: Brainstorming and Ideation

Generating ideas
Sketching concepts
Working in groups

Lesson 11.3: Prototyping

Building rapid prototypes
Testing and feedback
Iterating on designs

Lesson 11.4: Project - Design a Solution

Solve a real problem
Design and build a website
Present your solution

MODULE 12: Capstone Project & Graduation (Week 12)

Lesson 12.1: Project Planning

Define your capstone project
Plan your approach
Set goals and timeline

Lesson 12.2: Building Your Capstone Project

Build from scratch
Apply all skills learned
Make it amazing

Lesson 12.3: Testing and Refining

Test your project
Get feedback from peers
Make final improvements

Lesson 12.4: Graduation

Present your project
Celebrate achievements
Receive certificate
Prepare for next steps

Materials Provided

All students will receive the following materials and resources:

LEARNING MATERIALS

Illustrated course notes designed for teens
Video tutorials (recorded sessions)
Step-by-step guides with examples
Code snippets and templates
Practice exercises and challenges
Fun activities and games

SOFTWARE AND TOOLS

VS Code installation guide
Links to free design resources (images, icons)
Google Fonts recommendations
Color palette generators
Browser developer tools guide

PROJECT RESOURCES

Starter templates and boilerplates
Sample project files
Wireframe templates (paper and digital)
Design briefs for practice
Portfolio templates

TEMPLATES

Portfolio website template
Project documentation templates
Presentation templates
Resume templates for teens

ONLINE RESOURCES

Curated list of free learning resources
Recommended YouTube channels
Interactive coding games (Code.org, etc.)
Coding challenges for beginners
Safe and age-appropriate learning tools

BONUS MATERIALS

How to find free images and assets
Introduction to freelancing (teen-friendly)
Social media tips for young designers
Next steps after the bootcamp

SUPPORT

Access to student community (WhatsApp/Discord)
Office hours with instructors
Peer support and collaboration
Technical support during the bootcamp
Additional practice materials

WHAT YOU TAKE HOME

Completed portfolio website (live)
All project files and code
Certificate of completion
New skills and confidence
Lifelong access to learning materials

Your Instructors

Ahmed Mmohammed Saba

Developer

Bootcamp Features

2 Hands-on Projects
Capstone Project

Job Guarantee
65 Alumni

Interview Prep
Resume Building

About SEDI Minna

+2349084159576 OR info@sediminna.gov.ng