Website Development with HTML5, CSS and Bootstrap (Canada) Seminar

Presented by Hands-On Technology Transfer

Hands On Technology Transfer Computer Training

Bring this seminar on-site to your facility for groups of 10 or more.

This hands on course provides a thorough introduction into the creation of a Website using HTML, CSS and Bootstrap.

Course Description

This hands on course provides a thorough introduction into the creation of a Website using HTML, CSS and Bootstrap. The course starts with thorough coverage of HTML and Cascading Style Sheets (CSS) and progresses to using the Bootstrap framework to create mobile-friendly websites.

Topics include use of HTML5 semantic tags, block-level and inline elements, creating links, ordered and unordered lists, creation of tables and forms. Students will learn to attach CSS to a page using several different techniques, CSS selectors and pseudo-classes, CSS box model, and a variety of CSS properties.

Students will learn how to create a Bootstrap page utilizing the grid system, implement commonly used components (such as dropdowns and navigation bars), use Bootstraps CSS classes to format page elements and use Bootstrap's plugins to add tabs, modals and accordions to a page.

Comprehensive hands on exercises are integrated throughout to reinforce learning and develop real competency.

Course Prerequisites

Basic personal computer skills and basic Internet knowledge.

What You Will Learn

Creating a valid HTML document
Using various tags to markup text
Creating and using CSS to format the appearance of an HTML document
Using HTML5 semantic elements to define the structure of a page
Changing the appearance of elements in a document with type, id, class and attribute selectors
Creating CSS3 effects such as drop shadows, text shadows and using custom fonts
Creating ordered, unordered and description lists
Displaying images on a Web page
Creating hyperlinks using text or images
Using the a tag to create anchors in a page
Displaying information using an HTML table
Including forms in an HTML document
Adding video and audio to a Web page
Building a Web page using the Bootstrap grid system
Using Bootstrap to style links, buttons and form controls
Adding components to a page such as dropdowns, thumbnails, alerts and glyphicons

Course Overview

HTML Fundamentals HTTP Requests and Responses Static vs. Dynamic Pages Tag and Attribute Fundamentals Document Structure Understanding <DOCTYPE> Creating a Page Title Indicating the Character Set <head> and <body> Tags Browser Support HTML5 Shiv CSS Reset Conditional Comments Using Data Attributes	Structuring an HTML Document Adding Headings Adding Paragraphs Working with the <div> Tag Adding Quotes to a Page HTML5 Semantic Tags <header>, <footer>, <nav>, <article>, <section> Defining Hyperlinks
Formatting Text Using Inline Tags <b>, <i>, <strong>, <em> Using the <span> and <mark> Tags Defining Inline Styles Changing Text Color Changing Font Characteristics Changing Horizontal Alignment Using Character Entities	Introduction to Cascading Style Sheets (CSS) Overview of Cascading Style Sheets (CSS) Creating CSS Rules Setting CSS Properties Working with Colors Units of Measurement (px, em, %) Working with Fonts Defining Type Selectors Defining Class and ID Selectors Using Attribute Selectors Grouping and Combining Selectors Linking to External Style Sheets Embedded Style Sheets Overriding Styles with !important
CSS Properties Text-Related Properties text-decoration, color, line-height Font-Related Properties font-family, font-size, font-weight Background-Related Properties background-color, background-image, background-position Using @font-face to Add Custom Fonts Changing the Opacity of Text and Images Creating Rounded Corners, Adding Shadows to Boxes and Using Images as Borders Creating Simple Animations Using transitions, transform, and animation	CSS Box Model Positioning Elements Static, Absolute and Relative Controlling z-index Floating and Clearing Elements Visual Effects Setting visibility and display Using overflow and clip Properties Setting Vertical Alignment Box-Related Properties margin, padding, border Setting the Size of an Element
CSS Selectors and Pseudo-Classes Relational Selectors Descendant Direct-Child General Sibling Adjacent Sibling Pseudo-Classes and Elements Styling Links with :link, :visited, :active, :hover Adding Content with :before and :after Attribute Selectors "Starts With" Selector "Ends With" Selector "Contains" Selector Selecting the nth Element Selecting the nth of a Type	Working with Lists Types of Lists Ordered Lists Unordered Lists Description Lists Creating List Items Using the <li> Tag Creating Nested Lists Using CSS to Style a List Using Lists to Create a Navigation Menu
Adding Images to a Page Discussion of Common Image Formats Displaying Images on a Web Page Using src and alt Attributes Sizing an Image Using width and height Attributes Common Uses of Images Image Thumbnails Favicons Image Rollovers Working with Client-Side Image Maps Using the picture Element to Create Responsive Images	Displaying Information in Tables Adding Tables to a Page Working with <table>, <tr>, <td>, <th> and <caption> Elements Creating Nested Tables Using CSS to Style a Table Controlling Table Borders border-collapse and border-spacing Properties Using rowspan and colspan Attributes
Working with Forms Defining a Form Using Common Form Attributes action, method, enctype, autocomplete, novalidate Input Elements email, url, tel, search Form Validation pattern and required Attributes Understanding Form Submission Adding <label> and <fieldset> Elements Single-line and Multi-line Text Fields Radio Buttons and Checkboxes Dropdown and Selection Lists Submit, Reset and Push Buttons Controlling Form Layout Using CSS and Tables	Audio and Video Browser Support for Audio/Video Formats Supplying Fallbacks Creating Audio Effects with HTML5 <audio> Elements and Attributes Adding Video with HTML5 <video> Elements and Attributes <source> Elements
Bootstrap Overview Overview of Mobile First Design CSS3 Media Queries Downloading Bootstrap Customizing Bootstrap Adding Custom CSS to Bootstrap	Bootstrap Grid System Working with Grids Defining Rows, Containers and Columns Offsetting Columns Creating Nested Columns Changing Column Order
Bootstrap Base CSS Overview of Bootstrap's Base CSS Using Helper Classes and Responsive Utilities Working with Typography Classes Formatting Lists Formatting Tables Creating a Striped Table Creating a Responsive Table Enhancing the Appearance of Forms Displaying Inline Forms Displaying Horizontal Forms Formatting Images Creating Responsive Images Styling Links and Buttons	Bootstrap Components Overview of Bootstrap Components Using Glyphicons to Add Symbols to Buttons and Links Creating Dropdowns Creating Navigation Tabbed Navigation Pill Navigation Navigation Bars Collapsible Navigation Bars Breadcrumbs Grouping Inputs, Buttons and Lists Formatting Page Headers Creating Panels Grouping Panels Creating a Thumbnail Gallery Creating Progress Bars and Alerts
Bootstrap Plugins Plugin Overview Creating Tabbed Navigation Creating a Slideshow Using the Carousel Plugin Using Accordions to Display a Large Amount of Content Adding a Dialog Box Using the Modal Plugin Displaying Secondary Information Using Popovers or Tooltips

Course Benefits

Course materials include student guide, hands-on lab manual and USB flash drive for examples and lab work
Students receive a certificate of completion at the end of class
Students can retake any portion of a class that has been completed, within 12 months at no extra cost
There are no registration fees or cancellation fees

More Seminar Information

Hands-On Technology Transfer
Summary	This hands on course provides a thorough introduction into the creation of a Website using HTML, CSS and Bootstrap.
Delivery Method	Seminar
Also Available As	On-Site Training
Who Should Attend	Web Programmers