Difference between revisions of "Class:Digital Portfolio 2015/Week 2"
(→Reviewed Text and CSS Editors) |
|||
| Line 25: | Line 25: | ||
=== Reviewed Text and CSS Editors === | === Reviewed Text and CSS Editors === | ||
| + | |||
| + | Quick solid overview on design and HTML editors are in a few of the slides here: | ||
| + | [http://choppingblock.com/presentations/tools-of-the-trade-2014/#/12 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: | ||
| + | [http://choppingblock.com/presentations/tools-of-the-trade-2014/#/32 Tools of the Trade: Espresso] | ||
We discussed three separate HTML & CSS tools that you should be familiar with for this Semester. | We discussed three separate HTML & CSS tools that you should be familiar with for this Semester. | ||
Revision as of 18:44, 19 May 2015
Contents
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
Open Questions
Notes
The "size" of the web
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:
- We reviewed the HTML tags used for styling regions of pages:
- 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.
Video Notes
Section A
- Handy Utilities Overview
- Responsive Websites Overview
- Image Compression for Photographers 101
- Animated GIF's and Cinemagraphs
Section B
- Data Backup Solutions for Photographers
- Handy Utilities Overview
- Responsive Websites Overview
- Image Compression for Photographers 101
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 TextMate, install the Bundles if you like.
- Download and open up Sublime text
- Download and open up Espresso, see if you can edit some CSS.
If you can, bring some of your images to class next session.
