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.10 (137 reviews)
Udemy
platform
English
language
Web Development
category
instructor
1,155
students
2.5 hours
content
Oct 2017
last update
$19.99
regular price

What you will 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

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.

Content

Introduction

Welcome - an introduction
A detailed look at what you will be creating
Download the PSD

What is Bootstrap?

Bootstrap 3
What is bootstrap?
The bootstrap components
The bootstrap grid system
Media Queries within bootstrap

Setting up our Environment

Downloading bootstrap
Which code editor?
Setting up our file structure

Building our Navigation

Grabbing our navbar images
Coding our navbar
Styling our navbar
Navbar Quiz
Navbar files

Building our Header section

Adding our Slider/Carousel
Styling our header section
Carousel Quiz
Header files

Buliding our 'Photoapp' Features section

Coding our features section
Adding Font Awesome icons
Adding styles to our features section
Features Quiz
Features files

Building our Design section

Coding our design section
Design Quiz
Styling our design section
Design files

Building our Community section

Coding our community section
Adding styles to our community section
Community files

Building our Subscribe section

Coding our subscribe section
Styling our subscribe section
Subscribe files

Building our Downloads section

Coding our downloads section
Styling our downloads section
Download files

Building our Footer section

Coding our footer section
Styling our footer section
Footer files

Optional Extras

Background navbar
Fading navbar
Active Button State
Carousel Speed

Adding Animation

Animate.css
WOW.js
Animating our page

Final Landing Page

Our final page
Final landing page files
Resources

Screenshots

PSD to Bootstrap 3 for Beginners using HTML & CSS - Screenshot_01PSD to Bootstrap 3 for Beginners using HTML & CSS - Screenshot_02PSD to Bootstrap 3 for Beginners using HTML & CSS - Screenshot_03PSD to Bootstrap 3 for Beginners using HTML & CSS - Screenshot_04

Reviews

Yatin
January 1, 2021
Excellent course as the basics are well explained with implementation example, and end of if one can be confident to build a functional page. Instructor Andy is prompt about responding to queries.
April
July 14, 2017
This is a great course for designers fluent in Adobe Photoshop that want to learn easy html to bootstrap.
Tim
June 30, 2017
A really fun, unique and valuable class on how to turn your PSD web designs into HTML & CSS even if you've never used Bootstrap. Some CSS knowledge is recommended before you take the course but the guidance by the instructor is superb!
Emily
October 1, 2016
The information is presented very well, making it very clear how to achieve the objective working step-by-step. Andy Clarke is a very good instructor.
James
September 14, 2016
This is my second course i have taken from Andy and my first two courses studying on Udemy, coming from previous learning (treehouse). I have to say after going through both courses I now feel so much more comfortable using Bootstrap. Would definitely recommend. Thanks
Graeme
August 25, 2016
Great course lectures. I've watched them all one after another from start to finish. The course flows nicely and I learned a lot. Definitely worthwhile spending time on. Minor issue, JavaScript being incorrectly referred to as Java towards the end lectures. Java and JavaScript are entirely different languages. I'll probably go through this course a couple of times to make sure I've got it down as the material is great. A nice simple example to get a beginner started. @Andy You're welcome and no problem. I'm just about to go through the course again and start writing some code, after watching 7 hours of angularjs lectures :)
Lawrence
August 10, 2016
Very Good. However for the benefit of newbies, I think some topics should have been done better. For example, sections in photoshop could have been organized better such as Slider, Photo, Design, etc . to make it easy to locate element. Also, the Stylesheet could have used a little bit more work and organization. For example, Global section, etc. However, the lessons are easy to follow. I will recommend this course to anyone.
Lenora
July 10, 2016
I love your explanations! It makes me understand the "why" when it comes to bootstrap. Also, thank you for the short lectures!
Luke
June 23, 2016
its just the bunny sound of the mic, when it goes on and off, and when its on. its just me mate, im just sensitive to certain sounds, throws me ofcourse. Very good course i must say, i really enjoyed it, i am looking for a course that helps design and create range sliders is there any? i searched and i found nothing. basically if i download files of the web that have CSS,JS, but i have no clue what do do with them i know to add the scripts and stylesheets to the index page but to actually get things working is a nightmare. basically i am talking about range sliders and fancy widgets.. i am sure if you take 30min you can put something together right? i am very interested in range sliders that can auto calculate, basically a seperate little system. let me know Best Regards
Susan
March 12, 2016
Very thorough and gives you exactly what you need so you can improve on your skills after the course. Very pleased with the course and would take another.
Davida
January 22, 2016
I was thoroughly impressed with this course in terms of content and delivery. I highly recommend this course and will definitely be checking out other course offerings from this instructor. Thank you!
Dante
January 13, 2016
Very interesting training. Real example. From slicing to html coding including adding custom fonts and js.
Bronwyn
December 5, 2015
I highly recommend this most useful, informative and easy-to-follow course. If you want to code bootstrap responsive sites with class and a wow factor then take this course.
Eric
December 3, 2015
Introduces you to basic Bootstrap elements in a fun, easy to learn way. Would love more pages to work on as well!
Frank
November 8, 2015
The thing I like most with Andy's courses is that they are really informative, well structured & show all the important information in a relatively short time. While this course had some similarites to Andy's other Bootstrap course it still included lots of new information that I found very useful and practical. Highly recommend it to anyone wanting to improve their Bootstrap skills!!!

Charts

Price

PSD to Bootstrap 3 for Beginners using HTML & CSS - Price chart

Rating

PSD to Bootstrap 3 for Beginners using HTML & CSS - Ratings chart

Enrollment distribution

PSD to Bootstrap 3 for Beginners using HTML & CSS - Distribution chart

Related Topics

611688
udemy ID
9/14/2015
course created date
7/19/2020
course indexed date
Bot
course submited by