Programación con HTML, CSS y JavaScript (55320)

Duración: 35 horas.
¡Quiero saber más sobre el curso de Programación con HTML, CSS y JavaScript (55320)!

A quien va dirigido

Este curso está dirigido a estudiantes nuevos en programación de computadoras o programadores experimentados que son nuevos en el desarrollo web del lado del cliente.

  • Describir las tecnologías involucradas en el desarrollo web.
  • Crea páginas HTML con enlaces e imágenes.
  • Explicar los beneficios de CSS.
  • Aplicar estilo a páginas HTML con CSS.
  • Explicar los conceptos de objetos, métodos y propiedades.
  • Trabajar con variables JavaScript.
  • Crear sus propias funciones personalizadas en JavaScript.
  • Escribir lógica de control de flujo en JavaScript.
  • Escriba código JavaScript que escuche y controle eventos, como clics del mouse y cargas de página.
  • Crea formularios con HTML y valídalos con JavaScript.
  • Use expresiones regulares en JavaScript para la validación avanzada de formularios.

Descripción

La programación con HTML, CSS y JavaScript es el equivalente del Community Courseware de la programación retirada de MOC 20480C en HTML5 con JavaScript y CSS3. Este instructor de cinco días dirigido está dirigido a profesionales de TI interesados en convertirse en desarrolladores web del lado del cliente que necesitan comenzar a trabajar en las tres tecnologías. El curso incluye más de …

A quien va dirigido

Este curso está dirigido a estudiantes nuevos en programación de computadoras o programadores experimentados que son nuevos en el desarrollo web del lado del cliente.

  • Describir las tecnologías involucradas en el desarrollo web.
  • Crea páginas HTML con enlaces e imágenes.
  • Explicar los beneficios de CSS.
  • Aplicar estilo a páginas HTML con CSS.
  • Explicar los conceptos de objetos, métodos y propiedades.
  • Trabajar con variables JavaScript.
  • Crear sus propias funciones personalizadas en JavaScript.
  • Escribir lógica de control de flujo en JavaScript.
  • Escriba código JavaScript que escuche y controle eventos, como clics del mouse y cargas de página.
  • Crea formularios con HTML y valídalos con JavaScript.
  • Use expresiones regulares en JavaScript para la validación avanzada de formularios.

Descripción

La programación con HTML, CSS y JavaScript es el equivalente del Community Courseware de la programación retirada de MOC 20480C en HTML5 con JavaScript y CSS3. Este instructor de cinco días dirigido está dirigido a profesionales de TI interesados en convertirse en desarrolladores web del lado del cliente que necesitan comenzar a trabajar en las tres tecnologías. El curso incluye más de 30 ejercicios que proporcionan una introducción práctica rápida a los tres principales lenguajes del lado del cliente: HTML, CSS y JavaScript. Los estudiantes deben estar preparados para cubrir mucho terreno rápidamente. Al igual que ese curso, este curso se centra en el uso de HTML, CSS y JavaScript para desarrollar páginas web, implementar lógica de programación, definir y usar variables, realizar bucles y ramificaciones, capturar y validar la entrada del usuario, almacenar datos y crear aplicaciones bien estructuradas. Este curso no cubre las API HTML5 cubiertas en 20480.

Acerca de este curso

Este instructor de cinco días dirigido está dirigido a profesionales de TI interesados en convertirse en desarrolladores web del lado del cliente. que necesitan dar un salto inicial a las tres tecnologías. El curso incluye más de 30 ejercicios, proporcionando una introducción práctica rápida a los tres principales lenguajes del lado del cliente: HTML, CSS y JavaScript. Los estudiantes deben estar preparados para cubrir mucho terreno rápidamente.

Este curso cubre las mismas tecnologías que el retirado Curso 20480-C: Programación en HTML5 con JavaScript y CSS3. Al igual que ese curso, este curso se centra en el uso de HTML, CSS y JavaScript para desarrollar páginas web, implementar lógica de programación, definir y usar variables, realizar bucles y ramificaciones, capturar y validar la entrada del usuario, almacenar datos y crear aplicaciones bien estructuradas. Sin embargo, este curso no cubre las API HTML5 cubiertas en 20480.

