Grow your CSS skills. Land your dream job.

#104: Quick Tip: Use Dropbox to Make a Public URL for Anything

Just save the website from the browser (in Firefox, you get an .html file and all the resources), drop it in your Public folder, and use the right-click contextual menu to grab the public URL.

Comments

  1. This technique also comes in really handy for creating simple Facebook Page Tabs as it’s got SSL and will render the HTML, CSS and Images as you’ve coded it.

  2. Dan
    Permalink to comment#

    Why didn’t the header image show?

  3. I’ve been doing this for a couple months now :)

  4. Awesome idea :) Dropbox rocks man!

  5. Awesome man ! It was nice !
    SSL is really a thing to be considered in it !

  6. Permalink to comment#

    I luf Dropbox.

  7. Nice idea of Dropbox but for me better work’s FTP and some demo.xyz.pl as a subdomain :D

    If my friends will use it i’ll us it to :D simple :D

  8. BrianC
    Permalink to comment#

    Been using this for a while now, it is really awesome – there is also a plug-in for it called Screen Grabber, that saves screen dumps of either the entire screen or just the active window, and directly saves it as a .jpg in your dropbox public folder for easy sharing.

    One of the more awesome things about it is that you can share folders with your friends that use it – very good for collaborative working, and it syncs instantly.

  9. If you’re using WordPress I suggest checking out the Share a Draft plugin, especially if you have clients or friends who will not be bothered with the above technique.

  10. Michael
    Permalink to comment#

    Dropbox = 2GB free acct.
    SugarSync= 5GB free acct.

    https://www.sugarsync.com/referral?rf=etbpyghv5qeno&utm_source=txemail&utm_medium=email&utm_campaign=referral

    Please use my referral link and get an additional 500mb

    BTW with SugarSync there is NO limit on the amount if free space you can get when using “referrals”

  11. Very cool … thanks for the tip!

  12. Permalink to comment#

    You know what.. On the free account, we just can save file to the public link (include all people who don’t have dropbox acc) only JPG files.

    I used to save not only the JPG, but also my other files into it, by changing the extension to JPG (include zip, rar, and others, what ever you want).

    That would be the real quick tip trick.. :)

  13. hoss9009
    Permalink to comment#

    Video is dead :(

  14. Does anyone else notice that the entry in this video was apparently posted 1930 years ago?
    How does that happen anyway?

    @Dan I might be a bit late to this conversation, but no one else answered your question so I’ll go ahead. The firefox save as “Web Page, Complete” feature grabs all files that are referenced directly by that html document, for example jpgs, css files, etc.. It does not grab files that are referenced by other referenced files. If the header image is defined by a css background-image: rule in a linked css document, the css document will be downloaded, but the image will not be.

    I ran into this issue when I had to do some css work for a site that was being developed by someone else. I didn’t have access to the original development files, just the live site. I had to go into the css document and download each image individually to my own test environment.

    The folks over at Firefox should change the name of the save dialog from “Web Page, Complete” to “Web Page, …Mostly Complete”. Or even better, they should fix the save functionality.

    (Google Chrome now has the same feature with the same deficiency )

  15. Roy J
    Permalink to comment#

    Great little trick, thanks!!

  16. Sean W
    Permalink to comment#

    Sadly DropBox is getting rid of public folders (for new users) so this technique will soon be unavailable for those who don’t already have a dropbox account (they should though).
    - “We wanted to let our developers know about an upcoming change to the Public folder for all user accounts. In April, we launched the ability to share any file or folder in your Dropbox with a simple link. This new sharing mechanism is a more generalized, scalable way to support many of the same use cases as the Public folder.

    After July 31, we will no longer create Public folders in any new Dropbox accounts. If your app depends on Public folders, we recommend switching to the /shares API call. Public folders in existing accounts, however, will continue to function as before.”

    Just thought I’d let you all know if you already didn’t.

  17. farcalled
    Permalink to comment#

    SugarSync says 10 gb max extra for referals rather than unlimited.

  18. Anne
    Permalink to comment#

    Chris,

    Late to this post. However, I want to thank you for this excellent video! I needed a way to test localhost files for mobile testing on phone emulators .. so of course, I needed a public url …just tested this with dropbox/iphonetester.com – works great!
    Beats SDK downloads/uploads to a remote server!

  19. Permalink to comment#

    Yes, i think is cool trick, for some time it help like @sean say Dropbox public folder is no longer available, but some account still work, i do still use it for creating my newsletter just use your outlook or thunderbird->save as html->save Dropbox public folder->goto mailchimp and import from URL(your public folder URL). By the way there a new site called urldroplet.com so we can save url to dropbox (let say download a zip file) have a try!

Leave a Comment

Posting Code

  • Use Markdown, and it will escape the code for you, like `<div class="cool">`.
  • Use triple-backticks for blocks of code.
    ``` 
    <div>
      <h1>multi-line block of code</h1>
      <span>be cool yo.</span>
    </div>
    ```
  • Otherwise, escape your code, like <code>&lt;div class="cool"&gt;</code>. Markdown is just easier though.

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".