Cyberduck 101

Uploading work to your server via Cyberduck is mostly relatively straightforward, but there are a few wrinkles to note and learn.

  • Files placed in the public_html folder show up in the root of your domain. That is, placing testfile.html in your public_html folder means that file can be accessed at yoursite.com/testfile.html
  • Similarly, folders placed in public_html become directories in your URL. If you create a folder called assignment-one in public_html and then place testfile.html inside of it, the URL for that file will be yoursite.com/assignment-one/testfile.html
  • Don’t include any spaces in the names of files you place on your server.
  • Use all lowercase letters in your filenames. Domain names aren’t case sensitive (that is apple.com, Apple.com, APPle.com, applE.com all work), but folder and file names are (that is, apple.com/mac will take you to a valid page, but apple.com/MAC will not).
  • Additionally, name your files semantically—give them descriptive names, and separate multiple words with dashes. For example, page1.html is not a very good name. page-one.html is better. go-dawgs.html (or some other name reflecting the content of this page) is best.

In this class, all files for a given assignment should live in a single folder named assignment-one, assignment-two, etc. so that we can go to any student’s site and type yoursite.com/assignment-one and arrive at your page.

Additionally, the main page for each assignment should be named index.html (this is the only “magic” filename in that web browsers, when pointed to a folder, will automatically look for and load a page named index.html). 1

Each assignment folder should contain all of your html files in its root. It should also contain each of the following folders, with the attendant files logically organized:

  • css
  • img
  • js

This is a common organizational structure on the web. Once you’re more experienced, you can bend and tweak this setup, but use it for every assignment for this class. Put all media files (audio, movies, etc.) in your img folder.

Workflows

For the first two assignments, a great workflow is to do all development locally (on your lab iMac / personal laptop) then upload your files to the server when they’re done. To upload using Cyberduck, simply open Cyberduck and click on your site’s bookmark. Navigate to your site’s public_html folder, and then drag and drop your entire assignment folder (assignment-one, etc.) into the Cyberduck window. Once the upload is complete, you can now access your work at yoursite.com/assignment-one!

Once your work is uploaded to your server, you can make changes in two ways.

First, you can continue to work on the files on your local machine and then upload them when you’re done. If this works for you, go for it! The main benefit is that you can noodle around in private and then make your work publicly visible only when you’re ready. That is, there’s no auto-syncing between the files on your local machine and those on your server.

The second option works only if you’ve made Brackets the default editor in Cyberduck (to do so, go to the menu bar and select Cyberduck > Preferences or hit ⌘ + , and select Editor (the pencil icon), click the dropdown menu, click Choose…, select Brackets, and be sure to check the box for “Always use this application.”

Once you’ve done that, you can click on any file in Cyberduck and click “Edit.” Make your changes, then hit save and wait for the “Upload Complete” notification—your changes are now live on your site!

There are, however, two perils with this method. The first is that you’re editing your site live, with no backup. Accidentally delete something, and it’s gone forever. Write some great code or content, but then there’s an issue with your server, and again, gone forever. Also, you’re working in public. Right now, your site likely doesn’t have much traffic, but it’s something to be cognizant of.

The second peril is more real, and you need to understand the way Cyberduck achieves the magic of editing files live on your server with Brackets to understand why. When you click edit, Cyberduck downloads a temporary working copy of the file you’ve chosen to edit and saves it to your computer in a cache folder (a randomly named folder that exists just for this type of thing). Then, when you click save, it uploads the edited cached copy back to your server.

The place where this can bite you is this: if you use this method, but then fail to close the cached / temporary copy in Brackets and disconnect from the server, Brackets will still show you this file even though Cyberduck no longer holds any association between it and the file on your server. It’s not uncommon for students to work in a non-associated cached copy and not understand why their site is updating. This can get messy quickly, but thankfully, it has an easy solution: always close the cached copy of anything you’re “editing” in Brackets through Cyberduck.


  1. And yes, I know this breaks the semantic naming rule I just mentioned.

Getting started on Project One

1) Connect to your server via Cyberduck. Delete all content in your public_html folder.1Bonus points if you verify that you can connect to your server via your lab computer and your laptop.

2) In Dropbox, delete23 everything we’ve done so far.

3) Navigate to yourdomain.com/nmi/4110/project-one. In that folder, make a new folder called “css”.

