INDEX

S.NO DATE CONTENT PAGE SIGNATURE

NO

MODULE -II Introduction

2 to visual design on the
web
MODULE – III Designing
3 websites, graphics &
interfaces with figma
4 MODULE – IV
Introduction to adobe
photoshop
5 MODULE – V Introduction
to web design (and more
photoshop)
6 MODULE – VI Advanced
web design challenge
7 MODULE – VII
Introduction to HTML
8 MODULE – VIII
Intermediate HTML
9 MODULE – IX Advanced
HTML & HTML5
10 MODULE – X Expert HTML
&HTML5
11 MODULE – XI Introduction to
CSS

12 MODULE – XII Itermediate to

CSS

13 MODULE - XIII Advanced CSS

14 MODULE – XVI CSS flexbox

15 MODULE XV Expert CSS &

CSS3

16 MODULE – XVI Advanced

HTML &
CSS challenge

17 MODULE – XVII Introduction

to javascript

18 MODULE – XVIII Introduction

to jQuery

19 MODULE – XIX Introduction

jQuery

20 MODULE – XX jQuery UI
(Advanced jQuery)
21 MODULE – XXI Responsive design &
development using bootstrap

22 MODULE – XXII Advanced bootstrap

challenge

23 MODULE – XXIII Web hosting & domains

24 MODULE – XXVI Introduction to PHP

25 MODULE - XXV Intermediate PHP

26 MODULE – XXVI Introduction to MYSQL

database

27 MODULE – XXVII Advanced PHP & MYSQL

Challenge

28 MODULE – XXVIII Wordpress websites

29 MODULE – XXIX Career development how

to start your wed design

30 MODULE – XXX Legacy content: angularJS

quick start: build a
31 MODULE – XXXI Legacy content:
wordpress plugin quick start

MODULE – XXXII Legacy content from the

first version of the course.
ULITIMATE WEB DESWIGNER AND WEB
DEVELOPER
MODULE-I

VISUAL DESIGN

Visual design focuses on enhancing the aesthetic and usability of a digital

product. It is the strategic implementation of images, colors, fonts, and layouts.
Although many visual design elements deal with the look of a product, the feel
of the product is equally important.

PRINCIPLE OF VISUAL DESIGN:

 Emphasis
 Alignment and Balance
 Contrast
 Repetition
 Proportion
 Movement
 Whitespace

C.R.A.P Principles
 THE BASIC COLOR THEORY
The three standard color systems are RGB (Red, Green, Blue), CMYK (Cyan,
Magenta, Yellow, Black), and HEX. The RGB color system is based on light. All
colors in this system are a combination of Red, Green, and Blue.

TYPOGRAPHY ON THE WEB

Typography is millions of fans out there of all shapes ,size, styles ,variants
and soon.
 Base line
 Cap height
 X height
 Desender
 Ascender
 Sarif
USING GRIDS IN WEB DESIGN
Grids help organise large amounts of information. So uses can fine what they
are looking for
 single coloum
 multi coloum
 modular
 hierarchical.
DESIGN SYSTEM
Design system help you to maintain consistency so you are not making
random colors font choice at every turn.
QUIZ
How many basic elements are in the visual design?

The visual design principle balance is the alignment and

distribution of objects to create meaning
What does C.R.A.P stands for?

What kind of typeface is this?

 Typeface anatomy what is the circled part of the letter called?

Typeface anatomy what is the circled part of the letter called?

 Typeface anatomy what is the circled part of the letter called?

MODULE-II
FIGMA VS PHOTOSHOP FOR WEB DESIGN
Photoshop is a tool for photographers and graphic designers not web designers
FIGMA FUNDAMENTALS
 Naming
 Grouping
PHOTOSHOP
Photoshop is basically meant for either modifying or manipulating imager or
photographs or creating.
PHOTOSHOP TOOLBAR
Recording – latest version
CC - Creative Clouds
PSG - Photoshop document
MARQUEE TOOLS
 Rectangular
 Elliptical
 Single row
 Single column.
