Find online courses made by experts from around the world.
Take your courses with you and learn anywhere, anytime.
Learn and practice real-world skills and achieve your goals.
In this training course from Infinite Skills, you will learn how to create websites using WordPress that look great no matter what device or screen size you are viewing them with. Responsive web design allows you to build and maintain one website, but have it respond according to the device that it is being viewed on. This tutorial will show you how to create a responsive website by way of customizing a WordPress template. Some experience and familiarity with WordPress and CSS is suggested in order for you to get the most out of this training.
The core of responsive design lies in media queries, and that is where the course starts you off. You will learn how to setup media queries using CSS to detect what styles to apply to your website, based on the resolution of the device that is accessing the page. The training videos will show you how to create your high, medium and low resolution designs using wireframing, and then how to hand code each of those designs in WordPress, creating a website that responds to all kinds of mobile devices.
By the time you have completed this computer based training course for mobile website design with WordPress, you will have a clear understanding of how to modify WordPress templates to make your site responsive to a wide variety of resolutions and devices. Working files are included, allowing you to follow along with the author throughout the lessons.
Not for you? No problem.
30 day money back guarantee.
Learn on the go.
Desktop, iOS and Android.
Certificate of completion.
|Section 1: Getting Set Up|
Working Files - Download These FirstPreview
0102 A Look At What We Will BuildPreview
|Section 2: Responsive Design Basics|
0201 A Note About Geoffs SetupPreview
0202 Installing An Empty WordPress ThemePreview
0203 Creating Pages
0204 Creating Posts
0205 Setting Permalinks And Getting Images Organized
0206 Setting Up The Low Resolution Media Query
0207 Testing The Low Resolution Media Query
0208 Setting Up The Medium Resolution Media Query
0209 Testing The Medium Resolution Media Query
0210 Setting Up The High Resolution Media Query
0211 Testing The High Resolution Media Query
|Section 3: Building The HTML Structure|
0301 Building The Header Structure - Part One
0302 Building The Header Structure - Part Two
0303 Setting The Body Structure
0304 Adjusting The Loop Structure
0305 Setting The Footer Structure
|Section 4: Wireframing The High Resolution Layout|
0401 Getting Started With The High Resolution Layout
0402 Applying Formatting To The Master Container
0403 Setting Properties For The Layout Header
0404 Formatting The Main Navigation Menu
0405 Formatting The Slideshow
0406 Setting Up The Content Boxes
0407 Applying Formatting To The Loop
0408 Finishing Off With The Footer
|Section 5: Wireframing The Medium Resolution Layout|
0501 Setting Up The Medium Resolution Layout
0502 Formatting The Header And Navigation Menu - Part One
0503 Formatting The Header And Navigation Menu - Part Two
0504 Applying Formatting To The Slideshow
0505 Setting The Content Box Formatting
0506 Adjusting The Loop
0507 Finalizing With The Footer
|Section 6: Wireframing The Low Resolution Layout|
0601 Getting Started With The Low Resolution Layout
0602 Setting Up The Master Container
0603 Formatting The Layouts Header
0604 Adjusting The Main Navigation Menu
0605 Formatting The Content Boxes
0606 Applying Formatting To The Loop
0607 Finishing Up With The Footer
|Section 7: Initial High Resolution Formatting|
0701 Getting Started With The High Resolution Formatting
0702 Applying Formatting To The Navigation Menu
0703 Formatting The Content Box Contents
0704 Controlling The Loop Headers
0705 Formatting The Content Boxes
0706 Formatting The Footer Text
|Section 8: Initial Medium Resolution Formatting|
0801 Getting Started With The Navigation Menu
0802 Formatting The Slideshow
0803 Formatting The Content Boxes
0804 Finishing Up With The Blog Loop Formatting
|Section 9: Initial Low Resolution Formatting|
0901 Formatting The Main Navigation Menu
0902 Formatting The Content Boxes
0903 Formatting The Loop Area
|Section 10: Adding Graphics|
1001 Getting Started With The Header
1002 Setting Up And Adjusting The Slideshow
1003 Adding A Background Graphic To The Content Boxes
1004 Adding Content Box Header Graphics
1005 Adjusting The Low Resolution Header Graphics
|Section 11: Wrapping Up|
Thanks For Watching
Infinite Skills is a Canadian based company who offer a huge and ever growing range of high quality eLearning solutions that teach using studio quality narrated videos backed-up with practical hands-on examples and comprehensive working files. All courses are created by trained educators and experts in video based education.
The emphasis is on teaching real life skills that are essential for progressing in today's commercial environment.