Learn HTML, CSS and JavaScript through guided practice. Build responsive layouts, add interactivity, work with live data and finish with a deployed multi-page website you can share.
Register for Web DevelopmentEach week has three sessions, clear session goals and an assessment. Weekly assignments build your skills before the two-week mini project.
The outline proposes short adaptive AugMind quizzes after each teaching session. Supporting practice tools are optional; tutor access arrangements are still being confirmed.
Expand each week for session topics, goals and assessments.
Understand browsers, servers and URLs, with an overview of frontend, backend and databases. Set up VS Code, Live Server and DevTools; learn HTML5 boilerplate, tags, attributes and nesting. An optional AugMind placement check establishes your starting level. Goal: create a working HTML file from a blank editor.
Use headings, paragraphs, relative and absolute links, images, video, alt text, lists and tables. Structure pages with header, nav, main, section and footer. Goal: build a semantic page with linked pages and media.
Build labelled forms with input types, select, textarea, buttons and built-in validation. Explore accessibility and basic SEO: titles, meta descriptions and one h1. Check code with the W3C validator. Goal: build a valid page with a working, labelled form.
Complete Quiz 1 and a personal profile page with sections, an image, a list, a table and a contact form. Marking: structure 40%, forms and accessibility 30%, valid code 20%, neatness 10%.
Explore inline, internal and external CSS. Use element, class, ID and grouping selectors, plus :hover and :focus. Goal: link a stylesheet and target the correct elements.
Understand which styles win and why. Apply colours, backgrounds, px/em/rem/% units, typography and Google Fonts. Goal: explain and fix style overrides.
Use box-sizing, display, positioning, hover effects and transitions to style your Week 1 page. Goal: control element spacing and layout.
Complete Quiz 2 and style your Week 1 page. Marking: selectors 30%, box model and spacing 30%, visual consistency 25%, clean code 15%.
Explore layout logic, navbars, card rows and centering. Goal: build a navbar and card layout with Flexbox.
Build two-dimensional layouts with CSS Grid, choose between Flexbox and Grid, and use CSS variables for a consistent theme. Goal: build a complete page layout with Grid.
Apply mobile-first design and media queries. Compare mobile and desktop layouts and test in DevTools device mode. Goal: make your page work across screen sizes.
Complete Quiz 3 and make your page fully responsive. Marking: layout 35%, responsiveness 35%, consistency 15%, clean code 15%.
Link JavaScript to a page and use the browser console. Learn let, const, data types and operators. Goal: store and work with data in variables.
Use if/else, switch, for and while, alongside arrays and common array methods. Goal: solve small problems using conditions and loops.
Explore objects, function parameters, return values, arrow functions and template literals. Goal: write reusable functions.
Complete Quiz 4 and small logic exercises such as a grade calculator. Marking: correct output 50%, use of functions 25%, readable code 25%.
Understand the DOM, select elements with querySelector, and change text, styles and classes. Goal: update a page using JavaScript.
Handle clicks, inputs and form submissions. Create and remove elements. Goal: make buttons and inputs update the page.
Validate forms with helpful errors, save data with localStorage, and explore to-do lists, tabs or modals. Goal: build a small interactive feature.
Complete Quiz 5 and add a validated form plus one interactive feature to your site. Marking: functionality 40%, DOM and events 25%, validation 20%, readable code 15%.
Understand JSON and request public API data using fetch and async/await. Handle errors with try/catch. Goal: display API data on a page.
Find bugs using the console and DevTools. Create a GitHub repository, commit and push your work. Goal: fix bugs and save progress on GitHub.
Deploy using GitHub Pages, Netlify or Vercel. Review assignments and explore mini-project options and requirements. Goal: deploy a page and choose a project idea.
Complete Quiz 6 and submit an API-powered page on GitHub with a live deployment. Marking: working data feature 40%, error handling 20%, Git use 20%, deployment 20%.
Choose a small business site, portfolio, event page or community service page. List pages and features, sketch wireframes and set up the repository. Goal: a clear plan approved by the tutor.
Create the HTML structure and CSS styling for every page, committing progress regularly. Goal: all pages built and styled.
Implement JavaScript features and review progress with the tutor. Goal: a working first version.
Test phone sizes, HTML validity and accessibility. Complete peer review in pairs and make final fixes. Goal: a polished, tested site.
Deploy the final version and complete a practical test covering all six teaching weeks. Results can be compared with the optional Week 1 placement check. Goal: a live link and completed final assessment.
Deliver a live demo or recorded walkthrough of about five minutes. Receive feedback and add the project to your CV or LinkedIn. Goal: present your work confidently.
Use VS Code, Live Server, browser DevTools, the W3C validator, Git and GitHub. Deployment options include GitHub Pages, Netlify and Vercel.
Optional supporting resources include MDN Web Docs, W3Schools, freeCodeCamp, Codecademy and AugMind. Tutors can choose resources that suit their class.
Practise the fundamentals, develop your project and share your finished work online.
Proceed to Registration