Loading...
CodeCraft Juniors
Web Development · Day 1 of 40

How the Web Works & Setup

Understand websites, browsers, files and the roles of HTML, CSS and JavaScript, then set up a clean project folder.

60 minutesLive + guided practiceBeginner friendly
01 · LEARNING TARGETS

What students should understand today

  • Browser And Website BasicsUnderstand what it means, where it is used and practise it in a small example.
  • Front-End FilesUnderstand what it means, where it is used and practise it in a small example.
  • Project FoldersUnderstand what it means, where it is used and practise it in a small example.
  • Editor + Browser WorkflowUnderstand what it means, where it is used and practise it in a small example.
02 · TEACHING NOTES

Core lesson

Start with the idea, not the syntax. Understand websites, browsers, files and the roles of HTML, CSS and JavaScript, then set up a clean project folder. The instructor should connect the topic to something students already understand, then introduce the exact terms they need for today.

Build in small steps. The teacher demonstrates one clean pattern, then students recreate it with their own content and styling so they understand the structure rather than copying blindly. Pause after each important change and ask students to predict what will happen before running or refreshing the result.

Develop good habits. Students should keep the browser and code editor open side-by-side, save often and refresh after each small change. Keep naming, indentation/structure and output clear enough that another student could follow the work.

03 · LIVE BUILD

Create a first project folder with index.html, styles-v3.css?v=20260915-simple2 and script-v3.js and open it in the browser.

1

Plan the result first: decide what the user/student should see or be able to do at the end.

2

Build the smallest working version using today’s main concepts and test it immediately.

3

Add one improvement at a time and ask students to explain why each line/element is needed.

4

Test with at least two different inputs, screen sizes or scenarios and fix one issue together.

04 · STUDENT CHALLENGE

Independent practice

Explain in your own words what HTML, CSS and JavaScript each control.

Teacher rule: give hints in steps, but avoid typing the complete answer for the student. The goal is to make them think, try and correct.
05 · END-OF-DAY CHECK

Before moving to the next day

  • I can explain browser and website basics in simple words.
  • I can explain front-end files in simple words.
  • I can explain project folders in simple words.
  • I can complete today’s mini task with only small hints.
Optional 10–15 minute home practice

Rebuild today’s example once without looking at the finished version. Change the names, values, text or design so the result is clearly your own.

Day 2 →