1

BANGLADESH TECHNICAL EDUCATION BOARD

SYLLABUS FOR THE SHORT COURSE

IN

Web Design & Development

Total Duration: 360 hours

1

Index

Sl. No. Subject Page No.

01 Introduction 02

02 Objectives 02

03 Course Outline 02

04 Basic Competencies 03

05 Course Contents 03-21

06 Job List 21

07 Entry Qualification 21

08 Employment Opportunities 22

09 List of Tools/Equipment 22

10 Book Reference 22

2

Introduction:

This is an introductory level course which offers students interested in gaining insight into the field of Web Design & Development. Topics include how web sites are architected, how does communication work, what is involved in building a website, and what all the terminology really means. At the end of the course, students will have a clear understanding of all that is required to build, maintain, and use a website. There are no pre-requisites for this introductory course.

Objectives: After completion of the course the students will be able to

Understand the importance of the web as a medium of communication.

Understand the principles of creating an effective web page, including an in-depth consideration of information architecture.

Become familiar with graphic design principles that relate to web design and learn how to implement these theories into practice.

Develop skills in analyzing the usability of a web site.

Learn the language of the web: Client & Server Side.

Be able to embed social media content into web pages.

Implement and understand how to interpret basic web analytics.

Course Outline:

Name of Course

Duration of Course Entry Qualification

Web Design &

Development

Total 360 hrs 5 days per week, Per day 3 hrs

Minimum SSC Pass

English = 60 hrs Theory = 60 hrs Practical = 240 hrs

Theory = 1 hr per lesson Practice = 2 hrs per practice

Total = 3 hrs per working day

3

Basic Competencies:

Receive and respond, Participate and Lead to workplace communication: o Work with others, Team Environment and Lead small Teams: o Demonstrate work values, Practice career professionalism and Develop & Practice o Negotiation skills. o Practice housekeeping procedures. Occupational health and safety procedure and o Solve problems related to work Activities:

o Use Mathematical Concepts & Techniques and Use Relevant Technologies:

o Personal Manner

Efficiently communicate in English

o Speak in English with confidence. o Communicate with target persons effectively. o Understand the speech of English users. o Achieve better professional performance

Course Contents: Communication English (60 Hours)

Interpret the meaning of given words (by the teachers) - Vocabulary. Speaking on a specific Situation. Public speaking. Exchanging views with target persons. Introducing one self. Describing & narrating events, places, objects etc.

Related Subject-10 hours and General Subject- 20 hours 1 hour/period on the completion of this course trainees will be able to:

1. Speak in English with confidence

2. Communicate with target persons effectively.

3. Understand the speech of English users.

4. Achieve better professional performance.

No. of period

Tropics- Conversational Situation hours

01 Speaking English – Getting Information & Finding one’s way 2

02 Speaking English – About Tools and Equipments 2

03 Speaking English – About meeting someone & participating in class. 2

04 Speaking English – Daily Activities & Asking About Activities 2

05 Speaking English – Evening Activities and about theoretical contents. 2

06 Speaking English – Meeting at the Train station & Asking Question at the Train station.

2

07 Speaking English – Meeting at the Airport & Getting information at the Airport’s

2

08 Speaking English – About different type of Measuring Tools and Cutting Tools

2

4

09 Speaking English – Getting to the Hotel & Asking direction. 2

10 Speaking English – Asking about Buses & Traveling by bus. 2

11 Speaking English - About Practical Class. 2

12 Speaking English – Going by Taxi and Asking the time. 2

13 Speaking English – Arriving early or late and Time and the calendar. 2

14 Speaking English – Living in an Apartment. 2

15 Speaking English – Using the Telephone. 2

16 Speaking English – Getting help in stores and talking about shopping. 2

17 Speaking English – Sending and Receiving Letters. 2

18 Speaking English – Talking about the Weather & Trips and sight-seeing. 2

19 Speaking English – Talking about Eating & Dinner Conversation. 2

20 Speaking English – About Machines and Materials. 2

21 Speaking English – Common Health problem and Quitting & Finding Jobs. 2

22 Speaking English – Office Details and Office Conversation. 2

23 Speaking English – About Practical Job. 2

24 Speaking English – On a specific situation & Public speaking. 2

25 Speaking English – About Exchanging view with a Persons & Introducing oneself.

2

26 Speaking English – Describing and Narrating events, place, Objects etc. 2

