Web Development Fundamentals – HTML and CSS

Overview

You'll begin at square one, learning how the Web and web pages work, and then steadily build from there. By the end of the course, you'll have the skills to create a website that is responsive to the device that it is being viewed on and contains features needed for good website development. Learn how to use the latest techniques, best practices, and current web standards – including HTML5 and CSS3.

Target Audience

The course is aimed at anyone who has been charged with setting up a website or developing web content as well as those interested in getting a better understanding of the many technologies used to deliver web content.

Prerequisites

Delegates should have some technical experience, a working knowledge of the Windows operating environment and be familiar with the concepts and use of the Internet.

Objectives

At the end of this course you will be able to:

• Describe how web pages are delivered over the Internet

• Build structured HTML pages with text, links, images, tables and forms

• Use style sheets (CSS) for colours, background, formatting text, page layout and simple transition, transformation and animation effects

• Use Responsive Web Design techniques to make pages display well on all devices they may be viewed on.

• Import and use common Bootstrap components to automate responsive webpage design and layout

Outline

The course will be delivered through instructor-led sessions, supported by short exercises. Your learning will be augmented through a ‘Hackathon’ to bring together the skills, techniques and knowledge and use basic Agile methodology.

HTML

• How the web works
• HTML syntax
• HTML Entities and Symbols
• Structural HTML
• Hyperlinks
• Images
• Lists
• Tables
• Forms
• The Head Element
• The DOM

CSS

• 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

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

Bootstrap Framework

• Importing via CDN
• Using fonts
• Grid layouts
• Bootstrap colours
• Margins and padding
• Prebuilt components – Navbar / Carousel / Cards

Hackathon