DSD-3647-A
Week 5

Questions from the assignment

  • text-center doesn't work; navigation doesn't fit; confused between "col" and "col-md"; etc.
  • How to use google fonts in sublime text?
  • I have lots of overwrite text on css and some function are not working.

Announcement

In class discussion: Automation

Responsive Resume: Review

  1. Lihua Jin :: Genspace | Resume
  2. Ifah Pantitanonta :: Resume
  3. Kyle An :: Genspace | Resume
  4. Yunfei Xie :: Genspace

Introducing Web Servers, FTP, External Editors

  • Liveweave is a great starter tool, but working on more complex, responsive designs can be limiting...
  • Web pages are stored on web servers, which are like stripped down computers (think MacMini) that have a permanent (static) IP address so they can be reached anytime, from anywhere
  • Typically the way to transfer files to a webserver is via FTP: File Transfer Protocol.
  • To use a protocol you need a client that understands all the rules of the protocol. For example, a web browser is a client that understands how to interpret data sent via the HTTP protocol (Hyper Text Transfer Protocol)
  • To transfer files via FTP, we need an FTP client. The three most popular FTP clients for the Mac are Cyberduck (free), FileZilla and Transmit ($34). Let's download FileZilla.
  • Create a new bookmark using the following credentials:
    • Top Dropdown: FTP–File Transfer Protocol (Explicit TLS)
    • Server: webdesign.sva.edu
    • Encryption: Use explicit FTP over TLS if available
    • Logon type: Normal
    • Username: <MySVA Username>
    • Password: If you're not in class then you'll have to email me
    • Make sure port is 21
    • Then go to the Transfer Settings tab and make sure Transfer Mode is set to Active
  • Click Connect and you'll have to hit Allow a few times

Accessing The Server Over The Web

  • Navigate to webdesign.sva.edu/~<MySVAUsername>
  • Hooray! What a great looking HTTP Test Page! Congrats!
  • Let's replace this with our resume...

Responsive Resume: Review

  • Let's review final project ideas from week 3

Coding Assignment: Resume

Deliverable: SVA server url

  • Recode your responsive resume using bootstrap to ensure it is fully responsive

    • Coding Assignment: Resume

    Deliverable: SVA server url

    • Put all of your Genspace files on the server
    • The folder structure should be something like this:
      • /genspace
        • index.html <-- Homepage
          • /about
            • index.html
          • /css
            • app.css (your css here)
            • bootstrap.min.css
          • /js
            • app.js (your js here)
            • bootstrap.bundle.min.js
          • /img
    • Make sure the homepage links to the about page (in the navigation) and vice versa
    • Make sure the logo always links to the homepage
    • Make sure your about/index.html pages links to the ../css/app.css that's in your genspace/css folder. Do not create a new css file for this page. Combine the CSS into one file.
    • Note that FTP (i.e. FileZilla) may not work from home and may only work from on campus, so you may have to upload your work from on campus.

    Cool links

    Submitting Your Work

    Due Monday, 2/25 @ 10AM

    Make sure all links are publicly accessible (your grade will be lower if I cannot access your work). To make sure, open up a new private/incognito browser window and test all links before submitting. After the links have been tested, submit them to this Google Form.