Landing pages can be effective tools for steering your users towards a desired action. In this free course, you will learn how to build a landing page with HTML and CSS, using a Photoshop file as your starting point and building the page with the help of the Bootstrap framework.

Envato Elements
All the creative assets you need under one subscription. Customize your project by adding unique photos, fonts, graphics, and themes.
► Download Unlimited Stock Photos, Fonts & Templates with Envato Elements: https://elements.envato.com/?utm_campaign=yt_tutsplus_yZOppW8MQ0I&utm_medium=referral&utm_source=youtube.com&utm_content=description

1. Introduction
00:00 1.1 Introduction
00:35 1.2 What You Will Build
• One - Ultimate Landing Page PSD on Envato Elements: https://elements.envato.com/one-ultimate-landing-page-psd-XX8UU8?utm_campaign=yt_tutsplus_yZOppW8MQ0I&utm_medium=referral&utm_source=youtube.com&utm_content=description
• Demo of What We’ll Be Building: https://tutsplus.github.io/building-a-landing-page-that-converts/site017/index.html

2. Structuring Your HTML
05:35 2.1 Getting Started
11:05 2.2 Bootstrap Review
17:30 2.3 Fonts and Link Tags
• Google Fonts: https://fonts.google.com
• Font Awesome CDN: https://www.bootstrapcdn.com/fontawesome/
21:58 2.4 Laying Out the Header
29:45 2.5 Laying Out the Feature Section
45:11 2.6 Laying Out the Video Section
49:36 2.7 Laying Out More Content
58:43 2.8 A Tricky Layout
01:03:27 2.9 The Rest of the Layout

3. Styling the Page
01:09:32 3.1 Text and Buttons
01:18:52 3.2 Styling the Header
01:30:40 3.3 Styling the Video Section
01:40:07 3.4 Styling the Facts Section
• How to Use CSS Gradients on the Web: https://webdesign.tutsplus.com/tutorials/how-to-use-gradients-on-the-web--cms-29922?utm_campaign=yt_tutsplus_yZOppW8MQ0I&utm_medium=referral&utm_source=youtube.com&utm_content=description
01:47:11 3.5 Animating the Scroll Position

4. Conclusion
01:53:02 4.1 Final Thoughts

Assets for Tuts+ Course: Building a Landing Page that Converts: https://github.com/tutsplus/building-a-landing-page-that-converts


- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Envato Tuts+
Discover free how-to tutorials and online courses. Design a logo, create a website, build an app, or learn a new skill: https://tutsplus.com/?utm_campaign=yt_tutsplus_yZOppW8MQ0I&utm_medium=referral&utm_source=youtube.com&utm_content=description

Envato Elements
All the creative assets you need under one subscription. Customize your project by adding unique photos, fonts, graphics, and themes.
► Download Unlimited Stock Photos, Fonts & Templates with Envato Elements: https://elements.envato.com/?utm_campaign=yt_tutsplus_yZOppW8MQ0I&utm_medium=referral&utm_source=youtube.com&utm_content=description

► Subscribe to Envato Tuts+ on YouTube: https://www.youtube.com/tutsplus
► Follow Envato Tuts+ on Twitter: https://twitter.com/tutsplus
► Follow Envato Tuts+ on Facebook: https://www.facebook.com/tutsplus
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -