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 (320 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.
7,524 students enrolled
Free
Start Learning Now
  • Lectures 20
  • Length 4 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 4/2016 English

Course Description

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!

What are the requirements?

  • Basic HTML5 & CSS3.
  • Code Editor.
  • Adobe Photoshop.

What am I going to get from this course?

  • 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.

What 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.

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:21

Let's say hello.

05:27

Somethings you will need to know.

06:26

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

Section 2: HTML.
19:19

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

19:03

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

18:31

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

Section 3: Slicing up the PSD.
03:37

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

Section 4: CSS.
19:38

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

17:05

Styling the first three sections part 1.

08:01

Styling the first three sections part 2.

20:45

Styling the next three sections part 1.

17:06

Styling the next three sections part 2.

13:11

Styling the last three sections part 1.

10:51

Styling the last three sections part 2.

10:38

Finishing the responsive website by using the CSS3 Media Queries.

Section 5: jQuery Plugins & Transitions.
04:16

The jQuery plugins we will need.

20:02

Installing the jQuery plugins and make them work part 1.

18:55

Installing the jQuery plugins part 2.

Section 6: Conclusion
01:05

Let's say goodbye.

Section 7: Project Files.
Article

Here is all the course files including the Photoshop PSD.

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Ehab Alaa, 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.

Ready to start learning?
Start Learning Now