Los estudiantes pueden tomar este curso en cualquier computadora con un navegador web. Aunque no es obligatorio, recomendamos Visual Studio Code como editor.

  • Conocimientos básicos de informática y mecanografía.

This module gives an overview of the client-side and server-side technologies used in web development.

  • HTML is Part of a Team
  • Client-side Programming
  • Server-side Programming
  • Web Development Technologies
  • None
  • Distinguish between client-side and server-side technologies.
  • Identify the major client-side technologies.
  • Identify the major server-side technologies.

This module explains the syntax and structure of HTML documents and provides a short history of HTML.

  • Exercise: A Simple HTML Document
  • Getting Started with a Simple HTML Document
  • HTML Elements, Attributes, and Comments
  • The HTML Skeleton
  • Viewing the Page Source
  • Special Characters
  • HTML Elements and Special Characters
  • History of HTML
  • The lang Attribute
  • A Simple HTML Document
  • Create a simple HTML page.
  • Understand HTML elements and attributes.
  • Understand how whitespace is treated in HTML.
  • Add special characters to HTML pages.
  • Explain the general history of HTML.

This module explains how to add paragraphs, headings, and inline text to HTML pages.

  • Paragraphs
  • Heading Levels
  • Breaks and Horizontal Rules
  • Exercise: Paragraphs, Headings, and Text
  • The div Tag
  • Creating an HTML Page
  • Quoted Text
  • Preformatted Text
  • Inline Semantic Elements
  • Exercise: Adding Inline Elements
  • Creating an HTML Page
  • Adding Inline Elements
  • Add paragraphs to HTML pages.
  • Add headings to HTML pages.
  • Add breaks and horizontal rules.
  • Add quoted text.
  • Add preformatted text.
  • Add phrase elements to call out or identify textual elements on the page.
  • Understand the meaning of semantic content.

This module explains the difference between absolute and relative paths and shows how to add links to external HTML pages and to locations within a page. It also shows how to create email links.

  • Links Introduction
  • Text Links
  • Absolute vs. Relative Paths
  • Targeting New Tabs
  • Email Links
  • Exercise: Adding Links
  • Lorem Ipsum
  • The title Attribute
  • Linking to a Specific Location on the Page
  • Targeting a Specific Location on the Page
  • Adding Links
  • Add basic text links.
  • Understand the difference between absolute and relative paths.
  • Add links that open in new tabs or windows.
  • Add links that open up an email client.
  • Add links to specific locations on the page.

This module explains how to add images to a page, how to make those images accessible, and how to create image links.

  • Inserting Images
  • Image Links
  • Adding Images to the Document
  • Exercise: Adding Images to the Page
  • Providing Alternative Images
  • Adding Images to the Page
  • Add images to an HTML page.
  • Create image links.
  • Make images accessible.

This module explains how to add ordered, unordered, and definition lists to HTML pages.

  • Unordered Lists
  • Ordered Lists
  • Definition Lists
  • Exercise: Creating Lists
  • Creating Lists
  • Create unordered (bulleted) lists.
  • Create ordered (numbered) lists.
  • Create definition lists.

This module provides a rapid introduction to CSS, explaining the benefits of using CSS to style HTML pages and describing the different ways to add CSS styles to HTML pages and elements.

  • Benefits of Cascading Style Sheets
  • CSS Rules
  • Selectors
  • Combinators
  • Precedence of Selectors
  • How Browsers Style Pages
  • CSS Resets
  • CSS Normalizers
  • External Stylesheets, Embedded Stylesheets, and Inline Styles
  • Exercise: Creating an External Stylesheet
  • Exercise: Creating an Embedded Stylesheet
  • Exercise: Adding Inline Styles
  • div and span
  • Exercise: Styling div and span
  • Media Types
  • Units of Measurement
  • Inheritance
  • Creating an External Stylesheet
  • Creating an Embedded Stylesheet
  • Adding Inline Styles
  • Styling div and span Elements
  • Understand the benefits of CSS.
  • Redefine how elements are formatted.
  • Create and use CSS selectors.
  • Create and use CSS combinators.
  • Understand the CSS cascade.
  • Understand the role of CSS resets and normalizers.
  • Create and use external and embedded stylesheets.
  • Add inline styles to HTML elements.
  • Use the div and span elements.
  • Understand media types.
  • Understand and use the viewport tag.
  • Understand and select proper units of measurement.
  • Understand inheritance in CSS.

