CS301: Coding in HTML & CSS
Course Description
This course provides a comprehensive introduction to coding in HTML and CSS. Upon
completion, students will be proficient with fundamental web development principles
such as markdown languages, code-based styling, and accessible design.
Students will also gain familiarity with advanced web design concepts including color
theory, typography, page layout, and responsive design. Throughout the course, students
will continuously demonstrate their knowledge through structured exercises, traditional
assessments, and longer-form student-directed projects.
Course Outline
| Unit 1: Style Web Pages | Unit 2: Multi-Page Web Sites | Unit 3: Responsive Web Pages |
| Lesson 1.1 HTML Lesson 1.2 CSS Lesson 1.3 Semantic Tags and IDs Quiz Lesson 1.4 Box Model Lesson 1.5 Layout Techniques Unit 1 Project Unit 1 Test | Lesson 2.1 Images Lesson 2.2 Links and Navigation Lesson 2.3 Lists and Tables Quiz Lesson 2.4 Advanced Selectors Lesson 2.5 Improving Readability Unit 2 Project Unit 2 Test | Lesson 3.1 Position and Document Lesson 3.2 Grids Quiz Lesson 3.3 Responsive Design Unit 3 Project Unit 3 Test |
Lesson 1.1: HTML
- Describe the origins and organization of the internet
- Describe the relationship between a web browser and an HTML document
- Describe the functionality of tags
- Describe the purpose of the HTML head element
- Describe the purpose and limitations of a character set
- Describe heading tags
- Describe good practices for using headings
Lesson 1.2: CSS
- Describe how to link a CSS file to an HTML file
- Describe the composition of a CSS file
- Describe common CSS properties and their values
Lesson 1.3: Semantic Tags and IDs
- Describe how semantic tags are used within HTML documents
- Describe the intended usage for structural tags
- Describe the rules for creating a valid identifier name
- Compare and contrast ID selectors and element selectors
- Identify which styles will be used on an element
- Describe the effects of adding the lang attribute to a tag
Lesson 1.4: Box Model
- Describe margins, and how they affect an element
- Describe the properties that affect an element
- Contrast the universal selector with element selectors
- List the box sizing values that are available and how they affect elemtns
Lesson 1.5: Layout Techniques
- Describe the effect of changing the display property of an element
- Describe the effects of using a flex container
- Identify whether a display property should go on a tag’s parent based on the display value
- Describe the ways in which a flexible item can control its size
Lesson 2.1: Images
- Describe how text-based tags can be used to place images in a web page
- Describe the organization of a filesystem
- Give example of attributes specific to the image tag
- Give examples of problems associated with hotlinkling
- Describe how licensing and attribution applying to both local and hotlinked files
- Give examples of image styles
- Describe how to place several images side by side with wrapping
Lesson 2.2: Links and Navigation
- Identify and map how pages are connected via their embedded links
- Describe the primary components of an anchor tag
- Differentiate between an anchor tag and the link tag in the head
- Describe the common format of a navigation section
- Give examples of pseudo-classes that apply to links
- Write HTML tags for links
- Wrap a variety of element types in anchor tags
- Write HTML tags for links that will open in a new tab or window
- Combine a collection of hyperlinks into a navigational element
- Use CSS to adjust the appearance of anchor tags
Lesson 2.3: Lists and Tables
- Describe list and list item tags
- Give examples of attributes that are unique to the ordered list tag
- Identify the accessibility benefits of using lists on a web page
- Describe the format of a table
- Identify data that is appropriate for presentation in a table
Lesson 2.4: Advanced Selectors
- Differentiate between ID and class-based selectors
- Give examples of when it is appropriate to use the span tag
- Describe how naming conventions provide clarity in code
- Give examples of CSS combinators
- Contrast between a combinator and styling multiple elements at once using a comma
Lesson 2.5: Improving Readability
- Describe a typeface using appropriate terminology
- Defend the choice of a given font based on its intended use and audience
- Describe the relationship between typography and accessibility
- Describe how a 6-digit hexadecimal number is translated into a color
- Give examples of strategies for choosing aesthetically pleasing color combinations
- Describe the relationship between color and accessibility
Lesson 3.1: Position and Document Flow
- Describe the way the browser assembles
- elements into the displayed page under normal flow
- Differentiate between the various types of positioning
- Identify which elements are impacted by removing an element from the normal flow
- Describe the visual impact of positioning two elements in the same space
- Give examples of common use cases for each of the different positioning types
- Adjust the relative position of an element compared to its default position
- Adjust the absolute position of an element based on the boundaries of an ancestor
- Apply relative positioning to an element in order to change the position of an absolute or fixed descendant
- Use fixed positioning to place an element within the viewport
- Use sticky positioning to keep an element visible when its parent is within the viewport
- Change which of several overlapped elements appears on top by changing the z-index
Lesson 3.2: Grids
- Describe the basic components of a grid-based layout
- Describe ways that a grid may be partitioned
- Compare and contrast the use of flexible layouts and grid-based layouts
Lesson 3.3: Responsive Design
- Describe problems caused by non-responsive design
- Describe how media queries apply different CSS rules based on device attributes
- Predict how a responsive grid will change size based on its rules
CS302: Coding in JavaScript
Course Description
This course continues the comprehensive introduction to web development, which began
in CS301. Upon completion of CS302, students will be proficient with JavaScript, the core
web programming language for building interactive web pages, applications, and games.
Along the way, students will work toward mastery of advanced web development
concepts such as value types versus reference types, input forms, mutable data
structures, event handling, web media, and interactive animation.
Additionally, students will explore the ever-evolving technical standards that advance the
Web as a platform, discover the Web’s history and trajectory, and continue learning about
the careers that build and maintain the Web. Throughout the course, students will
continuously demonstrate their knowledge through traditional assessments, coding
projects, and portfolio projects.
Course Outline
| Unit 4: Input & Output | Unit 5: Data Gathering and Manipulation |
| Lesson 4.1 Programming Basics Lesson 4.2 The DOM Quiz Lesson 4.3 Interaction Lesson 4.4 Animation Unit 4 Project Unit 4 Test | Lesson 5.1 Data Types Lesson 5.2 Conditionals Quiz Lesson 5.3 Arrays and Iteration Lesson 5.4 Data Storage Unit 5 Project Unit 5 Test |
Lesson 4.1: Programming Basics
- Compare and contrast JavaScript with HTML and CSS
- Identify the parts of the function console.log(“Hello World”);
- Differentiate between ways of communicating with a user
- Identify the location of an error based on an error message in the console
- Describe what happens when a value is stored in a variable
- Give examples of ways to create compound strings
Lesson 4.2: The DOM
- Compare the JavaScript Document (DOM) to an HTML file
- Identify the corresponding JavaScript that represents HTML and CSS
- Describe how the DOM can be altered programmatically via JavaScript
Lesson 4.3: Interaction
- List the parts of a function definition
- Describe return statements in JavaScript
- Differentiate between defining and calling a function
- Describe the concept of scope in JavaScript
- Describe how code can react to events in JavaScript
- Define a custom function
- Call a custom function
- Listen for browser events
Lesson 4.4: Animation
- Describe the parts of the CSS transition property
- Describe the parts of the CSS animation property
- Describe the parts of a CSS @keyframes rule
- Give examples of different ways transitions and animations are triggered
Lesson 5.1: Data Types
- Give examples of data types in JavaScript
- Give examples of JavaScript functions designed to work with primitive data types
- Give examples of text-based UI element types
- Describe how UI elements are labeled
- Give examples of when an input event will occur
- Describe best practices when handling sensitive user data
Lesson 5.2: Conditionals
- Identify the condition expression within a conditional
- Predict which code in a conditional statement will run or be skipped
- Differentiate between equality and strict equality
- Compare and contrast and tags <select> and <option> tags with <ul> and <li> tags
- Describe other formats equivalent to conditionals
Lesson 5.3: Arrays and Iteration
- Describe how items are stored within an array
- Give examples of functions and operators that can be used with ordered collections
- Trace the execution of a for loop
- Give examples of keywords that can be used with loops
- Compare and contrast checkboxes and radio buttons
Lesson 5.4: Data Storage
- Describe how data is stored in objects
- Describe how a browser stores data in localStorage
- Explain why data must be converted in order to be stored