27 Speaking English – About different type of computer, operating system, system and operating software, add remove software, DBM, Email and internet.

8

Practical:

1. Speaking on a specific Situation. 2. Public Speaking. 3. Exchanging views with target persons. 4. Introducing one self. 5. Describing & Narrating events, places, objects etc. 6. Producing the meaning of given words (by the teachers)-Vocabulary. 7. Prepared speech.

Theory & Practical Course Overview (300 Hours)

Sl. Topics Hours

1 Basic Concepts 10

2 Html/Html5 40

3 CSS/CSS3 30

4 Responsive Web Design 20

5 JavaScript/JQuery 30

6 Graphics 20

7 PHP 75

8 MySQL 40

9 Domain & Hosting Management 15

10 Final Project 20

5

Basic Concepts (10 Hours)

Sl. Topics Hours

1 History, Purpose & Future of Web 3

What is WWW & Internet?

Elaborate the history of Web

Elaborate the purpose of Web

Elaborate the future of Web

2 Web Protocols 1

Describe the types of web protocols

Functions of web protocols (Http, Https, Ftp)

3 Concept of Domain & Hosting 1

What is Domain & Hosting?

Describe different types of Domain & Hosting

4 Types & Structure of a Web Site 4

Describe different types of website structure

Describe about static & dynamic website

5 Kinds of Web Browsers 1

Describe different types of web browser

Describe web browser usability

Html/Html5 (40 Hours)

Sl. Topics Hours

1 Html Overview 2

What is HTML?

HTML Editors

2 Html Tags, Elements & Attributes 3

Heading Tags, Paragraph Tag, Line Break Tag, Centering Content, Horizontal Lines

HTML elements, HTML Tag vs. Element, Nested HTML Elements

Core Attributes(Id, Class, Title), The href Attribute ,The Lang Attribute, Size Attributes

3 Html Formatting & Styling 3

HTML Formatting Elements(<b>, <strong>, <em>, <mark>, <small>, <del>,<ins>,<sub>,<sup>)

The HTML Style Attribute, HTML Background Color, HTML Text Color, HTML Fonts, HTML Text Size, HTML Text Alignment

4 Html Tables 3

6

Basic HTML tables

A table with borders

A table with collapsed borders

A table with cell padding

A table with headings

A table with left-aligned headings

Horizontal/Vertical table headings

A table with a caption

Table cells that span more than one column

Table cells that span more than one row

A table with cell spacing

A table with HTML tags inside

Tables with different style using id I, Tables with different style using id II

Tables with different style using class I, Tables with different style using class II

5 Html Links & Events 3

Linking, using an absolute URL

Linking, using a relative URL

Changing the color of links

Removing the underline from links

Changing the target of a link

An image as a link

Creating a bookmark link

A link that breaks out of a frame

A mailto link

A mailto link with subject

Global Event Attributes, Window Event Attributes, Form Events, Keyboard & Mouse Events

6 Html Lists, FRAMES & IFRAMES 3

7

An unordered list (default)

An unordered list with disc bullets

An unordered list with circle bullets

An unordered list with square bullets

An unordered list without bullets

An ordered list (default)

An ordered list with numbers

An ordered list with letters

An ordered list with lowercase letters

An ordered list with roman numbers

An ordered list with lowercase roman numbers

A description list

A nested list I

A nested list II

A horizontal list

A horizontal list menu

Creating Frames, Advantages & Disadvantages of Frames

The <frameset> Tag Attributes and The <frame> Tag Attributes

Frame's name and target attributes

The <iframe> Tag & Attributes

7 Html Forms 4

Form with text input

Form with radio button input

Form with text fields and a submit button

Form with a text fields without a name attribute

Grouping Form Data

Send e-mail from a form

Input type text

Input type password

Input type radio

Input type checkbox

Input type button

Input type number - with restrictions

Input type number - with steps

Input type date - with date picker

Input type date - with restrictions

Input type color - with color picker

Input type range

Input type month

Input type week

Input type time

Input type date time

Input type date time-local

Input type email

Input type search

Input type tel

Input type url

8

8 Html Blocks & Layout 4

Block Elements, Inline Elements, Grouping HTML Elements

The <div> tag, The <span> tag

9 Html Media & Objects 3

The <embed> Tag and its Attributes

HTML Object tag, Background Audio

10 Html5 Overview 3

Browser Support, New Features, Backward Compatibility

