Join InMotion Hosting for $3.49/mo & get a year on Tuts+ FREE (worth $180). Start today.


  • Theme Development
    Creating an Image-Based Archive Page: StylingCreating an image based archive page
    In Part 1 of this tutorial you learned how to create a template file for a custom post type in order to display featured images and titles for each post. You registered a custom post type of ‘animal' and created a file called archive-animal.php to display an archive of animals. In this tutorial you'll learn the CSS required to add a grid layout to the images and overlay post titles over the images. You'll then learn how to add a hover effect, so the name of the animal only appears when the user hovers their mouse over each image.Read More…
  • Theme Development
    Building a Mobile First Responsive WordPress ThemeBuilding a mobile first responsive wordpress theme
    Theme building is at the heart of WordPress. It's the technique you use to build bespoke websites for yourself or your clients and it's a vital skill for anyone wanting to design and develop with WordPress. More and more WordPress themes now are responsive - they use CSS media queries to adapt to different screen widths, adjusting the layout and making design and interface changes to make any site created using the theme easier to read and interact with on a range of devices and screen sizes. In this tutorial I'm going to show you how to build a Mobile First WordPress theme, which starts with the styling for the smallest screens and works upwards.Read More…
  • HTML & CSS
    Build a Twitter Clone From Scratch: The DesignPreview
    This article represents the first in a new group effort by the Nettuts+ staff, which covers the process of designing and building a web app from scratch - in multiple languages! We'll use a fictional Twitter-clone, called Ribbit, as the basis for this series. In this tutorial, we need to focus on the UI. We'll leverage the popular LESS Preprocessor to make our CSS as manageable as possible.Read More…
  • HTML & CSS
    A First Look at the HTML5 History APIPreview
    HTML5 introduces a variety of new goodies for front-end developers, such as the additions to the browser's history object. Let's take a look at its new features in this lesson.Read More…
  • WordPress
    Quick Tip: How to Code a Scrolling Navigation BarPreview
    So you've seen them on other people's websites and you want to know how you can have one too? The scrolling navigation menu seen on many websites is really easy to replicate in WordPress. Help your readers out, let them click the menu from any point on the page. Here's how...Read More…
  • HTML & CSS
    Responsive Grids With SusySuzy
    Are you happy with with any of the CSS grid libraries available? No? I don't blame you. Enter Susy, a plugin for the Compass CSS framework that lets you create your own custom grid framework, minimizing overhead, while making it more understandable to use. Sounds good, right? Let's jump right in. Read More…
  • Theme Development
    Getting Visual Editor Styles to Work With Post FormatsVisual editor post formats 02
    When WordPress 3.1 was released, a new feature called Post Formats was introduced, which gave authors the ability to select one of nine formats for their posts. Theme developers had to add support to include each format as well as some conditional tags and CSS to take advantage of what they had to offer. Each format could be displayed on the front end with a different layout and design, though the visual editor in the wp-admin didn't reflect this. For this tutorial, I'm going to focus on how we can get our theme to display the Quote post format so that the front end layout and design is reflected when creating a post in the visual editor.Read More…
  • Front-End
    A Simple Parallax Scrolling TechniquePreview
    Parallax scrolling is an interesting technique, where, as you scroll, the background images translate slower than the content in the foreground, creating the illusion of 3D depth. As I planned to re-design my personal website, my first goal was to write the shortest and simplest code to achieve maximum awesomeness! I'll show you how I did it. Read More…
  • Theme Development
    Child Themes Basics and Creating Child Themes in WordPressThumb
    A WordPress theme is a collection of template files which lets you change the user interface, design, look, and feel of the site. A WordPress theme can either just have some bare minimum design changes implemented or might even have some advanced logic showing the most recent post differently than the others or showing the posts from a particular category in a different section on the home page etc. WordPress themes can range from a simple set of files to a complete complex framework so that other themes can be built on top of that. In this article we are going to see how one can create child themes for other themes to leverage on the code provided by the parent theme.Read More…
  • WordPress
    Quick Tip: A Workaround for Hard Cropping Featured ImagesPreview
    This quick tip explains how to add a Custom Column in the Manage Screens of your WordPress blog.Read More…
  • HTML & CSS
    An Introduction to the CSS Flexbox ModuleCss flexbox preview
    CSS, despite its relatively low perceived skill ceiling, always seems to have a killer feature up its sleeve. Remember how media queries made responsive layouts possible and revolutionized front-end development? Well, today, we're going to talk about a new layout mode, called flexbox - new in CSS3. I'm sure you're raring to go! Let's get started after the jump.Read More…
  • Web Development
    Building Web Applications from Scratch with LaravelMain image
    In this Nettuts+ mini-series, we'll build a web application from scratch, while diving into a great new PHP framework that's rapidly picking up steam, called Laravel — a simple and elegant PHP 5.3 framework. First up, we'll learn more about Laravel, and why it's such a great choice for your next PHP-based web application.Read More…
Suggested Tuts+ Course
Chrome Developer Tools$15