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
  • Understanding and using the Web Developer tools in Chrome and Safari
  • A general discussion of applications and development environments
  • The anatomy of a CSS rule, formatting, and basic CSS for layout

Assignments

See github

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
  • Structuring your CSS
  • Selectors, declarations, properties and values
  • External, embedded and inline style sheets
  • DOM scripting - selecting items, attaching events, manipulating HTML with classList

Read What is Code.

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
  • DOM scripting continued - more on events and HTML manipulation.
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. Basic Terminal use for web designers.

  • floats vs. absolute positioning for layouts
  • margins and gutters
  • min- and max-width properties
  • the overflow property
  • using the terminal on Mac to navigate and perform simple tasks
Back to Top

Session Five

Objectives

In this session we continue working on styling a complete page and introduce “tooling” using Node Package Manager to perform simple tasks such as automatically refreshing the browser using Browser Sync.

  • NodeJS’s package manager NPM
  • Responsive images and media
  • Clearfix, floats and Flexbox
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
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
  • A gentle introduction to GIT and Github
  • Writing and processing SASS
Back to Top

Session Eight

Objectives

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

  • CSS Media Queries
  • Media Queries and multi-column layout
  • Mobile first design methodologies
  • Animation with CSS
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 it works with CSS to create interactive effects.

  • Advanced DOM scripting
  • Unobtrusive scripting
  • Designing for accessibility
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.

Back to Top