HTML5 - Syntax

11 Html5 Tags, Elements, Attributes & Events 6

Standard Attributes, Custom Attributes

Custom Events

HTML5 - Web Forms 2.0

12 Html5 Audio & Video 3

HTML5 Local Audio Player with visualizer

Local Audio Player with play list

HTML5 Local Video player

HTML5 SWF Video player

Screen Capture

9

CSS/CSS3 (30 Hours)

Sl. Topics Hours

1 CSS Overview & Syntax 1

What is CSS?

CSS How To

The element selector

The id selector

The class selector (for all elements)

The class selector (for only <p> elements)

Grouping selectors

2 CSS Colors & Background 2

Color Names

RGB (Red, Green, Blue)

Hexadecimal Colors

Set the background color of a page

Set the background color of different elements

Set an image as the background of a page

How to repeat a background image only horizontally

How to position a background image

A fixed background image (this image will not scroll with the rest of the page)

All the background properties in one declaration

Advanced background example

3 CSS Text, Fonts & Links 2

Set the text color of different elements

Align the text

Remove the line under links

Decorate the text

Control the letters in a text

Indent text

Specify the space between characters

Specify the space between lines

Set the text direction of an element

Increase the white space between words

Disable text wrapping inside an element

Vertical alignment of an image inside text

Set the font of a text

Set the size of the font

Set the size of the font in px

Set the size of the font in em

Set the size of the font in percent and em

Set the style of the font

Set the variant of the font

Set the boldness of the font

10

All the font properties in one declaration

Add different colors to visited/unvisited links

Use of text-decoration on links

Specify a background color for links

Add other styles to hyperlinks

Advanced - Create link boxes

Advanced - Create link boxes with borders

4 CSS Margins, Padding & Borders 2

Specify different margins for each side of an element

Let the left margin be inherited from the parent element

The margin shorthand property

Set margin to auto to center the element within its container

Set the left padding of an element

Set the right padding of an element

Set the top padding of an element

Set the bottom padding of an element

All the padding properties in one declaration

Set the width of the four borders

Set the style of the four borders

Set the color of the four borders

All the border properties in one declaration

Add rounded borders to an element

Set different borders on each side

5 CSS Tables & Lists 2

Specify a black border for table, th, and td elements

Use of border-collapse

Single border around the table

Specify the width and height of a table

Set the horizontal alignment of content (text-align)

Set the vertical alignment of content (vertical-align)

Specify the padding for th and td elements

Horizontal dividers

Hover able table

Striped tables

Specify the color of the table borders

Set the position of the table caption

Responsive Table

An unordered list (default)

An unordered list with disc bullets

An unordered list with circle bullets

An unordered list with square bullets

An unordered list without bullets

An ordered list (default)

An ordered list with numbers

An ordered list with letters

An ordered list with lowercase letters

An ordered list with roman numbers

11

An ordered list with lowercase roman numbers

A description list

A nested list I

A nested list II

A horizontal list

A horizontal list menu

6 CSS Forms 3

Form with text input

Form with radio button input

Form with text fields and a submit button

Form with a text fields without a name attribute

Grouping Form Data

Send e-mail from a form

Input type text

Input type password

Input type radio

Input type checkbox

Input type button

Input type number - with restrictions

Input type number - with steps

Input type date - with date picker

Input type date - with restrictions

Input type color - with color picker

Input type range

Input type month

Input type week

Input type time

Input type date time

Input type date time-local

Input type email

Input type search

Input type tel

Input type url

7 CSS Outline, Background & Box Model 2

Demonstrating the box model

Specify an element with a total width of 250px

Draw a line around an element (outline)

Set the style of an outline

Set the color of an outline

Set the width of an outline

8 CSS Display, Dimension & Overflow 2

Set the height and width of an element

Set max-width of an element

Set the height and width of different elements

Set the height and width of an image using percent

Set min-width and max-width of an element

Set min-height and max-height of an element

12

How to hide an element (visibility: hidden)

How to not display an element (display: none)

How to display a block-level element as an inline element

How to display an inline element as a block-level element

How to use CSS together with JavaScript to show hidden content

9 CSS Floating & Positioning 3

Position an element relative to the browser window

Position an element relative to its normal position

Position an element with an absolute value

Overlapping elements

Set the shape of an element

How to create a scroll bar when an element's content is too big to fit

How to set the browser to automatically handle overflow

