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. 

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

Speak to our team
Guidance from experienced advisors

If you’re unsure which course aligns with your technical requirements or career direction, we’ll help you assess your options and choose with confidence.  

Build capability
Develop skills that support real delivery outcomes

From software testing to broader digital skills, we work with you to design learning that strengthens capability, improves performance, and supports long-term business goals.

Quote request

Please complete the form to ensure your quote is accurate and we will contact you soon.

Page {{ step }} of 2

Back Next