Difference between revisions of "Class:Digital Portfolio 2016/Week 3"
(→Video Notes) |
(→Assignment) |
||
| Line 90: | Line 90: | ||
: [http://www.codecademy.com/courses/web-beginner-en-TlhFi/0/1 CSS: An Overview] | : [http://www.codecademy.com/courses/web-beginner-en-TlhFi/0/1 CSS: An Overview] | ||
: [http://www.codecademy.com/courses/web-beginner-en-WF0CF/0/1 CSS Selectors] | : [http://www.codecademy.com/courses/web-beginner-en-WF0CF/0/1 CSS Selectors] | ||
| − | : [http://www.codecademy.com/courses/web-beginner-en-6merh/0/1 CSS Positioning] | + | : [http://www.codecademy.com/courses/web-beginner-en-6merh/0/1 CSS Positioning] |
For class on June 6th: | For class on June 6th: | ||
| Line 98: | Line 98: | ||
Also: | Also: | ||
| − | * Compress 10 of your photos using the techniques shown in class (above), bring them to class. | + | * Compress 10 of your photos using the techniques shown in class (above), bring them to class. --> |
Revision as of 22:06, 5 June 2016
Contents
Last Week
- Review Last Week
- Hosting Your Sites
- Introduction To Digital Portfolio Techniques
- Photography Site Building (CMS) Solutions
- The "size" of the internet
This Week
- Recap Optimizing Images for The Web
- Tools: Text Editors
- HTML/CSS Quick Review
Open Questions
Notes
Recap Optimizing Images for The Web
Last session we covered many aspects/techniques related to optimizing your images for the web.
- Image Format Reference
- I forgot to show the excellent tool Imageoptim for further compressing your images
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.
Photography Site Building (CMS) Solutions
There was a time where a Photographer would build (or hire somebody to build) their website from scratch. Adding and removing content from these websites would require somebody to edit the HTML and upload the changes to a web server. Successful websites are no longer built like this... Content Management Systems (CMS) have redefined how the internet works. These tools are either hosted, or need to be installed on your webserver to run.
This week I introduced the class to the concept of Content Managed Solutions. We will be spending a lot of time looking at these options.
I have created a Site Building (CMS) Solutions reference page for you here.
Video Notes
Files
- Download the choppingblock / html-css-demos files from github.com here
