This HTML and CSS course introduces you to building modern, responsive websites through applied, scenario-based learning. Build capability in core front-end techniques, including structuring content, styling interfaces and creating adaptable layouts. Apply techniques directly to development tasks used in live environments, helping you to contribute more effectively to web projects and improve the quality and usability of digital experiences.
Modern Responsive Websites with HTML & CSS
Core web development skills for beginners
This three-day course is designed for individuals starting out in web development or looking to strengthen their front-end skills. You will learn how to design and deliver structured, responsive websites using HTML and CSS, covering everything from page layout to accessibility and performance. The course centres on applying techniques in realistic development scenarios, helping you develop the confidence to create and maintain websites that work across devices. It supports early-stage professionals looking to build a strong technical foundation for further development work.
Learning objectives:
- Create and deploy structured websites
- Structure content using semantic HTML
- Style pages effectively with CSS
- Create responsive layouts with grid and flexbox
- Integrate multimedia content
- Develop forms with modern inputs
- Apply accessibility best practices
- Optimise website performance and search visibility
Key facts
Certification
This is a skills and knowledge-based course with no formal accreditation.
Who it’s for
This course is designed for individuals new to web development or looking to improve responsive design skills using HTML and CSS.
Prerequisites
This course requires general digital literacy, including familiarity with browsers and file management.
Exam information
This course does not include an exam.
Optional extras
There are no optional extras for this course.
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.
- Session 1: INTRODUCTION
- 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
- 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
- Session 3: HYPERLINKS
- Hyperlinks
- URLs and paths
- Document fragments
- Email links
- Styling links
- 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
- 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
- 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
- Session 7: TABLES
- Table rows and cells
- Headers
- Spanning
- Column groups
- Captions
- Semantic table tags
- Styling tables
- 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
- Session 9: MORE LAYOUT
- Normal flow
- Floats
- Positioning
- Flexbox
- Multi-column layout
- Grid
- Responsive design
- Media queries
- Feature queries
- Responsive media
- Intrinsic layout patterns
- Session 10: MORE CSS PROPERTIES
- Rounded corners
- Multiple backgrounds
- Gradients
- Shadows
- Text effects
- Transforms
- Transitions
- Animations
- And more...
- 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 var function
- 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
FAQs:
This course introduces HTML and CSS with a focus on building modern, responsive websites. You will build capability through guided practical tasks, covering structure, styling and layout. It is designed to help you create accessible, high-performing websites suitable for real-world development environments.
What will I build during the course?
You will create web pages using structured HTML and styled CSS, using responsive design approaches to ensure they work across devices. This includes adding multimedia elements, building forms and refining layout and usability through applied tasks.
How will this course support my career?
You will gain foundational front-end development skills that support roles involving web design or development. These capabilities can help you contribute to digital projects, improve technical understanding and build a pathway into further development skills such as JavaScript.
Can I continue learning after the course?
Yes, you can build on this foundation by progressing into more advanced front-end or JavaScript development courses, expanding your ability to create interactive and dynamic web applications.
Can I practise outside of the sessions?
Yes, you will have access to lab environments and materials that allow you to continue practising outside of scheduled sessions. This helps reinforce your learning and build confidence in applying HTML and CSS techniques independently.
What our customers say
“Thoroughly enjoyed the course, very informative and a good balance between instruction and practical work.”
Megan, Transport
“Tarn is an excellent instructor, enthusiastic and knowledgeable.”
Raymond, Developer, 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