Course
Grading
Resources
Beyond web one
Preparation
Instructor's Office
Student Lounge
Modules
M1 HTML&Web
>
M1.1 Headings and paragraph
M1.2 Insert Image
M1.3 Tags you should know but you should not use
M1.4 Superscript and Subscript
M1.5 Quote and blockquote
M1.6 Abbreviations
M1.7 Citation
M1.8 Delete tag
M1 HomeWork
M2 HTML elements
>
M2.1 WYSIWYG
M2.2 Semantic HTML
M2.3 Ordered Lists
M2.4 Unordered list and it's styles
M2.5 Definition list
M2.6 Nested list
M2.7 Text Generator
M2 HomeWork
M3 Site structure
>
M3.1 Division element
M3.2 Links
M3.3 Site structures in folders
M3.4 Use list for navigation
M3.5 Image format
M3.6 Export image for web
M3.7 Use images as links
M3.8 Alt and title attribute for image
M3.9 Image width and height
M3 HomeWork
M4 Introduction to CSS
>
M4.1 Intro to CSS
M4.2 Default browser styling
M4.3 CSS syntax
M4.4 How to include your CSS
M4.5 Universal selector
M4.6 Type selector
M4.7 Class and Id
M4.8 Multiple classes
M4.9 Element specific selector
M4.10 Decedent selector, child selector and more
M4.11 Pseudo selector
M4.12 Cascade rules
M4 HomeWork
M5 Color and Type
>
M5.1 CSS syntax to define color
M5.2 Hexadecimal Color Values
M5.3 Other less used methods
M5.4 Background-color property
M5.5 Setting body color
M5.6 Adobe Color (Kuler)
M5.7 All about font
M5.8 Font variant vs. Text transform
M5.9 Text align
M5.10 Font weight
M5.11 Line-height
M5.12 Letter spacing
M5HomeWork
M6 The CSS Box Model
>
M6.1 CSS reset
M6.2 CSS box model
M6.3 Display
M6.4 Width and height
M6.5 Margin and padding
M6.6 Centering elements
M6.7 Border
M6.8 Float+Clear
M6.9 Navigation
M6.10 Design with grid (fixed width)
M6.11 Full width design
M6.12 An example
M6HomeWork
MidTerm
>
Midterm Rubric
Midterm Presentation
Midterm Critique
M7.1 Code Commenting
M7.2 Special Characters
M7.3 Video, audio, flash and embed
M7.4 Using a Web Inspector
M8 Advanced Typography
>
M8.1 Example of web type
M8.2 Using Google Font
M8.3 Using TypeKit
M8.4 Embed your own font
M8.5 Use WhatFont
M8.6 Font color and contrast
M8HomeWork
M9 Advanced styling with Images
>
M9.1 Figure element
M9.2 Image Grid with Figure
M9.3 Styling backgrounds
M9.4 Background shorthand
M9.5 Tiling background patterns
M9.6 Using background to create borders
M9.7 Layering effect
M9.8 Image sprite
M9HomeWork
M10 Site planning
>
M10.1 Site Objectives
M10.2 Functional specs
M10.3 Create personas
M10.4 Site map and wireframes
M10.5 Interactive prototyping
M10.6 Design
M10.7 QA
M10HomeWork
M11 Tables and forms
>
M11.1 Table
M11.2 Table styling
M11.3 Using psuedo selector
M11.4 Make a calendar with table
M11.5 Forms
M11HomeWork
M12 Advanced CSS
>
M12.1 CSS positioning
M12.2 Position: fixed
M12.3 Position: relative
M12.4 Position:absolute
M12.5 Center elements without width
M12.6 z-index
M12.7 Overflow and text break?
M12.8 Column property
M12HomeWork
M13 Advanced CSS
>
M13.1 Border-radius
M13.2 CSS gradients
M13.3 CSS box shaddows
M13.4 CSS transform
M13.5 CSS transition
M13.6 CSS animation
M13.7 CSS filters
M13.8 Fun with CSS
M13HomeWork
M14 Design as Profession
>
M14.1 Code validation
M14.2 Spell check
M14.3 Image compression
M14.4 Cross browser compatibility (can I use)
M14.5 SEO
M14.6 Google Analytics
M14.7 Create a style guide
M14HomeWork
Final Presentation
Examples
CSS animation