WEEK 3: HTML Flow (February 1-5)

To Do This Week:

FreeCodeCamp: Finish “Basic HTML and HTML5” & start “Basic CSS”

Video Lectures:

Web Development: Tools and Practices

  1. organizing web files, index.html
  2. clear browser cache
  3. chrome > inspect element and web developer
  4. 3D browser page: x, y, z coordinate system
  5. uploading files to the server / ftp
  6. Tables and Forms > mini-projects – examples file

Blackbird Project

  1. page structure, nesting, semantic elements, id and classes,
  2. lists
  3. block and inline > HTML flow
  4. divs and spans – inline styles
  5. links – external and internal or anchor link
  6. image insert vs image background
  7. prepare images for web with Adobe Photoshop or Gimp.org
  8. image file formats for web: jpg, png, gif

Zoom Class

FTP troubleshooting : Blackbird list
Web Images/Photoshop – load time, cache, incognito mode
Inline vs. Block Elements : html-flow.html

List of HTML tags
Tables and Forms

Mini-Project- Information Page:
Work with your pod to create the mini-projects html/css.  Each of you then uploads your own mini-project to the server using ftp. The file for each mini-project should be called “index.html” – the default page. The folder it is in should be called “miniproject-1”, “miniproject-2”, “miniproject-3”, etc. To see if you named it correctly just check the class mini-project page:

DTC 355 01 Mini-Projects

This should be completed by the end of the week that it is due. I will grade them from the above lists on Monday the following week.

Copy the html of this page: starter-page.html

Create your own file called “index.html” inside a folder called “miniproject-1”

In plain HTML and “inline” CSS create an information box about any topic – pandemic response, health, alien invasion. Here is a template to get going (this template has some CSS to make the table visible). You can change it in any way, but please include the following:

  • 1 heading (h1)
  • 1 paragraph (p)
  • 1 image (img)
  • 1 table (table)
  • 1 set of bullet points (ul/ol)
  • a short form to collect information (only the HTML “form”, not the functionality – you would need JavaScript to send the info to a database)


FTP= “file transfer protocol”

– uploading web files to the server using  FTP (file transfer protocol)
-we will use a free Mac ftp client called Cyberduck Mac,   Cyberduck PC is also available.
-Filezilla is also good, free and cross-platform

  1. Open ftp software
  2. “Open Connection”
  3. Enter the following info:
    servername: dtc-wsuv.org
    username: first initial + last name + the year  started(’21”)  + @dtc-wsuv.org (so, “Sam Jones” would be “sjones21@dtc-wsuv.org”)  – all in lowercase, no spaces or symbols!!
    password: sent to your wsu email, can’t be changed!
  4. If successful, you should be in your personal server directory that has the same name as your username (without the @dtc-wsuv.org) . Now you can either drag the folder and files in that directory or use the “action” menu to “upload.”
  5. Upload the folders of your projects, making sure it is named in all lowercase: “blackbird” for the blackbird project, “recipe” for the recipe project, etc. You can always change the folder and file names on the remote server, as you would on your desktop.
  6. Make sure that your default page for the project is “index.html”
  7. Check how everything looks on the live absolute URL:
  8. If you cannot see images, make sure that your file names and calls to access those files are all lowercase. Servers are case-sensitive!

Photoshop Basics:  sizes, tools, transparency, grid
Preparing Images for the web
Formatting Images

Project #1: Blackbird Project (10%)

Format and style Wallace Steven’s poem “Thirteen Ways of Looking at a Blackbird” in a one page HTML document with an external CSS stylesheet. Your pages must have at least the following :

  1. one external link
  2. one internal or anchor link
  3. one image insert
  4. one background image

The assignment will be graded based on the functional and proper uses and syntax of HTML mark-up and CSS styles.  Though I am not grading on the quality of your design and layout, please put some effort into a pleasing look.  Extra credit will be given if your design attempts to reflect an interpretation of the poem’s meaning!

Previous Blackbird Projects

Nouspace Student Gallery – Blackbird Projects

Photoshop Basics:  sizes, tools, transparency, grid
Preparing Images for the web
Formatting Images