Foundational basics of web development including HTML, CSS, and JavaScript
Module 1: Development Fundamentals, 170 hours
1 class session = 3 hours|1 lab session = 3 hours
In Module 1, students will learn foundational browser technologies like HTML, CSS, and JavaScript and learn to layout and design user interfaces. They will come to understand the basics of how web apps work, and begin to explore APIs and full-stack applications. They’ll learn object oriented design, and build their first application(s) while learning the fundamentals of web development. By the end of this module, students will have an understanding of:
- Object-Oriented Design
- HTML and CSS fundamentals
- JavaScript fundamentals
- JQuery fundamentals
- Algorithms + Data Structures
- Build their first web application(s)
Grading: Grading for Module 1 will be based on in class assignments, homework assignments to be completed during lab hours, and a final project where students will build their own web application.
Books: Extensive online material will be leveraged throughout this module such as online tutorials and YouTube videos that may shift as new resources become available. However, two physical books will be leveraged:
- HTML & CSS by Jon Duckett
- JavaScript & JQuery by Jon Duckett
(Module 1 is made up of 30 class sessions and 27 lab sessions)
C1: Introduction to Module 1
- Looking at the history of the internet from it’s conception
- Origins of coding languages
- Introduction to course curriculum, grading break down, course objectives
C2: Object-Oriented design
- Introduction of an overview of HTML, CSS, JavaScript and JQuery
- General Software Development
- Web Applications
- Desktop Applications
- Databases
C3: HTML fundamentals: the language of HTML
- Learning the basic HTML language
- Marking up textual context in HTML
L1: HTML fundamentals assignment using mark up language basics
C4: HTML fundamentals
- Creating lists
- Organizing data
- Forms and table
L2: HTML fundamentals assignment: building forms and tables
C5: HTML fundamentals: adding images and assets
- Adding images with HTML
- Sizing and positions in HTML
L3: HTML fundamentals assignment: adding images
C6: HTML fundamentals: Building a website using HTML
- basic website code functionality with images and text
- Headings / Paragraphs
- Styles / Formatting
L4: HTML fundamentals assignment: Building a website using HTML exercise part 1
C7: HTML fundamentals: Building a website using HTML
- Creating menus and navigation
- Creating multiple pages
- Links
- Tables
- Blocks
- Layout
- IFrames
L5: HTML fundamentals assignment: Building a website using HTML exercise part 2
C8: HTML fundamentals: Introduction to HTML5
- Differences / evolution of HTML languages from beginning to HTML 5
L6: HTML fundamentals assignment: Building a website using HTML exercise part 3
C9: CSS coding with style: Introduction
- Intro to CSS
- Syntax
- Selectors
L7: CSS coding with style assignment
C10: CSS coding with style
- Backgrounds
- Text
- Fonts
L8: CSS coding with style assignment
C11: CSS coding with style
- Links
- Lists
- Tables
L9: CSS coding with style assignment
C12: CSS coding with style
- Box Model
- Borders and Outlines
- Margins
- Padding
- Dimensions
L10: CSS
C13: CSS coding with style
- Display
- Setting Max-width
- Positions
- Float Align
L11: CSS coding with style assignment with displays, positions and floating
C14: CSS coding with style: Website implements
- Navigation bar
- Images / Image Galleries
- Media Types
L12: CSS navigation bar and image gallery assignment
C15: JavaScript
- Introduction to JavaScript
- JavaScript working with HTML
- Output / Syntax
L13: JavaScript assignment: bL13asic JavaScript assignment
C16: JavaScript
- Statements
- Comments
- Variables
L14: JavaScript assignment adding comments to a site
C17: JavaScript
- Operators
- Arithmetic
- Assignment
L15: JavaScript operators and arithmetic assignment
C18: JavaScript
- Data Types
- Functions
- Objects
L16: JavaScript data assignment
C19: JavaScript
- Scope
- Events
- Strings / String Methods
- Math / Dates / Date Formats and Methods
L17: JavaScript formulating dates assignment
C20: JavaScript
- Numbers and Number Methods
- Dates
- Using JavaScripts with CSS and HTML
L18: JavaScript with HTML and CSS
C21: jQuery fundamentals
- Introduction to jQuery
- Syntax
- jQuery and JavaScript
- Selectors
- Events
L19: jQuery with JavaScript assignment
C22: jQuery fundamentals: Effects
- Hide/Show
- Transitions: Fade, Slide
- Animate
L20: jQuery effects assignment part 1
C23: jQuery fundamentals: Effects continued
- Stopping
- Callback
- Chaining
L21: jQuery effects assignment part 2
C24: JQuery fundamentals with HTML
- Get
- Set
- Add / Remove
L22: jQuery with HTML assignment
C25: jQuery fundamentals with CSS
- jQuery and CSS working together and trouble shooting
- dimensions
L23: jQuery with CSS assignment
C26: Building your first Web Application project
- Discussion on their proposals for Module 1 final project, building a web application
L24: Write proposal for Web Application project
C27: Web Application Project Pitches and Critiques
L25: Work on Web Application project
C28: Algorithms + Data Structures
- Problem Solving with algorithms and data structures
- Built-in Atomic Data Types
- Built-in Collection Data Types
- Input and Output String Formatting
- Control Structures
- Exception Handling
- Defining Functions
L26: Work on Web Application project
C29: Algorithms + Data Structures
- Object-Oriented Programming
- Implementing Stacks, Abstract Stack Data Types
- Converting Decimal Numbers to Binary Numbers