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

Curso Disponible presencial o en Línea

Duración: 35 horas.

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

¿Qué aprenderás en el curso de Programación con HTML, CSS y JavaScript (55320)?

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.

Pre-requisitos
Temario

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.

Preguntas frecuentes

El precio de los cursos de Excel varía según el nivel. Preguntanos y con gusto te asesoramos.

Para darte mayor información por favor llámanos al 4422150021 o dejanos un WhatsApp 4421817545

Del Mesón 186-Int 12, Col del Prado, 76030 Santiago de Querétaro, Qro.

Estamos junto al edificio de Telmex de Tecnológico a una cuadra de Zaragoza. Puedes estacionarte junto al edificio Tec100 / Nippo en una explanada grande, es una opción muy económica.

Es correcto, al finalizar el curso se entrega una constancia certificada por Executrain, que te ayudará a demostrar tus habilidades.

Claro, en Executrain contamos con más de 30 años de experiencia brindando servicios de capacitación y consultoría a empresas en el Bajío. Puedes buscarnos en Google como Executrain Querétaro para consultar las recomendaciones de los alumnos.

SI claro, solo envía tu constancia de situación fiscal y con gusto te facturamos.

Te ofrecemos una gran cantidad de opciones de certificación, tanto la capacitación como los exámenes pues somos Centro VUE.

Cursos relacionados

Disponible online o presencial