This module explains how to make text bold and italic and how to control other font attributes with CSS.

  • font-family
  • @font-face
  • font-size
  • font-style
  • font-variant
  • font-weight
  • line-height
  • font shorthand
  • Exercise: Styling Fonts
  • Styling Fonts
  • Use the font-family property.
  • Use the font-size property.
  • Use the font-style property.
  • Use the font-variant property.
  • Use the font-weight property.
  • Use the line-height property.
  • Use shorthand properties, such as font.

This module explains how to control the color and opacity of elements on an HTML page.

  • About Color and Opacity
  • Color and Opacity Values
  • color
  • opacity
  • Exercise: Adding Color and Opacity to Text
  • Adding Color and Opacity to the Text
  • Use the color property.
  • Use the opacity property.

This module explains how to align, underline, cross out, and space letters and words, how to indent text, how to control whitespace, and how to add shadows to text.

  • letter-spacing
  • text-align
  • text-decoration
  • text-indent
  • text-shadow
  • text-transform
  • white-space
  • word-break
  • word-spacing
  • Exercise: Text Properties
  • Text Properties
  • Use the letter-spacing property.
  • Use the text-align property.
  • Use the text-decoration property.
  • Use the text-indent property.
  • Use the text-shadow property.
  • Use the text-transform property.
  • Use the white-space property.
  • Use the word-break property.
  • Use the word-spacing property

This module provides an introduction to the HTML Document Object Model and to JavaScript, its purpose, its syntax, and its structure.

  • JavaScript vs. EcmaScript
  • The HTML DOM
  • JavaScript Syntax
  • Accessing Elements
  • Where Is JavaScript Code Written?
  • JavaScript Objects, Methods, and Properties
  • Exercise: Alerts, Writing, and Changing Background Color
  • Alerts, Writing, and Changing Background Color
  • Understand the HTML Document Object Model
  • Understand the JavaScript syntax rules.
  • Write inline JavaScript.
  • Write JavaScript within script blocks.
  • Create external JavaScript files.
  • Work with JavaScript objects, methods, and properties.
  • Reference HTML elements with JavaScript.

This module explains how to create and use JavaScript variables and arrays, and introduces JavaScript operators.

  • JavaScript Variables
  • A Loosely Typed Language
  • Google Chrome DevTools
  • Storing User-Entered Data
  • Exercise: Using Variables
  • Constants
  • Arrays
  • Exercise: Working with Arrays
  • Associative Arrays
  • Playing with Array Methods
  • JavaScript Operators
  • The Modulus Operator
  • Playing with Operators
  • The Default Operator
  • Exercise: Working with Operators
  • Working with Arrays
  • Working with Operators
  • Create, read, and modify variables in JavaScript.
  • Create JavaScript arrays.
  • Use JavaScript operators.

This module explains how to use built-in JavaScript functions and how to write your own user-defined functions.

  • Global Objects and Functions
  • Exercise: Working with Global Functions
  • User-defined Functions
  • Exercise: Writing a JavaScript Function
  • Returning Values from Functions
  • Working with Global Functions
  • Writing a JavaScript Function
  • Understand JavaScripts global functions and objects.
  • Create custom JavaScript functions.
  • Return values from functions.

This module covers the built-in JavaScript objects and shows how to create helper functions to provide additional functionality.

  • Strings
  • Math
  • Date
  • Helper Functions
  • Exercise: Returning the Day of the Week as a String
  • Returning the Day of the Week as a String
  • Work with JavaScript’s built-in String object.
  • Work with JavaScript’s built-in Math object.
  • Work with JavaScript’s built-in Date object.

