Web Development

Front-End Web Development

Students learn to code, and implement their own designs by learning HTML, CSS, and JavaScript.

Unit 1: The Basics

HTML Basics

  • Apply HTML tags:<head>,<link>,<script>,<style>,<meta>to web pages
  • Apply tags to HTML documents to effectively section content
  • Differentiate between the various image file types
  • Predict image paths and apply relative paths to img src tags
  • Describe how the Internet delivers web pages to the browser

CSS Basics

  • Apply and explain the CSS “cascade” including: importance, specificity and inheritance
  • Differentiate between basic web color principles: RGB, RGBA, hexadecimal color and HSL
  • Experiment with CSS properties and values to change the styling of a page

Advanced CSS

  • Define CSS Box Model, and demonstrate the ability to properly manipulate the “box” around tags
  • Differentiate between classes vs IDs and apply best practices when implementing
  • Select nested elements to apply styling

Page Layout

  • Draw the DOM Tree for web pages containing sections
  • Apply header, footer, sidebar, and multi-column layouts to develop a web page
  • Experiment and predict effects of floats and clearing CSS positioning
  • Describe the use of Normalize and reset.css files

HTML/CSS Lab

Practice web development by transforming a design comp into an HTML and CSS web page

Introduction To Programming

  • Practice programmatic thinking by writing pseudo code to solve a basic problem
  • Define web site behavior and the practical uses of JavaScript
  • Predict DOM output / changes by reading JS code

JavaScript Basics (Variables, Conditionals)

  • Define variables and identify best cases to use them
  • Differentiate between strings, integers and floats
  • Apply conditionals to change the programs control flow
  • Describe arguments as they relate to functions
  • Apply the JS click function

JavaScript Functions

  • Describe arguments as they relate to functions
  • Predict values returned by a given function
  • Differentiate between named and anonymous functions

Intro To jQuery

  • Utilize jQuery tree traversal techniques to access and manipulate DOM elements
  • Utilize jQuery Docs to apply functions

Arrays and Traversing The DOM

  • Apply JS and jQuery knowledge to program a carousel
  • Define arrays and collections
  • Practice using indexes to access array elements

Unit 2: Building In Concert

Lab Session

Apply programming skills to plan and build a full website with HTML/CSS and JS

Review and Refactor

  • Apply switch blocks as a replacement for if/else if/else
  • Describe the concept of “this” as it applies within jQuery anonymous functions
  • Define refactoring and describe why it is important
  • Learn the basics of CSS/JS refactoring and be able to apply these concepts to their own code
  • Differentiate ways to debug code and how to apply the concepts to their own code

Responsive Web Design

  • Articulate that responsive design is more design than code
  • Know the difference between fixed and responsive layouts and understand the difference between fluid and elastic layouts
  • Apply media queries to web sites to achieve a responsive layout
  • Implement media queries to change layout on mobile devices

Web Forms

  • Understand what the form tag is used for and what the method, action, and enctype attributes are used for
    Be able to differentiate the different types of inputs and why/where we would use each
  • Understand how to group elements by name
  • Be able to perform pseudo-styling of input elements that the browser won’t let us directly style

Special Topic