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

Name: Create Responsive Websites: From PSD Design to Code As a Pro
Rating: 4.5 (68 reviews)

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

Created byAmir Mewlani Rad

Last updated 12/2019

English

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

7 sections • 70 lectures • 8h 5m total length

Introduction2:46
A quick introduction to the course.
(All Background music from: https://www.bensound.com)
Introduction to the Project4:35
How Much Skill in Coding is Needed to Start this Course0:40

Customizing the Photoshop's Interface1:45
Using Shape Tool4:27
Using Rectangular Marquee Tool1:18
Explore how to use the rectangular marquee tool to create selections, measure element height and width, and align objects on the canvas in Photoshop, using the move and alignment tools.
Using Move Tool and Alignment Tools3:28
Using Pen Tool2:45
Using Direct Selection Tool1:25
Using Type Tool3:00
Applying Layer Styles3:55
Apply layer styles to web elements using the layers panel, blending options, strokes, shadows, color overlays, and gradients to create bevel and gradient effects for responsive websites.

Bootstrap 4 Grid System PSD Template1:21
Picking colors1:29
Downloading and Installing Fonts2:42
Designing the Header7:45
Design header by creating a wide rectangle and aligning it to the top of the canvas, then place the logo and social icons with 28-pixel spacing and Font Awesome characters.
Designing the Hero Section12:39
Designing the Features Section9:59
Designs the features section with a 12-column grid and three-column feature blocks, using a Laura heading, Lerdo body text, and globe, handholding, heart, and clock icons in a primary color.
Designing the Professors Section6:18
Designing the Fields Section13:04
Designing the Grades Section3:44
Designing the Courses Section5:56
Designing the Subscribe Section3:40
Designing the Facilities Section7:34
Design the facilities section by duplicating groups, replacing the parallax image, and creating a clipping mask; arrange on a 12-column grid and adjust images, overlays, typography, and spacing.
Designing the Awards Section8:21
Designing the Branches Section8:57
Designing the Contact Section9:38
Designing the Mini Subscribe Section4:08
Designing the Footer and Copyright12:09
Final Touches and Improvements of the PSD11:11

Choosing the Code Editor1:13
The Project Basic Setup and Folder Structure6:53
create a project starter by setting up a folder structure, linking html, css, and js files, integrating normalized css, bootstrap, and google fonts, and preparing assets for the template.
Writing Some Reusable CSS Code2:31
Coding the Header13:42
Coding the Hero Section25:35
Learn to build a responsive hero section with a Bootstrap carousel, including slides with background images and gradient overlays, centered content, and styled indicators and navigation arrows with gradient buttons.
Coding the Features Section8:15
Creating a Background for the Fixed Header4:08
Learn to create a semi-transparent fixed header background that appears on scroll by toggling the header-bg class with a 0.5s transition and adjusting header height and line height.
Coding the Professors Section8:43
Coding the Fields Section16:31
Coding the Grades Section5:07
Develop a responsive grades section by duplicating sections, styling with a gradient background and diagonal card using clip-path polygon, and updating headings and button classes for a cohesive layout.
Coding the Courses Section6:48
Coding the Subscribe Section3:50
Coding the Facilities Section Part117:45
Coding the Facilities Section Part2 - Creating the CSS Popup18:10
Coding the Awards Section18:21
Coding the Branches Section12:06
Coding the Contact Section9:22
Coding the Mini Subscribe Section3:30
Coding the Footer18:33
Reviewing the Template13:11

Creating the Mobile Navigation24:45
Polishing the Mobile Navigation2:43
Getting Ready to Write Media Queries5:14
Making the Header Responsive2:50
Making the Hero Section Responsive4:56
Making the Features Section Responsive2:43
Making the Professors Section Responsive2:27
Make the professors section responsive by displaying the image only on extra large screens, centering text and the separator, adjusting margins, and aligning the action button to ensure consistent layout.
Making the Grades Section Responsive1:20
Making the Subscribe Section Responsive2:22
Making the Facilities Section Responsive4:11
Making the Awards Section Responsive2:10
Making the Branches Section Responsive5:02
Making the Contact Section Responsive3:02
Making the Mini Subscribe Section Responsive2:06
Making the Footer Responsive8:25

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 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

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

What you'll learn

Explore related topics

Course content

Introduction3 lectures • 8min

Important Tips and Information2 lectures • 5min

Photoshop Basics for Web Design8 lectures • 22min

Designing the PSD18 lectures • 2hr 11min

Converting the PSD to HTML20 lectures • 3hr 34min

Making the HTML Template Responsive and Mobile Ready15 lectures • 1hr 14min

Spicing Up the Project More4 lectures • 32min

Requirements

Description

Who this course is for: