Advertisement

HTML/CSS

Latest Posts
  • Web Design
    HTML/CSS
    Quick Tip: How to Use HTML5 “picture” for Responsive ImagesPreview picture
    Images are notoriously one of the most challenging aspects of responsive web design. Today we'll look at how the element, a solution to the problem of responsive images, can be used right now.Read More…
  • Web Design
    Foundation
    Build a Top Bar Off-Canvas Navigation With Foundation 5Foundation menu
    Today, we are going to combine ZURB's Foundation 5 Off-Canvas feature with our top bar navigation. The result will be a nice custom navigation for desktop users and a sleek off -canvas menu for tablet and mobile users. Read More…
  • Web Design
    HTML/CSS
    Why I Choose Stylus (And You Should Too)Stylus thumb
    The world of front end web development has been steadily increasing its uptake of what we call "CSS Preprocessors", which extend the functionality of regular CSS. Arguably the two most well known, with the greatest user base, are LESS and Sass/SCSS. However there is a third preprocessor that hasn't received quite as much attention, and that's Stylus.Read More…
  • Web Design
    HTML/CSS
    Unicode: A Beginner's PrimerUnicode retina 400x400
    Believe it or not, there's an image format which is built right into your browser. It allows images to be downloaded even before you need them, renders them perfectly on Retina screens, and allows them to have CSS colours and effects applied to them. Ok, I'm not being entirely truthful there. It's not an image format as such – but the rest still applies. Using Unicode you can create icons that are resolution independent, have virtually no download time and can also be styled with CSS.Read More…
  • Web Design
    HTML/CSS
    Quick Tip: Fix Your Messy CSS With SMACSSSmacss retina
    Face it, your CSS is a complete mess! Today I'm going to introduce you to SMACSS, a set of guidelines and principles to tidy up your stylesheets, making your projects better organised, flexible and scalable.Read More…
  • Web Design
    HTML/CSS
    Quick Tip: Spare a Thought for Vertical Break PointsVertical retina
    I've seen this happen a few times recently, usually on websites with fixed navigation running down the left hand side. They'll have lovely, fluid layouts, which stretch out on wide screens and stack up on smaller devices, but they'll still fall foul of a sneaky break point few people think about. I'm taking about viewport height.Read More…
  • Web Design
    HTML/CSS
    Creating Friendlier, “Conversational” Web FormsForm retina
    Web forms are constantly a hot topic when it comes to web design and user interaction. The reasons for this are vast, but one of the more obvious reasons is that forms are the most basic way for a user to input information into your application. In this article, we'll discuss a few techniques that allow your forms to respond to the user's input, while helping to obscure unnecessarily confusing or overwhelming elements.Read More…
  • Web Design
    HTML/CSS
    Finishing Off the Merry Christmas Web App InterfaceXmas build 1 retina
    In this tutorial we will finish off our web app front-end so it all looks perfect and functions nicely on all screen sizes. Last time, we rounded off by styling the message boxes, leaving just the content left to do. Shall we dive right in? Ok!Read More…
  • Web Design
    HTML/CSS
    How to Animate Festive SVG Icons With CSSAnimated icons retina
    'Tis the season, so in this tutorial, I'll walk through creating some CSS animated, holiday-themed, SVG icons. There are some great icons on Iconmelon, a site which hosts many free vector icon sets for you to sink your teeth into. The icons I'm using come courtesy of designer Sam Jones. So grab yourself a cup of eggnog, pull your laptop up to the yule log, and let's gets started!Read More…
  • Web Design
    HTML/CSS
    A Simple Mixin Alternative to Standard CSS GridsMixin grid retina
    Over the past few years CSS grid systems have become a very popular way of rapidly producing layout scaffolding in web design. They can be a fantastic time-saving resource, with talented coders having intelligently crafted systems which cater to a wide array of possible layouts designers might need to create. However, this isn't the only way to approach grid-based web layouts, and today we're going to examine an alternative.Read More…
  • Web Design
    HTML/CSS
    Building the Merry Christmas Web App InterfaceXmas build 2 retina
    Today we're going to build the Merry Christmas Web App Interface; a Photoshop layout from an earlier tutorial by Tomas Laurinavicius.Read More…
  • Web Design
    HTML/CSS
    The Truth About Multiple H1 Tags in the HTML5 EraH1 thumb
    Whether you're a webmaster or a web designer, there's a question you've most likely either asked or answered many times over the years. That question is, "How many <h1> tags can I use per page, and how exactly should I implement them?"Read More…
Advertisement
Advertisement