MODULE III
PHOTOSHOP TOOL BAR PART II
PHOTOSHOP PALLETTE
 Create multiple layers
 Create group of layers
 Change foreground color and beck ground color of your document
 Choose from starch color palette
 Change angle of the stoke
 Using subscript and superscript.
PHOTOSHOP MENU
Auto tone will try and photoshop will try and figure out the best way to
modify the tone of the photo.

PHOTO ENCHANCEMENT AND MANIPULATION

You can manipulate the photo. Unlimited options depending on your skill
obviously, but we are going to get started.
The options pallette you would substract from the selection
PSD - create own settings
PSD - Provide and you have my final example here and group that you can
put your own layers business cards.
QUIZ
What company owns photoshop

What is the palette on the left side of the screen within photoshop called?
What is the palette on the right side of the screen within the photoshop called?

You must know 100% of photoshop in order to be a professional web designer

MODULE-IV
WEB DESIGN TERMINOLOGY
A collage of composed a collage composed of color pictures
samples of objects
WIREFRAME
A Sketch,or series of sketchs, on paper or screen that serves as a
blueprint Of a website layout.it is a schematic or blueprint that is useful
for helping you,your programmers and designers think and
communicate about the structure of the software or website building.
ROUGH
The rough design usually comprises a handful of diagrams that
represent a conceptual model of the solution and collectively explain
the approach we are taking and how the solution will work.
COMP
The second draft of a layer or design,once the rough have been
approved.The designer would go through four main stages of an
illustration like a poster or advertisement.
THE FOUR PHASES OF A WEB DESIGN PROJECT
Discovery phase:
 Initial phone calls,meetings,consultations
 Research,planning,scheduling
 Develop site structure/sitemap
Creative phase
 User experience design
 Wireframing
 Web design Mockups
Development phase
 Convert designs into HTML&CSS
 Additional web development(i.e.Wordpress)
 Browser testing
Launch Phase
 Review/Q&A
 Moving local website to live server
 Client training
 Final paymment

COMMON ELEMENTS
 Header&navigation
 Call to action
 Primary content
 Secondary/territory content
 Sidebar
 footer
QUIZ
In web design ,what is a rough

In web design what is a COMP?

 What are the four primary phases of a web design project?

A free lance web designer with 1 year of professional experience should work
for free
MODULE V
CREATE A SITE MAP
Spreadsheet program like excel or another program like omnigraffic or own a
notepad and begin.
Top level pages home about services contact and then under your top level
pages.

WIREFRAME YOUR LAYOUTS

Wireframing grab a piece of paper notepad or a grid.
DESIGN YOUR WEBSITE
Sketched all layouts and start designing.
FEEDFACK O YOUR OWN DESIGN
Collaboration and sharing ideas can be valuable to web designers.
TOOLS
1. Paste board
2. Echo
3. Cloud app
4. Drop box
MODULE VI
All HTML documents must start with a document type declaration: <!DOCTYPE
html> . The HTML document itself begins with <html> and ends with </html> .
The visible part of the HTML document is between <body> and </body> .

ATTRIBUTE
Provide extra information about an element.
<article attribute=”value “ ></article>
Attribute value should be enclosed within quotation marks like you just saw
you across something.
Article could be any tag .
ELEMENTS
An element is a tag and the content it wraps around.
HTML PARENT / CHILD STRUCTURE
HTML tags are like nested containers.
SPECIAL CHARACTERS USED IN URLs

PARENT AND CHILD

MODULE-VII
BASIC STRUCTURE OF AN HTML DOCUMENT

HEADING AND PARAGRAPH TAGS

HTML EMPHASIS

HYPERLINKS
 LISTS