This module explains flow control. It covers the different types of conditionals and loops in JavaScript.

  • Conditionals
  • Short-circuiting
  • Switch / Case
  • Ternary Operator
  • Truthy and Falsy
  • Exercise: Conditional Processing
  • Loops
  • while and do…while Loops
  • for Loops
  • break and continue
  • Exercise: Working with Loops
  • Array: forEach()
  • Conditional Processing
  • Working with Loops
  • Write if / else if / else conditions.
  • Write switch / case statements.
  • Create for and while loops.

This module explains how to capture and respond to events such as mouse clicks and keyboard actions. It also explains how to create timers in JavaScript.

  • On-event Handlers
  • Exercise: Using On-event Handlers
  • The addEventListener() Method
  • Anonymous Functions
  • Capturing Key Events
  • Exercise: Adding Event Listeners
  • Benefits of Event Listeners
  • Timers
  • Typing Test
  • Using On-event Handlers
  • Adding Event Listeners
  • Creating a Typing Test
  • Understand on-event handlers.
  • Identify and use commonly-used on-event handlers.
  • Create eventListeners.

This module dives deep into the HTML Document Object Model, explaining the many ways of accessing elements on the page and showing how to dynamically add and remove elements with JavaScript.

  • CSS Selectors
  • The innerHTML Property
  • Nodes, NodeLists, and HTMLCollections
  • Accessing Element Nodes
  • Exercise: Accessing Elements
  • Dot Notation and Square Bracket Notation
  • Accessing Elements Hierarchically
  • Exercise: Working with Hierarchical Elements
  • Accessing Attributes
  • Creating New Nodes
  • Focusing on a Field
  • Shopping List Application
  • Exercise: Logging
  • Exercise: Adding EventListeners
  • Exercise: Adding Items to the List
  • Exercise: Dynamically Adding Remove Buttons to the List Items
  • Exercise: Removing List Items
  • Exercise: Preventing Duplicates and Zero-length Product Names
  • Manipulating Tables
  • Accessing Elements
  • Working with Hierarchical Elements
  • Logging
  • Adding EventListerners
  • Adding Items to the List
  • Dynamically Adding Remove Buttons to the List Items
  • Removing List Items
  • Preventing Duplicates and Zero-length Product Names
  • Access specific nodes within the HTML DOM.
  • Identify nodes by tag name, class name, and CSS selector.
  • Access nodes hierarchically.
  • Create and remove nodes.
  • Dynamically create an HTML page with JavaScript.

This module explains how to create HTML forms.

  • How HTML Forms Work
  • The form Element
  • Form Elements
  • Buttons
  • Exercise: Creating a Registration Form
  • Checkboxes
  • Radio Buttons
  • Exercise: Adding Checkboxes and Radio Buttons
  • Fieldsets
  • Select Menus
  • Textareas
  • Exercise: Adding a Select Menu and a Textarea
  • HTML Forms and CSS
  • Creating a Registration Form
  • Adding Checkboxes and Radio Buttons
  • Adding a Select Menu and a Textarea
  • Understand how HTML forms work.
  • Understand the difference between the get and post methods.
  • Add various types of form elements.
  • Use labels to identify form elements.

This module explains how to validate HTML forms with HTML attributes and with JavaScript.

  • Server-side Form Validation
  • HTML Form Validation
  • Accessing Form Data
  • Form Validation with JavaScript
  • Exercise: Checking the Validity of the Email and URL Fields
  • Checking Validity on Input and Submit Events
  • Adding Error Messages
  • Validating Textareas
  • Validating Checkboxes
  • Validating Radio Buttons
  • Validating Select Menus
  • Exercise: Validating the Ice Cream Order Form
  • Giving the User a Chance
  • Checking the Validity of the Email and URL Fields
  • Validating the Ice Cream Order Form
  • Access data entered by users in forms.
  • Validate text fields, textareas, radio buttons, checkboxes, and select menus.
  • Write clean, reusable validation functions.

This module covers regular expressions and explains how to use them for advanced HTML form validation and to clean up form entries.

  • Getting Started
  • Regular Expression Syntax
  • Backreferences
  • Form Validation with Regular Expressions
  • Cleaning Up Form Entries
  • Exercise: Cleaning Up Form Entries
  • A Slightly More Complex Example
  • Cleaning up Form Entries
  • Use regular expressions for advanced form validation.
  • Use backreferences to clean up form entries.