Web Designing

Introduction to:

• Internet?
• Internet-Based Services
• WWW?
• HTTP?
• URL?
• Website & its Advantages
• Web Server & its Types?
• Web Browser & its types?
• SMTP Server?
• ISP?
• HTML?
• Hyperlink?
• DNS?
• W3C?

Required Web Knowledge

• Required Web Skills & Tools
• Web - Domain Names
• How to Get a Domain Name?
• Domain Extension Types
• Choosing a Domain Name
• What are Sub-Domains
• Web - Site Construction
• What to Put on Your Website?
• How to Design Your Website?
• How to Make a Website Interactive?
• How to Code Your Website?
• How to Create a Search Engine Friendly Website?
• Securing Source Code Methods
• Web - Hosting Concepts
• Hosting Platforms
• Hosting Types
• Free Hosting
• Shared Hosting
• Virtual Dedicated Hosting
• Dedicated Hosting
• Collocated Hosting
• Web - Ecommerce Hosting
• Hosting Components

Website Popularity & Backup Methods

• Web - Site Backup & Its Types
• Web - Site Statistics
• Statistics Programs
• Statistics Terminology
• Web - Site Popularity
• Search Engine Inclusion
• Open directory inclusion
• Google AdWords
• Advertising Programs
• Whitepapers and Article
• Site Link Exchange

Introduction to:

• What is HTML
• Looking at obsolete elements
• Exploring content models in HTML5
• Understanding tags and containers
• Examining the structure of an HTML document

Fundamentals of HTML:

• Understanding whitespace and comments
• Displaying text with paragraphs
• Applying style
• Using block and inline tags
• Displaying characters with references

Metadata and the Document Head:

• Exploring the front matter of HTML
• Adding scripting elements
• Using the meta tag
• Using block and inline tags
• Optimizing your page for search engines

Working with Text:

• Controlling line breaks and spaces
• Exploring phrase elements
• Using font markup elements
• Highlighting text with mark
• Adding headings
• Using quotations and quote marks
• Exploring preformatted text
• Formatting lists
• Forcing text direction
• Suggesting word-break opportunities
• Annotating East Asian languages

A CSS Primer:

• Introducing CSS
• Understanding CSS placement
• Exploring CSS syntax
• Understanding CSS units of measure
• Some CSS examples

Images:

• Using images
• Flowing text around an image
• Breaking lines around an image
• Aligning images
• Mapping links in an image

Hyperlinks:

• Understanding URLs
• Working with hyperlinks
• Using relative URLs
• Specifying a base URL
• Linking within a page
• Using image links

Lists:

• Exploring list types
• List elements in depth
• Using text menus with unordered lists

Structural, Contextual, and Semantic Elements:

• Introduction to HTML semantics
• Exploring an example
• Marking up figures and illustrations
• Creating collapsible details

Audio, Video, and Other Objects:

• Embedding audio
• Embedding video

Tables:

• Table basics
• Exploring the semantic parts of a table
• Grouping columns

Frames:

• Frames overview
• Using traditional frames
• Exploring inline frames using iframe
• Simulating frames with CSS

Forms:

• Introducing forms
• Using text elements
• Using checkboxes and radio buttons
• Creating selection lists and dropdown lists
• Submit and button elements
• Using an image as a submit button
• Keeping context with the hidden element
• Setting tab order
• Preloading an autocomplete list using the data list feature
• Displaying results with output

Introduction to CSS

• What is CSS
• What do you need?
• Exploring a simple document
• Using an external style sheet
• Creating your base styles
• Examining completely styled page

CSS Status

• Understanding the three levels of CSS
• Exploring the limitations of CSS
• Browser Support
• Examining the three ways to apply style
• Using the style attribute
• Using the style tag
• Using an external style sheet
• Using the div tag to style block-level code
• Using the span tag to style inline-level code

CSS Syntax

• Understanding the parts of a style
• Using comments and white space
• Formatting statements
• Selecting code with class selectors and ID selectors
• Selecting behaviours with pseudo-selectors
• Using descendant and attribute selectors
• Understanding units and values
• Understanding the context box model
• Using the context box model with Internet Explorer