4) Open Brackets. Create two new files. File one: an HTML file named—you guessed it!—index.html. File two: a CSS file named style.css. You might want to go ahead and set up a vertical split view in Brackets.

5) In your index.html, create our usual HTML boilerplate from memory—click the link above if you need help.

6) In the <head> of index.html, go ahead and link to your style.css file. Remember the three elements of a proper <link> tag. Again, try to do this from memory.

7) In the <body> of index.html, add a <header> element and, enclosed within it, a <nav> element. You haven’t seen these elements before, but remember: a big part of learning what you need to learn in this class is learning how to find and implement online resources.4

8) In your <nav>, add a <ul> with three <li> elements. Each <li> should contain a link to one of the three pages of your site. Your first page is, of course, index.html. Your second and third pages should be page-two.html and page-three.html.

9) Underneath your <header> element, add a <main> element.5

10) At this point, be sure to save your index.html in Brackets. Now, head over to the Finder, navigate to your project-one folder. There, duplicate6 your index.html twice. Rename one of the files—again, you guessed it!—page-two.html and the other page-three.html.

11) Stop and think about why we did what we did in step 10. No really: stop and think about it for a second. Think about why it was efficient. Think about why we did it at the particular moment in this process that we did.

12) Okay, from here, it’s up to you. Add some content to each of the three pages. A few quick thoughts to keep in mind as you do so:

  • To follow best practices, include only a single <h1> element per page.
  • Place any body text in <p> tags.
  • All <img> tags must include a descriptive alt=”” attribute. We’ll talk more about why in class on Friday, but it’s quite important. Also, remind me in class on Friday to talk about properly sizing images.
  • Maintain proper indenting throughout.
  • Experiment with classes!

13) And now, on to your style.css. A few things to think about here:

  • Proper formatting / indenting throughout, obvs.
  • Organize your style logically from most broad to most specific.
  • Related to the above point, try to eliminate duplicated styles.
  • Don’t just format top-level elements (h1, h2, nav, etc.)—style a class or two!
  • Maybe try styling your <nav> to look more like, well, a nav! Try searching for a tutorial / guide on how to do so.
  • Don’t forget about the specific link styling requirements in the project description. See if you can figure out how to make them happen on your own.

14) At the end of class, upload all the files from your project-one folder7 into your public_html folder on your server!

15) Bonus points: update something on your site, on your server, using Cyberduck’s edit tool (which should point to Brackets) and then compare the edited file on your server with the local copy saved in Dropbox. Also, think about why we call the copy in Dropbox the local copy.

That should be more than enough to keep you busy throughout class and homework time. Looking forward to seeing what you made on Friday!


  1. Yes, I know. This again. But remember: practice practice practice.

  2. or move to a single folder called “early_work” or something similar

  3. But seriously, just delete it.

  4. Also, they’re just fancy (semantic) div tags—think on that for a bit.

  5. No link provided this time—it works how you expect it works, but you can look it up if you’re curious.

  6. Either by right-clicking index.html and selecting “Duplicate” or, better, by clicking once on index.html and then holding down the Option key while you drag the file within the Finder.

  7. But not the enclosing folder itself!

HTML Boilerplate

It looks like this:

<!doctype html>
<html>
<head>
    <title>Hello world!</title>

</head>
<body>

</body>
</html>

Artisanal hand-crafted small-batch locally-sourced bespoke website

Write a three-page website entirely by hand.

Quantitative evaluation (7 points)

One point will be earned for completing each of the following:

  • Sensibly named files
  • Properly formatted HTML and CSS (indented code, etc.)
  • A minimum of three pages, all linked together so that the user can always reach any other page from any given page.
  • All CSS in an external stylesheet
  • Use of semantic div tags styled with css to organize content
  • Each page must contain at least one image, appropriately sized
  • Implements accessibility best practices

Qualitative evaluation (3 points)

These points are earned by demonstrating a high overall level of quality. Ways you may earn these points include:

  • Attention to typography (Google Fonts, typographic scale, typeface pairings, etc.)
  • Overall aesthetics
  • Use of advanced CSS visual presentation techniques (CSS graphics, animations, Bézier curves, etc.)
  • Use of responsive web design principles

Submit by uploading to yoursite.com/nmi/4110/project-one

(Download the entire file structure for your NMI Portfolio here and then upload to the root of your domain.)