Web Development WEB101: Web Development Fundamentals using HTML, CSS and JavaScript $2,495.00 5 Days Replay Class Recordings included with this course Upcoming Dates Course Description This 5-day instructor-led course provides students with little or no web development experience to obtain a solid grasp of the core fundamental parts of any web site which include HTML, CSS and JavaScript. You will learn what they are, how to write them, and how they work together. 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. Course Outline 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. You are here 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., 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 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. 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. You are here. 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. Audience 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. Prerequisites Basic computer skills are required for succeeding in this 5-day course. What You Will Learn 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.