Udemy
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
Development
Web Development Data Science Mobile Development Programming Languages Game Development Database Design & Development Software Testing Software Engineering Development Tools No-Code Development
Business
Entrepreneurship Communications Management Sales Business Strategy Operations Project Management Business Law Business Analytics & Intelligence Human Resources Industry E-Commerce Media Real Estate Other Business
Finance & Accounting
Accounting & Bookkeeping Compliance Cryptocurrency & Blockchain Economics Finance Finance Cert & Exam Prep Financial Modeling & Analysis Investing & Trading Money Management Tools Taxes Other Finance & Accounting
IT & Software
IT Certification Network & Security Hardware Operating Systems Other IT & Software
Office Productivity
Microsoft Apple Google SAP Oracle Other Office Productivity
Personal Development
Personal Transformation Personal Productivity Leadership Career Development Parenting & Relationships Happiness Esoteric Practices Religion & Spirituality Personal Brand Building Creativity Influence Self Esteem & Confidence Stress Management Memory & Study Skills Motivation Other Personal Development
Design
Web Design Graphic Design & Illustration Design Tools User Experience Design Game Design Design Thinking 3D & Animation Fashion Design Architectural Design Interior Design Other Design
Marketing
Digital Marketing Search Engine Optimization Social Media Marketing Branding Marketing Fundamentals Marketing Analytics & Automation Public Relations Advertising Video & Mobile Marketing Content Marketing Growth Hacking Affiliate Marketing Product Marketing Other Marketing
Lifestyle
Arts & Crafts Beauty & Makeup Esoteric Practices Food & Beverage Gaming Home Improvement Pet Care & Training Travel Other Lifestyle
Photography & Video
Digital Photography Photography Portrait Photography Photography Tools Commercial Photography Video Design Other Photography & Video
Health & Fitness
Fitness General Health Sports Nutrition Yoga Mental Health Dieting Self Defense Safety & First Aid Dance Meditation Other Health & Fitness
Music
Instruments Music Production Music Fundamentals Vocal Music Techniques Music Software Other Music
Teaching & Academics
Engineering Humanities Math Science Online Education Social Science Language Teacher Training Test Prep Other Teaching & Academics
AWS Certification Microsoft Certification AWS Certified Solutions Architect - Associate AWS Certified Cloud Practitioner CompTIA A+ Cisco CCNA Amazon AWS CompTIA Security+ AWS Certified Developer - Associate
Graphic Design Photoshop Adobe Illustrator Drawing Digital Painting InDesign Character Design Canva Figure Drawing
Life Coach Training Neuro-Linguistic Programming Personal Development Mindfulness Personal Transformation Meditation Life Purpose Coaching Neuroscience
Web Development JavaScript React CSS Angular PHP WordPress Node.Js Python
Google Flutter Android Development iOS Development Swift React Native Dart Programming Language Mobile Development Kotlin SwiftUI
Digital Marketing Google Ads (Adwords) Social Media Marketing Google Ads (AdWords) Certification Marketing Strategy Internet Marketing YouTube Marketing Email Marketing Retargeting
SQL Microsoft Power BI Tableau Business Analysis Business Intelligence MySQL Data Analysis Data Modeling Big Data
Business Fundamentals Entrepreneurship Fundamentals Business Strategy Online Business Business Plan Startup Freelancing Blogging Home Business
Unity Game Development Fundamentals Unreal Engine C# 3D Game Development C++ 2D Game Development Unreal Engine Blueprints Blender
30-Day Money-Back Guarantee

This course includes:

  • 17.5 hours on-demand video
  • 5 articles
  • 5 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
Design Web Design PSD to HTML

Learn PSD to HTML : Responsive Portfolio Website Design

Learn PSD to HTML from scratch by designing the PSD template and Converting it to HTML/CSS website with Awesome Features
Rating: 4.4 out of 54.4 (54 ratings)
1,288 students
Created by Supriyo Kundu
Last updated 2/2019
English
English [Auto]
30-Day Money-Back Guarantee

What you'll 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 without anyone's help
  • You will be able to 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

Requirements

  • For Designing the PSD template , Photoshop is used
  • For converting the PSD template to responsive HTML/CSS Template , any Text Editor can be used

Description

Do you want to Learn PSD to HTML from scratch by Designing the PSD Template and then Converting it into a Beautiful 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 code with 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 Tricks to 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 :)



Who this course is 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
  • 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

Course content

