Week 4, Day 4

Posted by on 13th Jun 2019

As we move into the end of this week, you should be preparing to share your work from the Digital Methodology project. It's a big project with some potentially complicated pieces, so I don't want to add anything new to your plate today other than some instructions and advice related to preparing your project for the web and then getting it online.

Goals

  • Keep learning some HTML and CSS
  • Apply that knowledge to your project by implementing some common sense design
  • Upload your webpage to your website

Keep Learning

By now, you've become familiar with either Codecademy or W3Schools, and really, you can go quite far with either one. For this project, the chapters in W3Schools' HTML Tutorial are somewhat less essential as you get farther along, but if you're sticking with W3Schools you should at least get through HTML Images. And in the separate CSS Tutorial, you should get everything up to CSS Fonts.

In Codecademy, you should try and complete the Learning HTML and Learn CSS courses, and consider also trying the Make a Website course.

Design your Page

After you've completed a draft of your essay, you should think about how it will look. Start with a thumbnail sketch of your page's design, and then write the code to make it happen.

W3Schools is pretty useful for looking up specific tags, and web searches will probably lead you to Stackoverflow for many, more complicated "How do I ..."-type questions, but you should be asking yourself, "What do I want to do?" The thumbnail is your guide, but how to get to it may take more strategizing and structure than you realize at first. This is where I can help! Tell me what you have in mind and I can help you think through the kind of code you'll need to accomplish it.

Design is, to some extent, a matter of taste, but the field of graphic design has settled on some rather well established patterns for what works and what may not. We don't have time to get into it with much detail, but Robin Williams' Non-Designer's Design Book (which is available through our library) is an excellent introduction to what she calls the four basic principles of design: Contrast, Repetition, Alignment, and Proximity.

These principles make a lot of sense when you see them in practice, but you should also let your own intuition and taste guide your designs.

Ultimately, when I say "design for the web" in the context of this assignment, I mean that your webpage should demonstrate your attention to:

  • Layout. The arrangement of text, images, and video on the web page. This should include a judicious use of negative space to balance out those elements.
  • Typography. Some other fonts than the default, and clear size and type differences to emphasize differences in information, like headers vs paragraph text, or regular text vs. hypertext (links).
  • Color. Something other than black text on a white background.

Of these three, layout is probably the hardest to figure out, and again I'm happy to help debug your CSS to get the layout you're trying to accomplish.

Get it Online

When you're ready to share your project, get it online by uploading it to your website. Accomplishing this is a little more involved than just attaching it to a post in WordPress, so I made a video demonstrating the process with UMW Domains.

Like yesterday's video, this is recycled from a couple summers ago, but I think the information and demonstrations in it are still pretty good.

As usual, let me know if you have questions about any of this, and I'll follow up with the weekly wrap up and review post tomorrow.