Front-End Development · Course Guide
Web Creators Club in Ottawa: Real-World Responsive Web Design & JavaScript for Teens
How authentic project briefs, responsive CSS architecture, and modern JavaScript event listeners equip teens with real-world digital craftsmanship.
📍 In-Person Classes in Stittsville, Ottawa & 🌐 Live Online Anywhere
Whether your family prefers an intimate physical classroom setting in Stittsville, Ottawa or the comfort of a live interactive online classroom from home anywhere, ReaderNook offers ultra-small class sizes with dedicated instructor mentorship.
- In-Person Cohorts (Stittsville, Ottawa): Strict cap of 3 students per class for maximum hands-on attention and personalized guidance.
- Live Online Cohorts: Small groups with a maximum of 6 students with real-time screen sharing and collaborative debugging.
- Zero Homework Anxiety: All required building, testing, and concept mastery happen in class.
Why Learn Web Creators Club?
For teens who already know the basics of HTML and CSS, the Web Creators Club offers an authentic project-cycle experience. Modern web development requires more than static pages: it demands responsive layouts that look stunning on everything from smartphones to 4K monitors, accessible interaction for keyboard users, and dynamic JavaScript behaviors.
Working from a realistic client brief, teens architect a responsive two-page discovery website. They learn semantic HTML5 landmarks, CSS Flexbox card systems, and connect native buttons to JavaScript DOM event listeners. This course equips teens with genuine portfolio-ready skills, preparing them for high school computer science, personal projects, and future digital careers.
Skills Your Child Will Practise
- Client Project Briefs: Translating audience requirements into testable design criteria and UI wireframes.
- Semantic HTML5 Architecture: Structuring accessible pages with <header>, <nav>, <main>, <section>, and <footer>.
- Mobile-First Responsive CSS: Implementing Flexbox card grids, relative units, and media queries for multi-device viewing.
- JavaScript DOM Event Handling: Selecting DOM elements with querySelector and binding click event listeners.
- Stateful UI Disclosures: Toggling hidden panels with synchronized ARIA attributes (aria-expanded, hidden).
The Course Journey
The course has six live one-hour meetings. Chapters are learning units: a chapter may span meetings, with time for practice, questions and saving work. Optional extensions depend on readiness and available time.
| Module | Focus & Learning Objectives | Tangible Evidence of Learning |
|---|---|---|
| Chapter 01 | Plan Your Discovery Station — Project Brief Choose an audience and purpose; sketch two pages and review prerequisites. | Present a feasible brief with three success criteria. |
| Chapter 02 | Lay the Foundation — Semantic HTML Skeleton Create semantic sections, navigation, and project content. | Show a usable page structure before styling. |
| Chapter 03 | Flex & Flow — Mobile-First Grid Layout Adapt layouts and test narrow and wide browser windows. | Demonstrate readable content at two widths. |
| Chapter 04 | Make It Click — Add JavaScript Interactivity Connect a button to a JavaScript event handler. | Make one click produce a visible change. |
| Chapter 05 | Reveal & Hide — Build a Working Panel Implement a bounded feature such as a revealable fact panel. | Explain the event and changed page element. |
| Chapter 06 | Code Review & Portfolio Showcase Day Test keyboard use, fix a usability issue, and present. | Compare the result with the original success criteria. |
Course Details at a Glance
Target Age & Readiness
Recommended Age: 12+
Prerequisites: Can create linked HTML pages, use a shared CSS file, and explain basic selectors.
Class Format & Schedule
Duration: 6 weekly sessions × 60 minutes
Tuition: See the current total price for your chosen class on the registration page before booking.
Equipment & Tools
Equipment: A laptop with a code editor and browser; bring a previous website or complete the readiness task.
Work Preservation: All projects are saved locally on the student's computer.
Takeaway Creation
Project Outcome: A responsive project website with one JavaScript interaction.
Ready to showcase to family, teachers, and friends.
Frequently Asked Questions for Parents
Got questions about enrolling, class structure, or student readiness? Here are the most common questions Ottawa parents ask us:
Where do in-person sessions take place?
In Stittsville, Ottawa, easily accessible for teens in Stittsville, Kanata, Nepean, and West Ottawa.
Is there an online option?
Yes, live interactive cohorts with small groups (up to 6 students) provide hands-on code reviews and web development mentorship.
What prerequisites are recommended?
Comfort with basic HTML tags and CSS selectors (from Build Your First Website or equivalent experience).
What real-world skills do students learn?
Client project briefs, semantic HTML5, CSS Flexbox card grids, mobile vs desktop responsive layouts, DOM manipulation with JavaScript, and ARIA accessibility.
What is the project outcome?
A complete, responsive multi-page discovery website featuring an interactive JavaScript disclosure panel, tested for keyboard accessibility and mobile responsiveness.
Ready for Your Child to Become a Creator?
Choose from currently available dates and teaching modes. Groups have a maximum of 3 learners in person or 6 online.