HTML & CSS

Reading Time: 3 minutes

HTML & CSS

    Module 1: Overview of HTML5

      Learning Objective:

      • New in HTML5
      • New DOCTYPE and Character Set
      • New and Depreciated Elements
      • Semantic Markup
      • Simplifying Selection using the Selectors API
      • JavaScript Logging and Debugging
      • Window.JSON
      • DOM Level

      Module 2: Using HTML5

        Learning Objective:

        • Currently available features
        • Browser Support
        • Detective native availability of features
        • Working with emulation

        Hands-on:

        • Create a web page that verifies the availability of new HTML5 features.

        Module 3: Understanding HTML5 Markup

          Learning Objective:

          • HTML5 Page Structure
          • HTML5 DOCTYPE
          • HTML5 markup structural elements
          • Semantic elements

          Hands-on:

          • Create a web page that make usage of new structural and semantic elements like main, section, aside, article, header, footer and other semantic elements.

          Module 4: HTML5 Forms

            Learning Objective:

            • HTML Forms VsXForms
            • Functional Forms
            • New Form Attributes and Functions
            • Placeholder Attribute
            • Autocomplete Attribute
            • Autofocus Attribute
            • List Attribute and datalist Element
            • Min and Max attributes
            • ValueAsNumber attribute
            • Required Attribute
            • Checking Forms with Validation
            • Validation Feedback

            Hands-on:

            • Develop a product entry form which uses HTML5 form elements and validation attributes.

            Module 5: HTML 5 Audio & Video

              Learning Objective:

              • The Audio and Video Elements
              • Understanding Audio and Video
              • Working with Audio and Video Containers
              • Understanding Audio and Video Codecs

              Hands-on:

              • Create a web page that displays multiple video and audio using HTML5 video and audio elements.

              Module 6: HTML5 Canvas & SVG

                Learning Objective:

                • Overview of Canvas Vs. SVG
                • Canvas coordinates
                • Context
                • Pixel Data
                • Working with Canvas APIs
                • Drawing Operations
                • Canvas Transforms
                • Understanding and Working with SVG

                Hands-on:

                • Create a web page that makes use of basic Canvas API and also displays svg graphics and drawings.

                Module 7: HTML 5 Storage

                  Learning Objective:

                  • Overview of HTML5 Web Storage
                  • Browser Support for HTML4 Web Storage
                  • Using the HTML5 Web Storage
                  • Checking for Browser Support
                  • Setting and Retrieving Values
                  • Plugging Data Leaks

                  Hands-on:

                  • Create a web page that sites and gets data Run HTML5 web storage.

                  Module 8: CSS3 Overview

                    Learning Objective:

                    • Introducing CSS3
                    • CSS3 Colors, Gradients and Multiple Backgrounds
                    • Rounded Corners and Border-Radius
                    • CSS3 Transforms
                    • Transitions
                    • Animations & 2D Transformations
                    • Web Fonts with @font-face
                    • CSS3 Multicolumn Layouts

                    Hands-on:

                    • Develop a web page that enhances the richness of the page using CSS3,colours,gradients,border radius,animation,transformations and transitions.

                    Module 9: CSS3 Flexbox

                      Learning Objective:

                      • Introduction
                      • Box Model basics
                      • Container
                      • Direction
                      • Wrapping
                      • Justifying & Alignments
                      • Display order
                      • Flexibility
                      • Alignment

                      Hands-on:

                      • Create a page that displays product gallery layout coded with flexbox.

                      Module 10: CSS Grid

                        Learning Objective:

                        • Introduction
                        • Grid Layout
                        • Grid Elements
                        • Placing Grid Lines
                        • Attaching Elements to the Grid
                        • Order and Align Items in Grid Layout
                        • Grid Flow
                        • Opening Grid Spaces

                        Hands-on:

                        • Create a page that displays product gallery layout coded with CSS grid.