In this super quick screencast, we use MAMP to set up a URL we can use for local development. This is useful for a bunch of reasons:

  • We can link to resources via relative links from the root, e.g. background: url(/images/something.jpg);
  • TypeKit fonts can work because we can "allow" this specific URL to work
  • We'll need this later anyway when we start using PHP.
  • It's fun to think of weird TLD's (top level domains). Our's is called v10.whatup


  1. Christopher Geary
    Permalink to comment#

    For the rest of you that don’t have MAMP Pro, or anything else that gives you a nice GUI to create local urls, you can do this manually by editing your hosts file:

    – Mac: /private/etc/hosts
    – Windows: /system32/drivers/etc/hosts

    Add a new record to the bottom of the hosts file in this format:     v10.whatup

    Next open apaches “httpd-vhosts.conf” file, you might need to hunt around for the file, but this is where it is on my install (Standard MAMP for mac).
    – /Applications/MAMP/conf/apache/extra/httpd-vhosts.conf

    <VirtualHost *:80>
    DocumentRoot "/Applications/MAMP/htdocs/css-tricks/v10"
    ServerName v10.whatup

    **DocumentRoot should be the path to your website**

    Hit save, and reload Apache. You should now be able to access your website via http://v10.whatup

  2. rnovino
    Permalink to comment#

    When I download the file the download progress is not moving , I usually download it because it really takes time to buffer the videos on this page and this is a quite large files even though some are just less than 10-15 min :(

    • Chris Coyier
      Permalink to comment#

      Best results == refresh page before clicking download button.

  3. Aurel
    Permalink to comment#

    I just got mamp pro – because I thought it be cool. when I installed it, the mysql does not work and instead of the website mywebsite.v1 to work I need to write mywebsite.v1:8888

    is there a quick fix to this. I havent deleted the free version of mamp yet though

    • Chris Coyier
      Permalink to comment#

      Change the Apache port to 80. I think that should do it.

    • Aurel
      Permalink to comment#

      Great thank you

      Permalink to comment#

      Hi Chris, simply changing ports to “standard” (80,3306) in MAMP caused a clash with standard Apache (at least in my system). But found this nice article Working apache port 80 localhost in MAMP which in fact worked pretty fine for me. (… and I’m usually boned using terminal uahhh) For all that wonder that you don’t see any activity when you type in your password in the terminal: it’s standard behavior (nobody can look over your shoulder) – just type and hit enter. Cheers Thomas

  4. msguerra74
    Permalink to comment#

    This video seems out of place and would fit better as #015 because it’s picking up where #014 left off. Videos #015 and #016 added the icon fonts and media queries, but those things aren’t present in this video. Just my thoughts…

  5. obilal
    Permalink to comment#

    Just thought I’d comment this in case someone else might be troubleshooting.

    Small but possibly huge thing when using MAMP Pro. Took me two days to realize that MAMP Pro won’t serve a page with the extension .htm – no kidding, I was baffled as to how Chris did it effortlessly in the vid, but the only way I could get my page to show up in a browser was to use an index.php and drop in the index.htm page as an include.

    Prior to this, whenever I tried to open the server using Mamp Pro I’d get the message “You don’t have permission to access / on this server. As soon as I changed the index.htm to index.html the actual page came up. Hope someone might find this useful.

  6. mkrisch76
    Permalink to comment#

    Was there an easy fix for the font flash when the page loads?

  7. Bobby Tonnies
    Permalink to comment#

    As well, I could probably surf the other videos, but what was the fix for the font flash when the page loads?

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

We have a pretty good* newsletter.