Course Specifications

Course Number:

094023

Course Length:

4 days

Course Description

Overview:

Modern organizations depend heavily on the web to perform core business operations such as marketing, advertising, and selling products, providing services, and communicating with customers, partner organizations, and employees. Whatever you're creating on the web, HTML, CSS, and JavaScript™ likely play an important role. These three languages provide the core toolkit for anyone looking to perform web development work. This course covers the fundamentals of web development using these three languages.

Course Objectives:

In this course, you will develop web content in HTML, enhance its formatting and layout using CSS, and add interactivity using JavaScript. You will:

• Set up the tools and resources you need to perform Web Development.
• Create web pages in HTML, constructing valid, well-formed elements, including navigation links, sections, titles, and semantic markup.
• Enhance HTML content with tables, images, movies, and audio.
• Apply styles to HTML elements using CSS.
• Use CSS to format the edges, size, position, and layering of HTML elements.
• Apply complex style rules using advanced CSS selectors, including pseudo-class selectors, structural selectors, and pseudo-element selectors.
• Create complex layouts using CSS newspaper style columns, grid layouts, and flexible box layouts.
• Improve the quality of web content, including adaptability (different displays and devices), searchability, usability, and accessibility.
• Submit data through URL query strings and web forms for processing by a web application server.
• Write JavaScript code to make web pages more interactive, perform data processing tasks directly in the browser, and manipulate items in the current web page.
• Write JavaScript code to iterate through collections of elements in a page to get and set their attributes and add event listener code.
• Use third-party libraries and frameworks for web front-end development.

Target Student:

This course covers a broad scope, giving students a general understanding of the tools and processes involved in web development, while focusing on HTML, CSS, and JavaScript—the core languages used in front-end web development. Therefore, this course will be of interest to anyone looking to get started in web development.

While no prior programming or web development experience is required, target students should have good foundational computer skills. For example, students should be comfortable copying, moving, and deleting files, working with multiple applications, and paying particular attention to details while editing text. In course activities, students will use a text editor to type, examine, and revise code. They will use Microsoft Windows and multiple applications, including the Windows File Explorer, a programming text editor, and other Windows applications.

This course is designed for any business professional with solid Windows-based end-user computing skills who would like to gain a firm technical understanding of the core languages and tools used in web development. Because web technologies are used in many different types of organizations and job roles, this course will appeal to many different types of people—for example:

• Individuals looking to take the first step toward a new career in web development.
• Authors, bloggers, or other content creators looking to broaden their web content development capabilities.
• Graphic designers with print experience looking to expand into website design.
• Small business owners who have been using a system such as Wordpress or hiring a contractor to produce their business site, who want to take more control of the site.
• Marketing professionals or project managers with experience managing web projects looking to increase their understanding of the technical aspects of web development.
• Programmers with little or no web experience looking to expand into web development.
• Backend developers with little or no web front end experience looking to round out their knowledge of HTML, CSS, and JavaScript.

Prerequisites:

This course assumes that students have strong experience working with computers. Previous experience programming in other languages is helpful, but not required for students to benefit from this course.

Course-specific Technical Requirements

Hardware:

For this course, you will need one computer for each student and one for the instructor. Each computer will need the following minimum hardware configurations:

• 1 gigahertz (GHz) 64-bit (x64) processor.
• 8 gigabytes (GB) of Random Access Memory (RAM).
• 32 GB available storage space.
• Monitor capable of a screen resolution of at least 1,920 × 1,080 pixels, at least a 256-color display, and a video adapter with at least 4 MB of memory.
• Bootable DVD-ROM or USB drive.
• Keyboard and mouse or a compatible pointing device.
• Fast Ethernet (100 Mb/s) adapter or faster and cabling to connect to the classroom network.
• IP addresses that do not conflict with other portions of your network.
• Internet access (contact your local network administrator).
• (Instructor computer only) A display system to project the instructor's computer screen.

Software:

Each computer requires the following software:

• Microsoft Windows 10 or 11 64-bit , including Microsoft Edge (Chromium-Based). Course activities rely on the developer tools inMicrosoft Edge and assume that Microsoft Edge is configured as the default Windows web browser.
• The latest version of Google Chrome and Mozilla FireFox. Optionally, you may also install other web browsers such as Opera and Vivaldi, which can be interesting and useful in the class for cross-browser compatibility testing.
• If necessary, software for viewing the course slides. (Instructor machine only.)
• The data files included with this course contain all other necessary software to author and test web development content in course activities. This includes a programming editor ( NotePad++) and a localhost web server ("XAMPP", a free, open source distribution that includes Apache, PHP, MySQL, and supporting software).

Course Content

Lesson 1: Setting Up Your Web Development Environment

Topic A: Prepare Your Web Platform

Topic B: Prepare Your Web Development Tools and Processes

Topic C: Monitor the Web Request-Response Cycle

Lesson 2: Creating Web Content in HTML

Topic A: Create a Basic Web Page

Topic B: Provide Navigation Links Between Web Pages

Topic C: Improve Web Page Structure and Navigation

Lesson 3: Adding Tables and Multimedia Content to a Web Page

Topic A: Create a Table

Topic B: Embed Images, Movies, and Audio in a Web Page

Lesson 4: Applying Styles to Web Content

Topic A: Apply Styles to HTML

Topic B: Create a Style Sheet

Topic C: Use Web Fonts

Lesson 5: Controlling Edges, Size, and Position

Topic A: Format Element Edges and Corners

Topic B: Control an Element's Height and Width

Topic C: Control an Element's Position and Layering

Topic D: Normalize and Reset Browser CSS Defaults

Lesson 6: Applying Complex Style Rules

Topic A: Use Advanced Selectors

Topic B: Manage User Interface States

Topic C: Make Structure Apparent to Users

Topic D: Use CSS Pseudo-Element Selectors

Lesson 7: Creating Complex Layouts

Topic A: Use CSS to Create Newspaper Style Columns

Topic B: Use CSS to Create Grid Layouts

Topic C: Use CSS to Create Flexible Box Layouts

Lesson 8: Improving Web Content

Topic A: Adjust the Layout for a Wide Variety of Devices

Topic B: Perform Basic Search Engine Optimization

Topic C: Test Your Website

Lesson 9: Submitting Data to a Web Server for Processing

Topic A: Submit Data Through a URL

Topic B: Submit Data Through a Web Form

Lesson 10: Writing JavaScript Code

Topic A: Add JavaScript to a Web Page

Topic B: Perform Operations on Data

Topic C: Program Repetitive Tasks

Topic D: Manipulate DOM Objects

Lesson 11: Enumerating and Processing Collections of Elements

Topic A: Enumerate Elements

Topic B: Attach Events Through Code

Lesson 12: Using Third-Party Libraries and Frameworks

Topic A: Use a Third-Party JavaScript Library

Topic B: Create a Web Page Based on a Third-Party Framework