Learn Web Design Html Css Adobe Photoshop

Master in Practical Web design and development using Photoshop, HTML5, CSS3, Bootstrap and more.

Last updated 2022-01-10 | 4.3

- Will be able to design web page using Photoshop
- Will be able to design & dev web page using HTML5
- Will be able to design web page using CSS3

What you'll learn

Will be able to design web page using Photoshop
Will be able to design & dev web page using HTML5
Will be able to design web page using CSS3
Will be able to create responsive web design
Will be able to create Mobile Friendly Web Design
Will be able to create stunning pages using Bootstrap

* Requirements

* No prior knowledge required

Description

Our students say about this course ...

"... I must say that until now, this is the only course that speaks and about  Photoshop. Other courses are speaking  (except HTML, CSS) about  Bootstrap or about Javascript. I think it worth to see this course." -- Elias Katsan

"The instructor is very informative and shows obstacles students may run into while designing a website." -- Emeka Nwadiogbu

"Great course! I learnt a little but more of programming. Thanks!" -- David Laso Martín

"It was a great course for me. I learn many thing from this course. Thanks" -- JR Jul-Haque Rahman

"This course is cover all the things to create a website using photoshop." -- Viraj Shah

By completing this course, you will become a master in  Web Design Technologies like Practical web design using Photoshop, HTML5, CSS3, Adobe Photoshop, and more. This course gives you hands-on and practical experience on detailed HTML5,  CSS3, Adobe Photoshop, and more.

Contents of this tutorial # 

Practical web design using Photoshop

  • Introduction to web design using Photoshop

  • Setting Artboards

  • Setting the stage

  • Wireframing

  • Wireframing UI/UX for Mobile

  • Exporting Wireframes

  • Designing for Desktops

  • Preparing for Slicing

  • Final words

Interactive HTML5: Basics

  • Introduction to HTML

  • HTML4 vs. HTML5

  • Making your first HTML page

  • Tools to create HTML files

  • Base HTML Tags

  • Paragraph Tags

  • Break Tags

  • Header Tags

  • Bold and Italic Tags

  • Ordered and unordered Lists

Interactive HTML5: Advanced

  • Difference between Absolute Links and Relative Links

  • Hyperlinking to an external page

  • Hyperlinking to an email address

  • Hyperlinking to a file in your site

  • Playing and controlling audio

  • Playing and controlling video

  • Embedding a video

  • Whats is a Table - Pros and Cons

  • Table properties

  • Adding an iFrame

  • Adding an iFrame: Part 2

  • What is possible with a form using on HTML knowledge

  • Defining the form 

  • Text fields and text areas

  • Radio buttons and check buttons

  • Data input and buttons

  • Proper file structure 

  • Code commenting 

  • Meta tags


Interactive CSS3: Basics

  • What is CSS? Why we need it?

  • What's new in CSS3

  • CSS Selectors, properties and attributes

  • ID Selectors

  • Class Selectors

  • Element Selectors

  • All Selectors

  • Inline style sheets

  • External Style sheets

Interactive CSS3: Advanced

  • The Box model

  • Adding Color

  • Working with fonts

  • Background images

  • Styling ID tags

  • Float and Clear

  • Block and inline elements

  • Positioning

  • Adding the elements

Interactive Bootstrap: Basic

  • Why Bootstrap? 

  • Downloading Bootstrap

  • Adding Bootstrap in your site

  • Creating navigation: Part 1

  • Creating navigation: Part 2

  • Creating navigation: Part 3

  • Styling images 

  • Creating the footer 

  • Adding styled buttons


Learning HTML5, CSS3, and Adobe Photoshop is one of the fastest ways to improve your career, especially on web design and development. 

We hope this course will be used as a helping hand for your prospective career. Please dig on free preview videos for more information.




Who this course is for:

  • Who wanna learn web design
  • Who wanna learn HTML5 and CSS3
  • Who wanna learn Adobe Photoshop
  • Who wanna learn practical UI/UX Design
  • Who wanna learn Mobile UI/UX Design
  • We wanna learn practical UI/UX Design using Photoshop

Course content

7 sections • 75 lectures

Introduction to web design using Photoshop Preview 02:01

Setting up Artboards Preview 08:04

Setting the Stage Preview 02:44

Wireframing Preview 09:22

Wireframing UI/UX for Mobile Preview 08:42

Exporting Wireframes Preview 04:56

Designing for Desktops Preview 08:13

Designing for Mobile Preview 08:03

Preparing for Slicing Preview 01:00

Getting started with slicing Preview 12:05

Modifying Slices Preview 07:58

Final words Preview 01:11

Introduction to HTML Preview 03:11

HTML4 vs. HTML5 Preview 03:47

Making your first HTML page Preview 04:23

Tools to create HTML files Preview 03:14

Base HTML Tags Preview 05:59

Paragraph Tags Preview 03:06

Break Tags Preview 02:29

Header Tags Preview 05:23

Bold and Italic Tags Preview 04:18

Ordered and unordered Lists Preview 04:07

Image Tags Preview 05:30

Difference between Absolute Links and Relative Links Preview 05:18

Hyperlinking to an external page Preview 04:25

Hyperlinking to an email address Preview 01:22

Hyperlinking to a file in your site Preview 02:00

Playing and controlling audio Preview 04:43

Playing and controlling video Preview 03:57

Embedding a video Preview 03:47

What is a Table - Pros and Cons Preview 01:31

Table properties Preview 05:37

Adding an iFrame Preview 04:00

Adding an iFrame: Part 2 Preview 02:58

What is possible with a form using HTML knowledge Preview 01:41

Defining the form Preview 01:34

Text fields and text areas Preview 02:09

Radio buttons and check buttons Preview 06:03

Data input and buttons Preview 03:24

Proper file structure Preview 04:23

Code commenting Preview 04:20

Meta Tags Preview 04:01

About the class - what you will need Preview 01:09

What is CSS? Why we need it? Preview 02:22

What's new in CSS3 Preview 04:15

CSS Selectors, properties and attributes Preview 01:19

ID Selectors Preview 01:21

Class Selectors Preview 01:41

Element Selectors Preview 01:25

All Selectors Preview 01:26

Inline style sheets Preview 06:38

External style sheets Preview 03:26

Inline styles Preview 03:36

The Box Model Preview 04:48

Adding Color Preview 05:11

Working with fonts Preview 04:42

Background images Preview 03:02

Background Images: Part 2 Preview 04:26

Styling links Preview 04:55

Styling ID Tags Preview 02:38

Float and clear Preview 07:26

Block and inline elements Preview 03:04

Positioning Preview 07:47

9 Rules of better web design Preview 00:12

Color Theory for Web Designers Preview 01:42

Why Bootstrap? Preview 02:37

Download Bootstrap Preview 03:10

Adding Bootstrap in your site Preview 03:52

Creating the navigation Preview 05:09

Creating the navigation: Part 2 Preview 05:24

Creating the navigation: Part 3 Preview 06:57

Creating containers Preview 10:00

Styling images Preview 02:01

Creating the footer Preview 03:55

Adding styled buttons Preview 03:40