PSD to HTML: Learn To Build Responsive Websites

Learn to convert your PSD files to responsive HTML in quick and easy steps

4.56 (9 reviews)
Udemy
platform
English
language
Web Development
category
PSD to HTML: Learn To Build Responsive Websites
132
students
7 hours
content
Dec 2018
last update
$49.99
regular price

What you will learn

Learn to convert PSD to responsive HTML

Learn tips and tricks of responsive web design

Learn Bootstrap 4 concepts

Learn Photoshop CC basics

Why take this course?

Become a master developer by learning to build responsive HTML websites from scratch with our PSD to HTML Course!

The world of technology has already come so far and going back to the start is not easy or simple. The major problem that newbie web developers face is not knowing where to start. There are so many different resources that are available which can often leave students more confused.

This is exactly why we have designed a complete comprehensive beginners course on responsive web design for anyone who wishes to get into web development, regardless of their prior experience with the subject.

For any newbie web developer, understanding how to convert PSD to HTML is a must. And this is exactly what this tutorial focuses on. This course starts at the very beginning including how to create a wireframe in Photoshop before delving right into understanding the fundamentals of HTML and learning how to convert a PSD into a responsive HTML website.

However, the course encompasses much more just HTML and PSD. Instead it touches base on a number of related topics such as Bootstrap, tools of the trade, CSS and so much more. Take a step-by-step journey to becoming a great responsive web developer. This course is aimed towards brand new developers who want to learn the entire process of responsive web development. In this course, you will not only learn the subject matter, but also tips and tricks to building an extremely dynamic and responsive website from scratch.

The course starts at the very beginning showing you a complete website layout in PSD, which you then breakdown along with the instructor and start converting to HTML. You’ll go over responsive design, the different tools of the trade including which browsers to use, different code editors and what to use them for, and also how to actually get started. From there you’ll focus on understanding the fundamentals of Photoshop such as fonts, images, colors, size, padding, margin, etc.

You’ll also go over Bootstrap, how to set up your HTML, how to add forms and frameworks to your HTML, and so much more!

So, what are you waiting for? Enroll now and go from a newbie to an expert web developer now!

Content

Course Intro

Introduction

Introduction

Why Learning Responsive Design is must for web developers.MOV
Minimum Requirements
What code editor to chose
How to install Adobe Bracket
How to install Code by Visual studios
How to Download Photoshop CC
What Browser to choice for development

Getting started

Project Scope
Creating File Structure
Using Google Fonts

Photoshop CC

How to get font family and font size from photoshop
Get Color from Photoshop Element
How to get Margin and padding
Exporting Images out of Photoshop

Bootstrap 4 Basics

Why We Use Bootstrap 4
How to download Bootstrap
BootStrap Layouts
Bootstrap Content
Bootstrap Components
Bootstrap Utilities

Structuring the page with HTML

HTML Template
Navigation Section
Hero Section
Experience Section
Benefits Section
About us Section
Our Team Section
Services Section
CTA Section
Testimonials Section
Contact Section
Footer

Styling Web Page with CSS

How to Important Fonts in CSS
Adding CSS Classes from PSD
Header and nav
Exp Section
Benefit Section
About Section
Our team Section
CTA and Services section
Contact us, footer and testimonials
Bonus Lecture: More Interesting Stuff, Offers and Discounts

Reviews

Ricardo
August 31, 2021
I enjoyed the course very much. However, I felt it was incomplete. On the last video, I was expecting to fine tune the entire project, as mentioned by the instructor. But the course ended abruptly. Furthermore, I think that you should avoid leaving multiple screens open at the same time without zooming in. At times I could not read what was on screen. Finally, I would suggest not using words such as “now we will open this right here, and then here, etc.” because we don’t always see what the instructor sees. It would be better to name what needs to be opened (example - now let’s open the index.html and style.css files to start coding). If it wasn’t for these issues, I would have given you 5 stars. The content is great. Keep up the good work and thank you for the class.
Harry
April 30, 2018
With the limited resources this is one of the best course. I like this course very much. Thanks for this course.
Shreyas
April 3, 2018
I have completed the course and I absolutely liked it! I am experienced still there are some new things to learn from this course.

Charts

Price

PSD to HTML: Learn To Build Responsive Websites - Price chart

Rating

PSD to HTML: Learn To Build Responsive Websites - Ratings chart

Enrollment distribution

PSD to HTML: Learn To Build Responsive Websites - Distribution chart
1584608
udemy ID
3/7/2018
course created date
11/20/2019
course indexed date
Bot
course submited by