Udemy
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
Turn what you know into an opportunity and reach millions around the world.
Learn More
Your cart is empty.
Keep shopping
Learn how to convert PSD to HTML and CSS responsive
Rating: 4.3 out of 5(156 ratings)
12,209 students

Learn how to convert PSD to HTML and CSS responsive

Learn all techniques to covert your PSD design into HTML and make it animate and responsive with CSS media queries
Created byFaisal Imtiaz
Last updated 2/2017
English

What you'll learn

  • Make your own website in HTML from a PSD design
  • Start your online career as front end web developer

Course content

1 section14 lectures2h 34m total length
  • Introduction2:30
  • Finding a PSD design6:56
  • Slicing from PSD file7:56
  • Creating basic structure of website in HTML part -114:16

    Learn to build a basic website structure in HTML, including header, navigation, images, and a four-section layout with a sign-up form, styled by CSS for center alignment and responsiveness.

  • Creating basic structure of website in HTML part -215:49
  • Designing HTML tags in CSS Part 113:43
  • Designing HTML tags in CSS Part 215:43
  • Designing HTML tags in CSS Part 313:03
  • Designing HTML tags in CSS Part 414:54
  • Designing HTML tags in CSS Part 55:33
  • Designing HTML tags in CSS Part 611:32
  • Designing HTML tags in CSS Part 77:32
  • Adding animations to different sections9:04

    Learn to add scroll-triggered animations to sections of a PSD to HTML and CSS responsive page using a library, with left and right entrances and default-hidden reveals.

  • Making website responsive16:23

    Learn to create a responsive website by adjusting the header, navigation bar, sliders, images, forms, icons, and social icons for fluid layouts. Use 100 percent width and media tweaks.

Requirements

  • HTML
  • CSS

Description

Are you planning to start your online career? And looking for a good starting point which can serve you all the needs of learning webpage development. Or maybe you are a web developer already and want to enhance your front end skills. OR you want to learn specifically HOW TO CONVERT ANY PSD DESIGN INTO HTML AND CSS AND MAKE IT RESPONSIVE as well.

Either way, PSD to HTML conversion is a MUST-HAVE skill for any aspiring or experienced web developer/designer out there.

This PSD to HTML and CSS conversion course will take you from a complete beginner to a Expert level developer who is feeling comfortable converting PSD designs into fully functional and responsive HTML websites. Adding sliders, adding sliding navigation bars and animations.

This course serve you more than just PSD to HTML. This course will give you the ability to understand how HTML works. I made this course to share my knowledge that I received throughout my online career as a web developer. This course will cover allot of different portions where most of the people stuck and find very difficult to come over that issue.

In this course we will be learning how can start writing basic structure of HTML by looking at your PSD design, and then design that HTML code in CSS. I will teach you how to deal with problems and bugs that occurs during conversion in HTML. How to fix positions and arrangements of div.

During the development stage, we'll learn a lot of things when styling our design: floats, positioning, width, custom columns, fluid design, full-width backgrounds AND MUCH MORE!!!

  • We will animate things for example
  • Animation of sidebar or navigation menu.
  • Adding Image Slider right from scratch
  • Adding masonry effect using masonry library to arrange all of your posts aligned and responsive.
  • We will make our website responsive, mobile and tablet friendly using CSS media queries.
  • We will see. What are the basic programming technique that will help you throughout your programming career?

So, what are you waiting for? Press on “Take this course” button and start learning web design & development today! 30-day money back guarantee!

Who this course is for:

  • Anyone who want to learn how you can convert your PSD design into a real website
  • Anyone who want to work online as PSD to HTML expert