Ty Strong is a web developer from Columbus, Ohio with a passion for perfection. He makes cool stuff with HTML, CSS, and JavaScript. When he's not pushing pixels, he's attending classes at The Ohio State University or kicking a hackysack.

Ty's articles

  1. 9 Reasons You Should Be Using CodePen

    At CodePen.io, they describe themselves as a “playground for the front-end side of the web.” CodePen is great for testing out bugs, collaborating, and finding new inspiration. It works by allowing you to create “pens”, which are sets of HTML, CSS, and Javascript. You can then display those pens on your profile, take feedback, and continue to edit those pens at any time.

    Like many live code playgrounds, CodePen lets you learn in an open-source environment, displaying a live preview of the code changes, and even letting you embed your CodePen demos on any web page, like the one below.

    See the Pen Full CSS NES by One div (@onediv) on CodePen.

    In this article I’ll go beyond those features just mentioned to explain some of the things that I think puts CodePen above its competition, and why you should check it out if you haven’t done so already.

    While explaining these features, I’ll also embed some random but cool pens in each section for you to check out.

    1. CSS Options

    CodePen includes some awesome features to write CSS faster. You can select to include Normalize.css or Reset.css in your CSS by simply clicking a radio button. You can also choose to use -prefix-free or Autoprefixer as well. This way there is no need to take the time to link to an external file (which is also possible, if you wanted to).

    CodePen CSS Options

    What if you aren’t sure about some of your CSS techniques being used? Don’t worry; CodePen has CSSLint integration to search through your CSS code and warn you if there are errors, warnings, poor browser support, etc.

  2. Media Queries: A Look at Different Media Features

    If you have worked with responsive design, you have probably used media queries. Media queries are a clean and simple way to create responsive websites using CSS. They work by allowing you to change the style of the page when the user’s screen is a certain size. Here is a simple example:

    [code language="css"]
    @media (max-width: 700px) {
    p {
    color: red;
    }
    }
    [/code]

    Live Demo

    This media query causes the paragraph’s text to turn red when the screen’s width is 700px or smaller. If you wanted to turn the text red when the screen is larger than 700px, you would use “min-width” instead. You can also set two separate queries such as “max-width” and “min-width”. Here’s how that would look:

    [code language="css"]
    @media (max-width: 700px) and (min-width: 500px) {
    p {
    color: red;
    }
    }
    [/code]

    Live Demo

    Awesome! The text will only be red if the width of the screen is between 500px and 700px.

    Now what if you want some styles to be applied if the screen’s width is smaller than 500px or bigger than 700px? You can do that using a comma to separate the queries, like this:

    [code language="css"]
    @media (max-width: 500px), (min-width: 700px) {
    p {
    color: red;
    }
    }
    [/code]

    Live Demo

    Notice in the demo that if the window is between 501px and 699px wide, the text will not be red.

    Media queries can be written in many different ways as well.

    Directly in your HTML:

    [code language="html"]

    [/code]

    And in addition to the method we’ve used above, you can write them using @import in CSS: