Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
The many ways visitors access web sites, via mobile devices, tablets, and desktops, now requires sites to incorporate responsive design elements that adapt to different screen sizes and browsers. In this course, Morten Rand-Hendriksen demonstrates design strategies, best practices, and actual code examples for creating a responsive web site. The course covers layout, navigation, responsive video embedding, and content sliders. The final chapter shows how to create an index page with jQuery Masonry, a jQuery plugin that helps you create dynamic grid layouts.
Throughout this course we will be working with and making changes to the Anaximander theme that I designed specifically for this course for you to use. So before we started, we have to install Anaximander into WordPress. As we move forward, I'll be using two installations of WordPress, one that's installed locally on my computer using BitNami-- You can also do the same thing using WAMP or MAMP or WebMatrix or another application that lets you install WordPress on your computer-- and in addition to the local install, I also have WordPress installed on a server on the web so I can access it with my phones and my tablets and check whether or not everything works.
The static version of Anaximander ships in the exercise files, both the free ones and the full exercise files, and you'll find them under the folder Anaximander-Static. This is the folder that contains the themes. If you open it, you'll see the entire theme here. So what we need to do is simply grab that and dump it into WordPress. Themes in WordPress live under the wp-content folder, under themes. So simply grab Anaximander-Static and copy it into themes and it will appear inside WordPress.
I'm also going to do this through my FTP application. So I'll navigate to my WordPress installation here. And here we have themes, and I'll grab it and dump it in. As this uploads, I can log in to WordPress on my computer, go to Themes, and here we will see we have Anaximander installed, and I can now activate an Anaximander on my local WordPress installation, go to the front page, and here we have the stock version of Anaximander running in my local installation.
There are currently no FAQs about WordPress: Building Responsive Themes.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.