Module-01-Introduction
This module is an introduction to the technologies students will work with throughout the course. HTTP request and responses are covered, and the browser is explained as a program that accepts data from a user. Students will have a thorough understanding of how web pages are requested, constructed, delivered and displayed.
This module includes an introduction to Google Chrome Developer Tools.
- Introducing HTML
- Introducing CSS
- Introducing JavaScript
- HTTP – Browsers – Devices – Web Servers
- Introducing Google Chrome Developer Tools
Lab: Easiest Web Page in the World made with a simple text editor.
Module-02-HTML
This module covers HTML tags and attributes. It includes an understanding of the Box Model and Normal Flow.
Students will be exposed to and work with almost every current tag as defined in the HTML5 Specification. Students will learn about attributes, id’s, classes, and the idea of overloaded classes that can later be used in CSS.
Students will learn about how to markup existing content in order to convert it to an HTML document.
Students will learn about DOCTYPE tags, including the latest one and those they may run into when working on legacy projects.
Lessons
- You are here
- Syntax
- Box Model
- Normal Flow
- Doctype(s)
- Tags
- Attributes
- ID’s
- Classes
- Name
- Tables
- Images
- Audio
- Video
- W3C
- Structure
- Templating
- More on Google Chrome Developer Tools
Lab: Create an HTML Template Page and Validate It.
Lab: Create a simple 5-page Website Using the Template and validate the pages.
Lab: Every Single Tag (…almost).
Lab: Convert a Word Document to an HTML Page and Validate it.
Module-03-CSS Foundations
This module is all about the foundations of good CSS. Syntax, Selectors, Rules and approaches are addressed. At the end of this module Students will have a solid understanding of the core of CSS and how it is applied to HTML pages
Lessons
- You are here
- Syntax
- Graceful Degradation
- Syntax
- Applying the CSS
- The Cascade
- Selectors 100
- Classes and ID’s
- Pseudo Classes
- Fonts
- Colors
- Borders
- Backgrounds
- Structure
- Layout
- Navigation 101
- Goggle Chrome Developer Tools CSS
Lab: Create CSS for the website created in the HTML Module with a fixed width layout and validate it.
Lab: Create CSS for the website created in the HTML Module with a Liquid layout and validate it.
Module-04-CSS Beyond the Basics
This module covers some more advanced CSS techniques. Web pages are displayed on a variety of devices and this module and the previous module give students the proper foundation to understand Responsive Web Design techniques they will cover in an upcoming module.
Lessons
- Advanced Selectors
- CSS3 Animations
- Vendor Prefixes
- Cover
- Vertical and Horizontal Layout Techniques
- Multiple Column Layouts
- Grids
Lab: CSS3 Animations
Lab: Cover Layout
Lab: Zebra Striping
Lab: Liquid Design
Module-05-HTML Forms
This is an important part of any web developers skillset. Students will learn how to create HTML Forms from the ground up. This allows users to add input to web pages so that data can be processed.
HTML Forms Introduction
- Controls
- Attributes
- Methods
- Actions
- Buttons
- Grouping
- Validation
- ARIA Attributes
- Layout
Lab: Simple Form
Lab: Complex Form
Lab: Functioning Form Using Google API
Module-06-JavaScript Fundamentals
This is JavaScript for the very beginners. We start at the beginning build the foundation that students will need as they move into the web development world.
Students are introduced to JavaScript, it’s syntax and its components. Students are introduced to the JavaScript Console.
Lessons
- You are here.
- Syntax
- The Console
- Getting the Script to the HTML
- Statements
- Variables
- Operators
- Comparisons
- Conditionals
- Looping
- Functions
- Objects
- Built In
- Custom
- Arrays
- Data Types
- Events
- The Console
- Introduction to Debugging JavaScript in Google Chrome
- Introduction to JavaScript Regular Expressions
- Introduction to the Mozilla Developer Network
- Hoisting
- Scope
- Strict
Lab: Alerts
Lab: Wiring Up Events
Lab: Console Loops
Module-07-JavaScript and Content
One of the most frequent uses of JavaScript in relation to web pages is interacting with the Document Object Model. Frameworks like JQuery make this task a breeze (no pun intended as Breeze is also a great framework).
Students are introduced to the Document Object Model and learn native JavaScript techniques to interact with it.
- The Document Object Model
- Adding Content
- Removing Content
- Updating Content
- Validation
Lab: Counting the Elements
Lab: Finding the Control
Lab: Products Page
Lab: Clicking a Button to Add a List
Module-08-XMLHttpRequest (AJAX)
Students will learn the fundamentals of what AJAX is, how to create a request and how to deal with the response.
They will work with several response data types to manipulate their pages and update them using the XMLHttpRequest object.
- XML Http Request Object
- readyState
- status
- statusText
- Open
- Send
- Response Types
- Text
- XML
- JSON
- HTML
- Headers
- Setting Up the Request
- Processing the Response
- Callback Functions
- Error Handling
- Updating the DOM
Lab: AJAX Update DOM with a Local File
Lab: AJAX Update DOM with a JSON File
Lab: AJAX Update DOM with a REST Query via an API
Module-09-Implementing-Responsive-Designs
Students learn what Responsive Design is and how to make their web pages adapt to the devices that are looking at them.
- Media-Queries
- Conditional Comments
- View Port, View Window
- Images
- Visibility
- Strategies
- Grids
Lab: Conditional Comments Presentation for Legacy Browser Support
Lab: Media Query Presentation for IPAD
Lab: Presentation for IPHONE
Module-10-Introduction-to-Frameworks-and-Tools
When students leave class, they will be putting their skills to work. In many cases they will work with projects that leverage one or more frameworks.
In this module many of the most popular client side and server-side technologies are covered at a high level.
Students will understand the role of Frameworks and how the work with the skills they learned in this class.
- JQuery
- Bootstrap
- Less
- Sass
- Node
- Angular
- Java
- Net
- PHP
- IDE’s
- FTP
- Lint
- Web Servers
There are no labs for this module.
Module 11 - Putting It All Together
This is a lab-based module with business requirements. This type of lab is referred to as a capstone lab.
Your instructor will guide you through the process of taking business requirements and applying what you have learned in this class to complete them.
Students will use a modern IDE for the lab. They will push their files to a Live Web Server that they, the instructor and other students can browse to in class.
They will use the skills they learned in this class so that they will feel confident that they have mastery of all the things they learned throughout the week.
This course is designed for those who need a comprehensive understanding of the fundamentals of HTML, Cascading Style Sheets (CSS) and web development tools. This course is a great opportunity for developers who need a remedial education HTML code basics and JavaScript fundamentals.
Basic computer skills are required for succeeding in this 5-day course.
Although the course starts at an introductory level, students can expect to leave with an intermediate to advanced knowledge of web development technologies and fundamentals. Students will gain an understanding of HTML, CSS, Web Forms, JavaScript elements XML and additional web frameworks and tools in this 5-day hands-on course.