IMAGES
MODULE-VIII
IDs & CLASS
<!DOCTYPE html>
<html>
<head>
<title>IDs &amp; classes</title>
<body>
<p id =”paragraph-1”>this paragraph has the id of” paragraph-1” </p>
<p class =”fancy pants”>this paragraph has the id of” fancypants”</p>
</body>
</html>
OUTPUT:
 SPAN & DIV TAGS
Span and div are both generic HTML elements that group together related
parts of a web page. However, they serve different functions. A div
element is used for block-level organization and styling of page elements,
whereas a span element is used for inline organization and styling.

QUIZ
How could you assign the ID of “main container” to a div?
 How could you give an article tag the class of”fancypants”?

You can use the same ID multiple times on the same web page true or
false?
 You can use the same class multiple times on the same web page
True or false?

MODULE-IX
CSS
CSS is the acronym of “Cascading Style Sheets”. CSS is a computer
language for laying out and structuring web pages (HTML or XML). This
language contains coding elements and is composed of these “cascading
style sheets” which are equally called CSS files .
THE STYLE RULE
 CSS SYNTAX

SELECTORS,PROPERTIES & VALUES

SELECTORS:
PROPERTIES:

VALUES:

THREE TYPES OF CSS

 Inline CSS
 Internal CSS
 External CSS
INLINE CSS:
Inline CSS is the technique to define the single element with the insert
style sheets in an HTML document.

INTERNAL CSS:
Internal CSS is a form of CSS using which you can add CSS to HTML
documents. It helps to design the layout of a single HTML web page and
change the styles of a web page within HTML code.
EXTERNAL CSS:
External CSS is a form of CSS which is used to add styling to multiple
HTML pages at a time. It helps to design the layout of many HTML web
pages simultaneously. The external CSS is always saved with the . css
extension, and through this file, we can change the complete style of our
HTML web page.

MODULE-X

HTML COLOR VALUES

In HTML, color can also be specified using RGB values, HEX values, HSL
values, RGBA values, and HSLA values. The following three <div>
elements have their background color set with RGB, HEX, and HSL
values: rgb(255, 99, 71)
TEXT STYLING AND FORMATTING:
The HTML style attribute is used to add styles to an element, such as
color, font, size, and more. A text style is a resource that specifies text
attributes ,including the font ,size ,line spacing ,font style ,text
alignment ,and text and background colors.

BORDERS:
The CSS border properties allow you to specify the style, width, and color
of an element's border. I have borders on all sides. I have a red bottom
border. I have rounded borders.

BACKGROUND IMAGES:
MODULE-XI
CSS FLEXBOX:
Flexbox is a one-dimensional layout method for arranging items in rows
or columns. Items flex (expand) to fill additional space or shrink to fit into
smaller spaces. This article explains all the fundamentals

FLEX-GROW:
The flex-grow property specifies how much the item will grow relative to
the rest of the flexible items inside the same container. Note: If the
element is not a flexible item, the flex-grow property has no effect.
FLEX=SHRINK:
The flex-shrink property specifies how the item will shrink relative to the
rest of the flexible items inside the same container.

FLEX BASIS:
The flex-basis CSS property sets the initial main size of a flex item. It sets
the size of the content box unless otherwise set with box-sizing .
MODULE-XII
JAVASCRIPT
JavaScript (JS) is a cross-platform, object-oriented programming
language used by developers to make web pages interactive. It allows
developers to create dynamically updating content, use animations, pop-
up menus, clickable buttons, control multimedia, etc.

TWO TYPES OF JAVASCRIPT

Internal javascript
External javascript
INTERNAL JAVASCRIPT:
One way is to include the code internally, known as the inline method.
Using this method, the code is written inside the <script> element. In the
external method, the JavaScript code is contained in an entirely separate
external document, with a file extension of .js

EXTERNAL JAVASCRIPT:
This is called Internal JavaScript. The other way is to write a
JavaScript program in a file having a . js extension and then link
the file inside the <head> or <body> tag of our HTML file. This
way of writing code in JavaScript is called External JavaScript.
QUIZ
What does JS Stands for
 Java is a nickname for javascript,and they are both the exat same
