Complete Web Design and Development Course : 14 Courses in 1

Udemy

Gain hands-on experience in web design to create Photoshop PSD templates and sophisticated responsive HTML/CSS websites.

Online

₹ 599 2899

particular

details

                                    Medium of instructions
                                    English

                                    Mode of learning
                                    Self study

                                    Mode of Delivery
                                    Video and Text Based

Introduction

Course1: HTML Crash Course

What is HTML?
Creating a Basic HTML Document
HTML Elements
HTML Elements
HTML Styles
HTML Headings
Paragraph and PRE tag
HTML Computer Code Tags
HTML Comments
Text Formatting
Quotes , ABBR , BDO
HTML Colors
Block and Inline Elements
IDs and Classes
HTML Links
HTML Images
HTML Tables
HTML Lists
Resource files for HTML

Course2: CSS Crash Course

CSS Syntax
CSS Selectors in Depth
Understanding children selectors using examples
Types of Styles
CSS Colors
Border, Border Radius and Outline
CSS Margin
CSS Padding
CSS Box Model
CSS Font Family
CSS Width, height, line height Combination
CSS Text Formatting
CSS Display Property
CSS Positioning in Depth
CSS Overflow Property
Important Concept: Float and Clear
CSS Opacity
CSS Box Shadow
Text Shadow
Resource Files for CSS

Course3: Complete Javascript Course

What is Javascript and Why it is used?
Javascript Syntax
Best Use of Javascript
Javascript Comments
Javascript Variables
Types of Variables in Javascript
Arithmetic Operators
Assignment Operators
Concatenation Operator
Interesting Concept: Adding Strings and Numbers
Comparison Operator
Logical Operator
If Statement
Important Concept : if(1)
If Else Statement
Nested If Else Statement
Ternary Operator
Function in Javascript
Parameterized Function
Return Function
Nested Function
Important Concept: Local and Global Variables
Switch Statement
Introduction to Loops
For Loop
While Loop
Do While Loop
Array in Javascript
Ways of Creating Array in Javascript
Dynamic Array
Array Methods: Part1 ( Shift and Unshift )
Array Methods: Part2
Objects
For In Loop
Javascript Project and Resource Files

Course4: Complete Jquery Course

What is Jquery and why we use it?
Using Jquery in Website
Solution: Conditional Script Loading
Jquery Syntax
Jquery Selectors
Mouse Events
Keyboard Events
Form Events
Document/Window Events
Hide and Show
Getting Content Using Jquery
Setting Content using Jquery
Creating HTML Contents using Jquery
Adding HTML Contents using Jquery
Removing HTML Content using Jquery
DOM Traversing Concept
Ancestor Traversal
Descendant Traversal
Siblings Traversal
Jquery Ajax: Part 1: Load Method
Jquery Ajax: Part2: Get HTTP Request using Jquery
Jquery Ajax: Part3: Post HTTP Request using Jquery
Jquery Ajax: Part4: $.ajax
Important: Using Each method in Jquery
CSS Manipulation: Adding Classes to Elements
CSS Manipulation: Removing Classes from Elements
CSS Manipulation: Adding CSS Styles Dynamically
CSS Manipulation: Toggle Class
Jquery Project Files

Course5: Ajax Crash Course

What is Ajax and Why we use it?
Ajax Examples
How Ajax Works
Understanding and Creating XMLHttpRequest Object
Request Types and Methods
Understanding GET Request in AJAX
Understanding POST Request in AJAX
onReadyStateChange Function
Handling Response from Server
Ajax Project1
Ajax Project2: Dynamic Example
Ajax Project3: Search Suggestion (Part1)
Ajax Project3: Search Suggestion (Part2)
Ajax Project4: Submitting data to Server

Course6: Complete Bootstrap Course

What is Bootstrap and why we use it?
Downloading and Using Bootstrap
Bootstrap Grid System
Understanding Row and Container Classes
Understanding Col-XX-Y classes
Implementing Different Column Layout
Understanding Offest
Nested Column Concept
Pull Right and Pull Left
Push and Pull
Clearing Float in Bootstrap
Decorating Images with Bootstrap
Responsive Images
Creating Navigation in Bootstrap in Easy Concept
Adding Custom Styles to Bootstrap Navigation
DropDown
Tabs and Pills
Functional Tabs using Javascript
Functional Tabs using only CSS
Progress Bar
Creating Carousel in Bootstrap
Creating Modal Dialogue in Bootstrap

