Web Design (Expert Level) - iSolution India - Professional Web Design Company in India, Apps Development, SEO, SMO

About Course

What you’ll learn

Communication Development

Typing speed

Interview prepairation

Become a modern and confident HTML and CSS developer, no prior knowledge needed!
Modern, semantic and accessible HTML5
Important CSS concepts such as the box model, positioning schemes, inheritance, solving selector conflicts, etc.
How to plan, sketch, design, build, test, and optimize a professional website
How to use common components and layout patterns for professional website design and development
How to find and use free design assets such as images, fonts, and icons

Design and build a stunning real-world project for your portfolio from scratch
Modern CSS (previous CSS3), including flexbox and CSS Grid for layout
A web design framework with easy-to-use rules and guidelines to design eye-catching websites
How to make websites work on every possible mobile device (responsive design)
Developer skills such as reading documentation, debugging, and using
professional tools
Practice your skills with 10+ challenges (solutions included)

Course Content

Photoshop

Introduction

Get Started

Introduction & Download Resources for this Section

00:00
Use Photoshop’s Interface Efficiently

00:00
Customize Your Workspace

00:00
Create a New Project

00:00
Save your Photoshop work

00:00
Get around Photoshop Fast

00:00
ACTIVITY: Crop and Straighten Photos

00:00
Open Images in 6 Ways

00:00
Export Your Work in 5 Ways

00:00
ACTIVITY: Resize an Image

00:00
The Powerful Properties Panel

00:00
Review

00:00

Learn about layer essentials in Photoshop

Introduction & Download Resources for this Section

00:00
OPTIONAL: What Are Layers?

00:00
Start Using Layers

00:00
Use the Layers Panel

00:00
ACTIVITY: Colorize a black and white photo

00:00
Select Layers

00:00
Move Layers

00:00
EXERCISE: Layer Dexterity

00:00
Solution: Layer Dexterity

00:00
Arrange Images Quickly

00:00
Layer Opacity vs. Fill

00:00
EXERCISE: Fast Alignment

00:00
Solution: Fast Alignment

00:00
Review

00:00

Learn to work with layers like a pro

Introduction & Download Resources for this Section

00:00
Layer Types Explained

00:00
Customize the Layers Panel

00:00
Identify Layers

00:00
Filter Layers

00:00
EXERCISE: Sort Layers

00:00
Solution: Sort Layers

00:00
Manipulate Layers in Photoshop CC 2022

00:00
Manipulate Layers in CS4 – CC 2018

00:00
Rotate layers in CC 2022

00:00
OPTIONAL: Best Layer Hotkeys

00:00
Use Blending Modes

00:00
Lock Layers

00:00
Review

00:00

Camera Raw – Edit Your Photos

Camera Raw – A must-watch introduction

00:00
The most important thing about editing photos

00:00
Most common edits in Camera Raw

00:00
How to adjust parts of a photo in Camera Raw

00:00
Here’s a smarter way to adjust specific parts in Camera Raw

00:00
Discover better tools to make edits in Camera Raw

00:00
Raw image format vs JPEG

00:00
How to quickly view lots of images

00:00
My workflow in Camera Raw

00:00
Contest: Improve photos in Camera Raw

00:00
How to add optimized images to a website (gallery)

00:00
One-click wonders in Camera Raw

00:00
Conclusion

00:00

Cloud Documents – The Biggest Change in 2022

Raster Layers

Introduction

00:00
Use the Brush Tool

00:00
ACTIVITY: Soften Skin Imperfections

00:00
Skin Smoothing – The Easy Way

00:00
Use the Eye Dropper & Swatches

00:00
OPTIONAL: Photoshop vs. Illustrator

00:00
The Libraries Panel

00:00
OPTIONAL: Fix the Eye Dropper

00:00
Resolution vs. Image Size

00:00
OPTIONAL: Change T-Shirt Color

00:00
Optimize Project Size

00:00
Non-destructive Editing

00:00
Review

00:00

Artboards

Selections 101

Selections Explained

00:00
Modify Selections

00:00
Rectangular Marquee

00:00
Elliptical Marquee

