Question

Attack of the Clones
Business is picking up even more! Your sites are getting noticed, especially your portfolio-style sites for your music clients. It’s not making sense for you to start projects from scratch anymore. It’s time to start setting up some directories that will have a preset hierarchy of folders and some template files that will enable you to quickly “clone” a new project. We’ll call this set of folders and files a ‘site template.’
Step 1: Create a Site Template
You’ll start by building a site template for a basic portfolio site. This site template will have a file layout and directory structure. Use a word processor of your choice that has an outline feature.
Your portfolio site template will need a few pages in the form of files to start. These files will live in the site’s home, or root directory:
Home: the first page anyone sees when they visit the site
About: a brief bio and some current information about the artist
Showcase: some notable work that explains the artist’s style
Calendar: upcoming shows, exhibitions, or appearances
In addition to these pages, you’ll also need to make directories and subdirectories for the following categories of files:
Show-specific HTML: This would be a category for HTML files that are specifically covering the details for a past or upcoming show.
Images: These files should be subcategorized. For example, the site might have images that are simply a part of the overall design, but there will also probably be images associated with specific shows or exhibitions. Knowing where those go in advance makes development faster.
CSS
Scripts: JavaScript files, for the most part
JavaScript libraries: You might want to have a place to house locally hosted third-party library files, and it’s a good idea to keep these separated from your own scripts.
The top level of your hierarchy will be called root. Beneath the root-level directory, list the files and subdirectories that belong there. Use the file names (Home, About, Showcase, etc.) to get started; you will need to create your own directory and subdirectory names to include all of the file categories listed (show-specific HTML, images, etc.).
You’ll start to create something that looks like this:
root
file1
file2
subdir1
file 1
subdir2
Remember the following as you create your hierarchy:
The files should be listed by an appropriate file name which reflects the file’s function.
Directory names should be italicized.
Create a directory structure that is sensible and reflects excellent organization. Files that serve similar roles should be grouped together.
For all subdirectories listed in this assignment, be sure to include any files that would likely be found in those directories by default, even if the files themselves aren’t listed. For example, it’s likely that a scripts directory would have something like a site.js file. You can name it as you see fit, as long as the name is clear and easy to understand.
Step 2: Write Links
After you’ve produced your site template, demonstrate three different kinds of linking: absolute, relative, and site root-relative. Show how you would create a link in an HTML document to an image in your site (absolute), a script file (relative, linked from the site’s main page, for example), and a CSS file (site root-relative, also linked from the site’s main page). These links should all be created based upon the site template created in Step 1.
For this part of the exercise, just create an example of a correctly formatted anchor tag for each of these three different kinds of linking. Make sure to identify which type of linking you are demonstrating, as in this example:
Absolute Link
<a href="example/images/logo.jpg">
Step 3: Connect to an SFTP Host
Finally, consider that this site template will eventually be deployed with some host provider in the future. Research the best SFTP client for your platform (Windows, macOS, Linux, Chrome OS).
Using the client’s online documentation, provide step-by-step instructions—in your own words— that detail how to connect to an SFTP host. Screenshots or other images are welcome. After this, provide at least three reasons why you believe the software you’ve chosen represents a reliable tool for file transfer.
Submit the site template, example links, and the SFTP evaluation in a single word processing document. For each part of the assignment, place your response beneath its appropriate header: Files and Directory Structure, Example Links, and SFTP Client Evaluation.

Answer 1

Files and Directory Structure

root
- index.html (Home — main landing page)
- about.html (About — artist bio and current info)
- showcase.html (Showcase — notable work and style)
- calendar.html (Calendar — upcoming shows/exhibitions)
- README.md (project notes / template usage instructions)
- favicon.ico
- robots.txt

- _shows_ (show-specific HTML)
- show-2025-06-12-venue-name.html
- show-2024-11-03-gallery-name.html
- template-show.html (a reusable show-detail template)

- _images_
- logo.png
- hero.jpg
- site-background.jpg
- _design_ (images used for site UI/branding)
- pattern.svg
- icon-play.png
- social-twitter.png
- _shows_ (images tied to specific shows/exhibitions)
- show-2025-06-12-poster.jpg
- show-2025-06-12-stage.jpg
- show-2024-11-03-artwork.jpg
- _thumbs_ (small thumbnails used site-wide)
- showcase-item1-thumb.jpg
- showcase-item2-thumb.jpg

- _css_
- style.css (main stylesheet)
- reset.css
- print.css

- _scripts_
- site.js (site-specific JavaScript — initialization, UI behavior)
- analytics.js (tracking hookup / wrappers)
- contact-form.js (AJAX contact form handling)

- _lib_js_ (locally hosted third-party JS libraries)
- jquery-3.6.0.min.js
- lightbox.min.js
- moment.min.js

- _assets_ (optional consolidated static assets)
- fonts/
- open-sans.woff2
- downloads/
- press-kit.pdf