Course7: Photoshop Crash Course for Web Design in Photoshop

Photoshop Interface
Creating New Document in Photoshop
Saving Document in Photoshop
Opening an existing file or document in Photoshop
Rectangle Tool
Rounded Rectangle Tool
Ellipse Tool
Polygon Tool
Line Tool
Custom Shape Tool
Move Tool
Alignment
Type Tool and Character Panel
Eye Dropper Tool
Swatches
Layers
Layer Styles
Fun Project
Rectangular Marquee Tool
Direct Selection Tool
Gradient Tool
Pen Tool

Course8: Designing Awesome UI Elements in Photoshop

Simple Navigation
Gradient Navigation
Corporate Navigation
Awesome Glossy Button
Simple Call to Action Button
Awesome Call to Action Buttons
Contact Form
Pricing Table
Slider
Progress Bar
Download UI PSD elements

Useful Informations regarding Web Design in Photoshop

Grid
Techniques of Improving Images
Selecting Best Colors
Selecting Best Fonts
Working Efficiently with FontAwesome (Increasing or Decreasing Thickness/Height)

Course9: Web Design in Photoshop Project1: Corporate PSD Template

How to Design a Corporate Website
Planning Typography, Colors and Grid
Header
Slider
Services
Works
Team
Testimonial
Blog
Contact Form
Footer (Part1)
Footer (Part2)
Grab the PSD Template resource file
Improving Slider
Hover Effect on Projects
Hover Effect on Team Members
Grab the Updated PSD Template resource file

Course10 : PSD to HTML Project1 : Responsive Parallax Corporate Website Design

Creating Basic Files and Folders
Complete Study of PSD Template ( Very Important Step )
Grab the Plan PSD File
Exporting Images
Grab the PSD Template
Creation and Explanation of Basic HTML Markup
Adding Bootstrap and Respond.js to our Project
Adding Other Necessary CSS Files (Google Fonts , FontAwesome etc ..)
Adding Main Javascript File
Populating Reset.css File
Header
Slider Section (Part 1)
Slider Section (Part 2)
Its Time for Fixed Header
Services Section
Portfolio Section
Team Section
Testimonial Section
Blog Section
Contact Section
Footer
Responsive Menu
Responsive Slider
Responsive Portfolio
Responsive Team
Responsive Testimonials
Responsive Blog
Responsive Contact Form
Responsive Footer
Parallax Effect
CSS Animations (Part 1)
CSS Animations (Part 2)
Cool Zooming and Flipping Hover Effects
Smooth Scrolling
Animation Without delay
Page Loader
Finishing Touch (Part1)
Finishing Touch (Part2)
Download Filezilla
Uploading Files to Server
Testing and Debugging
Functional PHP Ajax Contact Form
Contact.php File
Changing Loader Colour ( Final Finishing Touch)
Grab Resource Files here

Course11: Web Design in Photoshop Project2: Hosting PSD Template

How to Design a Hosting Website
Planning Typography, Colors and Grid
Preplaring Blur Background
Preparing Slider Image
Preparing Features Image
Header
Slider
Services
Features
Pricing Table
Testimonial
Contact Us
Minimal Footer
Modifying Hosting 1.0
Grab the PSD file of Plan
Grab the Blur Background PSD
Grab the Slider Image PSD
Grab the Features Image PSD
Grab the PSD Template of Hosting 1.0
Grab the PSD Template of Hosting 2.0

Course10: PSD to HTML Project2 : Responsive Hosting Website

Creating Basic Files and Folders
Creating Basic HTML Markup with necessary Meta Tags
Including JQuery in our Project
Including Bootstrap and Respond.js
Including FontAwesome in our Project
Including Google Font in our Project
Populating Reset CSS File
Exporting Images from PSD Template to Project IMG Folder
Header Markup
Header Styles
Slider Markup
Slider Styles
Some Modifications
Animated Slider
Fixed Header
Services Markup
Services Styling: Part1
Services Styling: Part2
Features Markup
Features Styling
Pricing Table MarkUp