00:00
EXERCISE: Hands On Marquees

00:00
Solution: Hands On Marquees

00:00
Hide Pixels with Layer Masks

00:00
ACTIVITY: Combine 2 Images with Layer Masks

00:00
One-click sky replacement

00:00
Adjusting the Sky Replacement

00:00
Quick Selection Tool and Magic Wand

00:00
Remove a person from their background in CC 2021

00:00
The Object Selection Tool in CC 2022

00:00
ACTIVITY: Make an Orange Purple

00:00
ACTIVITY: Change the Color of T-Shirt v2

00:00
Review

00:00

Selections 102

Introduction

00:00
Use Lasso Tools

00:00
Pen Tool Overview

00:00
Use Direct & Path Selection Tools

00:00
ACTIVITY: Pen Tool Selections

00:00
Quick Mask Mode

00:00
Select a Color in a Photo

00:00
ACTIVITY: Remove Background

00:00
Save & Load Selections

00:00
Select and Mask Hair

00:00
Review

00:00

Shape Layers

Introduction

00:00
Create Shapes

00:00
Modify Shapes

00:00
Free Transform (Ctrl+T) in CC 2022 works differently

00:00
ACTIVITY: Design Web Buttons

00:00
New Custom Shapes in CC 2022

00:00
Use Custom Shapes

00:00
ACTIVITY: Design Shapes with the Pen Tool

00:00
Generate Guides from Shapes

00:00
Place Images in Shapes: Clipping Mask vs Layer Mask vs Vector Mask

00:00
ACTIVITY: Create a Website Layout

00:00
ACTIVITY: Design a Flat Illustration – Part 1

00:00
ACTIVITY: Design a Flat Illustration – Part 2

00:00
ACTIVITY: Design a Flat Illustration – Part 3

00:00
Contest: Create a Flat Illustration

00:00
Review

00:00

Creative Layer Styles (Effects)

Introduction

00:00
Layer Styles Crash Course

00:00
Download & Scale Layer Styles

00:00
Create Gold Text Effect

00:00
Embed Text in Photos

00:00
Use Global Light

00:00
Create Shiny 3D Text

00:00
Create Neon Effect

00:00
ACTIVITY: Design an Emoji – Part 1

00:00
ACTIVITY: Design an Emoji – Part 2

00:00
ACTIVITY: Animate an Emoji – Part 1

00:00
ACTIVITY: Animate an Emoji – Part 2

00:00
Create & Animate an Emoji

00:00
Create a Fire Text Effect

00:00
Review

00:00

Work with Smart Objects

Smart Objects Explained

00:00
ACTIVITY: Design a Mobile App Icon

00:00
Create Your Own App Icon

00:00
Breaking Smart Objects

00:00
Showcase Your Work Professionally

00:00
ACTIVITY: Create a Realistic Mockup

00:00
Unpack Smart Objects

00:00
Linked Smart Objects

00:00
Filters with Smart Objects

00:00
ACTIVITY: Create a Business Card Part 1

00:00
ACTIVITY: Create a Business Card Part 2

00:00
ACTIVITY: Create a Business Card Part 3

00:00
Review

00:00

Create a Cute Character

Repair Your Photos

Introduction

00:00
Remove Skin Issues

00:00
Remove Watch & Necklace from Photos

00:00
Clean Up Face Imperfections

00:00
Move People in Photos

00:00
Enhance Faded Photos

00:00
Dodge, Burn, Sponge tools

00:00
Remove Red Eyes from Photos

00:00
Create an Action in Photoshop

00:00
Resize Lots of Images Quickly

00:00
Review

00:00

Text Layers

Text Layers Explained

00:00
Font Types

00:00
Get New Fonts

00:00
Learn Typography Best Practices

00:00
Combine Fonts

00:00
EXERCISE: Hands On Text Layers

00:00
Solution: Hands On Text Layers

00:00
Identify a Font

00:00
Stay Consistent in Your Projects

00:00
Glyphs Explained

00:00
Review

00:00

Improve Your Photos

Course Conclusions & What’s Next

HTML Fundamentals

HTML – Tags

HTML – Forms