Set the top edge of an image using a pixel value

Set the bottom edge of an image using a pixel value

Set the left edge of an image using a pixel value

Set the right edge of an image using a pixel value

Change the cursor Position image text (top left corner)

Position image text (top right corner)

Position image text (bottom left corner)

Position image text (bottom right corner)

Position image text (centered)

10 CSS Navigation & Opacity 2

Fully styled vertical navigation bar

Fully styled horizontal navigation bar

Creating transparent images

Creating transparent images - mouse over effect

Reversed mouse over effect for transparent images

Transparent box/div

Transparent box/div with RGBA values

Creating a transparent box with text on a background image

11 CSS Media & Objects 2

Image gallery

Responsive Image gallery

Recognized Media Types

12 CSS3 Overview & Syntax 2

What is CSS3

Difference between CSS & CSS3

CSS3 Modules

CSS3 - Box Sizing

13 CSS3 Rounded Corner & Border Image 2

Add rounded corners to elements

Round each corner separately

Create elliptical corners

Create an image border around an element, using the round keyword

13

Create an image border around an element, using the stretch keyword

Image border - Different slice values

14 CSS3 Fonts, Text & Colors 3

Simple shadow effect

Add a color to the shadow

Add a blur effect to the shadow

White text with black shadow

A red neon glow shadow

A red and blue neon glow shadow

White text with black, blue, and dark blue shadow

Add a simple box-shadow to an element

Add color to box-shadow

Add color and blur effect to box-shadow

Create paper-like cards (text)

Specify how hidden, overflowed content should be signaled to the user

How to display the overflowed content when hover over the element

Allow long words to be able to be broken and wrap onto the next line

Specify line breaking rules

Use your "own" fonts in @font-face rule

Use your "own" fonts in @font-face rule (bold)

Responsive Web Design (20 Hours)

Sl. Topics Hours

1 Responsive Overview 2

2 Flexible Grids, Layouts & Media 3

3 Media Queries 6

Initializing Media Queries

Logical Operators in Media Queries

Height & Width Media Features

Aspect Ratio Media Features

Resolution Media Feature

Media Query Browser Support

4 Viewport 3

Viewport Height & Width

Viewport Scale

Viewport Resolution

Combining Viewport Values

CSS Viewport Rule

5 Bootstrap 6

Bootstrap with CSS

Bootstrap Layout Components

Bootstrap Plugins

Bootstrap Demos

14

JavaScript/JQuery (30 Hours)

Sl. Topics Hours

1 JavaScript Overview & Syntax 2

What is JavaScript?

Client-side JavaScript

Advantages of JavaScript

Limitations of JavaScript

JavaScript Development Tools

Where is JavaScript Today?

JavaScript can change HTML content

JavaScript can change HTML attributes

JavaScript can change CSS style

JavaScript can hide HTML elements

JavaScript can show hidden HTML elements

2 JavaScript Enabling & Placement 2

JavaScript in Internet Explorer

JavaScript in Firefox

JavaScript in Chrome

JavaScript in Opera

Your First JavaScript Script

Whitespace and Line Breaks

Semicolons are Optional

Case Sensitivity

Comments in JavaScript

3 JavaScript Variables, Operators & Strings 4

JavaScript variables

JavaScript variables as algebra

JavaScript numbers and strings

JavaScript var keyword.

Declaring many variables in one statement

Declaring many variables multiline

A variable without a value returns the value undefined

Re-declaring a variable will not destroy the value

Adding JavaScript numbers

Adding JavaScript strings

Adding strings and numbers

Arithmetic operator

Assignment operator

Comparisons operator

String Properties

String Methods

String HTML Wrappers

4 JavaScript Data Types & Control Statement 4

Declare (create) strings

Declare (create) numbers

15

Declare (create) an array

Declare (create) an object

Find the type of a variable

Adding two numbers and a string

Adding a string and two numbers

An undefined variable

An empty variable

If Else, Switch Case

For loop

Looping through HTML headers

While loop

Do While loop

Break a loop

Break and continue a loop

Use a for...in statement to loop through the elements of an object

5 JavaScript Functions & Arrays 3

Array Syntax

Array Properties & Methods

A simple function

A function with an argument

A function with an argument 2

A function that returns a value

A function that converts Fahrenheit to Celsius

A function call without ()

6 JavaScript Validations 2

Basic Form Validation

Data Format Validation

