Introducción al desarrollo Web

Front-End

@netinetidesign - www.netinetidesign.com

@netinetidesign - www.netinetidesign.com

HTML

CSS

JavaScript

@netinetidesign - www.netinetidesign.com

Lenguaje de marcado de hipertexto

Del inglés Hiper Text Markup Language

Estructura

@netinetidesign - www.netinetidesign.com

@netinetidesign - www.netinetidesign.com

Berners Lee propuso la arquitectura de la World Wide Web en 1990

@netinetidesign - www.netinetidesign.com

Hojas de Estilo en Cascada

Del inglés Cascading Style Sheets

Se utiliza para definir la presentación de los documentos HTML.

Estilo/Diseño

@netinetidesign - www.netinetidesign.com

CSS

• Lanzamiento inicial 1996
• Última versión CSS3
• Creador Håkon Wium Lie

Hojas de estilo en cascada

La especificación CSS describe un esquema prioritario para determinar qué reglas de estilo se aplican si más de una regla coincide para un elemento en particular.

@netinetidesign - www.netinetidesign.com

JavaScript es el único lenguaje de programación que entienden de forma nativa los navegadores web.

JavaScript fue creado en 1995 por Brendan Eich.

• Comportamiento
• Funcionalidad
• Interacción
• Lógica

@netinetidesign - www.netinetidesign.com

@netinetidesign - www.netinetidesign.com

¿Son HTML y CSS lenguajes de programación?

🤔

HTML es un lenguaje de marcado, CSS es un lenguaje de estilos

@netinetidesign - www.netinetidesign.com

Cliente - Servidor

• Desarrollo Front-End
• Desarrollo Back-End
• Desarrollo Full-Stack

@netinetidesign - www.netinetidesign.com

@netinetidesign - www.netinetidesign.com

Etiquetas HTML

@netinetidesign - www.netinetidesign.com

142 Etiquetas HTML 😱

@netinetidesign - www.netinetidesign.com

@netinetidesign - www.netinetidesign.com

Hiperenlaces

@netinetidesign - www.netinetidesign.com

Imágenes

@netinetidesign - www.netinetidesign.com

@netinetidesign - www.netinetidesign.com

@netinetidesign - www.netinetidesign.com

Enlaces útiles

@netinetidesign - www.netinetidesign.com

https://code.visualstudio.com/

https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

https://emmet.io/

@netinetidesign - www.netinetidesign.com

https://cdnjs.com/libraries/font-awesome

https://www.happyhues.co/

https://fontawesome.com/icons

https://fonts.google.com/

@netinetidesign - www.netinetidesign.com

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

https://css-tricks.com/snippets/css/complete-guide-grid/

https://developer.mozilla.org/es/

https://emojipedia.org/es/

@netinetidesign - www.netinetidesign.com

https://developer.mozilla.org/es/docs/Web/HTML/Element

@netinetidesign - www.netinetidesign.com

https://www.netinetidesign.com/

https://madebymike.github.io/html5-periodic-table/