Class:Digital Portfolio 2015/Week 2

Last Week

• Introductions
• Discuss Class
• Discuss Wiki
• History of the Internet
• How the internet works for us

This Week

• Review Last Week
• Talk about the responsive web stuff that we did not look at last week
• The "size" of the internet
• Tools: Text Editors
• HTML / CSS Review

Notes

The "size" of the web

• Screen Designers Guide to DPI
• A List Apart: Responsive Images in Practice

Reviewed Text and CSS Editors

Quick solid overview on design and HTML editors are in a few of the slides here

Tools of the Trade: Photoshop, Illustrator, Sketch, Textmate, Sublime

The web inspector within your web browser is an insanely useful design/develop tool.

And then there is Espresso, for visual CSS/HTML editing

Tools of the Trade: Espresso

We discussed three separate HTML & CSS tools that you should be familiar with for this Semester.

I have created a Text Editors reference page for you here.

Refresher on HTML & CSS

Our first big task is to review HTML & CSS techniques in an effort to get everybody more comfortable hacking away at their websites.

Download the choppingblock / html-css-demos files from github.com here

• We reviewed the basic HTML tags:
  • HTML Headers: <h1> to <h6> Tags
  • HTML Links: <a href="#">link</a> Tags
  • HTML Unordered Lists: <ul></ul> Tags
  • HTML Ordered Lists: <ol></ol> Tags
  • HTML Images: <img /> Tags
  • HTML Paragraph: <p></p> Tags
• We reviewed the HTML tags used for styling regions of pages:
  • HTML div: <div></div> Tags
  • HTML div: <span></span> Tags
• I showed csszengarden.com and the possibilities that CSS can bring to your HTML sites.
• I showed how to format a basic page using Espresso.

Files

• Download the choppingblock / html-css-demos files from github.com here

Assignment

Your task this session is to simply become familiar with the tools and HTML shown in class.

• Download the files
• Look over the HTML in the first few folders
• Download and open up Sublime text
• Download and open up Espresso, see if you can edit some CSS.

And spend some time refreshing your CSS/HTML Skills:

Complete the following lessons at Code Academy

CSS: An Overview

CSS Selectors

CSS Positioning

Next week, make sure you bring some higher resolution files of your images to class.