You will learn to create web pages from scratch in this hands-on interactive training class. Students begin by using a simple text editing program (Notepad) and then work with modern tools including IDE (Integrated Development Environment) and Google Chrome Developer Tools.
Additionally, you will gain understanding or how to optimize the use of CSS and HTML and use your own custom-made templates to ensure clean simple approaches to web development.
The course also includes an overview of some of the most popular frameworks that you will most likely encounter in your real work environments.
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
- HTTP – Browsers – Devices – Web Servers
- Introducing Google Chrome Developer Tools
Lab: Easiest Web Page in the World made with a simple text editor.
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.
- You are here
- Box Model
- Normal Flow
- 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.
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
- You are here
- Graceful Degradation
- Applying the CSS
- The Cascade
- Selectors 100
- Classes and ID’s
- Pseudo Classes
- 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.
- Advanced Selectors
- CSS3 Animations
- Vendor Prefixes
- Vertical and Horizontal Layout Techniques
- Multiple Column Layouts
Lab: CSS3 Animations
Lab: Cover Layout
Lab: Zebra Striping
Lab: Liquid Design
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
- ARIA Attributes
Lab: Simple Form
Lab: Complex Form
Lab: Functioning Form Using Google API
- You are here.
- The Console
- Getting the Script to the HTML
- Built In
- Data Types
- The Console
- Introduction to the Mozilla Developer Network
Lab: Wiring Up Events
Lab: Console Loops
- The Document Object Model
- Adding Content
- Removing Content
- Updating Content
Lab: Counting the Elements
Lab: Finding the Control
Lab: Products Page
Lab: Clicking a Button to Add a List
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
- Response Types
- 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
Students learn what Responsive Design is and how to make their web pages adapt to the devices that are looking at them.
- Conditional Comments
- View Port, View Window
Lab: Conditional Comments Presentation for Legacy Browser Support
Lab: Media Query Presentation for IPAD
Lab: Presentation for IPHONE
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.
- 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.
Basic computer skills are required for succeeding in this 5-day course.