PSD to HTML Conversion Course

PSD to HTML course cover showing a website design mockup converted into a coded webpage

This free course teaches you to convert a Photoshop (PSD) design into a fully coded, responsive website using HTML, CSS, and jQuery. In 27 hands-on lessons, you will build a real portfolio site from scratch: the header, services, team, and portfolio sections, animated skill bars, a filterable project grid, testimonials, a working contact form, and a fully responsive, SEO-ready launch.

Already comfortable with HTML and CSS? This is the natural next step. Once you finish, take it further with the Build Portfolio Website course to design and launch your own portfolio with expert guidance.

#1 Introduction

#2 Starter Pack

#3 Building Header Section (HTML Markup)

#4 Building Header Section (CSS Style)

#5 Converting PX TO REM

#6 Building Services Section (HTML Markup)

#7 Building Services Section (CSS Style)

#8 Building Team Section (HTML Markup)

#9 Building Team Section (CSS Style)

#10 Building Skills Section (HTML Markup)

#11 Building Skills Section (CSS Style And Animated Radial Progress Bars With jQuery)

#12 Building Portfolio Section (HTML Markup)

#13 Building Portfolio Section (CSS Style And MixItUp jQuery Plugin)

#14 Building Testimonial Section (HTML Markup)

#15 Building Testimonial Section (CSS Style)

#16 Building Contact Section (HTML Markup)

#17 Building Contact Section (CSS Style)

#18 Using third party web service to make our form work

#19 Building Footer Section (HTML Markup And CSS Style)

#20 Sticky Navigation Design Using jQuery Waypoints Plugin

#21 Making The Webpage Responsive [Part-1]

#22 Making The Webpage Responsive [Part-2]

#23 Hamburger Menu Design

#24 Browser Compatibility Check

#25 Basic Search Engine Optimization (SEO) And Google Analytics

#26 Performance Optimization Website Speed

#27 Let’s Launch Our Website

Projects Overview

Cuda – An Awesome Portfolio Template

Start Learning