Learn PSD to HTML : Responsive Portfolio Website Design

Learn PSD to HTML : Responsive Portfolio Website Design, available at $44.99, has an average rating of 4.25, with 78 lectures, based on 158 reviews, and has 18503 subscribers.

You will learn about After completing this course , you can design and code your own Website with ease After Completing the course , you will gain confidence in Website Design field as you will be able to do both designing and codeing yourself Design Cool Professional Websites with Awesome Features like Particle Animation , Text Animation , CSS Animations , Parallax Backgrounds , Awesome Hover Effects As here , we are going to create a Portfolio Website , hence you will be able to create Portfolio Websites for yourself or for your Clients You will be able to create Responsive Website with Bootstrap4 This course is ideal for individuals who are If you want to Learn PSD to HTML from scratch by designing the PSD template and then converting to a Modern Looking HTML/CSS Template, this course is for you or If you want to learn creating website with non-rectangular HTML sections (no images only coding), this course is for you or If you want to learn creating website with cool Features like Particle Animation , Text Animation , CSS Animations , Parallax Backgrounds , Awesome Hover Effects , this course is for you or If you want to learn creating Responsive website with Bootstrap4 , this course is for you or If you want to create Portfolio website for you or for your clients , this course is for you It is particularly useful for If you want to Learn PSD to HTML from scratch by designing the PSD template and then converting to a Modern Looking HTML/CSS Template, this course is for you or If you want to learn creating website with non-rectangular HTML sections (no images only coding), this course is for you or If you want to learn creating website with cool Features like Particle Animation , Text Animation , CSS Animations , Parallax Backgrounds , Awesome Hover Effects , this course is for you or If you want to learn creating Responsive website with Bootstrap4 , this course is for you or If you want to create Portfolio website for you or for your clients , this course is for you.

Enroll now: Learn PSD to HTML : Responsive Portfolio Website Design

Summary

Title: Learn PSD to HTML : Responsive Portfolio Website Design

Price: $44.99

Average Rating: 4.25

Number of Lectures: 78

Number of Published Lectures: 77

Number of Curriculum Items: 78

Number of Published Curriculum Objects: 77

Original Price: $199.99

Quality Status: approved

Status: Live

What You Will Learn

After completing this course , you can design and code your own Website with ease
After Completing the course , you will gain confidence in Website Design field as you will be able to do both designing and codeing yourself
Design Cool Professional Websites with Awesome Features like Particle Animation , Text Animation , CSS Animations , Parallax Backgrounds , Awesome Hover Effects
As here , we are going to create a Portfolio Website , hence you will be able to create Portfolio Websites for yourself or for your Clients
You will be able to create Responsive Website with Bootstrap4

Who Should Attend

If you want to Learn PSD to HTML from scratch by designing the PSD template and then converting to a Modern Looking HTML/CSS Template, this course is for you
If you want to learn creating website with non-rectangular HTML sections (no images only coding), this course is for you
If you want to learn creating website with cool Features like Particle Animation , Text Animation , CSS Animations , Parallax Backgrounds , Awesome Hover Effects , this course is for you
If you want to learn creating Responsive website with Bootstrap4 , this course is for you
If you want to create Portfolio website for you or for your clients , this course is for you

Target Audiences

If you want to Learn PSD to HTML from scratch by designing the PSD template and then converting to a Modern Looking HTML/CSS Template, this course is for you
If you want to learn creating website with non-rectangular HTML sections (no images only coding), this course is for you
If you want to learn creating website with cool Features like Particle Animation , Text Animation , CSS Animations , Parallax Backgrounds , Awesome Hover Effects , this course is for you
If you want to learn creating Responsive website with Bootstrap4 , this course is for you
If you want to create Portfolio website for you or for your clients , this course is for you

Do you want to LearnPSD to HTML from scratch byDesigning the PSD Template and thenConverting it into aBeautiful Modern Looking Responsive HTML/CSS Website?

If your Answer is Yes, this Course is for you.

Welcome to this Awesome Course, where we are going to build a Cool Professional Modern Looking Responsive Portfolio Website with Cool Features.

Features of this Web Design Course :

Responsive Design Using Bootstrap 4
Non Rectangular Backgrounds (No images , only codewith easy logical approach)
Attractive Hero Area with Particle Animation and Text Animation
CSS Animations
Awesome Unique Hover Effects
Filterable Portfolio Items
Custom Page Loader(our own)
Many Important Tips and Tricksto solve problems with easy approach which helps in growing problem solving skills in website designs

I am really excited and also feeling honored that I will walk you through all of these step by step

Every bit of code is explained in the course . And also if you need any help , I am always here to help you out .

After taking this course , you will have enormous confidence of Designing Portfolio Websites from scratch as you will be able to do both Designing and Coding and also you will be able to add more spice to your project by adding cool effects that are going to be covered here in this course !!! Thumbs up !!!

