PSD to Bootstrap 3 for Beginners using HTML & CSS
4.6 (132 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
1,129 students enrolled

PSD to Bootstrap 3 for Beginners using HTML & CSS

Learn how to recreate Photoshop designs into responsive Bootstrap pages or sites using HTML & CSS.
4.6 (132 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
1,129 students enrolled
Created by Andy Clarke
Last updated 10/2017
English [Auto]
Current price: $13.99 Original price: $19.99 Discount: 30% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 2.5 hours on-demand video
  • 12 articles
  • 13 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Develop sites in the bootstrap framework
  • The skills & knowledge to start building your own pages, and templates in the bootstrap framework
  • Project files included
  • Lifetime access to the course
Course content
Expand all 47 lectures 02:31:51
+ Introduction
3 lectures 04:32

A quick introduction to the course.

Preview 01:00

Download the final PSD file that you get to work with during the course.

Download the PSD
+ What is Bootstrap?
5 lectures 12:14
Bootstrap 3

We take a look at the bootstrap components and how easy they are to implement into your pages.

Preview 01:52
The bootstrap grid system
Media Queries within bootstrap
+ Setting up our Environment
3 lectures 05:49
Downloading bootstrap
Which code editor?
Setting up our file structure
+ Building our Navigation
4 lectures 20:38
Grabbing our navbar images

We get hands on experience at coding the famous bootstrap navigation bar.

Coding our navbar
Styling our navbar
Navbar Quiz
3 questions
Navbar files
+ Building our Header section
3 lectures 19:51

We code one of the most popular features within bootstrap, the bootstrap carousel.

Adding our Slider/Carousel
Styling our header section
Carousel Quiz
2 questions
Header files
+ Buliding our 'Photoapp' Features section
4 lectures 14:22
Adding Font Awesome icons

We add styles to our features section.

Adding styles to our features section
Features Quiz
3 questions
Features files
+ Building our Design section
3 lectures 09:26
Coding our design section
Design Quiz
2 questions
Styling our design section
Design files
+ Building our Community section
3 lectures 11:44
Coding our community section
Adding styles to our community section
Community files
+ Building our Subscribe section
3 lectures 11:12
Coding our subscribe section
Styling our subscribe section
Subscribe files
+ Building our Downloads section
3 lectures 08:02
Coding our downloads section
Styling our downloads section
Download files
  • Mac or PC
  • HTML Editor
  • Photoshop (any version)

Transform Photoshop templates and designs info fully working responsive websites or landing pages using the bootstrap framework.

Learn the basic concepts, tools, and functions that you will need to build fully functional websites or landing page with the popular bootstrap framework using HTML & CSS programming language.

  • Bootstrap components
  • Grid System & Media Queries
  • Custom fonts
  • Working carousel
  • Font-Awesome icons
  • Animate CSS & WOW js

Stop paying someone else to transform your designs into working sites!

Do you design templates in Photoshop and have to pay someone else to code them into working pages or sites? If so, then you are wasting money. This course will give you the skills to turn those designs into fully working sites or pages.

Do you code sites and want to add another skill to your portfolio? Then you can see how easy it is to turn a PSD design into a fully responsive website or landing page using the bootstrap framework.

You could earn extra money by helping designers turn their designs into working responsive bootstrap websites.

Learning the basic fundamentals of the bootstrap framework puts a powerful and very useful tool at your fingertips. Bootstrap is free, easy to learn, has excellent documentation, and can help you take your design skills to the next level.

Suitable for programming beginners, through this course of 50 lectures and 3 hours of content, you’ll learn all of the Bootstrap fundamentals and establish a strong understanding of the concept behind the code and it's components.

The instructor will walk you through each chapter to make sure you fully understand what you are coding so you can start putting your new learned skills into practical use immediately.

Starting with the installation of the bootstrap framework, this course will take you through what bootstrap is, including the famous grid system, media queries, components and how to use them. You will also discover what sections of the PSD you need and what can be built directly in the bootstrap framework, which will save you time and effort in the future.

Students completing the course will have the knowledge to create functional and useful bootstrap sites and landing pages in the future.

Complete with working files and code samples, you’ll be able to work alongside the author as you work through each concept, and will receive a verifiable certificate of completion upon finishing the course.

Who this course is for:
  • Beginners or designers that want to learn how to code
  • Students wanting to develop sites in bootstrap
  • Students with a basic understanding of HTML & CSS
  • Students who want to develop their first website or landing page