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. User Avatar
    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. User Avatar
    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 :(

    • User Avatar
      Chris Coyier
      Permalink to comment#

      Best results == refresh page before clicking download button.

  3. User Avatar
    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

    • User Avatar
      Chris Coyier
      Permalink to comment#

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

    • User Avatar
      Permalink to comment#

      Great thank you

    • User Avatar
      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. User Avatar
    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. User Avatar
    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. User Avatar
    Permalink to comment#

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

  7. User Avatar
    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!

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.