Hands-On Technology Transfer
presents
Website Development with HTML5, CSS and Bootstrap (Canada) On-Site Training
This hands on course provides a thorough introduction into the creation of a Website using HTML, CSS and Bootstrap.
Course Description/Agenda
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
- 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
- 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
- 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
- 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
|
Add to favorites
Email this page
|