2015
Train Simple
4:30
English
In this course you'll learn how to create Responsive WordPress themes. You will start by getting an overview of what responsive design is and what code is required to achieve a responsive layout. Next you'll begin to code the necessary media queries to get your layout to adapt to different screen resolutions.
1. Introduction
Hello and Welcome
Reviewing Our Custom WordPress Theme
Getting Set Up & Previewing Responsive Layouts
2. Getting Started With Responsive Design
The Three Key Components of Responsive Design
How To Determine Media Query Breakpoints
Breakpoints We'll Use In This Course
The Concept of Using Multiple Style Sheets
Using Media Queries And Multiple Style Sheets
Discovering How Starkers Connects To CSS
Building Media Queries Into A Single CSS File
Testing Our Media Queries
3. Preparing Our Theme For Responsive Design
Planning Your Responsive Layouts
Removing The Layout's Fixed Width Container
Adjusting The Hero Section
Adjusting The Introducing Section
Removing The Sidebar and Adjusting The Site Loop
Options For The Get Section
4. Adjusting The Site For Tablet Layout
Getting Started With The Tablet Layout
Setting The Container Properties
Adjusting The Logo, Part One
Adjusting The Logo, Part Two
Finishing Off The Header
Adjustments For The Hero Content Area
Setting Up The Introducing Section
Structuring The Get It Now Section
Finishing Up With The Footer & Cleaning Up Our Code
Previewing The Final Tablet Layout
5. Adjusting The Site For Smartphone Layout
Setting Up The Low Resolution CSS & Testing The Media Query
Adjusting The Header For Smartphone Layout
Disabling Elements & Finishing Up The Header
Adjusting The Hero Section
Setting Up The Introducing Section
Finishing Off With The Get It Now Section And Footer
Cleaning Up Our Code And Previewing
6. Building Additional Responsive Pages
Getting Started With Post Pages
Finishing Up The Post Page Formatting
Formatting Post Pages For Tablet Devices
Formatting Post Pages For Smartphones
Setting Up Formatting For Standalone Pages
Standalone Page Formatting
Getting Started With The Form Formatting
Applying Pseudo Classes & Transitions
Formatting The Submit Button
Adjusting The Contact Form For Tablet Devices
Adjusting The Contact Form For Smartphones
7. Advanced Techniques For Responsive Design
Disabling Device Smart Zoom
Setting Up Retina Display Graphics
Using Adobe Edge Inspect To Preview Your Work
Previewing The Theme Using Alternative Breakpoints
Wrapping Up
Download File Size:2.6 GB
|