HTML – Media

HTML – Website Structure

Getting Started

Diving Into the Basic of CSS

Module Introduction
Understanding the Course Project Setup
Adding CSS to our Project with Inline Styles
Understanding the Tag & Creating a .css File
Applying Additional Styles & Importing Google Fonts
Theory Time – Selectors
Understanding the “Cascading” Style & Specificity
Understanding Inheritance
Adding Combinators
Theory Time – Combinators
Summarizing Properties & Selectors
Selectors & Combinators
Time to Practice – The Basics

Diving Deeper Into CSS

Module Introduction
Introducing the CSS Box Model
Understanding the Box Model
Understanding Margin Collapsing and Removing Default Margins
Theory Time – Working with Shorthand Properties
Applying Shorthands in Practice
Diving Into the Height & Width Properties
Understanding Box Sizing
Adding the Header to our Project
Understanding the Display Property
Applying the Display Property & Styling our Navigation Bar
Understanding an Unexpected “inline-block” Behaviour
Working with “text-decoration” & “vertical-align”
Styling Anchor Tags
Adding Pseudo Classes
Theory Time – Pseudo Classes & Pseudo Elements
Grouping Rules
Working with “font-weight” & “border”
Adding & Styling a CTA-Button
Adding a Background Image to our Project
Properties Worth to Remember
Time to Practice – Diving Deeper into CSS
Wrap Up

Practicing the Basics

Module Introduction

00:00
Adding Style to our Plans

00:00
Working on the Recommended Plan

00:00
Styling the Badge with “border-radius”

00:00
Styling our List

00:00
Working on the Title and the Price of our Packages

00:00
Improving our Action Button

00:00
Understanding Outlines

00:00
Presenting the Core Features to the User

00:00
Styling the Headline of the Core Features Section

00:00
Preparing the Content of the Key Feature Area

00:00
Adding the Footer

00:00
What we Achieved so Far

00:00
Adding the Packages Page

00:00
Your Challenge

00:00
Styling the Links

00:00
Styling our Package Boxes

00:00
Adding “float” to our Package

00:00
Fixing the Hover Effect

00:00
Adding the Final Touches

00:00

Positioning Elements with CSS

Module Introduction

00:00
Why Positioning will Improve our Website

00:00
Understanding Positioning – The Theory

00:00
Working with the “fixed” Value

00:00
Creating a Fixed Navigation Bar

00:00
Using “position” to Add a Background Image

00:00
Understanding the Z-Index

00:00
Adding a Badge to our Package

00:00
Styling & Positioning our Badge with

00:00
Diving Deeper into Relative Positioning

00:00
Are you a “position” expert?

00:00
Working with “overflow” and Relative Positioning

00:00
Introducing “sticky” Positioning

00:00
Understanding the Stacking Context

00:00
Wrap Up

00:00

Understanding Background Images

Optional: Advanced Track Introduction

00:00
Module Introduction

00:00
Understanding “background-size”

00:00
Working with “background-position”

00:00
The “background” Shorthand – Theory

00:00
Applying “background” Origin, Clip & Attachment

00:00
Using the “background” Shorthand on our Project

00:00
Styling Images

00:00
Adding the Customers Page to our Website

00:00
Working on the Image Layout

00:00
Understanding Linear Gradients

00:00
Applying Radial Gradients

00:00
Stacking Multiple Backgrounds

00:00
Understanding Filters

00:00
Adding & Styling SVGs – The Basics

00:00
Wrap Up

00:00

Sizes & Units

Module Introduction

00:00
What’s Wrong With Our Project Units?

00:00
Where Units Matter

00:00
An Overview of Available Sizes & Units

00:00
Rules to Remember: Fixed Positioning & “%”

00:00
Rules to Remember: Absolute Positioning & “%”

00:00
Rules to Remember: Relative / Static Positioning & “%”

00:00
Fixing the Height 100% Issue

00:00
Defining the Font Size in the Root Element

00:00
Using “min-width/height” & “max-width/height”

00:00
Working with “rem” & “em”

00:00
Adding “rem” to Additional Properties

00:00
Finishing “rem”

