Wishlisted Wishlist

Please confirm that you want to add PSD To a Creative Landing Page Using Twitter Bootstrap 3 to your Wishlist.

Add to Wishlist

PSD To a Creative Landing Page Using Twitter Bootstrap 3

A-Z Guide in making fully responsive website with HTML5 & CSS3 using Twitter bootstrap 3 framework.
4.3 (406 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.
9,068 students enrolled
Created by Ehab Alaa
Last updated 4/2016
  • 4 hours on-demand video
  • 1 Article
  • 1 Supplemental Resource
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion

In this course you are going to learn how to convert a full PSD for landing page to HTML5, CSS3 & JavaScript. Along the way, you will learn a lot of tips and tricks to help you develop your own landing page as well as few JQuery plugins to help you enhance the function of the landing page and make it more creative. There are a lot of ways to build your own landing page but what if you built one like this by yourself? Ehab Alaa is here to walk you through making a beautiful creative landing page in this course. This is not a beginners course and some knowledge of HTML5, CSS3 is required. You will also get hands-on with some jQuery and learn some very beautiful ways to help take the homepage to the next level!

Who is the target audience?
  • This course is meant for the beginners/intermediates in web development.
  • This course dosen't need any photoshop or web designing experience.
Students Who Viewed This Course Also Viewed
What Will I Learn?
Learn how to turn your Photoshop PSD file into HTML5/CSS3 Responsive website.
Learn how to make amazing jQuery animations and transitions.
Learn how to use Twitter Bootstrap 3 and know everything about it.
Learn how to slice up your Photoshop PSD and get the images out from it.
Learn how to get hands on CSS3 Media Queries.
Learn how to use google fonts and how to use font icons.
Learn how to structure your HTML and CSS the right way.
Learn alot of tricks, tips, hints and skills while coding.
Learn how to make jQuery sliders, embed google maps, scrolling down animiations and counting up statistics.
View Curriculum
  • Basic HTML5 & CSS3.
  • Code Editor.
  • Adobe Photoshop.
Curriculum For This Course
Expand All 20 Lectures Collapse All 20 Lectures 03:55:21
3 Lectures 13:14

Let's say hello.


Somethings you will need to know.

Need to know.

We will prepare the project files, and start the HTML Markup.

Preparing the files.
3 Lectures 56:53

We are going to start the project by coding the first 3 sections Header, About us & Our Services.

Coding the First Three Sections.

We will code the next 3 sections which are Our Skills, Our Portfolio & Stats.

Coding the Next Three Sections.

We are going to finish the project HTML Markup by coding the last 3 sections Client Testimonials, Contact Us & Footer.

Coding the Last Three Sections.
Slicing up the PSD.
1 Lecture 03:37

How to slice up the PSD and getting out the images from it.

Slicing up the PSD.
8 Lectures 01:57:15

Starting the CSS Styling and writing the General Styles for the website.

Starting the CSS and General Styling.

Styling the first three sections part 1.

Styling First Three Sections Part 1.

Styling the first three sections part 2.

Styling First Three Sections Part 2.

Styling the next three sections part 1.

Styling Next Three Sections Part 1.

Styling the next three sections part 2.

Styling Next Three Sections Part 2.

Styling the last three sections part 1.

Styling Last Three Sections Part 1.

Styling the last three sections part 2.

Styling Last Three Sections Part 2.

Finishing the responsive website by using the CSS3 Media Queries.

Finishing Responsive with CSS Media Queries.
jQuery Plugins & Transitions.
3 Lectures 43:13

The jQuery plugins we will need.

Plugins we will need.

Installing the jQuery plugins and make them work part 1.

Installing jQuery Plugins Part 1.

Installing the jQuery plugins part 2.

Installing jQuery Plugins Part 2.
1 Lecture 01:05

Let's say goodbye.

Project Files.
1 Lecture 00:04

Here is all the course files including the Photoshop PSD.

About the Instructor
4.3 Average rating
405 Reviews
9,068 Students
1 Course
Web Designer/Developer

Ehab Alaa is a talented web designer & front-end developer who builds websites & applications and likes to focus on HTML5, CSS3, JavaScript, testing and workflow tools. He has 4 years of experience in the web design/development field and built many websites for many world-wide companies, he also works as a freelancer in his free time. Plus, he likes to share his experience with the world on Udemy and teach what he learned in the last few years.

Report Abuse