Notes:
- Filenames are descriptive so another developer can understand their roles at a glance.
- Show-specific HTML files live under the _shows_ directory; images associated with shows go under _images_/shows so related media is grouped.
- CSS and scripts are separated so third-party libraries remain isolated in _lib_js_ while project-specific logic stays in _scripts_.

Example Links

Absolute Link (to an image hosted at a full URL)
<a href="https://www.myportfoliohost.com/sites/artistname/images/design/logo.png">Site logo (absolute)</a>

Relative Link (to a script file from the site’s main page, index.html)
- Assuming index.html is at root and scripts/site.js is in the root-level _scripts_ directory:
<a href="scripts/site.js">Open site script (relative)</a>

Site Root–Relative Link (to a CSS file from the site’s main page)
- Root-relative paths begin with /. They resolve from the domain root regardless of current page depth:
<a href="/css/style.css">Main stylesheet (root-relative)</a>

Notes on behavior:
- The Absolute Link uses a full URL (protocol + host) so it works no matter where the page is served from.
- The Relative Link is relative to the current document’s location (index.html at root -> scripts/site.js).
- The Root-Relative Link begins with / and resolves from the webserver’s document root (useful when pages live in subfolders but you want the same stylesheet path).

SFTP Client Evaluation

Chosen client: FileZilla Client (cross-platform: Windows, macOS, Linux)
Rationale for choice: FileZilla is free, open source, widely used, and supports SFTP (SSH File Transfer Protocol), SSH key authentication, transfer queuing, resuming interrupted transfers, and an easy GUI (local and remote panes) that suits quick website deployments.

Step-by-step: Connecting to an SFTP Host with FileZilla (instructions paraphrased from FileZilla documentation and typical workflow)

1. Download and install
- Go to https://filezilla-project.org/ and download FileZilla Client for your OS.
- Install following the installer prompts.

2. Launch FileZilla Client
- Open the application; you’ll see the toolbar, Quickconnect bar, a Local pane (left), and a Remote pane (right).

3. Open the Site Manager to create a saved connection
- Click File > Site Manager… (or press the Site Manager button).
- Click "New Site" and give it a friendly name (e.g., "ArtistSite - Production").

4. Configure the SFTP connection
- Protocol: choose "SFTP - SSH File Transfer Protocol".
- Host: enter the server hostname or IP (e.g., sftp.examplehost.com).
- Port: usually 22 (leave blank to use default, or set 22 explicitly).
- Logon Type:
- If using password authentication: choose "Normal", then enter Username and Password.
- If using public key authentication: choose "Key file". For FileZilla, select your private key file (FileZilla may require a key in OpenSSH format; if you have a PuTTY .ppk, convert it using PuTTYgen or use an OpenSSH key).
- (Optional) Set a default remote directory (e.g., /public_html or /www) if your host requires it.

5. Connect
- Click Connect.
- On first connect, FileZilla will display the server’s host key / fingerprint. Verify the fingerprint with the host’s provided fingerprint (if available); accept to add it to your cache if it matches.
- After authentication succeeds, the remote directory listing appears on the right.

6. Transfer files
- Navigate the Local pane to your project folder (root of the site template).
- Navigate the Remote pane to the desired destination directory (e.g., /public_html/artistname/).
- Drag-and-drop files or folders from the Local pane to the Remote pane to upload. Transfers are queued and progress is shown at the bottom.
- Use the right-click menu for overwrite rules if conflicts arise (resume, overwrite, etc.).

7. Close session
- When finished, disconnect via Server > Disconnect, then File > Exit.

Tips and common considerations:
- If using SSH keys, ensure the key file permissions are secure on your local machine and that the public key is installed on the server (typically in ~/.ssh/authorized_keys).
- If your host requires SFTP on a nonstandard port, set the correct port in Site Manager.
- For automation, FileZilla lacks a robust scripting API; for scripted deployments consider command-line tools (sftp/rsync) or CI/CD pipelines.

Why FileZilla is a reliable tool for SFTP file transfer

1. Cross-platform and widely supported
- FileZilla runs on Windows, macOS, and Linux, making it easy to use across developer environments and teams.

2. Strong protocol support and authentication options
- Supports SFTP (SSH), FTP over TLS, and SSH key authentication (key file support), which covers common secure hosting setups.

3. Mature, well-maintained, and documented
- FileZilla is open source with a large user base, frequent updates, and good documentation. That reduces security/compatibility risks and ensures issues are actively addressed.

4. Useful features for site deployment
- Transfer queue, resume support for interrupted transfers, directory comparison, and drag-and-drop UI streamline uploading whole site templates and updating only changed files.

5. Visibility and control
- Clear local/remote panes, logs, and the ability to set transfer limits or limits on simultaneous connections help manage large uploads or server constraints.

Appendix / Final notes
- Place the contents above into a word-processing document under the three headers exactly as shown: Files and Directory Structure, Example Links, and SFTP Client Evaluation.
- If you prefer a different SFTP client for your platform (e.g., WinSCP on Windows, Cyberduck or Transmit on macOS, or command-line sftp/rsync on Linux), tell me which OS you’re using and I can swap the instructions to match that client.