Front end foundations CSS & HTML5 and JavaScript

Course Description

This rigorous, hands-on introduction to web design will advance your development skills by showing you how standards-based HTML5, CSS, and JavaScript work together to create the modern web. Gain an introduction to techniques such as responsive design, progressive enhancement, and unobtrusive scripting that ensure superior results in all browsers—desktop, mobile, and app. Examine visual design and typography, and explore how to use GIT for versioning and workgroups, text editors (focusing on Sublime Text), CSS preprocessors, and contemporary frameworks such as Bootstrap. This class is appropriate for beginners as well as those with a working knowledge of HTML and CSS. General computer literacy and familiarity with browsers is assumed.

Projects and Grading

Midterm

For the midterm you will translate an image provided by the instructor into an HTML page and style it using CSS.

Final Project

There are very few requirements for this project other than it must be a web page or series of web pages that incorporate the concepts and techniques covered in class.

It is not required that you prepare a specific number of pages. Depending on the design goals, one good template could suffice for many pages and it is possible to spend as much time on a single page as on an entire site.

Making the page "mobile friendly" is optional but you should, at the very least, include some basic allowances for smart phones and tablets.

Homework

Readings and homework will be assigned. For your own benefit you should attempt the homework assignments.

Grading & Etcetera

Final project 50%
Midterm: 50%

Due to the nature of the subject material the contents of this syllabus are subject to change.

Facilities

You will be provided with space on an NYU server - http://oit2.scps.nyu.edu/.

The sFTP passwords are your first initial plus your last initial plus 123890 (e.g. dd123890) and the usernames are the first seven letters of your last name plus your first initial (e.g. devereld). The port number is 22 (or SFTP). You pages should be stored inside folders within the "web" directory and can be accessed by appending a tilde plus your user name after the server name (e.g. http://oit2.scps.nyu.edu/~devereld).

Do not store irreplaceable material on this server. Be sure to keep a copy of all your important files.

Class Sessions

Session One

Objectives

Understand the basic principles of semantic HTML and the evolution of web development by updating a table-based layout to a standards-based layout. This session will cover:

  • The concept of separation of content, presentation and behavior
  • Installing and using the Firefox Web Developer Toolbar and Firebug
  • A general discussion of applications and development environments
  • The anatomy of a CSS rule

Assignment

Download the “done” files and style the page using CSS to reinsert the margins removed by the reset. Use CSS to add additional visual appeal to the page including a custom font from Google’s font library.

Students requiring additional review may wish to view the videos on the server in the tuts+ html:css folder and review css-html.pdf chapters one and two (available from the class files link on the home page).

Back to Top

Session Two

Objectives

Be able to manipulate boxes via css in both quirks and standards mode and describe the different kinds of CSS selectors (element, class, ID, etc.). You should be able to analyze a simple CSS selector.

  • Simple page layout with CSS
  • Using unordered lists to create navigation
  • Understand the box model, its history and (ab)uses
  • Structuring your CSS
  • Selectors, declarations, properties and values
  • External, embedded and inline style sheets

Assignment

Download the session 2 done files or use your own copy. Continue your redesign paying attention to layout, color, and typography.

Incorporate the new nav tab bar we constructed in class program. Use it to navigate between two pages, the appropriate tab should be highlighted indicating which page you are on. You may alter the HTML, moving, removing or adding items as you see fit in order to make your job easier.

Read What is Code.

Bonus - Using the html for the plants Gallery Slides we constructed in class, create two layouts that match the two images.

Reading

  • CSS Mastery - chapters one and two (structured code and selectors)
  • Margin Collapsing - a simple introduction
  • A handy CSS reference
  • The problem with CSS3 - e.g. Gradients support
  • The CSS3 generator
  • Fitt’s Law - “the time required to rapidly move to a target area is a function of the distance to the target and the size of the target”
Back to Top

Session Three

Objectives

At this point you should be very comfortable with the differences between CLASS and ID styles and know how to use them effectively. In this class we review list-based menus and expand our use of lists to include definition lists and floats.

  • Reset Stylesheet
  • Reviewing Floats
  • Styling unordered, ordered and definition lists

Assignment

Using the flower image gallery HTML file created in class try to match the layouts in the two additional images.

Incorporate the sushi definition list into your previous assignment and, by changing the css, style it to match your design. (If you have not completed the assignment from session 2 you will need to do so first.)

Download the midterm files and prepare a sound, semantically structured HTML (version 4 or 5) document. Don’t worry about implementing columns or any visual design features (except for using the CSS Whitespace property to preserve line breaks as discussed in class). Be sure to validate your code.

Reading

Back to Top

Session Four

Objectives

Understand basic design patterns for CSS multi column page layouts using CSS. Understand why absolute positioning is not a recommended solution for page layout in most cases. Understand the value of opposing floats for layout.

  • floats vs. absolute positioning for layouts
  • margins and gutters
  • min- and max-width properties
  • faux columns
  • the overflow property

For Next Class (Assignment)

  • Download the completed files and create the navigation buttons using CSS gradients instead of the sprite. Be sure to use the classes provided by Modernizr to ensure that only modern browsers that support gradients use them. Retain the sprite based buttons for older browsers. Use this online gradient editor for guidance.

Reading

Back to Top

Session Five

Objectives

Styling a complete page - Basilica and Co..

  • The importance of structured HTML
  • CSS Hotspots
  • CSS Gradients
  • Intro to media queries

Assignment

Using the files from session 5 adjust the HTML and CSS in order to style the footer so it matches or improves on the image. You should try to use some of the jQuery techniques covered in class to make the beta burst clickable/hoverable and show a pop over.

Reading

Back to Top

Session Six

Objectives

Expand on your knowledge of selectors in order to avoid unnecessarily complex HTML constructs and maintain semantic goodness. Understand the concept of progressive enhancement. Using web services to include custom fonts on your web page.

  • “Classitis” - an overabundance of classes and how to avoid it using…
  • Child and first child selectors
  • Adjacent sibling combinators
  • nth child selectors

Assignment

Using the files from session 6 complete the design of the top portion of the page to display nicely when the browser is less than or equal to 480px wide (e.g. use the media query section of the CSS).

Reading

  • CSS Mastery - chapter eleven
Back to Top

Session Seven

Objectives

In this class we review css grid-based frameworks, first by creating our own and then by looking at the Blueprint grid system.

  • Grids in graphic design and web development
  • The Blueprint grid system
  • The 960 grid system

Assignment

Apply media queries to the simple fluid page constructed in class.

Reading

Back to Top

Session Eight

Objectives

An examination of advanced CSS3, vendor specific properties, typography, and CSS for the mobile web.

  • Modernizr
  • Print style sheets
  • CSS Media Queries
  • Media Queries and multi-column layout

Assignment

Continue to work on your final project

Reading

Handcrafted CSS - chapters two and three

Back to Top

Session Nine

Objectives

Understand the importance of the Document Object model (DOM), the concept of separating style, content and behavior). An overview of JavaScript (and JavaScript libraries) and how they work with CSS to create interactive effects.

  • unobtrusive scripting
  • designing for accessibility
  • a brief introduction to CSS and CSS selectors in jQuery

Assignment

Prepare final project for next class.

Reading

Back to Top

Session Ten

Objectives

Understand the use of advanced CSS3 including:

  • CSS3 transforms
  • CSS3 transitions
  • CSS3 key frame animation

Assignment

Final projects due.

Reading

Back to Top