Final CSS

I finished the website for Bourland Music. The requirements were to make a responsive website and use some of the css styles we had learned in class. Check! One thing I did was as the page each box flips up on the page one at a time.

I tried to do a metro style theme website. It turned out ok.

CSS

Basically all we do in this class is have a lecture, an in class assignment that somehow never works, and then we work on our websites. I decided to re do my website that I did for Bourland Music decided to go with Metro style this time.

Some topics we have covered are CSS3 text-shadow property,  CSS sprites, nth child and Media Queries.

Welcome to CSS

Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation semantics (the look and formatting) of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML, but the language can also be applied to any kind of XML document, including plain XML, SVG and XUL. CSS can be both a tricky and easy to learn. The syntax itself is easy, but some concepts can be difficult to understand. Web design might not be the most accessible area to everyone, but CSS and HTML can be very useful, and these are two parts of coding which are really easy. I mean to change the color of your font you just need to type: “color:red”, does it get easier than that?

CSS

 

CSS Cascade from Russ Weakley

 

The Future of CSS Layout from Zoe Gillenwater

HTML5 & CSS3 from ianlintner

Web Trends

 

Web Design: 20 Hottest Trends To Watch Out For in 2013

 

Prophets trends in Interactive Design 2012 from Prophets Agency

Way to Design Lovely Windows 8 Metro Style Apps from David Chen

Responsive Design

Responsive Design from Livefront

CSS has a simple syntax and uses a number of English keywords to specify the names of various style properties. A style sheet consists of a list of rules. Each rule or rule-set consists of one or more selectors, and a declaration block. Prior to CSS, nearly all of the presentational attributes of HTML documents were contained within the HTML markup; all font colors, background styles, element alignments, borders and sizes had to be explicitly described, often repeatedly, within the HTML. CSS allows authors to move much of that information to another file, the style sheet, resulting in considerably simpler HTML.

Headings (h1 elements), sub-headings (h2), sub-sub-headings (h3), etc., are defined structurally using HTML. In print and on the screen, choice of font, size, color and emphasis for these elements is presentational.

Prior to CSS, document authors who wanted to assign such typographic characteristics to, say, all h2 headings had to repeat HTML presentational markup for each occurrence of that heading type. This made documents more complex, larger, and more difficult to maintain. CSS allows the separation of presentation from structure. CSS can define color, font, text alignment, size, borders, spacing, layout and many other typographic characteristics, and can do so independently for on-screen and printed views. CSS also defines non-visual styles such as the speed and emphasis with which text is read out by aural text readers. The W3C has now deprecated the use of all presentational HTML markup.

Course Substitution

My last quarter!!!!! I do not have an internship I was able to do a Course Substitution. Now instead of the internship I am taking

IMD235 Style Sheet Scripting

The course syllabus does not list anything about what is going to be taught in the class.
I did find this from  the academic catalog but what is listed in the catalog is usually not what we do in class especially with the prof teaching this class

IMD235 Style Sheet Scripting (3.0 cr)
(Prerequisite: IMD222 Intermediate Scripting Languages)
Students will develop and refine skills in the application of Cascading Style
Sheets for creating standard-based XHTML layouts. Browser compatibility
will be addressed, along with practical solutions to various common
design problems.

This is about all the info I have on the class but since I have already been to one class I know everything that is listed is wrong and not what we are going to do!!

TYPICAL Ai!!!!!!!!!

Weekly Outline

Week 1:                 Lecture:               Course Introduction. Review general class and computer protocols.

  General Overview of Projects

Lab:                         4 ideas concepts for Project 1

HWK:                 Homepage and Secondary page design for Project 1

Week 2:                 Critique:             Review of Homework

Lecture:              Current trends

                                Custom fonts

HWK:                    Revisions to Homepage Design

                                Code Homepage

Week 3:                 Critique:               HWK Critique

Lecture:                Designing for responsive layouts

Lab:                       Work on Designs

Lecture:                 Textures and Details

HWK:                    Revise designs

  Code Second Page

Week 4:                 Critique:               HWK Critique

Lecture:                CSS3 animation

Lab:                      Animation Mini Project 1

HWK:                   Code Third and Fourth page

Week 5:                 Critique:               Design review

Lab:                       in class work

HWK:                    Finalize website

Week 6:                 Critique:               Project 1 Critique

Lecture:                CSS3 tutorials

Lab:                       CSS3 Mini project

HWK:                    Homepage and Secondary page designs

Week 7:               Critique:               HWK Critique

Lecture:                In Class Mini Project

HWK:                   Revise Designs

                                  Code Homepage

Week 8:                 Critique:               Project 2 Review

Lecture:                  Styles on the web

Lab:                       Mini Project

                                  Mini Project Group Pitch

Project:                 Finalize Design

  Code Second page design

Week  9:                Critique:               Project progress            

Lab:                       Project Pitch

Project:                 Code third and fourth page

Week  10:              Lab:                       In class work

Week 11:               Critique:               Final Class Presentations