Web Designing


Mr. Ubaid Ullah, Mr. Mustafa


Morning, Afternoon


2 Months


PKR 8,000



Brief introduction

Web Designing is the process of creating websites. In this course, student will learn how to design and build beautiful websites by learning the basic principles of Web Concepts, HTML, CSS, Responsive & JavaScript which are all instrumental in the design process of a website. Student will also learn Form and Tables, which are the common uses in all modern websites.

By the end of this course, student have all the skills required to design and build own websites or even start a career with one of the thousands of companies that have a website.

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


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


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


  • 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


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


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


  • 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 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 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