Create Responsive Websites: From PSD Design to Code As a Pro

Focused View

Amir Mewlani Rad

8:05:53

254 View

1 - Introduction

1 - Introduction.mp4

02:46

2 - Introduction to the Project.mp4

04:36

3 - How Much Skill in Coding is Needed to Start this Course.mp4

00:40

2 - Important Tips and Information

4 - Web Design Inspiration.mp4

02:03

5 - How to find Graphics to Use in Projects.mp4

02:36

3 - Photoshop Basics for Web Design

6 - Customizing the Photoshops Interface.mp4

01:45

7 - Using Shape Tool.mp4

04:27

8 - Using Rectangular Marquee Tool.mp4

01:18

9 - Using Move Tool and Alignment Tools.mp4

03:28

10 - Using Pen Tool.mp4

02:45

11 - Using Direct Selection Tool.mp4

01:25

12 - Using Type Tool.mp4

03:00

13 - Applying Layer Styles.mp4

03:56

4 - Designing the PSD

14 - Bootstrap 4 Grid System PSD Template.mp4

01:21

15 - Picking colors.mp4

01:29

16 - Downloading and Installing Fonts.mp4

02:42

17 - 01.EduPlateou-Header.zip

17 - Designing the Header.mp4

07:45

18 - 02.EduPlateou-Hero.zip

18 - Designing the Hero Section.mp4

12:39

19 - 03.EduPlateou-Features.zip

19 - Designing the Features Section.mp4

09:59

20 - 04.EduPlateou-Professors.zip

20 - Designing the Professors Section.mp4

06:18

21 - 05.EduPlateou-Fields.zip

21 - Designing the Fields Section.mp4

13:04

22 - 06.EduPlateou-Grades.zip

22 - Designing the Grades Section.mp4

03:44

23 - 07.EduPlateou-Courses.zip

23 - Designing the Courses Section.mp4

05:56

24 - 08.EduPlateou-Subscribe.zip

24 - Designing the Subscribe Section.mp4

03:40

25 - 09.EduPlateou-Facilities.zip

25 - Designing the Facilities Section.mp4

07:34

26 - 10.EduPlateou-Awards.zip

26 - Designing the Awards Section.mp4

08:21

27 - 11.EduPlateou-Branches.zip

27 - Designing the Branches Section.mp4

08:57

28 - 12.EduPlateou-Contact.zip

28 - Designing the Contact Section.mp4

09:38

29 - 13.EduPlateou-Mini-Subscribe.zip

29 - Designing the Mini Subscribe Section.mp4

04:08

30 - 14.EduPlateou-Footer.zip

30 - Designing the Footer and Copyright.mp4

12:09

31 - 15.EduPlateou-Final-Touches.zip

31 - Final Touches and Improvements of the PSD.mp4

11:11

5 - Converting the PSD to HTML

32 - Choosing the Code Editor.mp4

01:13

33 - 32.The-Project-Basic-Setup-and-Folder-Structure.zip

33 - The Project Basic Setup and Folder Structure.mp4

06:53

34 - 33.Writing-Some-Reusable-CSS-Code.zip

34 - Writing Some Reusable CSS Code.mp4

02:31

35 - 34.Coding-the-Header.zip

35 - Coding the Header.mp4

13:42

36 - 35.Coding-the-Hero-Section.zip

36 - Coding the Hero Section.mp4

25:35

37 - 36.Coding-the-Features-Section.zip

37 - Coding the Features Section.mp4

08:15

38 - 37.Creating-a-Background-for-the-Fixed-Header.zip

38 - Creating a Background for the Fixed Header.mp4

04:08

39 - 38.Coding-the-Professors-Section.zip

39 - Coding the Professors Section.mp4

08:43

40 - 39.Coding-the-Fields-Section.zip

40 - Coding the Fields Section.mp4

16:31

41 - 40.Coding-the-Grades-Section.zip

41 - Coding the Grades Section.mp4

05:07

42 - 41.Coding-the-Courses-Section.zip

42 - Coding the Courses Section.mp4

06:48

43 - 42.coding-the-Subscribe-Section.zip

43 - Coding the Subscribe Section.mp4

03:50

44 - 43.Coding-the-Facilities-Section-Part1.zip

44 - Coding the Facilities Section Part1.mp4

17:45

45 - 44.Coding-the-Facilities-Section-Part2.zip

45 - Coding the Facilities Section Part2 Creating the CSS Popup.mp4

18:10

46 - 45.Coding-the-Awards-Section.zip

46 - Coding the Awards Section.mp4

18:21

47 - 46.Coding-the-Branches-Section.zip

47 - Coding the Branches Section.mp4

12:06

48 - 47.Coding-the-Contact-Section.zip

48 - Coding the Contact Section.mp4

09:22

49 - 48.Coding-the-Mini-Subscribe-Section.zip

49 - Coding the Mini Subscribe Section.mp4

03:30

50 - 49.Coding-the-Footer.zip

50 - Coding the Footer.mp4

18:33

51 - 50.Reviewing-the-template.zip

51 - Reviewing the Template.mp4

13:11

6 - Making the HTML Template Responsive and Mobile Ready

52 - 51.Creating-the-Mobile-Navigation.zip

52 - Creating the Mobile Navigation.mp4

24:45

53 - 52.Polishing-the-Mobile-Navigation.zip

