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.8 (65 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.
890 students enrolled
$19
$20
5% off
Take This Course
  • Lectures 46
  • Length 2.5 hours
  • Skill Level Beginner Level
  • 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

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

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

About This Course

Published 11/2015 English

Course Description

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.

What are the requirements?

  • Mac or PC
  • HTML Editor
  • Photoshop (any version)

What am I going to get from this course?

  • 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

What is the target audience?

  • 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

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.

Curriculum

Section 1: Introduction
01:00

A quick introduction to the course.

A detailed look at what you will be creating
Preview
03:31
Article

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

Section 2: What is Bootstrap?
What is bootstrap?
Preview
01:33
01:52

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

The bootstrap grid system
06:05
Media Queries within bootstrap
02:30
Section 3: Setting up our Environment
Downloading bootstrap
01:16
Which code editor?
01:19
Setting up our file structure
03:14
Section 4: Building our Navigation
Grabbing our navbar images
01:44
09:15

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

Styling our navbar
09:38
Navbar Quiz
3 questions
Navbar files
Article
Section 5: Building our Header section
08:28

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

Styling our header section
11:22
Carousel Quiz
2 questions
Header files
Article
Section 6: Buliding our 'Photoapp' Features section
Coding our features section
Preview
04:22
Adding Font Awesome icons
05:24
04:35

We add styles to our features section.

Features Quiz
3 questions
Features files
Article
Section 7: Building our Design section
Coding our design section
06:26
Design Quiz
2 questions
Styling our design section
02:59
Design files
Article
Section 8: Building our Community section
Coding our community section
07:27
Adding styles to our community section
04:16
Community files
Article
Section 9: Building our Subscribe section
Coding our subscribe section
05:38
Styling our subscribe section
05:33
Subscribe files
Article
Section 10: Building our Downloads section
Coding our downloads section
04:49
Styling our downloads section
03:12
Download files
Article
Section 11: Building our Footer section
Coding our footer section
05:56
Styling our footer section
04:35
Footer files
Article
Section 12: Optional Extras
Background navbar
01:59
Fading navbar
04:33
Active Button State
01:26
Carousel Speed
03:05
Section 13: Adding Animation
Animate.css
02:37
WOW.js
02:04
Animating our page
05:16
Section 14: Final Landing Page
Our final page
01:49
Final landing page files
Article
Resources
Article

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Andy Clarke, Web Designer/Developer

I have been in the web design and development sector for over 10 years, working on various aspects of design and build. I've always had a passion for design and coding and enjoy creating various sites through HTML, CSS and Javascript, especially Wordpress & Bootstrap sites. I also design website and apps layouts in either Photoshop & Sketch.

Ready to start learning?
Take This Course