DTC 355: Spring 2020: Tiny Projects

At times, the instructor will assign small projects to work on in class as homework. You may be able to complete them before the end of class that day, or not. Also, completing and submitting the assignment is different for each project. See specific projects for their own particular submission.


Tiny Project #1: Mockflow

This project uses the following resources:

Using Mockflow, complete the following:

  • Draw a black-and-white wireframe drawing of any Amazon product page as seen in a desktop computer web browser.
    • You can look at the page while you’re drawing it. Don’t do it from memory.
    • This is about the logical arrangement of the elements rather than the graphical style, color, font, etc.
    • Don’t use color. This is just black and white.
    • For images, use the image placeholder box.
    • For text, put in a 1-2 word summary of what would go there. For longer text, add “designer’s greeking” (“Lorem ipsum…”).
    • You must include the “browser frame” element in your wireframe.
    • If it is a very long page, you only need to wireframe the top 3x units. In other words: the display when you see it at first is 1x, then scrolling down a full screen is another 1x, and so on.
  • Export your drawing as a PNG image.
    • In Mockflow, switch to Review mode and then Export as an “Image”.
    • If you need help, watch the training and support video about exporting.
  • Go to the project Dropbox and upload your exported image before class on Tuesday.

Tiny Project #2: HTML+CSS Quote

You will submit 2 URLs as part of this Tiny Project.

First: using the in-class quote example as inspiration, make your own CodePen that has its own quotation, attribution, background photo, and Google font. Your first URL to submit is the address to this CodePen as seen in your browser bar.

Second: Using the Codepen quote you made above, you will have made it into a web page on your Reclaim Hosting:

  • In your hosting File Manager, in the public_html folder, make a “quote” folder.
  • Create an “index.html” file inside that folder.
  • Also create a “styles.css” file inside that folder.
  • Copy the page skeleton source HTML from tdevries-355.com/skeleton/index-styles.html into the file.
  • Copy the HTML and CSS from CodePen into the appropriate places in your new files.
  • THEN… replace the quote text, photo, and font with new information of your own choice.

The URL to this web page should be https://yourdomain-355.com/quote/, replacing “yourdomain-355.com” with your own domain name.

The above steps have been demonstrated in class.

Submit your two URLS — one from CodePen, the other from your web site — via the Blackboard assignment under Activities + Tiny Projects > Tiny Project #2.