Creating Responsive Landing Pages in Photoshop and CSS
Pluralsight
Course Summary
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.
-
+
Course Description
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.
-
+
Course Syllabus
Introduction and Project Overview- 1m 3s
—Introduction and Project Overview 1m 3sCreating Responsive Landing Pages in Photoshop and CSS- 2h 17m
—Designing the Background 9m 14s
—Designing the Header and Headline 7m 43s
—Designing a Laptop 9m 7s
—Creating a Fictional GUI for the Laptop 8m 37s
—Adding Trusted Company Logos 5m 28s
—Creating a Symbolic Illustration 9m 54s
—Finishing the Illustration and Adding Type 8m 11s
—Creating a Colored Divider and a Features Section 7m 27s
—Designing the Feature Icons 6m 0s
—Finishing the Mockup Design by Adding a Testimonial 5m 10s
—Exporting the Graphics for HTML and CSS 7m 47s
—Getting Started with Foundation and HTML 8m 36s
—Writing the HTML for the Graphic and Features Section 7m 36s
—Writing the HTML for the Testimonial 3m 12s
—Writing the CSS Header and the Headline Section 9m 36s
—Writing the CSS for the Trusted Logos and Graphic Section 9m 0s
—Writing the CSS for the Features and Testimonials 7m 15s
—Writing the CSS Media Queries 7m 14s
