• Theme Development
    Creating a WordPress Theme From Static HTML: Preparing the MarkupCreating wordpress theme from html 400
    Last year I did a small (and admittedly very un-scientific) survey among other WordPress developers. What I wanted to know was this: When they built their first WordPress theme, how did they do it? Did they hack an existing theme or did they start with their own static HTML and turn it into a theme? The majority of people I spoke to used the second approach - they were all experienced frontend developers who had built sites using HTML and CSS, and found it easiest to take their existing HTML files and convert them to a theme. Two of the people I spoke to were lecturers or teachers, and told me that this is the approach they use with students. So in this series I'm going to show you how to do just that.Read More…
  • Laravel
    Authentication With Laravel 4Laravel 4 auth retina preview
    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
    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…
  • Web Development
    Building a Web App From Scratch in AngularJSAngular js
    In a previous AngularJS tutorial I covered all the basics of how to get up and running with Angular in around 30 minutes. This tutorial will expand on what was covered there by creating a simple real world web application.Read More…
  • Web Development
    jQuery Succinctly: HTML Forms & jQueryJquery cover
    Disable/Enable Form Elements Using jQuery, you can easily disable form elements by setting the disabled attribute value of a form element to disabled. To do this, we simply select an input, and then using the attr() method, we set the disabled attribute of the input to a value of disabled.Read More…
  • General
    Contracts: The Practical Side of SemanticsContracts
    We all recognize that we should be writing semantic code. Maybe, you're even using <section> or <em> correctly, and feel pretty good about yourself. But, are you also considering the implied contract that exists when you code?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
    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…
  • News
    Lessons Learned from Building Shopify ThemesShopify logo
    I first used Shopify not long after it launched in 2006. I loved that it was a simple to use and competitively priced hosted e-commerce platform. But above all, its theming feature is what I liked most. Let's look at a few simple techniques that give you control over your Shopify themes and deliver an even more crafted experience to your clients.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…
  • Web Development
    Using OpenLayers with GeoNames WebServicesPreview
    In this tutorial, I'll show you how to use OpenLayers, a simple to use open source JavaScript library to load, display, and render maps, with the WFS to display markers on your map, just like you see on Google Maps. All it takes is some HTML, CSS, and JavaScript - that's it!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…