Web Development Fundamentals - HTML and CSS Training

The Web Development Fundamentals – HTML and CSS course is designed for participants who want to begin with the fundamentals of web technologies and develop the skills required to create modern web pages.

The course starts by explaining how the Web and web pages work before progressively moving into practical development with HTML and CSS. Participants will learn how to build structured web pages, control their visual appearance with CSS, and create responsive layouts that adapt to different screen sizes and devices.

Throughout the course, learners will work with current techniques, established best practices, and modern web standards, including HTML5 and CSS3. They will create pages containing text, links, images, tables, and forms while using CSS to manage colours, backgrounds, text formatting, page layouts, and basic visual effects.

By the end of the course, participants will have developed the skills required to build responsive websites that adapt to the devices on which they are viewed while applying key practices associated with effective web development.

Participants should have:

• Some general technical experience
• A working knowledge of the Windows operating environment
• Familiarity with basic Internet concepts and usage

This course is suitable for:

• Anyone responsible for setting up a website
• Professionals who create or maintain web content
• Individuals who want a better understanding of the technologies used to create and deliver web content

By the end of the course, participants should be able to:

• Explain how web pages are delivered over the Internet.
• Create structured HTML pages containing text, hyperlinks, images, tables, and forms.
• Use CSS to control colours, backgrounds, text formatting, and page layouts.
• Apply basic CSS transitions, transformations, and animation effects.
• Use Responsive Web Design techniques to create pages that display effectively across different devices.
• Import and use common Bootstrap components to simplify responsive webpage design and layout.

Course Delivery

The course is delivered through instructor-led sessions supported by short practical exercises.

Learning is reinforced through a Hackathon, where participants bring together the skills, techniques, and knowledge developed throughout the course while applying a basic Agile methodology.

HTML

The HTML section introduces the structure of web pages and the techniques used to organize different types of web content.

Topics include:

• How the Web works
• HTML syntax
• HTML Entities and Symbols
• Structural HTML
• Hyperlinks
• Images
• Lists
• Tables
• Forms
• The Head Element
• The Document Object Model (DOM)

CSS

The CSS section explores how the appearance and layout of HTML content can be controlled and enhanced.

Topics include:

• Basic CSS
• CSS and the DOM
• Selectors and Inheritance
• Text and Colours
• Measurement Units
• The Box Model
• Positioning Elements
• Images and Backgrounds
• Lists
• Links
• Tables
• Transitions, Transformations and Animation

Responsive Web Design

This section introduces techniques for creating web pages that adapt effectively to desktop, tablet, mobile, and other screen sizes.

Topics include:

• Mobile First Design
• Responsive Design and Media Queries
• Grid Systems
• Flexbox
• Responsive Images

Bootstrap Framework

Participants will explore how Bootstrap can simplify the development of responsive layouts and common webpage components.

Topics include:

• Importing Bootstrap through a CDN
• Using fonts
• Grid layouts
• Bootstrap colours
• Margins and padding
• Prebuilt Bootstrap components:
  • Navbar
  • Carousel
  • Cards

Hackathon

The course concludes with a Hackathon designed to bring together the HTML, CSS, Responsive Web Design, and Bootstrap knowledge developed during the training.

Participants will apply their technical skills in a practical exercise while also gaining experience with a basic Agile way of working.