Course
Skills Expanded
Creating Responsive Landing Pages in Photoshop and CSS
In this Photoshop and CSS tutorial, you'll learn how to design and develop a responsive landing page. Software required: Adobe Photoshop CC 2014, Sublime Text 2.
What you'll learn
In this Photoshop and CSS tutorial, you'll learn how to design and develop a responsive landing page. We'll first use Photoshop to design a mock up, creating many of the elements for our pages that will be used in the final product. Then we'll export our design and start coding our responsive website. We'll be basing our HTML and CSS on the Foundation responsive framework to bring the page to life. By the end of this Photoshop and CSS training, you'll understand many important factors that make a great landing page. Software required: Adobe Photoshop CC 2014, Sublime Text 2.
Table of contents
Introduction and Project Overview
1min
Creating Responsive Landing Pages in Photoshop and CSS
137mins
- Designing the Background 9m
- Designing the Header and Headline 8m
- Designing a Laptop 9m
- Creating a Fictional GUI for the Laptop 9m
- Adding Trusted Company Logos 5m
- Creating a Symbolic Illustration 10m
- Finishing the Illustration and Adding Type 8m
- Creating a Colored Divider and a Features Section 7m
- Designing the Feature Icons 6m
- Finishing the Mockup Design by Adding a Testimonial 5m
- Exporting the Graphics for HTML and CSS 8m
- Getting Started with Foundation and HTML 9m
- Writing the HTML for the Graphic and Features Section 8m
- Writing the HTML for the Testimonial 3m
- Writing the CSS Header and the Headline Section 10m
- Writing the CSS for the Trusted Logos and Graphic Section 9m
- Writing the CSS for the Features and Testimonials 7m
- Writing the CSS Media Queries 7m
