Plan the page around one action
Want more background?
The idea in everyday life
Begin with the supplied fictional tutor brief and a separate editable copy of the runnable files. Identify who visits, the question each section answers and the single session-planning action. Follow README section 1 to make your own brief and narrow-screen sketch before changing the design.
A website is a decision path: each section answers the next question needed to act.
One step at a time.
Use the sample or information you have permission to use. Keep your work as you go. You can pause between steps.
- 1
Download the Website build starter pack in Resources. Unzip it; keep an untouched reference copy and a my-site copy. Open my-site/index.html in a current browser and README.md in a plain-text editor. No installer or server is needed locally.
- 2
Use the supplied fictional Maple Study Club brief: grades 6–8, primary action prepare a sample session plan, route promise → subjects → process → plan → privacy. Sketch the route in one narrow column.
- 3
Change the club name and one sentence while retaining the fictional-practice label. Use the supplied original 48×48 SVG; record its reuse permission.
- 4
Record completed plans / attempts as the primary metric. The live launch later needs a GitHub account with public-repository/Pages access; account setup and deployment waiting are additional elapsed time.
See how it works.
The supplied folder opens as a working fictional tutor page. The brief serves grades 6–8; visitors read the subjects/process and prepare a local session plan. It collects no contact data. A 60-minute example means 4 × $10 = $40. The README is the required, included step-by-step guide; the long external video is optional.
Did you cover these?
- The pack opens locally and your edited copy is separate from the reference.
- The brief names grades 6–8, the session-plan action and the complete section route.
- The metric is completed plans / attempts; local practice and required public launch setup are clear.
What to finish
A one-page brief, content outline, and low-fidelity mobile wireframe.
Watch for this
Starting from a visual template before deciding what the visitor must understand or do.
How can I tell I understand it?
Every planned section supports the primary visitor action or a necessary trust question.
Quick knowledge check
Answer all 3 questions. Get at least 2 right and the lesson completes automatically.
You’ll get an explanation for each answer. Signed in? Your results save to your account.
Pass the check. We’ll save the progress.
Answer all 3 questions above and get at least 2 right. You can review the explanations and try again.
Go to the knowledge checkOptional course overview video
Full Stack Web Development for Beginners
From freeCodeCamp.org. Watch here or open it on YouTube .
If you watch the optional overview, notice how the page purpose determines its content order; compare that reasoning with your supplied brief and sketch.Tools, templates, and lesson sources
Tools and templates
Tools open in a new tab so you can keep your place here.
Sources and further reading
Explore the references behind this lesson.
Report a problem with this lesson
Tell us what went wrong. Please leave out personal information and private project contents.