Website Development with HTML5, CSS and Bootstrap

Hands on Technical Training (HOTT)
Training overview
Professional Course
5 days
From 2,795 USD
Start dates
Online
Inquire for more information

Cedar Rapids
2,795 USD
7/20/2020

Chicago
2,795 USD
7/20/2020

Des Moines
2,795 USD
7/20/2020

Course description

Website Development with HTML5, CSS and Bootstrap

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.

Delivery method

  • Attend face-to-face in the classroom
  • Remote-live (live, instructor-led training from the convenience of your home or office)
  • On-demand streaming (train on your own time and at your own pace)
Want to find out more?

COVID-19 Update

In light of COVID-19, this provider is now delivering some or all of their courses online. Contact them for more information!

Who should attend?

Prerequisites

Basic personal computer skills and basic Internet knowledge.

Training content

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>
  • Adding Meters and Progress Bars
  • Defining Hyperlinks
  • Creating Anchors within a Page
  • Creating an E-mail Link

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 Gradients
    • Linear Gradients
    • Repeating Linear Gradients
    • Radial Gradients
    • Repeating Radial Gradients
  • Creating Rounded Corners, Adding Shadows to Boxes and Using Images as Borders

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

VM146:2

CSS Transforms, Transitions and Animations

  • Using Transforms
    • Rotating 2D Elements
    • Scaling 2D Elements
    • Translating 2D Elements
    • Skewing 2D Elements
  • Configuring a Transition
    • Delaying the Start of a Transition
    • Changing the Speed of a Transition
  • Creating an Animated Menu
  • Animating Buttons with Transitions
  • Using Animations
    • Controlling the Direction of an Animation
    • Controlling the State of an Animation
    • Changing the Speed of an Animation
  • Using the animation Property

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
  • Using CSS Counters
    • Incrementing a Counter
    • Creating Nested Counters

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 Icon Fonts

Displaying Information in Tables

  • Adding Tables to a Page
  • Working with <table>, <tr>, <td>, <th> and <caption> Elements
  • Creating Nested Tables
  • Grouping Table Content
  • 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
  • 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
  • Using Form-Related Pseudo Classes and Elements
  • Controlling Form Layout Using CSS and Tables

Form Validation

  • Form Validation Overview
    • Client-Side Validation
    • Server-Side Validation
  • Overview of Form Security
  • Validating Input Length Using minlength and maxlength Attributes
  • Using the pattern Attribute to Specify Regular Expressions
  • Validation-Related Pseudo-Classes

Using CSS for Page Layout

  • Using CSS for Page Layout
    • 2 Column Fixed Layout
    • 3 Column Fixed Layout
    • 2 Column Fluid Layout
  • Using CSS Grid Layout
    • Defining Grid Columns
    • Defining Grid Row
    • Positioning Rows and Columns
    • Using Grid Areas
    • Adding Spacing Between Rows and Columns
    • Aligning the Grid Container
    • Aligning Grid Items
    • Defining a Nested Grid

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

Why choose HOTT?

50% of class time is hands-on lab exercises

Public classes average less than 12 students

Courses cover over 60 different subject areas

About HOTT

HOTT Logo

Hands On Technology Transfer, Inc. (HOTT)  

We offer competency-based IT training programs in more than 100 cities across the United States, Canada and the United Kingdom, covering over 60 IT subject areas. These programs are designed with one main goal – making sure you and your staff...


Read more and show all training delivered by this supplier

Request info

Fill out your details to find out more about Website Development with HTML5, CSS and Bootstrap.

  Contact the provider

  Get more information

  Register your interest

Contact info

Hands on Technical Training (HOTT)


 Show phone number
www.traininghott.com


Reviews

Average rating 5

Based on 2 reviews

R.S., U.S. Election Assistance Commission
(5)
The instructor was amazing and super helpful. He covered an incredible amount of ground in an amazingly short time. The transition from topic to topic was seamless as each topic builds upon the previous one. Course definitely recommended. Thank you!
K.M., Medtexx Medical Corporation
(5)
This was a great workshop. HOTT was very accommodating with my travel necessities. Very impressive. I am sincerely looking forward to my next workshop (PHP) in a couple of weeks.
Request Information

Have a question about this course? Fill out this form and the provider will get in touch with you shortly

View again
Supplier Directory
Join our Supplier Directory to:
- Gain Traffic
- Get Noticed
- Showcase Your Services
- Free Listing Available