Formatting Text and Images

• Choosing fonts
• Changing text size
• Modifying font attributes
• Creating and formatting image borders
• Wrapping text around images

Using Color, Backgrounds & Borders

• Using color properties and values
• Using background color and images
• Using the border property
• Modifying border styles
• Using CSS level 3 border extensions

Formatting Links

• Formatting links using pseudo-selectors
• Using text decoration to show links
• Formatting links with sprites and unordered lists

Positioning

• Positioning content using absolute positioning
• Understanding the position: Relative property
• Positioning content using float property
• Using fixed positioning
• Layering content by adjusting the z-index

Introduction

• Introduction to this course
• Term and technology we’ll be covering
• What you need to complete this course

Preparing the HTML Content and Structure

• Creating the main HTML containers
• Adding content into header
• Adding content to the main section
• Adding content to the atmosphere section
• Adding content to the how-to section
• Adding the navigation
• Adding the footer content

Creating the Style and Layout with CSS

• Importing a Google Font
• Defining the basic text styles
• Styling the heading and page container
• Styling the logo and hero item
• Creating the button style
• Setting up a three column row
• Adding graphics to the main section
• Clearing floats with pseudo-elements
• Styling the atmosphere section
• Styling the how-to section aside elements
• Styling the how-to section blockquote element
• Adding content with pseudo-elements
• Styling the footer

Creating a Menu System with CSS

• Repositioning the nav
• Styling the nav list items and links
• Showing and hiding the nav submenus
• Device compatibility options for nav
• Adding indication arrows

Making Layout Adjustments for Large and Medium Screens

• Making minor adjustments for larger screens
• Making adjustments for large screens
• Making adjustments for medium screens

Making Layout Adjustments for Small Screens

• Moving the navigation for smaller screens
• Adjusting to the logo and hero elements
• Rearranging the main and atmosphere sections
• Rearranging the how-to section
• Rearranging the navigation
• Adjusting the spacing of navigation and footer

Making Adjustments for the Smallest Screens

• Adjustments for the header and hero
• Adjusting the how-to section
• Adjusting the footer

Making the Layout and Content Adjustments for Print

• Strategy for printing
• Linking a CSS file for print
• Setting up the base styles
• Setting up the header
• Displaying URL’s when printing
• Main section
• Atmosphere section
• Switching our img tags with CSS
• Styling the footer
• Setting page breaks with CSS

Introduction to JavaScript

• What is JavaScript
• What you should know
• Creating you first JavaScript
• Getting to know the tools and applications

JavaScript Syntax

• Understanding the structure of JavaScript Code
• Where to write you JavaScript
• Creating Variables
• Working with conditional code
• Working with operators
• Sending messages to the console
• Working with loops
• Creating functions

Types and Objects

• Working with arrays
• Working with numbers
• Working with strings
• Working with dates
• Working with objects

Understanding the Document Object Model

• What is the DOM?
• Working with nodes and elements
• Accessing DOM elements
• Changing DOM elements
• Creating DOM elements

Working with Events and Event Listeners

• Introduction to JavaScript event handling
• Working with onClick and onLoad events
• Working with onBlur and onFocus events
• Working with timers

Debuggin JavaScript

• Common JavaScript errors
• Using Firebug
• Going through a debugging session

Building Smarter Forms

• Accessing form elements
• Preventing a form from being submitted
• Hiding and showing form sections

UI Enhancement

• CSS and JavaScript
• Removing and applying CSS classes
• Changing inline styles
• Understanding JavaScript style
• Minifying your code
• Using JavaScript code checkers

JavaScript Libraries

• Introduction to JavaScript libraries
• Linking to multiple JavaScript files
• Introduction to jQuery
• Using a content distribution network to deliver JavaScript files

Advanced JavaScript Features

• Knowing the JavaScript to avoid
• Introduction to regular expressions
• Working with AJAX
• Working with objects and prototypes