WEEK 1: Introduction (January 19-22)

Video Lectures


Zoom Class (Tuesday 5:45pm-7:30pm):

Please watch the two videos above before we meet on Zoom. The multimedia design introduction is set to start 25 minutes in for a total of 13 minutes.

Syllabus Overview, Q & A, Attendance, Optional Pods

Resources

Web Basics

Small Group Activity:

  1. In randomized small groups, come up with examples of websites that answer these simple questions:
    What is good web design? 
    What is bad web design? 
  2. Also come up with reasons for your selections. Warning: you may not all agree!
  3. Post your selections (urls) in Chat and provide your reasons for each (good and bad design) 

Notes:

Syllabus – COVID-19 Asynchronous Schedule

HTML – hypertext mark-up language
CSS – cascading style sheets
Design – color, layout, imagery, media, typography, navigation, interaction, narrative

Optional Pods:  Let me know (message me on Slack) if you would like to be in a small group Slack channel so that you can get support for projects.

Assignments – 5 mini-projects. Meet with your group on Zoom or work alone to work out the coding challenge. Each student uploads their own version. These should be worked out as a group fairly quickly (20-30 minutes) and completed by Friday night at the end of the week assigned.

  1. Information Box
  2. Potatohead
  3. CSS Grid
  4. Responsive Grid
  5. Typography

Projects – Blackbird, Recipe, Narrative, Portfolio

Quizzes – HTML, CSS 

Tutorials:
FreeCodeCamp: Responsive Wed Design Certificate 
-Basic HTML and HTML5
-Basic CSS
-Applied Visual Design
-Applied Accessibility
-Responsive Web Design Principles
-CSS FlexBox
-CSS Grid

Text Editors:

FTP Client (file transfer protocol): Cyberduck Mac / Cyberduck PC / Filezilla (PC and Mac)

Other Resources:

Designing for the Web

  1. Responsive Design (mobile)
  2. Composition (grid, layout)
  3. Typography (fonts)
  4. Color Theory (harmony, integrity, schemes)
  5. Communication (hierarchy, rhythm, narrative)
  6. Accessibility (legibility)
  7. Originality (novelty and familiarity)

Blackbird Projects


Web Basics

internet: network of networks
protocols: rules and structure for passing data, agree on data formats
ip address: internet protocol address (unique for each device)
dns: domain name system
domain name: purchase name to link to ip address
isp: internet service provider
server: hosts websites
client: browser access to websites
world wide web: linked documents on the internet
websites/webpages: linked html/css pages and media files( images, audio, video, pdf, docs, etc)
http: hypertext transfer protocol
https: hypertext transfer protocol secure
ftp: file transfer protocol
url: uniform resource locator – the web address
directory/folder: structured list of document files/ desktop metaphor for container of documents (interchangeable)
files: desktop metaphor for a “web page”, media object, an object that stores data, information, commands, etc.
absolute url: http://dtc-wsuv.org/wp/dtc355/index.html
relative url:  index.html, img/image.jpg

File and Directories: how to organized site files…


Slack

You should have been invited to our class Slack channel. Look at the sidebar. For your profile, please use your whole name so we (I) know who you are. It would also be helpful if you attach a profile picture. Slack will be our place for general discussion and sharing of information. I will be setting up small-groups which will also appear in the sidebar.

In the class Slack channel please introduce yourself.

  1. your major
  2. your background (if any) in web design and development (HTML, CSS, Adobe software)

Group Activity