Course13: Web Design in Photoshop Project3: Multipage Portfolio PSD Template

How to Design a Portfolio Website
Planning Typography, Colors and Grid
Designing Homepage (Header)
Designing Homepage (Slider Section)
Designing Homepage (About Us)
Designing Homepage (Portfolio)
Designing Homepage (Testimonial)
Designing Homepage (Minimal Footer)
Portfolio Page
About Page
Contact Page
Grab the PSD file of Plan
Grab the Homepage PSD Template resource file
Grab the Portfolio Page PSD file
Grab the About Page PSD file
Grab the Contact Page PSD file

Course14: PSD to HTML Project3: Responsive Portfolio Website

Creating Basic Files and Folders
Creating Basic HTML Markup with necessary Meta Tags
Downloading and Including Jquery in our Project
Using Font Awesome in Project
Adding Google Font
Populating Reset CSS File
Header MarkUp
Header Styles
Slider MarkUp
Slider Styles

Bonus Course1: Photoshop Mastery Course: Basics to Advanced

Importance of Photoshop
Photoshop Interface
Creating New Document in Photoshop
Saving Document in Photoshop
Opening an existing file or document in Photoshop
Creating Rectangle and noticing important stuff
Creating Square and Rounded Rectangle
Creating Ellipse and Circle
Exploring Line Tool
Exploring Polygon Tool
Exploring Custom Shape Tool
Exploring Selection tools
Move tool and Transformations
Zoom tool and Hand tool
Crop and Eye Dropper tool
Brush Tool
Gradient and Paint Bucket Tool
Clone Stamp, Pattern Stamp and Eraser Tool
Blur, Sharpen and Smudge Tool
Healing Brush, Spot Healing Brush and Patch Tool
Dodge, Burn and Sponge Tool
Direct Selection and Path Selection tool
Type Tool
Pen Tool
Layers Basics
Effects using Layer Style
Colors and Swatches
Project: Blending two images
Project: Decorating an Image
Creating new Text Layer
Exploring Character and Paragraph Palette
Project: Creating Reflection Effect
Project: Creating Awesome Text Effect
Filters basics and exploring Filter Gallery
Destructive vs Non-Destructive Effects
Blur and Distort Filters
Noise and Pixellate Filters
Render, Stylize and Sharpen Filters
Project: Creating Stem of a tree
Project: Creating Cloud Effect
Project: Creating Rain Effect
Working with Rulers
Working with Guides
Working with Grid
Project: Creating Pixel Perfect Design
Project: Creating Whirlpool Effect
Project: Increasing Height of Building
Project: Creating Blur Backgrounds
Project: Creating Polygon Background
Project: Creating Bokeh Effect

Bonus Course2: Designing Business Cards in Photoshop (10 Projects Included)

Learn Designing Business Cards in Photoshop
Importance of Business Cards
Important Things to be Present in Business Card
Ideal Business Card Size
Types of Business Cards
Difference Between Normal Business Card and Print Ready Business Card
Designing a Business Card Template
Project1: Horizontal Business Card (Design1)
Project2: Horizontal Business Card (Design2)
Project3: Horizontal Business Card (Design3)
Project4: Horizontal Business Card (Design4)
Project5: Horizontal Business Card (Design5)
Project6: Vertical Business Card (Design1)
Project7: Vertical Business Card (Design2)
Project8: Vertical Business Card (Design3)
Project9: Vertical Business Card (Design4)
Project10: Vertical Business Card (Design5)
Way1 of Earning Money
Way2 of Earning Money
Way3 of Earning Money
Way4 of Earning Money
Way5 of Earning Money

Popular Courses

Popular Platforms

Popular Searches

Complete Web Design and Development Course : 14 Courses in 1

Online

₹ 599 2899

Quick Facts

Course overview

The highlights

Program offerings

Course and certificate fees

Fees information

certificate availability

certificate providing authority

Who it is for

What you will learn

The syllabus