Across five days, this course develops the front-end skills needed to turn page content, styles and browser scripts into usable web experiences. You will work with HTML, CSS and JavaScript to structure content, control presentation, support accessibility, improve search visibility and add user interaction. The learning is designed to help you produce cleaner interfaces and make stronger technical decisions in day-to-day web development work.
Front-end Web Developer
Front-end foundations for developer roles
The Front-end Web Developer course is designed for professionals preparing for, or moving into, front-end development work. You’ll learn the practical knowledge needed to create structured page content, manage visual presentation and use JavaScript to control behaviour in the browser. Through guided exercises, you’ll build confidence with core front-end techniques and understand how these skills support clearer implementation, better usability and more effective contribution within web development teams.
Learning objectives
- Structure pages with HTML
- Control presentation with CSS
- Create flexible page layouts
- Use JavaScript fundamentals
- Update content through the DOM
- Respond to user actions
- Support accessible web experiences
- Improve search and loading performance
Key facts
Certification
This course includes a certificate of attendance and supports progression towards front-end developer certification.
Who it’s for
This course is suitable for learners looking to become front-end developers and build professional-grade websites.
Prerequisites
Basic programming knowledge is required before attending this course. Introduction to Programming – JavaScript is recommended for new programmers.
Exam information
This course does not include an exam.
Optional extras
This course includes hands-on labs and access to learning materials for continued practice.
Pre-course
No preparation work is required for this course.
Course syllabus
Dive into the detail of the course by looking at the syllabus below.
Day one
- Session 1: Introduction to HTML & CSS
- Setting up the development environment
- How the web works
- HTML
- Elements, tags, and attributes
- HTML document structure
- An introduction to mobile-first development
- Special characters
- Comments
- CSS
- Rules, selectors, and properties
- Linking HTML and CSS
- Chrome's Developer Tools
- Publishing
Day one
- Session 2: Text elements
- Headings and paragraphs
- Other text elements
- Styling text elements
- CSS values and units
- Web fonts
- Unordered and ordered lists
- Styling lists
Day one
- Session 3: Hyperlinks
- Hyperlinks
- URLs and paths
- Document fragments
- Email links
- Styling links
Day one
- Session 4: More CSS selectors
- Selectors again
- Selector lists
- Type, class, and ID selectors
- Attribute selectors
- Pseudo-classes and pseudo-elements
- Combinators
- The cascade, specificity and inheritance
- At-rules
Day two
- Session 5: Structuring content
- Block and inline elements
- The box model
- Styling boxes
- Semantic elements
- Line breaks and horizontal rules
- An introduction to layout using CSS Grid
Day two
- Session 6: Multimedia and embedding
- Images
- Image formats
- Figures and captions
- Styling images
- Background images
- Video and audio
- Media container formats
- Video text tracks
- Embedding content with iframe, embed, and object briefly
- SVG
- Icons
Day two
- Session 7: Tables
- Table rows and cells
- Headers
- Spanning
- Column groups
- Captions
- Semantic table tags
- Styling tables
Day two
- Session 8: Forms
- The purpose of forms
- Forms
- Labels and text boxes
- Buttons
- Styling forms
- Sending form data to the server
- Grouping form fields
- Input types and attributes
- Drop down boxes
- Progress bars
Day three
- Session 9: More layout
- Normal flow
- Floats
- Positioning
- Flexbox
- Multi-column layout
- Grid
- Responsive design
- Media queries
- Feature queries
- Responsive media
- Intrinsic layout patterns
Day three
- Session 10: More CSS properties
- Rounded corners
- Multiple backgrounds
- Gradients
- Shadows
- Text effects
- Transforms
- Transitions
- Animations
- And more...
Day three
- Session 11: CSS frameworks and preprocessors
- CSS frameworks
- The pros and cons of CSS frameworks
- Popular CSS frameworks
- CSS preprocessors
- CSS preprocessor features
- Popular CSS preprocessors
- CSS's var function
Day three
- Session 12: Introduction to UI/UX design, SEO, & performance optimisation
- UI/UX design
- UI/UX design guidelines and best practices
- Search Engine Optimisation (SEO)
- HTML tags that are important for SEO
- SEO best practices
- Website performance optimisation
Day four
- Session 13: Introduction to JavaScript
- Setting up the development environment
- What is JavaScript?
- HTML and CSS - a brief refresher
- Embedding JavaScript in HTML
- Executing JavaScript with NodeJS
- Browser JS vs. NodeJS
- A simple example
- Syntax and comments
- ECMAScript and JavaScript
- Deployment
Day four
- Session 14: Values, variables and types
- Values
- Variables
- var, let, and const
- Naming conventions
- Numbers
- Strings
- Booleans
- Arrays
- Objects
- The typeof operator
- Dynamic typing
- Type conversion and coercion
- Arithmetic
- Handling text incl. template literals
Day four
- Session 15: Functions
- Function declarations
- Parameters
- Return statements
- Function expressions
- Arrow functions
- Declaration, expression, or arrow function?
- Calling functions
- Pass by value or reference?
- An introduction to scope
- Default parameters
- Built-in functions
Day four
- Session 16: Program flow
- Relational and logical operators
- Equalty comparisons and sameness
- Truthy and falsey
- Conditional statements
- Iterative statements
- Error handling
- Debugging
Day five
- Session 17: Objects
- Objects again
- Properties
- Dot notation
- Square bracket notation
- Function properties, methods
- The this keyword
- Iterating over object properties
- The Object type
- Array objects and methods
- String objects and methods
Day five
- Session 18: DOM referencing and manipulation
- HTML elements and JavaScript objects
- The DOM
- DOM referencing
- DOM data types
- Element manipulation
- Creating, adding and removing elements
Day five
- Session 19: Event handling
- Events
- Event propagation
- Event listeners
- Event listener registration
- The event object
Day five
- Session 20: Web APIs
- What is an API?
- Browser APIs
- Accessing browser APIs
- Date
- Math
- RegExp
- JSON
- Client-side storage
- Geolocation
- Others
FAQs
Gain practical front-end development skills across HTML, CSS and JavaScript over this five-day Front-end Web Developer course. You’ll cover responsive layouts, page structure, styling, accessibility, SEO, performance and browser-based interactivity, helping you build websites that are usable, adaptable and ready for real-world digital projects.
How practical is the Front-end Web Developer course?
The course is built around practical front-end tasks, not theory in isolation. You will work with HTML, CSS and JavaScript to structure content, control layout, handle user interaction and inspect page behaviour. This helps you connect each technique to the kind of implementation, testing and refinement work expected in web development environments.
Is this course suitable for software testers moving into web development?
Yes, if you have basic programming knowledge and want to build stronger front-end capability. The course can help testers understand how browser-based pages are structured, styled and scripted, making it easier to inspect defects, discuss issues with developers and build confidence when working around web interfaces.
What level of programming knowledge do I need?
Basic programming knowledge is required before attending. We recommend Introduction to Programming – JavaScript for learners who are new to programming, as this course covers JavaScript syntax, functions, logic, objects, DOM manipulation and event handling. Some familiarity with programming concepts will help you follow the practical exercises and apply the techniques with more confidence.
How will the course help me work with front-end defects?
You’ll learn how to build a clearer understanding of how page structure, styling rules and browser scripts affect what users see and do on a website. That knowledge can help you investigate layout issues, interaction problems, accessibility concerns and performance-related behaviour with more precision during development, review or testing.
Does the course cover accessibility, SEO and performance?
Yes. The syllabus includes UI/UX design, SEO, HTML tags that are important for SEO, SEO best practice and website performance optimisation. It also covers semantic HTML, forms, media, layout and JavaScript behaviour, helping you understand how front-end choices can affect usability, search visibility and page speed.
Will I receive anything after completing the course?
The course includes access to materials, post-course support and advice, and a certificate of attendance. These elements can help you revisit the techniques covered after training and continue practicing as you apply the skills within your own development or testing context.
What our customers say
“John made the subject matter interesting. The pacing was spot on, and he clearly knew what he was talking about and was able to communicate that easily. Very pleased and would highly recommend.”
Gavin, Government
“Great course. Alan has been courteous and informative throughout. Highly recommended and will absolutely be coming back for more courses.”
Bradley, Software Engineer, Government
Why study with TSG?
25+ years' experience
Trusted by individuals, businesses and public sector organisations for over 25 years.
20,000+ learners trained
Join a network of learners focused on developing their software testing skills
98% customer satisfaction
TSG trainers are frequently rated as ‘good’ or ‘excellent’ by our learners