7 jQuery Overview & Syntax 1

jQuery Introduction

What is jQuery

Why jQuery

jQuery Syntax

8 jQuery Selectors & Html 3

The #id Selector

The .class Selector

$("p:first")

$("ul li:first")

$(":button")

$("tr:even")

$("tr:odd")

jQuery HTML

jQuery Get

jQuery Set

jQuery Add

jQuery Remove

jQuery Css Classes

jQuery css()

16

jQuery Dimensions

9 jQuery Events & Effects 3

Mouse Events

Keyboard Events

Form Events

Document/Window Events

jQuery Hide/Show

jQuery Fade

jQuery Slide

jQuery Animate

jQuery stop()

jQuery Callback

jQuery Chaining

10 jQuery Plugins & Widgets 3

How to use Plugins

Plugins lists & Uses

11 jQuery UI Elements 3

JQuery UI Widgets

JQuery UI Effects

Graphics (20 Hours)

Sl. Topics Hours

1 Photoshop Tools Overview 2

Learn usage of different Photoshop tools (Select tools, Path, Crop, Gradient, Type, Color)

2 Different Image Formats 3

Distinguish between different image formats.

Web Usable image formats

Image animations using gif and PNG

3 Image Resizing and Extracting 3

Concept of image sizes acceptable in webpage

Removing Background

Creating Banner and ads

4 Special Effects 3

Different Built-in Filters in Photoshop

Third party plugins

5 PSD to Html Conversion 6

6 Illustrator Tools Overview 3

Identify the tools in Illustrator (Select tools, Path, Crop, Gradient, Type, Color)

Creating Banners with Logo

17

PHP (75 Hours)

Sl. Topics Hours

1 PHP Overview & Installation 2

Basic Concept about PHP

Installation Configure & Running

2 PHP Syntax, PHP Variables, PHP Echo / Print 3

Basic PHP Syntax, Comments in PHP,PHP Case Sensitivity

Creating (Declaring) PHP Variables

PHP Variables Scope

The PHP echo Statement

The PHP print Statement

3 PHP Include, Require & Super global 3

PHP include and require Statements

PHP include vs. require

PHP Manipulating Files

PHP $GLOBALS

PHP $_SERVER

PHP $_REQUEST

PHP $_POST

PHP $_GET

GET vs. POST

4 PHP Constants, Operators & Methods 4

Create a PHP Constant

Arithmetic operators

Assignment operators

Comparison operators

Increment/Decrement operators

Logical operators

String operators

Array operators

5 PHP Control Statement 6

PHP If...Else...Else if

PHP Switch

PHP While Loops

PHP For Loops

PHP For each Loops

6 PHP Functions & Arrays 9

Create a User Defined Function in PHP

PHP Function Arguments

PHP Default Argument Value

PHP Indexed Arrays

PHP Associative Arrays

Multidimensional Arrays

7 PHP Forms 4

PHP Form Handling

PHP Form Validation

18

PHP Form Required

PHP Form URL/E-mail

PHP Form Complete

8 PHP Date & Times 2

The PHP Date() Function

Create a Date With PHP mktime()

Create a Date From a String With PHP strtotime()

9 PHP Files & I/O 6

PHP Manipulating Files

PHP File Open/Read/Close

10 PHP Session & Cookies 6

Starting a PHP Session

Destroying a PHP Session

Sessions without cookies

The Anatomy of a Cookie

Setting Cookies with PHP

Accessing Cookies with PHP

Deleting Cookie with PHP

11 PHP File Upload & Email Sending 3

Configure The "php.ini" File

Create The Upload File PHP Script

Check if File Already Exists

Limit File Size

Limit File Type

Sending plain text email

Sending HTML email

Sending attachments with email

12 PHP Ajax 3

PHP - AJAX Search

PHP - AJAX XML Parser

PHP - AJAX Auto Complete Search

PHP - AJAX RSS Feed Example

13 PHP XML & Jason 3

PHP - XML Introduction

PHP - Simple XML

PHP - Simple XML GET

PHP - SAX Parser Example

PHP - DOM Parser Example

14 PHP Object Orientated Overview 9

Object Oriented Concepts

Creating Objects in PHP

Constructor Functions

Inheritance

Function Overriding

Function Overloading

Public Members

Private members

19

Protected members

15 PHP Frameworks Overview & Installation 6

PHP - Frame Works (Code igniter, Laravel, Zend)

