Web Development with HTML5, CSS, and JavaScript

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 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