01 Performance
Graduates plan, build, style, connect and deploy complete multi-page websites with interactivity and a backend data layer. The final portfolio piece is a live, published website the learner owns and can show to anyone.
02 Objectives
- Write semantic, accessible HTML documents
- Produce responsive layouts confidently with modern CSS
- Programme interactivity with JavaScript and the DOM
- Explain client-server communication and consume APIs
- Persist and retrieve data through a simple backend
- Deploy a finished site with hosting best practice
03 Content
Web Foundations
- How the web works
- HTML structure & semantics
- Links, media & forms
- Accessibility basics
Styling with CSS
- Selectors, boxes & colours
- Flexbox & grid layouts
- Responsive design & mobile-first thinking
- Polish: shadows, spacing, typography
JavaScript Interactivity
- JS syntax essentials
- DOM manipulation
- Events & forms
- Fetching data from APIs
Backend & Data Basics
- Servers & hosting explained
- Intro to Node/Express or Python backends
- Databases in plain language
- Simple CRUD API
Ship It: Deploying Real Projects
- Project planning & wireframing
- Git & collaboration basics
- Free hosting & domains
- Portfolio presentation
04 Knowledge
- How browsers, DNS, HTTP and servers cooperate to render a page
- The CSS box model, stacking contexts and layout systems
- JavaScript types, functions and asynchronous basics
- REST API concepts: requests, responses and JSON
- Deployment: environments, domains and HTTPS basics
05 Skills
- Translating a design mock-up into pixel-faithful markup and styles
- Debugging layout issues with browser developer tools
- Adding and validating forms with good UX
- Fetching and rendering remote data safely
- Publishing updates via Git-based deployment flow
06 Key Competencies
- Design sensitivity: spacing, hierarchy and readability
- Accessibility-first building habits
- Systematic debugging using devtools and console errors
- Version control as a professional habit
07 Values
- Excellence: doing careful, complete work rather than rushing
- Integrity: honest effort, original work and truthful reporting
- Curiosity: asking questions and exploring beyond the lesson
- Responsibility: safe, ethical use of technology and information
- Growth mindset: treating mistakes as steps toward mastery
08 Learning Activities
Clone-the-design sprints
Recreating provided designs to sharpen HTML/CSS precision.
JavaScript widget workshop
Building tabs, sliders, modals and filters from scratch.
API integration lab
Connecting live public APIs with graceful loading and error states.
Deployment day
Every learner ships their portfolio site live during class.
09 Teaching & Learning Resources
- Dynamic Academy course materials and practice sets
- A laptop or desktop with required free software installed
- Internet access for research and tool accounts
- Access to the student portal for announcements, assignments and progress tracking
10 Evaluation Guide
11 Practical Projects
Project 1:Personal Profile Page
A fully responsive multi-section page published online.
Project 2:Interactive Dashboard App
Data-driven frontend consuming a real API with search/filter.
Project 3:Capstone: Complete Website
Client-style brief executed end-to-end: design, build, backend form handling, deploy.
12 Learning Outcomes
- Structure pages with semantic HTML
- Style responsive layouts with modern CSS
- Add interactivity with JavaScript
- Understand how servers, APIs and databases work together
- Plan, build and deploy a complete personal website
13 Course Pathway
Learners progress through a guided technology ladder at Dynamic Academy: foundations (Digital Skills / HTML & CSS / Python Programming), then specialisation (Web Development, Artificial Intelligence, Robotics, Game Development, UI/UX Design), then advanced practice (Backend Development, AI Chatbot Development). Each stage's final project feeds the next stage's portfolio.