53 - Polishing the Mobile Navigation.mp4

02:43

54 - 53.Getting-Ready-to-Write-Media-Queries.zip

54 - Getting Ready to Write Media Queries.mp4

05:14

55 - 54.Making-the-Header-Responsive.zip

55 - Making the Header Responsive.mp4

02:50

56 - 55.Making-Hero-Responsive.zip

56 - Making the Hero Section Responsive.mp4

04:56

57 - 56.Making-the-Features-Section-Responsive.zip

57 - Making the Features Section Responsive.mp4

02:43

58 - 57.Making-the-Professors-Section-Responsive.zip

58 - Making the Professors Section Responsive.mp4

02:27

59 - 58.Making-the-Grades-Section-Responsive.zip

59 - Making the Grades Section Responsive.mp4

01:20

60 - 59.Making-the-Subscribe-Section-Responsive.zip

60 - Making the Subscribe Section Responsive.mp4

02:22

61 - 60.Making-the-Facilities-Section-Responsive.zip

61 - Making the Facilities Section Responsive.mp4

04:11

62 - 61.Making-the-Awards-Section-Responsive.zip

62 - Making the Awards Section Responsive.mp4

02:10

63 - 62.Making-the-Branches-Section-Responsive.zip

63 - Making the Branches Section Responsive.mp4

05:02

64 - 63.Making-the-Contact-Section-Responsive.zip

64 - Making the Contact Section Responsive.mp4

03:03

65 - 64.Making-the-Mini-Subscribe-Section-Responsive.zip

65 - Making the Mini Subscribe Section Responsive.mp4

02:06

66 - 65.Making-the-Footer-Responsive.zip

66 - Making the Footer Responsive.mp4

08:25

7 - Spicing Up the Project More

67 - 66.Using-Bootstrap-Scrollspy.zip

67 - Using Bootstrap Scrollspy.mp4

05:03

68 - 67.Smoothing-the-Navigation-Scroll.zip

68 - Smoothing Navigation Scrolls.mp4

02:38

69 - 68.Applying-Animations-to-the-Page-Elements.zip

69 - Applying Animations to the Page Elements.mp4

13:54

70 - 69.Final-Touches-and-Farewell.zip

70 - Final Touches and Farewell.mp4

10:27

Description

Learn Web Design in Photoshop and Code with HTML 5, CSS 3, jQuery and Bootstrap 4 Professionally the Easy Way

What You'll Learn?

Learn to create responsive, modern and professional web templates using html, css (and jqurey) from PSD
Learn web design in Adobe Photoshop professionally using powerful tools and techniques
Learn advanced css techniques
Learn to create mobile navigation using advanced css and jquery
Unleash the power of css and create an awesome popup without a single line of javascript code
Learn to create parallax effects and distinguish them by combining them with advanced gradient overlays
Learn to apply transitions and creative hover effects to web page elements
Learn to skillfully use Bootstrap 4 grid system to create advanced and easily responsive-able layouts
Learn to use and customize Bootstrap 4 carousel to create very custom sliders
Learn to use and customize a famous third party carousel
Learn to use Google Maps to show the addresses inside web pages
Learn to apply exciting animations to web page elements

Who is this for?

Anyone who wants to learn web design in Adobe Photoshop

Anyone who wants to learn creating awesome and modern look web templates with html, css and bootstrap 4 from PSD

Anyone who wants to Learn creating web templates from designing the PSD Mockup to professionally coding it with html, css (and a bit of jqurey)

Anyone who wants to Learn How to Effectively Use Bootstrap 4 in a Real World Project

What You Need to Know?

A computer with Mac or Windows operating system.

Knowing how to work with the Computer.

A very basic understating of HTML and CSS is recommended.

More details

Description
ThisÂ course is a complete front end web design course to achieve a high level understanding of how the websites are created and made Interactible. This course has been created for those who want to learn both designing web PSD templates and also coding with html, css and jquery along with the use of the power of Bootstrap 4. This course is also for those who want to learn one of the mentioned skills or those who want to learn one of them but also want to have a good understanding of other skills, this course is even for those that are rather experienced in the field and want to move to the next level. This course could have been two separate courses but it has been done this way to cover a wider range of demands. It is also necessary for learner's to know this course is not recommended for the people that are absolute beginner as it is possible for them to have difficulty keep up with the course to the end.
At the end of the course, you will become a professional web graphics designer and front end developer and be able to do projects in any size.
Who this course is for:
Anyone who wants to learn web design in Adobe Photoshop
Anyone who wants to learn creating awesome and modern look web templates with html, css and bootstrap 4 from PSD
Anyone who wants to Learn creating web templates from designing the PSD Mockup to professionally coding it with html, css (and a bit of jqurey)
Anyone who wants to Learn How to Effectively Use Bootstrap 4 in a Real World Project

User Reviews

Rating

average 0

Total votes0

Focused display

A software engineer and an official teacher of computer sciences. Taught thousands of students to date. Scope of activity include Programming with C#, Java, C++, Swift, PHP, Front End Web Development, Mobile App Development, 2D design with Adobe Photoshop, 3D design with 3ds Max and Maya. Also have some experience with Unreal Engine!

Udemy

View courses Udemy

Students take courses primarily to improve job-related skills.Some courses generate credit toward technical certification. Udemy has made a special effort to attract corporate trainers seeking to create coursework for employees of their company.