Front-end engineering standards: HTML, CSS, javascript and typescript in practice

A ready-made course you customise for your organisation, with a live session deck and two surveys. You only add the 10 details that are specific to your organisation.

See the live deck See the full outline

Try the course Preview the survey

Length: 40 min
Lessons: 6 lessons
Frequency: At onboarding of web developers
Last reviewed: 21 Oct 2026

JavaScript and the DOM

What would you do?

A form total shows "1020" instead of 30 because values are read as text

Try it: this is one of 17 interactive activities in the course.

What's included

Three pieces that work together

Copy once, get everything. Learners prepare on their own, you answer questions live, and the surveys tell you what stuck.

Self-paced course

Short lessons with real workplace scenarios, not walls of text.

6 lessons, about 40 minutes
Accordion, process, scenario, timeline and quizzes

Live session deck

An AhaSlides presentation to run after the course, in person or online.

10 slides
Quiz, poll, word cloud, scale slides
A closing slide for your contacts

Two surveys

Find out what landed, and whether people use it on the job.

Post-course feedback, about 2 minutes
30-day check-in
Anonymous by default
Results feed your next refresher

Learning objectives

At the end of this course, learners can

Each objective and the lesson that covers it.

ID	Objective	Source	Where it's covered
TO 328.0	Achieve ≥ 80% on the final assessment	-	Whole course
SO 328.1	Write semantic HTML and predict how a page lays out with the CSS box model, flexbox and media queries	Best practice	Whole course
SO 328.2	Explain how JavaScript changes the page (DOM, events) and spot the common bugs: type coercion, shared state and unhandled errors	Best practice	Whole course
SO 328.3	Choose when a framework component helps and when plain markup is enough	Best practice	Whole course
SO 328.4	Apply basic performance and responsive checks before a change ships	Best practice	Whole course
SO 328.5	Follow the team's naming, formatting and review conventions + your info	Organisation's front-end standards; WCAG 2.2 for published web content	Whole course

Your part: what a template can't do for you

Your workplace details: fill in the 10 highlighted fields so the course describes your own policies, contacts and locations.
Records: record completion in your own LMS or record system.

Course outline

6 lessons, about 40 minutes

Minutes per lesson are an estimate, shared out by page count.

ContentInteractiveVideoYou customise

A page that looked different on every phone

3 pages

7 min

Before you beginNoteList

The releaseTextImage

What went wrongTimelineQuiz

HTML structure and CSS layout

3 pages

7 min

Structure firstAccordion

Predict the renderSorting activity

CheckFlashcardsMatching quiz

JavaScript and the DOM

3 pages

7 min

What the browser doesProcess

Spot the bugScenarioQuiz

Errors and eventsTextChecklistMulti-select quiz

Frameworks and component thinking

3 pages

7 min

What a component isTabs

Single-page or multi-pageTableNoteYour info

Pick the right shapeScenarioQuiz

Performance, responsive design and speaking up

3 pages

7 min

Before it shipsChecklistNoteYour info

Raise it earlyProcessYour infoKey fact

CheckQuiz

Team conventions and final assessment

2 pages

5 min

Our conventionsAccordionYour infoYour info

PracticeQuizKey factNoteButtonYour info

Live deck and surveys

10 slides to run live, two surveys to close the loop

Pink slides are interactive. Both surveys are anonymous; pink questions are written for this course.

ContentTitle, agenda, "bring a laptop or just read along

PollWhich devices do you test on before release?

Quiz<div class="box"> is width: 50% inside a 400 px parent with 10 px padding on the box and default sizing. Its content width is… (200 px ✔ · 190 px · 210 px · 220 px)

Content · customiseThe box model and flexbox in two diagrams; the team checklist {{FRONTEND_RELEASE_CHECKLIST_LINK}}

Quiz10" + 5 in JavaScript gives… ("105" ✔ · 15 · NaN · an error)

Word cloudThe strangest front-end bug you have met

QuizA team wants a framework for a three-page marketing site. Best first move? (Start with static pages and add script only where needed ✔)

ScaleHow confident are you reading someone else's CSS?

Q&AAsk the trainer anything

Content · customiseClosing {{HELP_CONTACT}}, {{COURSE_URL}}, {{SURVEY_2_URL}}

Post-course feedback: 11 questions, about 2 min

Overall rating 5 stars
Relevant, realistic, right length, helpful activities agree/disagree grid
What was most useful? multi-select
Confidence before this course, and now 1-5 scale
Confidence in HTML structure · CSS layout · JavaScript · frameworks · performance grid
Do you test at several widths and text sizes before release? multiple choice
Which front-end topic do you most want covered? short text
I can ask a basic front-end question without feeling judged. 1-5 scale
One thing we should change or add open text
Would you recommend this course? NPS

30-day check-in

Have you used what you learned since the course? multiple choice
How confident are you today? Compare with day 1 1-5 scale
Do you know where to find the team's front-end standards and release checklist? yes / no / not sure
A moment where the training helped, or where you weren't sure open text
Which topics should the next refresher focus on? ranking

Results show whether people use the training on the job, not just whether they finished it.

Make it yours

10 fields to fill in, and you're ready

Everything else is done. These are the details only your organisation knows; each one is highlighted inside the course.

Approved frameworks, versions and build tools{{APPROVED_FRONTEND_STACK}}
Frontend release checklist link{{FRONTEND_RELEASE_CHECKLIST_LINK}}
Naming convention link{{NAMING_CONVENTION_LINK}}
Engineering standards link{{ENGINEERING_STANDARDS_LINK}}
Help contact{{HELP_CONTACT}}
Next course link{{NEXT_COURSE_LINK}}

Show all 10 fields

LMS or record system{{LMS_OR_RECORD_SYSTEM}}
Survey 1 URL{{SURVEY_1_URL}}
Survey 2 URL{{SURVEY_2_URL}}
Course URL{{COURSE_URL}}

FAQ

Common questions

Can I run front-end engineering standards: HTML, CSS, javascript and typescript in practice training online?

Yes. The course is self-paced and online, and the live deck lets you add a live session in the room or online.

How often is this training needed?

At onboarding of web developers, and before a shared component library or style guide is adopted.

Who needs this training?

Front-end and web developers in product teams, including new hires from bootcamps; run by engineering managers with L&D.

What records should I keep?

Record completion in your own LMS or record system, so you can show who finished the course and when.

Can I edit the content?

Yes, everything. Change the wording, swap scenarios for ones from your workplace, add your logo, or remove parts that don't apply.

Related templates

Often taught together

All Web and mobile templates →

Global

Mobile app development and release standards for android and ios teams

Android and iOS developers and QA engineers · Web and mobile

40 min

Global

Accessible web development: WCAG, ARIA and keyboard navigation

Front-end developers · Web and mobile

40 min

Last reviewed: 21 October 2026Templates are a starting point, not legal advice.

Ready to run it?

Open the live deck to see how the session runs alongside the course and both surveys.

See the live deck