HTML 5, CSS 3 & Bootstrap 3

Deploying the first Website to Amazon S3

Learning Objectives – Learning Objectives – In this module you will learn the basics of web development and how to deploy your first website on Amazon Simple Storage Service.

Topics

• Writing HTML code using Header Tags
• Paragraphs
• Ordered and Unordered lists
• Forms, Links and Tables
• Iframes and Images
• Text Formatting
• Image Maps
• Creating an Amazon Web Services (AWS) account and how to deploy a static website to AWS Simple Storage Service (S3)

HTML5

Learning Objectives – In this module you will learn how to use all the elements introduced in HTML5 and their features.

Topics

• Working Encoding URL
• Introduction to XHTML
• Using HTML5 introduced features
• Handling of multiple file upload using multiple attribute
• HTML5 Local Storage
• HTML5 form validate/novalidate
• HTML5 canvas
• Embedding audio and video in a webpage
• Drag and drop, HTML5 web workers and server sent events

CSS

Learning Objectives – In this module, you will learn how to style the HTML elements. You will learn the different ways to write CSS like external, internal, inline.

Topics

• Styling of HTML elements-text
• Links, lists and tables
• Different ways to write CSS e.g. external, internal,
• inline
• Creating Navigation Bars
• Writing Media Rules
• Hide visibility of an element
• CSS Image Sprites and Gradients
• CSS Pseudo Classes and Pseudo Elements

CSS3

Learning Objectives – In this module you will learn about CSS3 Text Effects using different text fonts. Creating 2D and 3D transformations and applying animations, transitions to HTML elements. You will also learn how to use CSS3 resize UI and multiple columns feature

Topics

• CSS3 Text Effects using different text fonts
• Creating 2D and 3D transformations
• Applying animations and transitions to HTML elements
• CSS3 resize UI and multiple columns feature

JavaScript

Learning Objectives – In this module you will learn the basics of JavaScript. At the end you will learn how to manipulate DOM elements

Topics

• Java Script datatypes
• Variables and arrays
• Creating loops and writing if-else decision making statements
• Defining and calling JavaScript functions on events
• Manipulating DOM elements

Twitter Bootstrap 3

Learning Objectives – In this module you will get started with one of the topmost CSS and JS framework Twitter Bootstrap3 which makes the web development fast and easy. You will learn how to include Bootstrap in the project and use different Bootstrap features like fixed drop down menu, carousel, text and image grids.

Topics

• Getting started with Twitter Bootstrap 3
• Bootstrap features like fixed drop down menu
• Carousel, text and image grids
• Custom Thumbnails
• Bootstrap modal
• Using Font Awesome Icons

Projects

Learning Objectives – In this module you will create a complete website using Twitter Bootstrap 3 features that you learnt in the previous module.

Topics

• Building a real world website using Twitter
• Bootstrap 3 features like bootstrap fixed dropdown menu
• Carousel
• Bootstrap modal
• Font awesome icons
• custom Thumbnails
• Text and Image grids
• Accordions
• Signin/Signup form and Jumbotron

Bootstrap ScrollSpy, jQuery and jQuery UI.

Learning Objectives – In this module you will learn about one of the cool features of Bootstrap-Bootstrap ScrollSpy. You will learn how to build a website using Bootstrap ScrollSpy feature. You will also get introduced to jQuery and will learn how to use jQuery UI components e.g Datepicker into your HTML pages. At the end you will learn how to create a Countdown timer using one of the jQuery timer API which can be used to create a timer for an upcoming event.

Topics

• Bootstrap ScrollSpy
• Including jQuery in HTML pages
• Using jQuery UI components e.g Datepicker into your HTML pages
• Creating a Countdown timer using jQuery timer AP

Ajax, Google APIs, Social Plugins

Learning Objectives – In this module you will learn about Asynchronous JavaScript and XML popularly known as AJAX. You will also learn how to make Ajax calls to Google APIs and process the response. At the end you will learn how to include social plugins on your web page provided by LinkedIn, Facebook, Quora and Twitter

Topics

• AJAX XML
• Http Request object
• Making an AJAX call and retrieving the response
• Working with Google APIs Adding social plugins on your web page provided by LinkedIn, Facebook, Quora and Twitter

Projects

Learning Objectives – In this module we will create a website using Twitter Bootstrap 3 features that we learnt in previous

Modules

Topics

• Bootstrap features like fixed drop-down menu
• Carousel, Text and Image grids
• Custom Thumbnails
• Bootstrap modal
• Using Font Awesome Icons

Project Work

Below are the links of the projects that we are going to build during this course:

1. Drink mate web application: HTML5 Video Background
2. E-Commerce website menu: HTML5 CSS3 Big Dropdowns
3. Canvas Clock: HTML5 Canvas Clock
4. URL shortener: URL Shortener using Google URL Shortener API
5. BodhiIT Bootstrap application: Twitter Bootstrap 3
6. Michael Schumacher profile: Twitter Bootstrap 3 ScrollSpy
7. Drink application: jQuery Content Hover Plugin
8. Potluck application: jQuery Countdown Timer Plugins.