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, text editors (focusing on Sublime Text), and CSS preprocessors (focusing on SASS). 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.

By the end of this course, students will be able to create a semantically sound web page, format that web page with Cascading Style Sheets, and add behaviours to it using JavaScript.

Projects and Grading


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

Final Project

This project 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.


Readings and homework will be assigned.

Grading & Etcetera

Final project 50%
Midterm: 50%

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

For SPS non-degree grading policies see:


You will be provided with space on an NYU server -

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.

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


NYUSPS policies regarding the Family Educational Rights and Privacy Act (FERPA), Academic Integrity and Plagiarism, Students with Disabilities Statement, and Standards of Classroom Behavior among others can be found on the NYU Classes Academic Policies tab for all course sites as well as on the University and NYUSPS websites. Every student is responsible for reading, understanding, and complying with all of these policies.

The full list of policies can be found at the web links below:

Class Sessions

Session One


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
  • HTML structural and semantic tagging
  • The anatomy of a CSS rule, formatting, and basic CSS for layout
  • The CSS box model


See github

Back to Top

Session Two


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
  • CSS selectors, declarations, properties and values
  • External, embedded and inline style sheets
  • Introduction to the console
  • DOM scripting - selecting items, attaching events, and manipulating HTML

Read What is Code.

Back to Top

Session Three


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


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


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


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


In this class we review css Flexbox and introduce css Grid syntax for page and page element layout.

  • Grids in graphic design and web development
  • A gentle introduction to GIT and Github
  • Writing and processing SASS
Back to Top

Session Eight


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


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


Understand the use of advanced CSS3 including:

  • CSS3 transforms
  • CSS3 transitions
  • CSS3 key frame animation


Final projects due.

Back to Top