Back to Courses

Website Development with HTML5, CSS and Bootstrap

Training by Software Skills Training, Inc.

Inquire Now

On-Site / Training

Inquire to Request Schedule

USD 2,295.00

Inquire Book Now

RESPONSE RATE

Details
Outline
About the Provider

Book Now

Inquire

Details

This hands on course provides a thorough introduction into the creation of a Website using HTML, CSS and Bootstrap v3.3.7. 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.

Prerequisites: Basic personal computer skills and basic Internet knowledge.

Outline

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

Reviews

Be the first to write a review about this course.

Write a Review

Software Skills Training, Inc. (SST) is a leading provider of task-oriented training courses for IT professionals. Our task-based training philosophy is focused on saving you time and assuring that you are able to work more productively and with higher quality results after training. Founded in 2000, SST has delivered high-powered training to tens of thousands of IT professionals.

Choose from a variety of delivery options:

Face-to-face in the classroom in over 100 cities
Live remote attendance
On-demand streaming
Group training at your facility

Guarantees

We guarantee the overall quality of our courses with a 100% money-back guarantee. If any student is not totally satisfied for any reason, they can withdraw before the second day of class. Notify the instructor and return all course materials and receive a 100% refund.

Why Choose SST?

50% hands on labs
Small class sizes typically under 14 students
Expert instructors that average over 10 years of teaching experience
Students can retake any portion of a class that has been completed, within 12 months at no extra cost
No registration fees or cancellation fees

View Complete Profile

Web Design