PHP - Core PHP vs Frame Works

16 PHP CMS Overview & Installation 6

Themes

Pages

Partials

Layouts

Content blocks

Components

AJAX framework

Media manager

MySQL (40 Hours)

Sl. Topics Hours

1 MySQL Overview & Installation 2

MySQL Definition, Audience, Prerequisites

Installing MySQL on Linux/UNIX

Installing MySQL on Windows

Verifying MySQL Installation

2 MySQL Administration 2

Running and Shutting down MySQL Server

Setting up a MySQL User Account

Administrative MySQL Commands

3 MySQL PHP Connectivity 2

MySQL Connection using PHP Script

4 MySQL Database CRUD 2

Create Database using MySQL admin,

Create Database using PHP Script

Insert data using MySQL admin

Insert data using PHP

Update data using MySQL admin,

Update data using PHP Script

Retrieve data using MySQL admin

Retrieve data using PHP

Drop table using MySQL admin,

Drop table using PHP Script

5 MySQL Data Types 3

Numeric Data Types

Date and Time Types

String Types

6 MySQL Table CRUD 2

Create, Read, Update, Delete using PHP

Create, Read, Update, Delete using JS

7 MySQL Console Query 9

20

Login using Console

Different operations using console

8 MySQL Joins 3

MySQL inner join

MySQL left & right join

MySQL full join & union

9 PHP & MySQL Query 9

Login using PHP

Different operations using PHP

10 MySQL Indexes 3

ALTER command to add and drop INDEX

Simple & Unique Index

ALTER Command to add and drop PRIMARY KEY

11 MySQL SQL Injection 3

MYSQL Injection methods

Preventing SQL Injection

The LIKE Quandary

Domain & Hosting Management (15 Hours)

Sl. Topics Hours

1 Domain Concept (TLD / ccTLD) 1

Top Level Domains

Country Code Top Level Domains

Third Level Domains

2 DNS and Other Records 2

DNS and NS Records

A Records

MX Records

TXT Records

Manipulation of Records

3 Hosting Concept & Kinds of Hosting 3

Hosting Concept

Raw Hosting accounts

CPanel Hosting

Sentora Panel Hosting

Other Panels

4 Site Upload / Restoration 3

Different Methods of Upload (PHP Upload/ FTP)

Zipped and individual Uploads

DB Creation, User Creation and Assigning user to DB

Using PHP MySQL to backup dump and restore

5 VPS/Dedicated Server Concept 3

VPS Definition

21

VPS Process (Boot, Reboot, Reinstallation OS)

SSH login

Dedicated Server Concept

6 Hosting Panel Utilities 3

Backup

BB Utilities

Mail Service

DNS Service

Final Projects (20 Hours)

Sl. Topics Hours

1 Project Modules Distributions & Merge 3

2 CMS based news web portal 6

3 E-Commerce 6

4 Debugging 3

5 Exception Handling 2

Job List: Part 01

Create a basic personal web page using HTML & CSS

Create a basic personal web page using HTML5 & CSS3

Convert a PSD templates to HTML templates

Create a responsive navigation menu

Validate a HTML form with JavaScript validation

Validate a HTML form with JQuery validation

Part 02

Registration & Login using PHP & MySQL

CRUD operation using PHP & MySQL

o Insert

o Update

o Delete

o Manage/Grid

Simple pagination using PHP & MySQL

Convert HTML to WordPress Theme

Simple shopping cart using PHP & MySQL

Entry Qualification: Minimum SSC Pass.

22

Employment opportunities:

Government Services

Semi Government Services

Corporation

Private sectors

NGO’s

Abroad

Self-employment

Freelancing & Outsourcing

List of Tools & Equipments Required:

Tools Quantity

Personal Computer System and Accessories 10

Server PC 01

Scanner 01

Printer 01

Projector 01 (Optional)

UPS 05

Cable Connection / Modem for Internet 01

Web Browser(Chrome, Firefox) 02

Text Editor(Adobe Dreamweaver, Notepad++) 02

IDE(NetBeans/PhpStorm/Sublime text) 01

References:

http://www.tutorialspoint.com/

http://www.w3schools.com/

http://www.tizag.com/

http://learn.shayhowe.com/advanced-html-css/responsive-web-design/

https://www.codeschool.com/

https://learn.jquery.com/

https://www.lynda.com/PHP-training-tutorials/282-0.html