Create Responsive Websites: From PSD Design to Code As a Pro
4.1 (56 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
330 students enrolled

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

Learn Web Design in Photoshop and Code with HTML 5, CSS 3, jQuery and Bootstrap 4 Professionally the Easy Way
4.1 (56 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
330 students enrolled
Created by Amir Mewlani Rad
Last updated 12/2019
English
English [Auto-generated]
Current price: $139.99 Original price: $199.99 Discount: 30% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 8 hours on-demand video
  • 53 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
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
Course content
Expand all 70 lectures 08:05:50
+ Important Tips and Information
2 lectures 04:39
Web Design Inspiration
02:03
How to find Graphics to Use in Projects
02:36
+ Photoshop Basics for Web Design
8 lectures 22:03
Using Shape Tool
04:27
Using Rectangular Marquee Tool
01:18
Using Move Tool and Alignment Tools
03:28
Using Pen Tool
02:45
Using Direct Selection Tool
01:25
Using Type Tool
03:00
Applying Layer Styles
03:55
+ Designing the PSD
18 lectures 02:10:35
Bootstrap 4 Grid System PSD Template
01:21
Picking colors
01:29
Downloading and Installing Fonts
02:42
Designing the Hero Section
12:39
Designing the Features Section
09:59
Designing the Professors Section
06:18
Designing the Grades Section
03:44
Designing the Courses Section
05:56
Designing the Subscribe Section
03:40
Designing the Awards Section
08:21
Designing the Branches Section
08:57
Designing the Contact Section
09:38
Designing the Mini Subscribe Section
04:08
Designing the Footer and Copyright
12:09
Final Touches and Improvements of the PSD
11:11
+ Converting the PSD to HTML
20 lectures 03:34:14
Choosing the Code Editor
01:13
The Project Basic Setup and Folder Structure
06:53
Writing Some Reusable CSS Code
02:31
Coding the Hero Section
25:35
Coding the Features Section
08:15
Coding the Professors Section
08:43
Coding the Fields Section
16:31
Coding the Grades Section
05:07
Coding the Courses Section
06:48
Coding the Subscribe Section
03:50
Coding the Facilities Section Part1
17:45
Coding the Facilities Section Part2 - Creating the CSS Popup
18:10
Coding the Awards Section
18:21
Coding the Branches Section
12:06
Coding the Contact Section
09:22
Coding the Mini Subscribe Section
03:30
Coding the Footer
18:33
Reviewing the Template
13:11
+ Making the HTML Template Responsive and Mobile Ready
15 lectures 01:14:16
Creating the Mobile Navigation
24:45
Polishing the Mobile Navigation
02:43
Making the Header Responsive
02:50
Making the Hero Section Responsive
04:56
Making the Features Section Responsive
02:43
Making the Professors Section Responsive
02:27
Making the Grades Section Responsive
01:20
Making the Subscribe Section Responsive
02:22
Making the Awards Section Responsive
02:10
Making the Branches Section Responsive
05:02
Making the Contact Section Responsive
03:02
Making the Mini Subscribe Section Responsive
02:06
Making the Footer Responsive
08:25
+ Spicing Up the Project More
4 lectures 32:02
Using Bootstrap Scrollspy
05:03
Applying Animations to the Page Elements
13:54
Final Touches and Farewell
10:27
Requirements
  • 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.
Description

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, or those who want to learn one of the skills or those who want to learn one of them but also want to have a good understanding of the other skill, or 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.

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