Code_with_Christie

In Class

Pre-Course Survey | Fill this out first

• Intro to HTML & CSS and an overview of interactive design project management & workflows.
• Responsibilities of the designer and methodologies for working with clients and developers discussed.
• Color Systems - CMYK (subtractive) vs. RGB (additive) colors
• Digital/web color profiles: RGB & HEX
• Vector vs. Raster/Bitmap Graphics
• Wireframing basics

Homework for Next Class

Homework: *see syllabus for full homework descriptions

• You will be working on the Web Track (HTML & CSS) on Codecademy.com (username provided in class)
• PART 1| Complete Unit 1: Introduction to HTML, Unit 2: HTML Structure: Using Lists, and Unit 3: HTML Structure: Tables, Divs, and Spans on codecademy this week.
• PART 2| Sketch Sitemap & Wireframe
• PART 3| Technical Details - Download & Install Sublime Text 3 on your computer

Links:
Pre-Course Survey | Fill this out first
Codecademy| Login to your Codecademy account (provided in class) & start HTML & CSS Track
Sublime Text 3
Firebug

Readings & Resources

Readings:
An Overview of Web Development for Designers
Website Structure
An Overview of Preparing Assets for the Web
Short Web Reading on Color

In Class

• HTML & CSS Basics
• Review web structure reading.
• More on wire-framing; Wire-framing vs. Prototyping—difference of purpose
• In class coding exercises: inspecting elements in browser.

Homework for Next Class

Homework: *see syllabus for full homework descriptions

• PART 1| You must complete Unit 4: Introduction to CSS on Codecademy this week.
• PART 2| Create a pixel-perfect wireframe in Adobe Illustrator
• PART 3 | Design Assets- Start exploring color palettes, sketching logos, design elements, etc.
• PART 4| Technical Details- Make sure you have both Chrome and Firefox installed on your computer. Make sure developer tools for chrome is enabled and that firebug is installed on Firefox. Additional browsers (safari, etc are also helpful to have installed).

Links:
Sublime Text 3
Firebug

Readings & Resources

Readings:
Inspecting Elements in the Browser
Additional Resources:
960 Grid Template (AI File)

In Class

• Interactive Wireframing
• CSS Questions and Concerns

Homework for Next Class

Homework: *see syllabus for full homework descriptions

• PART 1| You must complete Unit 5: CSS Classes and IDs on Codecademy this week.
• PART 2| Make Interactive Wireframe
• PART 3 | Design Assets- Work on color palettes, sketching logos, design elements, etc.

Readings & Resources

Readings:
Designing Mockups
iPhone 6 Demystified
Designing Mockups
Videos:
InVision Project Basics
*Note: you do not need to use their desktop sync app.
Replacing Screens in InVision
Interactive Prototyping with InVision
Retina Sizes with InVision

In Class

• Interactive Prototyping
• CSS Questions and Concerns

Homework for Next Class

Homework: *see syllabus for full homework descriptions

• PART 1| You must complete Unit 6: CSS Element Positioning on Codecademy this week.
• Part 2| Begin a Prototype (Adobe Illustrator & InVision)
• PART 3| Refine your prototype & design elements.

Readings & Resources

Readings:
CSS Review

In Class

• Advanced CSS topics
• CSS Questions and Concerns

Homework for Next Class

Homework: *see syllabus for full homework descriptions

• PART 1| Complete the CSS Review Exercise provided (zip file)- Read the directions, edit and save a new version of the folder, zip your work & send to me.
• PART 2| Begin attempts to code your final project.

Readings & Resources

Readings:
Advanced CSS
CSS Assignment Directions
Additional Resources:
CSS Assignment Directions
CSS Assignment Zip

In Class

• Review of Advanced CSS Concepts
• Libraries & Frameworks
• Github & ghpages

Homework for Next Class

Homework: *see syllabus for full homework descriptions

• PART 1| Create a Github Profile and install for Mac or PC.
• PART 2| Download Foundation (as we reviewed in class) and play around with the framework. Make color and layout alterations and add new texts, links, and other elements. Save the experimental site folder you created, zip it and publish it using ghpages.
• CONTINUING | Work on your code.

Links:
Github
Foundation

Readings & Resources

Readings:
Github Basics for Designers
sing Libraries &Frameworks

In Class

• FTP & SFTP
• Time will be used in class reviewing code and student projects.

Homework for Next Class

Homework: *see syllabus for full homework descriptions

• PART 1| Work on coding your final project. We will review progress in class.
• PART 2| Technical Details- Download Filezilla for your computer.
• FINAL PROJECT REVIEW NEXT CLASS!

Links: Download Filezilla but be carful not to install sourceforge malware- if you need help email me.

Readings & Resources

Readings:
Using FTP

In Class

• COURSE CONCLUSION – FINAL PROJECT DUE in class or few days following
• This class will be spent reviewing and troubleshooting student projects.

Homework for Next Class

Homework: *see syllabus for full homework descriptions

• COURSE CONCLUSION – FINAL PROJECT DUE in class or few days following

Readings & Resources