Seminar Website Development with HTML5, CSS and Bootstrap Seminar

Presented by Hands-On Technology Transfer, Inc

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, Inc
Hands On Technology Transfer Computer Training

Summary

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

Delivery Method

Seminar Seminar

Also Available As

On-Site Training On-Site Training

Who Should Attend

Web Programmers

 
Search similar training
Email this page
Print this document
 

Dates and Locations

Indianapolis, IN
12/18/2017 - 12/21/2017
Tuition: $2095

Detroit, MI
12/18/2017 - 12/21/2017
Tuition: $2095

Lansing, MI
12/18/2017 - 12/21/2017
Tuition: $2095

Kansas City, MO
12/18/2017 - 12/21/2017
Tuition: $2095

Springfield, MO
12/18/2017 - 12/21/2017
Tuition: $2095

see all dates/locations

 

Frequently Asked
Questions

Payment Options
Bill Me/Invoice
Credit Card

Register
Online
Fax Form

Availability
Select a date from the list at the bottom of the page for specific information about that class.

Other Information
Seminar

All Date/Location Information

Arizona (Find training in Arizona)
1/8/2018-1/11/2018 in Phoenix, AZ         Find a seminar in Phoenix AZ
1/8/2018-1/11/2018 in Tucson, AZ         Find a seminar in Tucson AZ

California (Find training in California)
1/8/2018-1/11/2018 in Bakersfield, CA         Find a seminar in Bakersfield CA
1/8/2018-1/11/2018 in Fresno, CA         Find a seminar in Fresno CA
1/8/2018-1/11/2018 in Irvine, CA         Find a seminar in Irvine CA
1/8/2018-1/11/2018 in Los Angeles, CA         Find a seminar in Los Angeles CA
1/8/2018-1/11/2018 in Modesto, CA         Find a seminar in Modesto CA
1/8/2018-1/11/2018 in Oakland, CA         Find a seminar in Oakland CA
1/8/2018-1/11/2018 in Riverside, CA         Find a seminar in Riverside CA
1/8/2018-1/11/2018 in Sacramento, CA         Find a seminar in Sacramento CA
1/8/2018-1/11/2018 in San Bernardino, CA         Find a seminar in San Bernardino CA
1/8/2018-1/11/2018 in San Diego, CA         Find a seminar in San Diego CA
1/8/2018-1/11/2018 in San Francisco, CA         Find a seminar in San Francisco CA
1/8/2018-1/11/2018 in San Jose, CA         Find a seminar in San Jose CA
1/8/2018-1/11/2018 in Santa Clarita, CA         Find a seminar in Santa Clarita CA
1/8/2018-1/11/2018 in Santa Monica, CA         Find a seminar in Santa Monica CA
1/8/2018-1/11/2018 in Temecula, CA         Find a seminar in Temecula CA

Colorado (Find training in Colorado)
12/18/2017-12/21/2017 in Denver, CO         Find a seminar in Denver CO

Iowa (Find training in Iowa)
12/18/2017-12/21/2017 in Cedar Rapids, IA         Find a seminar in Cedar Rapids IA
12/18/2017-12/21/2017 in Des Moines, IA         Find a seminar in Des Moines IA

Idaho (Find training in Idaho)
12/18/2017-12/21/2017 in Boise, ID         Find a seminar in Boise ID

Illinois (Find training in Illinois)
12/18/2017-12/21/2017 in Chicago, IL         Find a seminar in Chicago IL
12/18/2017-12/21/2017 in Schaumburg, IL         Find a seminar in Schaumburg IL
12/18/2017-12/21/2017 in Springfield, IL         Find a seminar in Springfield IL

Indiana (Find training in Indiana)
12/18/2017-12/21/2017 in Indianapolis, IN         Find a seminar in Indianapolis IN

Michigan (Find training in Michigan)
12/18/2017-12/21/2017 in Detroit, MI         Find a seminar in Detroit MI
12/18/2017-12/21/2017 in Lansing, MI         Find a seminar in Lansing MI

Minnesota (Find training in Minnesota)
12/18/2017-12/21/2017 in Minneapolis, MN         Find a seminar in Minneapolis MN

Missouri (Find training in Missouri)
12/18/2017-12/21/2017 in Kansas City, MO         Find a seminar in Kansas City MO
12/18/2017-12/21/2017 in Springfield, MO         Find a seminar in Springfield MO
12/18/2017-12/21/2017 in St Charles, MO         Find a seminar in St Charles MO

Nebraska (Find training in Nebraska)
12/18/2017-12/21/2017 in Omaha, NE         Find a seminar in Omaha NE

New Mexico (Find training in New Mexico)
1/8/2018-1/11/2018 in Albuquerque, NM         Find a seminar in Albuquerque NM
1/8/2018-1/11/2018 in Las Cruces, NM         Find a seminar in Las Cruces NM

Nevada (Find training in Nevada)
1/8/2018-1/11/2018 in Las Vegas, NV         Find a seminar in Las Vegas NV

Oregon (Find training in Oregon)
12/18/2017-12/21/2017 in Portland, OR         Find a seminar in Portland OR

Texas (Find training in Texas)
1/8/2018-1/11/2018 in El Paso, TX         Find a seminar in El Paso TX

Utah (Find training in Utah)
12/18/2017-12/21/2017 in Salt Lake City, UT         Find a seminar in Salt Lake City UT

Washington (Find training in Washington)
12/18/2017-12/21/2017 in Seattle, WA         Find a seminar in Seattle WA
12/18/2017-12/21/2017 in Spokane, WA         Find a seminar in Spokane WA

Wisconsin (Find training in Wisconsin)
12/18/2017-12/21/2017 in Milwaukee, WI         Find a seminar in Milwaukee WI