5 sections • 77 lectures • 17h 24m total length

  • Preview04:23
  • Preview08:02
  • Installing Google Font and Font Awesome in Machine
    10:23

  • Preview04:24
  • Download Bootstrap Grid PSD here
    00:02
  • Creating Color Swatch
    04:18
  • Header logo and Navigation
    19:38
  • Hero Area : Part1
    13:22
  • Hero Area : Part2
    14:03
  • About : Part1
    18:55
  • About : Part2
    10:42
  • Education Experience Skills : Part1
    19:58
  • Education Experience Skills : Part2
    16:27
  • Services : Part1
    19:54
  • Services : Part2
    06:11
  • Portfolio : Part1
    19:47
  • Portfolio : Part2
    12:08
  • Portfolio : Part3
    10:27
  • Testimonials : Part1
    18:38
  • Testimonials : Part2
    11:37
  • Blog : Part1
    17:34
  • Blog : Part2
    05:38
  • Contact : Part1
    18:46
  • Contact : Part2
    11:42
  • Footer
    07:09

  • Creating Basic Files and Folders
    04:36
  • Creating HTML markup with necessary META tags
    05:00
  • Downloading and Using Jquery
    05:38
  • Downloading and Using Bootstrap4
    07:35
  • Google Font
    03:18
  • Reset CSS
    10:29
  • Using FontAwesome Icon Font in Project
    04:44
  • Respond Js
    06:11
  • Exporting and Optimizing Images : Part1
    13:26
  • Exporting and Optimizing Images : Part2
    17:24
  • Header Navigation and Logo Markup with Explanation
    15:01
  • Challenge - Styling Custom Bootstrap Navigation : Part1
    19:58
  • Challenge - Styling Custom Bootstrap Navigation : Part2
    08:28
  • Hero Area : Content MarkUp and Styling :part1
    18:48
  • Hero Area : Content MarkUp and Styling :part2
    08:02
  • Surprise Lecture : Secret to Non Rectangular Background - The Easy way
    19:55
  • Adding Particle Animation to Hero Area
    13:11
  • Animated Text
    11:17
  • Call to Action Button Hover Effect
    13:54
  • Fixed Header
    10:12
  • Fixed Header : Interesting Update : Unique solution for transprent Background
    22:56
  • About Section
    21:40
  • Education and Experience
    14:38
  • Skills : Part1
    18:23
  • Special CSS Trick to create arrow
    10:46
  • Animated Loader
    10:36
  • Cool Trick Solution for symmetrical top and bottom non-rectangular shape
    08:36
  • Trick to Create Underline Effect : 2 Ways Revealed
    15:39
  • Services Section : Markup and Styling
    25:03
  • Service Hover Effect
    16:55
  • Portfolio : HTML Markup
    24:05
  • Portfolio : Unique Hover Effect
    21:05
  • Portfolio : Plugin Initialization
    16:51
  • Portfolio : Adding Filterable Feature
    17:48
  • Finishing Up Portfolio Section
    15:01
  • Testimonial Part1
    21:49
  • Testimonial Part2
    17:15
  • Blog
    26:05
  • Contact Markup
    18:27
  • Contact Styling
    21:08
  • Footer
    11:07
  • Required Modification
    04:53

  • Adjusting few styles to make our site look good in all Screen Width
    39:17
  • Smooth Scrolling and Auto Changing Active Nav Item
    15:10
  • Uploading Our site to real Server
    09:22
  • Animated Loader Design in Photoshop
    16:32
  • Implementing our Custom Page Loader to our website
    17:07
  • CSS Animations
    44:36

  • Download PSD Template here
    00:01
  • Download finished PSD to HTML website project here
    00:01
  • Download Bootstrap PSD Grid here
    00:01
  • Download our Animated Loader Gif PSD file here
    00:02

Instructor

Supriyo Kundu
Web Developer & Graphic Designer, 75000+ Students Instructor
Supriyo Kundu
  • 4.2 Instructor Rating
  • 2,565 Reviews
  • 77,730 Students
  • 21 Courses

Hi ,

My name is Supriyo . I am a Computer Science Engineer .
I have equal passion for both Programming and Designing.

Areas of Knowledge : Photoshop , Illustrator , Web Design , Web Development , Wordpress , Elementor.

I help students to grow their Designing and Programming skills , be it Design Effects or Retouching or Photo Manipulation or Animations or Website Design (Design and coding both) etc .

Currently , My courses have over 75000 Awesome Students and they also love me :)

  • Udemy for Business
  • Teach on Udemy
  • Get the app
  • About us
  • Contact us
  • Careers
  • Blog
  • Help and Support
  • Affiliate
  • Terms
  • Privacy policy
  • Cookie settings
  • Sitemap
  • Featured courses
Udemy
© 2021 Udemy, Inc.