Web development with HTML, CSS and Javascript || Digikids inspiring innovation

Web development with HTML, CSS and Javascript

Module Description

This course teaches kids the basics of web development using HTML, CSS, and JavaScript! Over 10 lessons, you'll build an interactive hero adventure page step-by-step, starting with simple text and pictures, adding colors and layouts, and making it come alive with clicks and quizzes.

What You’ll Learn?

Build your first web page with HTML text and headings
Add pictures and links to make your hero page exciting
Style pages with CSS colors, fonts, and fun designs
Arrange elements like a comic with CSS boxes and borders
Add magic buttons and messages using JavaScript
Make things change on clicks with JS events
Swap pictures and reveal surprises with JS manipulation
Create quizzes and decisions using JS conditions
Get user inputs with forms to customize your hero
Combine everything into an interactive adventure game

Perfect for kids who love stories and superheroes – no prior coding needed! This course makes web building feel like play, starting from scratch with easy projects. You'll gain skills in HTML, CSS, and JavaScript while creating something cool to share, building confidence and creativity along the way.

Module Curriculum

Lesson 1: Building Your First Web Page with HTML

Kids will learn the basics of HTML to create a simple page about their favorite animal or superhero, adding headings and paragraphs to tell a fun story.

Project: Create a 'My Favorite Hero' page with text
Concepts: HTML structure, tags, headings, paragraphs

Lesson 2: Adding Pictures and Links in HTML

Building on the basic page, kids add images of their hero and links to fun videos or sites, making the page more exciting like a treasure map.

Project: Add images and links to your hero page
Concepts: Images, links, attributes

Lesson 3: Making It Pretty with CSS Colors and Fonts

Now style the hero page with CSS! Kids change colors and fonts to make it look magical, like coloring a picture book.

Project: Color your hero page with fun backgrounds and text styles
Concepts: CSS syntax, selectors, colors, fonts

Lesson 4: Arranging Things with CSS Boxes

Use CSS boxes to layout the page like a comic strip, adding borders and spaces around images and text on the hero page.

Project: Design a comic layout for your hero story
Concepts: Box model, borders, padding, margins

Lesson 5: Hello World with JavaScript Magic

Introduce JS to make the page interactive! Kids add a button that shows a fun message, starting to bring the hero page to life.

Project: Add a button that says hello from your hero
Concepts: Variables, alerts, basic functions

Lesson 6: Clicking and Changing with JS Events

Add clicks to change colors or text on the hero page, like making the hero's cape change color on button press.

Project: Button to change your hero's outfit color
Concepts: Events, addEventListener, style changes

Lesson 7: Playing with Pictures Using JS

Use JS to swap images or show hidden pictures, turning the hero page into an interactive storybook with surprises.

Project: Click to reveal hidden hero powers (images)
Concepts: DOM manipulation, src attribute, createElement

Lesson 8: Making Choices with JS Conditions

Add if statements for a simple quiz about the hero, with right/wrong messages, building decision-making in the story.

Project: Hero quiz with correct answer rewards
Concepts: If-else, operators, conditions

Lesson 9: Getting Input with Forms and JS

Create a form to let users name their hero or choose powers, updating the page dynamically with their choices.

Project: Customize your hero with user input
Concepts: Forms, input events, updating DOM

Lesson 10: Final Adventure Page with All Skills

Combine everything to polish the hero adventure page into an interactive game, like a choose-your-own-adventure with buttons and changes.

Project: Build an interactive hero adventure game
Concepts: Integrating HTML, CSS, JS; loops for repeats

Light

Dark