Introductions
Welcome & Syllabus review
root folder setup
Intro to Brackets code editor
HTML5 basic template at FreeCodeCamp
W3schools
Get ALL the textbooks
READ:
About the HTML5 template here
HTML&CSS:*
Intro & Ch1: Structure
*when not specified,
readings are from this text
complete Lab 0
Code Tutorials
freecodecamp- Basic HTML & HTML5: first 8 lessons
codecademy- 1-Elements and Structure and 4-Semantic HTML
Lab 1 - markup article, poem, recipe
HTML5 semantic elements
More on Atom
FileZilla & SFTP to ADA accounts
wrapper, links, lists, nav
html validator
READ
Ch3: Lists
Ch4: Links & Ch5: Images
Code Tutorials
freecodecamp- Basic HTML & HTML5: next 9 lessons
codecademy- Introduction to HTML
w3schools- Links & Lists
SFTP to ADA accounts using Cyberduck
wrapper, links, lists, nav
html validator
Lab 2 Gallery
Image resize & optimize in Photoshop
Sitemap
READ
Ch16: Images
DMMT: Pg.9, Ch 1 & 2
LinkedInLearning:
HTML Essential Training
Ch.4 -Structuring Content
-first 4 videos
DUE Lab 1
Code Tutorials
freecodecamp- Basic HTML & HTML5: the last 3 lessons
codecademy- Semantic HTML
w3schools- Intro to CSS
CSS reset
CSS styling text
CSS background color, lorem ipsum
Positioning
CSS Zen Garden
Google webfonts
sitemap / catch up
READ:
Ch8: Extra Markup
Ch10: Intro to CSS
Ch11: Color
LinkedInLearning:
HTML Essential Training
Ch.4 -Structuring Content
-next 4 videos, starting with "the section element"
Code Tutorials
freecodecamp- Intro to Basic CSS - first 25 lessons
codecademy-
Learn CSS- 1-selectors & visual rules
Simple CSS centering method for Lab 2 pages
CSS styles for homepage
Google webfonts
Lab 3 - styled horizontal nav bar
LinkedInLearning:
Complete HTML5 Document Structure
DUE Lab 2
Code Tutorials
freecodecamp- Basic CSS - all
CSS reset
Project 1 Artist Subject - begin research
Overview of Project 1
CSS styling text
CSS background color, lorem ipsum
Positioning
CSS Zen Garden
Google webfonts
READ Ch13: Boxes
Ch12: CSS Text
Code Tutorials
codecademy-
Learn CSS - 2, 3, 4
Lab 4: Grid systems for responsive layout
zurb foundation foundation xy grid system framework
example: The New Yorker
Complete CSS for main homepage
Grey Box Method, wireframing
Information Architecture / sitemap
LinkedInLearning:
3. Grouping Content with HTML5
DUE: Project 1 Artist Research
Lab 3 - Styled Horizontal Nav bar
Lab 4 - Part 2 - adding CSS
Typography
Color
Code snooping
Chrome Developer Tools
READ: Ch12 - CSS Text
DUE: Project 1 Sitemap
Styletile and Wireframe
Code snooping
Chrome Developer Tools
READ: Ch9 - Video & Audio
DUE: Project 1 StyleTile & Wireframe
Review of example page structures
for Project 1
Embedded media
Extra Credit:
Create media page with
embedded video & audio, add a link to global nav
DUE: Lab 4
work on Project 1
Intro to Project 2
Intro to Interdisciplinary Interaction Design Research & Presentation
READ:
Interdisciplinary Interaction Design (IID)
DUE: Project 1
Extra Credit: Create 2 favicons
one for main homepage and
a different one for Project 1
Code snooping
Chrome Developer Tools
Extra Credit:
Gradients page
Code Quiz during this week
READ:DMMT Ch 1-5
DUE
Project 2 Research /
Concept statement
IID presentation
Extra Credit:
Embed video and audio in a page and add a link in global nav
work on Project 2
Long scrolling page structure
work on Project 2
READ:
DMMT: Ch 6 - 9
Long scrolling page with Zurb
Content inventory
work on Project 2
READ:
Ch19: Web Hosting etc
DUE: Project 2
Development docs:
Sketches -- mobile & desktop
Styletile
Practical info & web hosting
Peer Reviews of Project 2
work on Project 2
READ
DUE Project 2 = 80%
Project 2 Presentations
Please note: The time for your final is
NOT the same as the usual class time!
Timed slide presentation with:
.screenshots of all pages of final site.
.brief description of your site concept.
.Describe 2 design/coding challenges that you faced and what you did to solve each.
.Show screenshots of code at LARGE, READABLE SIZE, to clearly illustrate the problem and the solution.
DUE: Project 2 Website & Presentations