Code_with_Christie

Tutorial Winter 2014-2015

Intro to HTML & CSS: 6 Week Overview with Christie Mealo

Course Details: This overview of HTML and CSS is intended for designers and design students with no, or very minimal, knowledge of HTML and CSS. The goal of the course is to help designers understand the basics of front-end web development, code, and website structure so that they may work more effectively with developers and on interactive design projects. By the end of this course students should be able understand how to write basic HTML and CSS from scratch and be able to code basic websites for personal, conceptual, and prototyping usage.

Class start date: Sunday, December 21, 2014
Class end date: January 31, 2015
CLICK to expand the Weekly Assignments Below

Week 1: 12/21/14

Intro to HTML

Part 1

Fill out and submit the survey
Pre-Course Survey

Part 2

Make a Codecademy profile; make sure it's public. Send me the link to your profile so I can monitor your progress.

Part 3

You will be working on the Web Track (HTML & CSS)
You must complete the first half: HTML 1, HTML 2, HTML 3 this week.
If you have any problems or questions let me know.

Part 4

Readings:
An Overview of Web Development for Designers

Week 2: 12/28/14

Intro to CSS

Part 1

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).

Part 2

Finish the codecademy HTML & CSS tutorial
Please Note that the CSS section will take you longer. Do Not Procrastinate!
Also, do not let CSS Layout and formatting upset you; we will go over tricks to make it easy once you learn the hard way.

Part 3

Readings:
CSS Review
Inspecting Elements in the Browser

Week 3: 1/4/15

CSS Layout Review | Website Structure

Part 1

Download Sublime Text 3

Part 2

Complete Week 3 Exercises
Read Directions
Download the Zip file

Part 3

Readings:
Website Structure
Preparing Assets for Web
Designing Mockups
Additional Resources:
iPhone Resolutions

Part 4

Think about your final project content, structure, and resources. Create a basic visual or text sitemap & Rough Sketch Wireframe. If you cannot think of useful subject matter, use yourself and content relating to yourself.
Grid Template:
960 Grid AI Template

Week 4: 1/11/15

Advanced CSS | Intro to Libraries & Frameworks

Part 1

Create a Github Profile and istall for Mac or PC
Also create a Profile on Code Pen or JS Fiddle

Part 2

Readings:
Advanced CSS
Using Libraries & Frameworks
Github Basics for Designers

Part 3

Complete Site Mapping for final Project. Start coding your final project; If you want to use gh pages then you can push to them as you go.

Week 5: 1/18/15

FTP | Fun Stuff, Tips, & Tricks

Part 1

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

Part 2

Readings:
Using FTP
Front-End Tips, Tricks, & Resources

Part 3

Work on your final project, try to refine & debug as many issues as you can.

Week 6: 1/25/15

Conclusion

Part 1

Finish Website and either leave published publicly on GH Pages or Publish via FTP. Must understand FTP method of publishing.

Part 2

Readings:

Looking Forward: JS/JQuery Preview

Part 3

Review final project with me