00:00
Understanding the Viewport Units “vw” &”vh”

00:00
Choosing the Right Unit

00:00
Using “auto” to Center Elements

00:00
Cleaning Up our Code

00:00
Wrap Up

00:00

Working with JavaScript & CSS

Module Introduction

00:00
Adding a Modal

00:00
Selecting & Manipulating Styles with JavaScript

00:00
Adding an Event Listener

00:00
Adding a Side Navigation Bar

00:00
Opening and Closing the Hamburger Menu

00:00
Manipulating Element Classes

00:00
Understanding Property Notations

00:00
Cleaning Up our Code

00:00
Wrap Up

00:00

Making Our Websiite Responsive

Module Introduction

00:00
Why our Project Should Become Responsive

00:00
Understanding Hardware Pixels vs. Software Pixels

00:00
Comparing the Viewport Metatag (HTML) and Media Queries (CSS)

00:00
Understanding the “viewport” Metatag

00:00
Designing Websites “Mobile First”

00:00
Adding our First Media Queries

00:00
Things to Keep in Mind when Working with Media Queries

00:00
Finding the Right Breaking Points

00:00
Creating the Mobile First Design for our Plans

00:00
Making the Plans Responsive

00:00
Your Challenge

00:00
Time to Practice – Creating a Responsive Design with Media Queries

00:00
Working with Logical Operators

00:00
Improving the Customers Page

00:00
Improving the Packages Page

00:00
Cleaning Up the Navigation Bar

00:00
Positioning our Footer Correctly

00:00
Wrap Up

00:00

Student Ratings & Reviews

No Review Yet

About Course

What you’ll learn

Course Content

Photoshop

Introduction

Introduction

Get the Best Photoshop Version

ACTIVITY: Create a Black and White Image

Use the History Panel to fix your mistakes

Quickly improve images with Camera Raw

Contest: Create a collage (image gallery)

OPTIONAL: Speed up Photoshop

Discover Panel – Find hotkeys and panels fast!

Get Started

Introduction & Download Resources for this Section

Use Photoshop’s Interface Efficiently

Customize Your Workspace

Create a New Project

Save your Photoshop work

Get around Photoshop Fast

ACTIVITY: Crop and Straighten Photos

Open Images in 6 Ways

Export Your Work in 5 Ways

ACTIVITY: Resize an Image

The Powerful Properties Panel

Review

Learn about layer essentials in Photoshop

Introduction & Download Resources for this Section

OPTIONAL: What Are Layers?

Start Using Layers

Use the Layers Panel

ACTIVITY: Colorize a black and white photo

Select Layers

Move Layers

EXERCISE: Layer Dexterity

Solution: Layer Dexterity

Arrange Images Quickly

Layer Opacity vs. Fill

EXERCISE: Fast Alignment

Solution: Fast Alignment

Review

Learn to work with layers like a pro

Introduction & Download Resources for this Section

Layer Types Explained

Customize the Layers Panel

Identify Layers

Filter Layers

EXERCISE: Sort Layers

Solution: Sort Layers

Manipulate Layers in Photoshop CC 2022

Manipulate Layers in CS4 – CC 2018

Rotate layers in CC 2022

OPTIONAL: Best Layer Hotkeys

Use Blending Modes

Lock Layers

Review

Camera Raw – Edit Your Photos

Camera Raw – A must-watch introduction

The most important thing about editing photos

Most common edits in Camera Raw

How to adjust parts of a photo in Camera Raw

Here’s a smarter way to adjust specific parts in Camera Raw

Discover better tools to make edits in Camera Raw

Raw image format vs JPEG

How to quickly view lots of images

My workflow in Camera Raw

Contest: Improve photos in Camera Raw

How to add optimized images to a website (gallery)

One-click wonders in Camera Raw

Conclusion

Cloud Documents – The Biggest Change in 2022

What are cloud documents?

Saving to the cloud vs locally (on your computer)

Version history – WOW!

The biggest drawback with cloud documents

Raster Layers

Introduction

Use the Brush Tool

ACTIVITY: Soften Skin Imperfections

Skin Smoothing – The Easy Way