thing.true or false?

Javascript written directly at the bottom of the html content is called

……………….javascript.
Javascript written in a separate file,but hooked into an html file via a
scripttag is called……………javascript

A”statement”in javascript gives the program a specific instruction

To perform.true or false?
MODULE-XIII
JQUERY
OUTPUT:

JQUERY SELECTORS
jQuery selectors allow you to select and manipulate HTML element(s).
jQuery selectors are used to "find" (or select) HTML elements based on
their name, id, classes, types, attributes, values of attributes and much
more.

JQUERY EVENT METHOD

Event methods trigger or attach a function to an event handler for the
selected elements. The following table lists all the jQuery methods used
to handle events. Method / Property. Description.
QUIZ
The jquery library is built on top of which language

Jquery must be loaded in the browser first in order to function

properly.true or false?
What is the properly syntax of jquery?

What is the jquery statement doing?

$(‘button’).click(function(){
Alert(‘hello world’);
});
 What method would you use to change the text in the following
example$(‘h1’)> (“hello world”);

MODULE-XIV
PHP
PHP is a general-purpose scripting language widely used as a server-
side language for creating dynamic web pages. Though its reputation is
mixed, PHP is still extremely popular and is used in over 75% of all
websites where the server-side programming language is known.

PHP SYNTAX
A PHP script starts with <? php and ends with ?>
PHP VARIABLES
A variable in PHP is the name of the memory location that holds data. In
PHP, a variable is declared using the $ sign followed by the variable
name. The main way to store information in the middle of a PHP program
is by using a variable.

THREE TYPES OF VARIABLES

 Local
 Global
 Static

PHP CONSTANTS
A constant is an identifier (name) for a simple value. The value cannot be
changed during the script. A valid constant name starts with a letter or
underscore (no $ sign before the constant name)

FOUR TYPES OF CONSTANTS

 integer
 string
 hexadecimal string
 bit
PHP ARRAYS
Arrays ¶ An array in PHP is actually an ordered map. A map is a type that
associates values to keys. This type is optimized for several different
uses; it can be treated as an array, list (vector), hash table (an
implementation of a map), dictionary, collection, stack, queue, and
probably more.

TYPES OF PHP ARRAYS

 Indexed Array: These are the arrays with a numeric index.

 Associative Array: These are the arrays with named keys.
 Multidimensional Array: These arrays contain one or more arrays
within themselves.

QUIZ
What kind of language is php?
 How do you open and close a php script?

How do you write a single line comment in php?

 In the following code what are we creating

What is the keyword used to initiate an array?

MODULE-XV
MySQL Database

MySQL is the de-facto standard database system for web sites with HUGE
volumes of both data and end-users (like Facebook, Twitter, and Wikipedia).
Another great thing about MySQL is that it can be scaled down to support
embedded database applications.

SELECTING DATA FROM DATABASE

<?php
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "myDB";

// Create connection
$conn = new mysqli($servername, $username, $password,
$dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}

$sql = "SELECT id, firstname, lastname FROM MyGuests";

$result = $conn->query($sql);

if ($result->num_rows > 0) {
// output data of each row
while($row = $result->fetch_assoc()) {
echo "id: " . $row["id"]. " - Name: " .
$row["firstname"]. " " . $row["lastname"]. "<br>";
}
} else {
echo "0 results";
}
$conn->close();
?>

OUTPUT
id: 1 - Name: John Doe
id: 2 - Name: Mary Moe
id: 3 - Name: Julie Dooley

INSERTING DATA IN YOUR DATABASE

<?php
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "myDB";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}

$sql = "INSERT INTO MyGuests (firstname, lastname, email)

VALUES ('John', 'Doe', 'john@example.com')";

if ($conn->query($sql) === TRUE) {

echo "New record created successfully";
} else {
echo "Error: " . $sql . "<br>" . $conn->error;
}

$conn->close();
?>