Web Design _ Development - Copy
Web Design _ Development - Copy
IN
1
Total Duration: 360 hours
2
Index
1
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
Become familiar with graphic design principles that relate to web design and learn
how to implement these theories into practice.
Course Outline:
2
Basic Competencies:
Course Contents:
Communication English (60 Hours)
Related Subject-10 hours and General Subject- 20 hours 1 hour/period on the completion of this
course trainees will be able to:
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.
4
Sl. Topics Hours
1 Html Overview 2
What is HTML?
HTML Editors
2 Html Tags, Elements & Attributes 3
Sl. Heading Tags, Paragraph Tag, Line Break Tag, Centering Content,
Topics Hours
1 Horizontal Lines
History, Purpose & Future of Web 3
HTML
What iselements,
WWW &HTML Tag vs. Element, Nested HTML Elements
Internet?
Core Attributes(Id,
Elaborate Class,
the history Title), The href Attribute ,The Lang
of Web
Attribute, Size Attributes
Elaborate the purpose of Web
3 Html Formatting
Elaborate&the Styling
future of Web 3
HTML Formatting Elements(<b>, <strong>, <em>, <mark>,
2 Web Protocols 1
<small>, <del>,<ins>,<sub>,<sup>)
Describe the types of web protocols
The HTML Style Attribute, HTML Background Color, HTML Text
Functions of web protocols (Http, Https, Ftp)
Color, HTML Fonts, HTML Text Size, HTML Text Alignment
3 Concept of Domain & Hosting 1
4 Html Tables 3
What is Domain & Hosting?
Basic HTML tables
Describe different types of Domain & Hosting
A table with borders
4 Types & Structure of a Web Site 4
A table with collapsed borders
Describe different types of website structure
A table with cell padding
Describe about static & dynamic website
A table with headings
5 Kinds of Web Browsers 1
A table with left-aligned headings
Describe different types
Horizontal/Vertical tableof web browser
headings
Describe weba browser
A table with caption usability
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
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
5
An ordered list with letters
An ordered list with lowercase letters
An ordered list with roman numbers
CSS/CSS3 (30 Hours)
6
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
9
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
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)
12
$("ul li:first")
$(":button")
$("tr:even")
$("tr:odd")
jQuery HTML
jQuery Get
jQuery Set
jQuery Add
jQuery Remove
jQuery Css Classes
jQuery css()
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
16
String Types
6 MySQL Table CRUD 2
Create, Read, Update, Delete using PHP
Create, Read, Update, Delete using JS
7 MySQL Console Query 9
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
17
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
VPS Process (Boot, Reboot, Reinstallation OS)
SSH login
Dedicated Server Concept
6 Hosting Panel Utilities 3
Backup
BB Utilities
Mail Service
DNS Service
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
18
Simple shopping cart using PHP & MySQL
Entry Qualification:
Employment opportunities:
Government Services
Semi Government Services
Corporation
Private sectors
NGO’s
Abroad
Self-employment
Freelancing & Outsourcing
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
19
20