- Course Level: Code 201
- Code 102
Students with previous relevant or equivalent experience can test out of this requirement in their application.
This course guides students toward developing a well-rounded foundation of skills necessary for modern web development. These skills include HTML, CSS, and JavaScript coding; utilizing Git workflow processes, project organization, designing with wire-framing and employing introductory Agile development methods.
Builds a strong software development foundation and learn how to use HTML, CSS, JavaScript, and various libraries to create fully-functional web apps.
This course guides students toward developing a well-rounded foundation of skills necessary for modern web development. These skills include HTML, CSS, and JavaScript coding; utilizing Git workflow processes, project organization, designing with wireframing and employing introductory Agile development methods.
Upon satisfactory completion of this course, a student should be able to:
- Structure
- Text
- Links
- Images
- Tables
- HTML5
- Forms
- Process
- Design
- Color
- Text
- Boxes
- Lists
- Tables
- Forms
- Grid Layouts
- Fluid Layouts
- Animations and Transitions
- Loops
- Conditions
- Functions
- Objects (Including Properties and Methods)
- Object-Oriented Programming
- Object Extension with Prototypes
- Events, Event Listeners, and Event Handlers in Callback Functions
- DOM Manipulation and Traversal Using "Vanilla" JavaScript without jQuery
- Utilization of an external library such as ChartJS
- Local Storage and JSON
- The Basics of MVC
- Unix and the Command Prompt
- Git and GitHub
- A Text Editor
- Chrome Dev Tools
- Define the structure of a web page utilizing the semantic hierarchical structural conventions of HTML5.
- Apply CSS to style content with color, typography, and images.
- Apply CSS and HTML to implement page layout styles including grid, fluid, and responsive techniques.
- Utilize Javascript to make web projects interactive, such that user input is stored and processed to create updated and personalized content when a user interacts with a page.
- Write JavaScript that leverages the fundamentals of Computer Science, the Object-Oriented Programming paradigm, basic data types, data structures, and basic algorithms, so that the code is efficient, error-free, and matches commonly accepted standards and practices of syntax and style, as measured by the code’s functionality and ability to pass a code linter.
- Utilize industry-standard version control tools and workflows, including Git and GitHub, to write functional, properly styled code and to work efficiently and harmoniously in professional environments.
| Class # | Topic | Lab |
|---|---|---|
| 01 | Introduction to Development | Web Site with proper HTML, CSS, JavaScript Structure |
| 02 | Basics of HTML, CSS, JS | User input and output |
| 03 | Control Flow; Box Model | Conditional logic |
| 04 | Javascript Functions; Pair Programming | Encapsulate logic in functions |
| 05 | Images, Color, Style; Branching | Fidelity; Practice JS and Git branching |
| Class # | Topic | Lab |
|---|---|---|
| 06 | Javascript Objects; The DOM | Generate and display data in the DOM |
| 07 | OOP; HTML Tables | Convert literals to constructors; Dynamic table output |
| 08 | CSS Layout: Flex | Wire-frame exercise; Styling |
| 09 | HTML Forms & JavaScript Events | Form input + dynamic elements |
| 10 | JS Debugging; CSS Layouts | Git Practice; JS Debugger; Generate markup from a mock-up |
| Class # | Topic | Lab |
|---|---|---|
| 11 | A/V; Accessibility; Math.random() |
Selecting random options and Capturing user input |
| 12 | 3rd Party Libraries and Documentation | Integrating Chart.js |
| 13 | Application State with Local Storage API | Storing/Retrieving data from local storage |
| 14 | Psyhological Safety | Exploring an existing code base |
| 15 | Project Kickoff | Merge conflict practice |
| Class # | Deliverables |
|---|---|
| 16 | Wireframes, User Stories, Architecture Plan, DevOps, Documentation, Agreements |
| 17 | Phase 1 |
| 18 | MVP |
| 19 | Final Polish, Presentation Practice |
| 20 | Live Project Presentations |