Web Development with HTML5, CSS, and JavaScript

After completing this course, students 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.

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.

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.
 

Setting Up Your Web Development Environment

• Prepare Your Web Platform
• Prepare Your Web Development Tools and Processes
• Monitor the Web Request-Response Cycle

Creating Web Content in HTML

• Create a Basic Web Page
• Provide Navigation Links Between Web Pages
• Improve Web Page Structure and Navigation

Adding Tables and Multimedia Content to a Web Page

• Create a Table
• Embed Images, Movies, and Audio in a Web Page

Applying Styles to Web Content

• Apply Styles to HTML
• Create a Style Sheet
• Use Web Fonts

Controlling Edges, Size, and Position

• Format Element Edges and Corners
• Control an Element's Height and Width
• Control an Element's Position and Layering
• Normalize and Reset Browser CSS Defaults

Applying Complex Style Rules

• Use Advanced Selectors
• Manage User Interface States
• Make Structure Apparent to Users
• Use CSS Pseudo-Element Selectors

Creating Complex Layouts

• Use CSS to Create Newspaper Style Columns
• Use CSS to Create Grid Layouts
• Use CSS to Create Flexible Box Layouts

Improving Web Content

• Adjust the Layout for a Wide Variety of Devices
• Perform Basic Search Engine Optimization
• Test Your Website

Submitting Data to a Web Server for Processing

• Submit Data Through a URL
• Submit Data Through a Web Form

Writing JavaScript Code

• Add JavaScript to a Web Page
• Perform Operations on Data
• Program Repetitive Tasks
• Manipulate DOM Objects

Enumerating and Processing Collections of Elements

• Enumerate Elements
• Attach Events Through Code

Using Third-Party Libraries and Frameworks

• Use a Third-Party JavaScript Library
• Create a Web Page Based on a Third-Party Framework