PSD to HTML5/CSS3 using Twitter Bootstrap 3!

Learn how to take a PSD and convert it in the exact same design on your browser! Hand Coded PSD to HTML website course.
4.0 (20 ratings)
Instead of using a simple lifetime average, Udemy calculates a
course's star rating by considering a number of different factors
such as the number of ratings, the age of ratings, and the
likelihood of fraudulent ratings.
2,067 students enrolled
84% off
Take This Course
  • Lectures 16
  • Length 2 hours
  • Skill Level All Levels
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works


Find online courses made by experts from around the world.


Take your courses with you and learn anywhere, anytime.


Learn and practice real-world skills and achieve your goals.

About This Course

Published 2/2015 English

Course Description

PSD to HTML5/CSS3 using Twitter Bootstrap 3 is a simple course that will teach you how to approach your PSD, knowing what you should take off and what you can do with only CSS3! Turn your design into a semantic, valid HTML5/CSS3 website and show to your clients using a free account of Heroku.

Learn how to use:

  • Sublime Text 3
  • CodeKit
  • Twitter Bootstrap 3
  • Heroku
You don't know what you need from your design? Learn to slice your document, what are the images you should take and learn how to follow the grid system!


Bootstrap is the most popular front-end framework out there and saves you A LOT of time. It's very easy to learn and for beginners, it's the best way to learn from the professionals.

Increase your earnings

Why you should take this course? There are a lot of demand for this type of services! Learn how to increase your development time and boost your productivity!

What are the requirements?

  • Text Editor
  • Adobe Photoshop
  • HTML and CSS

What am I going to get from this course?

  • Code a PSD design into a validated HTML5/CSS3 Website
  • Choose the right images to take from your design in Photoshop
  • Learn to structure your HTML and CSS the right way
  • Learn how to deploy your website to a free platform, Heroku!

Who is the target audience?

  • This course is for beginners/intermediates in design and web-development. But everyone who wants to This course is for beginners/intermediates in design and web-development. But everyone who wants to code a PSD design into a HTML5/CSS3 Website is welcome!

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.


Section 1: Introduction

Welcome and see what you will be doing in our course!


Some Apps and services that I recommend to start with!

Section 2: PSD

Learn how to approach your design and see what you can do with CSS and what images you need to take from your design!

Section 3: HTML Magic

Learn how to prepare the skeleton of your website looking at your design!


Adding the markup for "Header" section!


Adding the markup for "About" section!


Adding the markup for "features" and "team" section!


Adding the markup for footer.

Section 4: CSS Black Magic

Learn what you need to do to structure your CSS code the best way. Set your font types and your global styles.


Adding the styles for the "Header" Section!


The second part of adding the styles for the "Header" Section!


Adding the styles for the "About" Section!


Adding the styles for the "Features" Section!


Adding the styles for the "Team" Section!


Adding the styles for the "Footer" Section!

Section 5: Live version and Conclusion
Deploy your Website Live using Heroku!

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Luis Serrano, Front-End Developer

Luis Serrano is a Front-End developer with 7 years experience developing websites for big companies. Currently he is studying Computer Science.

Experienced in HTML5/CSS3 and Javascript, Responsive Design and design in Adobe Photoshop and Illustrator.

His approach is always to follow new trends of web design and try to design a good looking website with special attention to User Experience.

Ready to start learning?
Take This Course