Advertisement

CSS

  • Laravel
    Authentication With Laravel 4Laravel 4 auth retina preview
    61 shares
    Authentication is required for virtually any type of web application. In this tutorial, I'd like to show you how you can go about creating a small authentication application using Laravel 4. We'll start from the very beginning by creating our Laravel app using composer, creating the database, loading in the Twitter Bootstrap, creating a main layout, registering users, logging in and out, and protecting routes using filters. We've got a lot of code to cover, so let's get started!Read More…
  • Web Development
    Mobile First With Bootstrap 3Bootstrap 3 preview
    148 shares
    Ok so a couple of weeks now, on it's very own two year anniversary Mark Otto and the rest of the guys responsible for the develop and maintenance of Bootstrap announced the official release of the framework's third version, and it came on steroids, let's see what we're getting.Read More…
  • HTML & CSS
    Pure: What, Why, & How?Pure retina preview
    379 shares
    This tutorial will introduce you to Pure, a CSS library made of small modules, that can help you in writing completely responsive layouts, in a very fast and easy way. Along the way, I'll guide you through the creation of a simple page in order to highlight how you can use some of the library's components.Read More…
  • Creative Coding
    Working with Classes and IDs Generated By WordPressWordpress generated classes ids preview image 400
    26 shares
    A helpful feature of WordPress is the way it generates classes and IDs. Some of these are generated by the system itself, while in other cases you insert some PHP in your theme and WordPress uses that to add classes and IDs to the page markup.Read More…
  • Theme Development
    Creating an Image-Based Archive Page: StylingCreating an image based archive page
    12 shares
    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
    20 shares
    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
    52 shares
    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
    105 shares
    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
    11 shares
    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
    32 shares
    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
    10 shares
    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
    273 shares
    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…
Advertisement
Suggested Tuts+ Course
Chrome Developer Tools$15
Advertisement