So are you ready to grow your confidence ?

Take your first step by taking a look at the full demo of the website that we are going to build in this course which is a free preview.

I am looking forward to see you inside the course 🙂

Course Curriculum

Chapter 1: Introduction

Lecture 1: Full Demo

Lecture 2: Get High Quality High Resolution Images for Free

Lecture 3: Installing Google Font and Font Awesome in Machine

Chapter 2: Designing PSD Template

Lecture 1: Understanding Grid

Lecture 2: Download Bootstrap Grid PSD here

Lecture 3: Creating Color Swatch

Lecture 4: Header logo and Navigation

Lecture 5: Hero Area : Part1

Lecture 6: Hero Area : Part2

Lecture 7: About : Part1

Lecture 8: About : Part2

Lecture 9: Education Experience Skills : Part1

Lecture 10: Education Experience Skills : Part2

Lecture 11: Services : Part1

Lecture 12: Services : Part2

Lecture 13: Portfolio : Part1

Lecture 14: Portfolio : Part2

Lecture 15: Portfolio : Part3

Lecture 16: Testimonials : Part1

Lecture 17: Testimonials : Part2

Lecture 18: Blog : Part1

Lecture 19: Blog : Part2

Lecture 20: Contact : Part1

Lecture 21: Contact : Part2

Lecture 22: Footer

Chapter 3: Converting PSD to Responsive HTML/CSS

Lecture 1: Creating Basic Files and Folders

Lecture 2: Creating HTML markup with necessary META tags

Lecture 3: Downloading and Using Jquery

Lecture 4: Downloading and Using Bootstrap4

Lecture 5: Google Font

Lecture 6: Reset CSS

Lecture 7: Using FontAwesome Icon Font in Project

Lecture 8: Respond Js

Lecture 9: Exporting and Optimizing Images : Part1

Lecture 10: Exporting and Optimizing Images : Part2

Lecture 11: Header Navigation and Logo Markup with Explanation

Lecture 12: Challenge – Styling Custom Bootstrap Navigation : Part1

Lecture 13: Challenge – Styling Custom Bootstrap Navigation : Part2

Lecture 14: Hero Area : Content MarkUp and Styling :part1

Lecture 15: Hero Area : Content MarkUp and Styling :part2

Lecture 16: Surprise Lecture : Secret to Non Rectangular Background – The Easy way

Lecture 17: Adding Particle Animation to Hero Area

Lecture 18: Animated Text

Lecture 19: Call to Action Button Hover Effect

Lecture 20: Fixed Header

Lecture 21: Fixed Header : Interesting Update : Unique solution for transprent Background

Lecture 22: About Section

Lecture 23: Education and Experience

Lecture 24: Skills : Part1

Lecture 25: Special CSS Trick to create arrow

Lecture 26: Animated Loader

Lecture 27: Cool Trick Solution for symmetrical top and bottom non-rectangular shape

Lecture 28: Trick to Create Underline Effect : 2 Ways Revealed

Lecture 29: Services Section : Markup and Styling

Lecture 30: Service Hover Effect

Lecture 31: Portfolio : HTML Markup

Lecture 32: Portfolio : Unique Hover Effect

Lecture 33: Portfolio : Plugin Initialization

Lecture 34: Portfolio : Adding Filterable Feature

Lecture 35: Finishing Up Portfolio Section

Lecture 36: Testimonial Part1

Lecture 37: Testimonial Part2

Lecture 38: Blog

Lecture 39: Contact Markup

Lecture 40: Contact Styling

Lecture 41: Footer

Lecture 42: Required Modification

Chapter 4: Spicing Up Our Website

Lecture 1: Adjusting few styles to make our site look good in all Screen Width

Lecture 2: Smooth Scrolling and Auto Changing Active Nav Item

Lecture 3: Uploading Our site to real Server

Lecture 4: Animated Loader Design in Photoshop

Lecture 5: Implementing our Custom Page Loader to our website

Lecture 6: CSS Animations

Chapter 5: Resource Files

Lecture 1: Download PSD Template here

Lecture 2: Download finished PSD to HTML website project here

Lecture 3: Download Bootstrap PSD Grid here

Lecture 4: Download our Animated Loader Gif PSD file here

Instructors

Supriyo Kundu
Web Developer & Graphic Designer,100000+ Students Instructor

Rating Distribution

1 stars: 6 votes
2 stars: 6 votes
3 stars: 14 votes
4 stars: 49 votes
5 stars: 83 votes

Frequently Asked Questions

How long do I have access to the course materials?

You can view and review the lecture materials indefinitely, like an on-demand channel.

Can I take my courses with me wherever I go?

Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don’t have an internet connection, some instructors also let their students download course lectures. That’s up to the instructor though, so make sure you get on their good side!

Menu