Web Design & Dev.

Combo

By Alabian Solutions Ltd

08034265103, info@alabiansolutions.com
www.alabiansolutions.com
2016
 08034265103, www.alabiansolutions.com/webtraining

Day 1
HTML PART 1
Intro to the web
 The web
 Clients
 Servers
 Browsers
 Browser Usage
 Client/Server
 FTP Clients: CoreFTP
HTML
 Anatomy of a website
 HTML: What is HTML
 HTML: Editors
 Anatomy of HTML tag
 HTML Basics
 Head and Body
 Headline
 Paragraphs
 Line breaks
 Lists
 Ordered list
 Formatted text
 Images
 Links
 Commenting in HTML
 Grouping elements
 HTML validators

Day 2
HTML PART 2
HTML Advanced
Tables
• Table element
• The table caption
Grouping sections of a table
• Rowspan
• Colspan
• Head
• Body
• Foot
Forms

2
 08034265103, www.alabiansolutions.com/webtraining

• Form element
• Input element
• Label element
• Checkboxes
• Radio Button
• The select element
• Textarea
• Button element
• Form processing
Iframes
• Iframe element
• Iframe embeds: Maps
• Iframe embeds: Calender
Multimedia
• The Object element
• The Embed element
• Embeds: Youtube
Multimedia in HTML5
• Video file format
• The Video element
• Multiple video sources
• The audio element
• Multiple audio sources

Day 3
CSS PART 1
CSS
• Anatomy of a website
• What is CSS
• Anatomy of CSS
Where to put CSS
• Internal (embedded)
• External (link)
• Inline
Selectors
• Types of selector
• Type selector
• Class selector
• Id selector
• Position in document
• Element plus class selector
• Pseudo classes
• Grouping selectors
Cascade rules
CSS styles
Coding convention

3
 08034265103, www.alabiansolutions.com/webtraining

Naming convention
Comments
Property value pairs
Property color
Property background color
Finding colors
Font-family
Finding fonts
CSS3 fonts
Property font size
Property font-size em
Font-size px
Font-size (%)
Font-style
Font-weight
Short hand properties

Day 4
CSS PART 2
CSS Layout
• Height and width
• Box model
• Margin
• Auto margin
• Border
• Border thickness
• Border style
• Border color
• Padding
• Exercise
Position
• Normal
• Relative
• Absolute
• Z-index
• Float
• Clear
Page layout
HTML 5 layout

4
 08034265103, www.alabiansolutions.com/webtraining

Day 5
JavaScript Part 1
Intro to programming
What is programming
Types of programming
Machine code
Assembly language
High level language
Compiled vs. Interpreted
Language of the web
History of JS
What JS can do
Statements
Variables
Primitive Data types
Variables
Primitive Data types
Variable Names
Expressions
Loose Type
Exercise Time!
Comments
Functions
Beware: Circular Dependencies
Arguments
Return Values
Variable Scope
Coding Conventions: Spacing
Getting help

Day 6
Photoshop Part 1
Getting started with Photoshop
 What is Photoshop?
 Photoshop interface
 Photoshop tools
 Pan and Zoom
 Opening an image
 Opening multiple images
 Viewing multiple images in full screen mode
 Creating an image
 Placing an image
 Different ways of applying color to an image
 Using Photoshop color picker

5
 08034265103, www.alabiansolutions.com/webtraining

 Applying a gradient to an image

 Different file formats
 Saving an image

Basic photo manipulation

 Cropping images
 Straighten images
 Perspective cropping
 Transforming images
o Distorting images
o Skew image
o Image perspective
 Smart objects
Text
 Text option bar tool
 Character panel
 Warping text
 Creating simple text effect
Putting everything together

Day 7
JavaScript Part 2
Control flow + More Data Types
Review: Terminology
The if statement
Comparison Operators
TruthyvsFalsey
Short-Circuit Evaluation
The if/else statement
The if/else if/else statement
The while loop
The for loop
The break statement
JS Objects and DOM
Objects
Objects Access

Day 8
Photoshop Part 2
Layers
 Layer basics
 Duplicate layer and Opacity
 Layer style effect

6
 08034265103, www.alabiansolutions.com/webtraining

o Saving a layer style

 Creating a clipping mask
Image retouching
 Using a content aware
 Patch tool
 Content-aware move
 Clone stamp tool
 Healing tool
 Spot healing tool
End

Day 9
JavaScript Part 3
JS Objects and DOM
Objects
Objects Access
Changing Objects
Array of Objects
Objects as Arguments
Object methods
Built in Objects
HTML Editors
HTML and CSS: Review
JS in HTML
Changing Objects
Array of Objects
Objects as Arguments
Object methods
Built in Objects
HTML Editors

Day 10
Bootstrap
Getting started with boostrap
 Why boostrap
 Overview of responsive web design
 Adjusting a layout
 Getting boostrap ready
Boostrap grid system
 What is a Grid system
 Building a basic grid
 Creating a dynamic layout

7
 08034265103, www.alabiansolutions.com/webtraining

 Designing for desktop

 Designing for tablets
 Designing for mobile
 Nesting column
 Offsetting column
 Reordering grids
Project

Day 11
JavaScript Part 4
The DOM Tree
DOM Inspecting
DOM Access
DOM Access: Easier
DOM Access: HTML 5
DOM Nodes: Attributes
DOM Nodes: Styles
DOM innerHTML
DOM Modifying
Animation
The window object
Animation in JS
Animating styles
Stopping an animation
Events
Why we need events
Adding Events Listeners
Event Types
Event Properties
Processing form input
Waiting for window “load”
JS Best Practices
Further Study

Day 12
Project

8
 08034265103, www.alabiansolutions.com/webtraining

Day 13
Web Design project for student

Day 14
Web Design project for student

Day 15
JavaScript Project

Day 16
Free Day

Day 17
Jquery

Day 18
PHP Part 1
Introduction and basic syntax
Basic syntax
Variables
Operators
Strings
Conditional statement
If/else
Switch
While loop
Do-while loop
For-loop

Day 19
PHP Part 2
Functions and Global variables
Defining a function
Return values

9
 08034265103, www.alabiansolutions.com/webtraining

Making functions calls

Variable scope
Global variable scope

Day 20
PHP Part 3
Arrays
Array as a list of elements
Array as a key value mapping
Associative array
Array functions
For-each loop
HTTP Requests and Forms
Superglobals
Passing information to the server
When to use $_GET vs. $_POST

Day 21
MYSQL Part 1
Connecting to MySQL
Making SQL queries
SQL injection
Retrieving information from a query

Day 22
MYSQL Part 2
A registration-login example
Register page
MySQL recap
Conclusion

10
 08034265103, www.alabiansolutions.com/webtraining

Day 23
PHP/MySQL

Day 24
Wordpress/CMS

Day 25
Wordpress/eCommerce

Day 26
Oline Library System

Day 27
Result Checking Portal

Day 28
Project

11