Introducci贸n al curso

1

Presentaci贸n y bienvenida al curso de Frontend Developer

2

HTML y CSS: definici贸n y usos

3

驴Qu茅 son y para qu茅 nos sirven HTML y CSS?

4

DOM, CSSOM, Render Tree y el proceso de renderizado de la Web

5

5 tips para aprender CSS

Conceptos iniciales de HTML

6

Anatom铆a de un Elemento HTML: Atributos, Anidamiento y Elementos vac铆os

7

Anatom铆a de un Documento HTML: DOCTYPE, html, head y body

8

Funciones de las etiquetas HTML m谩s importantes

9

La importancia del c贸digo sem谩ntico

10

Tipos de errores en HTML, debugging y servicio de validaci贸n de etiquetas

11

Reto 1: Organiza el siguiente bloque de c贸digo de forma sem谩ntica

Conceptos iniciales de CSS

12

Anatom铆a de una declaraci贸n CSS: Selectores, Propiedades y Valores

13

Tipos de selectores, pseudo-clases y pseudo-elementos

14

Modelo de caja

15

Valores relativos y absolutos

16

Displays en CSS

17

Funciones de las propiedades CSS m谩s usadas

18

Posicionamiento en CSS

Arquitectura CSS

19

驴Qu茅 son y para qu茅 nos sirven las arquitecturas CSS?

20

OOCSS, BEM, SMACSS, ITCSS y Atomic Design

21

Reto 2: Identifica el error de arquitectura del siguiente bloque de c贸digo

Construcci贸n de componentes

22

驴Qu茅 es un componente? Analicemos nuestros dise帽os

23

Estructura con HTML y BEM de un men煤 desplegable

24

Estilizando nuestro men煤 desplegable con CSS

25

Creaci贸n de un buscador

26

Creaci贸n de un carousel de im谩genes con CSS: Estructura principal

27

Creaci贸n de un carousel de im谩genes con CSS: Detalle de cada item

Maquetaci贸n y dise帽o responsivo

28

Flexbox

29

Nuestro nuevo sistema de layout: CSS Grid

30

Maquetaci贸n de la pantalla de login: Estructura HTML

31

Maquetaci贸n de la pantalla de login: Estilizaci贸n con CSS

32

Estilizaci贸n de inputs y footer en la pantalla de login

33

Media queries

34

Maquetaci贸n de la pantalla principal

35

Reto 3: Maquetaci贸n de la pantalla de Not Found

Preprocesadores

36

驴Qu茅 es un preprocesador, cu谩les existen y cu谩les son sus diferencias?

37

Instalaci贸n de SASS y configuraci贸n inicial

38

Hablemos de variables, herencia, anidamiento, operadores y m谩s

Accesibilidad

39

La accesibilidad y nuestra responsabilidad como desarrolladores

40

Mejorando la accesibilidad de nuestra p谩gina de inicio

Conclusi贸n

41

Conclusi贸n del curso y paso siguiente

Bonus

42

Visualizaci贸n de un bot贸n usando storybook para HTML

43

Flexbox

No tienes acceso a esta clase

Adquiere un plan Basic o Expert para ver esta clase

Tipos de errores en HTML, debugging y servicio de validaci贸n de etiquetas

10/43
Recursos

Errores sint谩cticos: Son errores de escritura en el c贸digo y evitan que el programa funcione. Pueden ser errores de tipado.

Errores l贸gicos: En estos la sintaxis es correcta, pero el c贸digo no hace lo que deber铆a. El programa funciona, pero de forma incorrecta.

Aportes 213

Preguntas 12

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Reg铆strate o inicia sesi贸n para participar.

Recomiendo mucho usar Visual Studio Code como editor de texto (o cualquier editor, recomiendo VSC porque tiene una caracter铆stica llamada 鈥渋ntellisense鈥 que es diosito en la programaci贸n),

Con este editor pueden analizar en tiempo real sus errores de HTML instalando un plugin llamado HTMLHint. Est谩 buen铆simo.

https://marketplace.visualstudio.com/items?itemName=mkaufman.HTMLHint

https://platzi.com tiene 35 errores segun la W3C :V

LINK para validar nuestro HTML.

https://validator.w3.org

Ser desarrollador consiste en 80% leer codigo y debuggear errores y 10% escribir codigo.

Actualmente trabajo como desarrollador web y no conoc铆a de la herramienta de la W3C. Siempre es bueno empezar por las bases para reforzar.

鉂孍rrores Sint谩cticos: Escritura del c贸digo.
鉂孍rrores L贸gicos: La funci贸n que cumple una acci贸n al no ser ejecutada como se desea.

Debugging

Les recomiendo instalar este plug-in en VS Code:

Tabnine

Un plug-in de VS Code m谩s potente que existe y que te permite autocompletado de tu c贸digo utilizando algoritmos de Machine Learning, Deep Learning e Inteligencia Artificial (IA) para que escribas c贸digo de una forma mucho m谩s r谩pida.

Tipos de errores en HTML, debugging y servicio de validaci贸n de etiquetas
HTML es un lenguaje interpretado y debido a esto el navegador nunca nos muestra que tenemos errores en el c贸digo. Existen dos tipos de errores en HTML
鈥 Errores sint谩cticos: Son errores de escritura en el c贸digo, cuando escribimos mal alguna etiqueta o funci贸n en el c贸digo.
鈥 Errores l贸gicos: En estos errores la sintaxis es correcta pero el c贸digo no hace lo que deber铆a de hacer, por lo que el programa si funciona, pero lo hace de manera incorrecta.
Existe un sistema de validaci贸n de etiquetas que nos sirve para corregir errores en nuestro c贸digo, el cual fue creado por la W3C, la direcci贸n es la siguiente: https://validator.w3.org/. Podemos validar mediante una direcci贸n, subiendo el archivo o pegando la parte de c贸digo que queremos analizar, a mi parecer la mejor forma es subiendo nuestro archivo.

Me sirvio bastantre haber hecho el curso de prog b谩sica antes que este

Errores sint谩cticos: Error de escritura del c贸digo.
Errores l贸gicos: Error de c贸digo que no hace lo que se desea.
Debugging: Es el proceso de encontrar y corregir errores del c贸digo que tiene el inspector.
servicio de validaci贸n: https://validator.w3.org

Es interesante como desde la programaci贸n el cerebro se aplica la l贸gica y se aprende el ingl茅s

En Visual Studio Code, existe HTMLhint para visualizar errores

La herramienta de validaci贸n de etiquetas suele ser un gran apoyo, para quienes estamos comenzando y aun no identificamos claramente los errores al escribir c贸digo.

Muy bueno, no sabia del sistema de validaci贸n de etiquetas

No es necesario poner html:5 ya que Visual Studio Code con solo colocar ! enter les aparece la estructura inicial del html

Por si alguien es nuevo por aqu铆, y nesecita ayuda para cargar su ejercicio mediante imagen,use chrome como navegador e ingrese a su cuenta al parecer en firefox no se habilita el arrastrar y cargar el archivo

Los 6 errores HTML mas comunes:

  • Etiquetas HTML dentro de un elemento SCRIPT.

  • Ampersands (&) en URLs.

  • Orden incorrecto de los elementos.

  • Uso del DOCTYPE en min煤sculas.

  • Se requiere un sub-elemento de cabecera

Muy buena herramienta el validador que nos ofrece la W3C; lo mejor usarlo y ver que todo est谩 bien (no siempre pasa jeje)
Validador W3C

Errores Sint谩cticos: son errores de escritura en el c贸digo.
Errores L贸gicos: la sintaxis esta bien pero el error est谩 en las sentencias escritas que no hacen lo que se supone deber铆an hacer.

Incre铆ble todo lo que se aprende en los cursos de Platzi. Muchas gracias 馃槂

Un error muy usual al momento de codificar en html es no cerrar los div, suelen ser una gran dolor de cabeza encontrarlos y cerrarlos correctamente dentro de una gran bloque de c贸digo. As铆 que recomendable alg煤n plugin de lintting y muy buena disciplina con la tabulaci贸n 馃槄

La prop铆a p谩gina tiene 1

Ejercicio: En este c贸digo hay un error intencional, saben cual es? 馃槂

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <header>
        <h1>Platzi-Video</h1>
        <ul>
            <li>Cuenta</li>
            <li>Cerrar Sesion</li>
        </ul>
    </header>

    <section>
        <p>Seccion principal</p>
    </section>

    <footer>
        <ul>
            <li>Contactanos</li>
            <li>Politica de privacidad</li>
            <li>Terminos y condiciones</li>
        </ol>
    </footer>

</body>
</html>```

Bueno en VSC yo instale la extensi贸n PRETTIER que me ayuda a no tener errores.

El proceso de debugging se traduce literalmente como desbichar algo, o eliminarle los bichos a algo. Este termino se conoce de esta manera gracias de hecho a una de las m谩s grandes pioneras de las ciencias de la computaci贸n Grace Hopper que encontr贸 una polilla en un Relay de la computador Mark II en 1947.
Ver en Genbeta
A su vez, llamaremos al proceso de encontrar errores en nuestro c贸digo 鈥渄ebugging鈥 y a cada error ya sea sem谩ntico o sint谩ctico le llamaremos bug por tradici贸n.

Muy interesante, recomiendo utilizar alguna extensi贸n de las que ofrece visual studio code, que pueda ayudar a auto completar nuestros tags.
HTML Snippets esta es una que recomiendo.

Todos los navegadores actuales est谩n optimizados para tratar funcionar incluso cuando el c贸digo esta roto.
El reto es entender que se romp铆o

Que buen dato!
Hasta ahora me he guiado por este sitio, tambi茅n puede serles 煤til https://www.w3schools.com/

Muy buen material, aunque el navegador te ayude, es bueno asegurarse que todo este bien desde el comienzo.

Los errores de sintaxis en html parecen ser algo liviano, pero no lo son. En el tiempo me he encontrado en muchos ocasiones estructuras de html innecesariamente complejas en donde de repente alguien se olvida de cerrar una etiqueta. Todo funciona, parece verse bien pero cuando uno empieza a ordenar las cosas de repente sobran divs por todos lados. Y lleva tiempo en algunos casos detectar el o los errores. Muy buena clase!

Aqui estan los temas de la clase y una guia para interpretar lo errores que arroja el validador de etiquetas

https://developer.mozilla.org/es/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML

W3C es una herramienta demasiado 煤til! 馃槃

Muy buena herramienta http://validator.w3.org/, nunca lo hab铆a usado. 馃槃

Siempre que puedas, valida por tu cuenta el c贸digo, pero por temas de agilidad utiliza el validador de etiquetas de la W3C

Peque帽o aporte, existe una Emmet Abbreviation que ayuda a escribir todo el esqueleto de un archivo HTML. Basta con escribir un !, dejar el autocompletado, y listo.

Notes

Hay dos tipos de errores en HTML

  • Errores Sint谩cticos: Son errores de escritura en el c贸digo que hacen que el programa no funcione
  • Errores L贸gicos: En estos errores la sintaxis es correcta, pero el c贸digo no hace lo que deber铆a, por lo que el programa funciona de forma incorrecta

Debugging

  • It is the process of finding and resolving bugs withinn a program, software, or systems.
  • El navegador que interpreta el HTML no nos muestra errores sino que intenta interpretarlo de una forma que la aplicaci贸n a煤n funcione

Sistema de validaci贸n de etiquetas

  • Para resolver el problema de que el navegador no nos muestra errores en documentos grandes donde no se pueden ver los errores a simple vista, hay p谩ginas que nos muestran advertencias y errores en la sintaxis del documento. Uno de esos es:

Markup Validation Service

Recomendaciones de Aportes

Pasaba por aqu铆 para recordarles, que tambi茅n pueden hacer operaciones con las etiquetas.

Por ejemplo multiplicar la etiqueta <li>, nos arrojar铆a como resultado:
En el editor de texto escribimos li*5 y damos ENTER =
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>

la indentaci贸n es una muy buena practica ya que asi es mas facil ver cada error sin perder mucho tiempo, aparte de tener tu codigo mucho mas ordenado y limpio

Tipos de errores en HTML, debugging y servicio de validaci贸n de etiquetas

Html es un lenguaje interpretado, el navegador interpreta este HTML y por esta raz贸n es como un poco permisivo, esto quiere decir que aunque tengamos errores en HTML el navegador nunca nos dir谩 que tenemos errores.

En HTML o en cualquier lenguaje de marcado tenemos dos errores:

    1. Errores sint谩cticos: Son errores de escritura en el c贸digo que hacen que el programa no funcione.
    1. Errores l贸gicos: En estos errores la sintaxis es correcta, pero el c贸digo no hace lo que deber铆a, por lo que el programa funciona de forma incorrecta. Tienen que ver con la l贸gica del negocio.

Debugging

Cuando trabajamos con un proyecto grande es muy dif铆cil ver lineal por linea donde podr铆a estar el error en un proyecto, por esto tenemos un sistema de validaci贸n de etiquetas Validator W3, en este validador podemos ingresar una url, subir un archivo o poner directamente el c贸digo al hacer usar la herramienta nos mostrara todos los errores que tuvimos, todas las advertencias, etc.

Soy fan de los errores programados de este tipo

Que gran herramienta de la W3C, sobre todo cuando recien empiezas y todo te parece como Matrix!

  • Errores sint谩cticos:
    Son errores de escritura en el c贸digo que hacen que el programa no funcione. Como que le falte punto y come en JS, que no cierres la etiqueta en HTLM, que no cierres la } en CSS, que en vez de escribir function escribo funtion, etc.

  • Errores l贸gicos:
    En estos errores la sintaxis es correcta, pero el c贸digo no hace lo que deber铆a, por lo que el programa funciona de forma incorrecta. Como hacer mal un ciclo, no declaras tus variables en la funci贸n, utilizar mal los objetos, etc.

  • Syntax error: They are errors typing the code. For example:
  • Logic error: They are errors where code make another action and it doesn鈥檛 make what we want. For example:

Function sin la 鈥渆鈥?

Solo a mi me encanta como explica Estefany?

驴Habr谩 alguna extensi贸n de vs code para este tipo de errores?

Genial

No sabia de esta herramienta woh que increible curso

Genial, cuando sean muchas l铆neas de c贸digo va a ser la diferencia esa herramienta de W3C.

Muy buena herramienta para validar nuestro c贸digo HTML

https://validator.w3.org/

:0

Muy interesante. No ten铆a idea.

Algo nuevo que no conocia

oh, no conoc铆a lo del validador, siempre se aprende algo nuevo.

El debugging es una importante tarea que se debe realzar siempre y no debemos confiarnos 鈥渜ue porque se ve bien en el navegador no tengo errores鈥 .

Gran herramienta

Errores

Genial lo del validador de c贸digo

Tipos de errores:

Sint谩cticos: errores al escribir (errores de tipado).
L贸gicos: El c贸digo hace una cosa diferente a lo que deber铆a.

El link para validar los errores: https://validator.w3.org/ en este se puede pegar el codifo o una URL.

Hay muy buenas extensiones en Visual Studio Code que nos evitan comerter errores.

Acabo de corregir algunas cosas en la p谩gina donde estoy haciendo los apuntes de clase. Ahora si, cero errores 馃槂, a煤n falta ponerle m谩s cosas, pero vamos poco a poco.

https://jmacalupur.github.io/cursoFrontendDeveloper/

jugar con la pagina de la w3c nos puede hacer descubrir funcionalidades avanzadas para el debugging de nuestro c贸digo

wow acabo de revisar https://www.youtube.com en W3C y solo salen 13 errores. Me parece realmente increible

No existe el c贸digo perfecto, hasta las m谩s grandes empresas tienen errores de c贸digo en sus p谩ginas, a煤n as铆, cumplen bien su funci贸n

excelente pagina para validar tu c贸digo.

https://validator.w3.org/#validate_by_uri

Validator w3

Interesante el debugging

Muy interesante, mientras se aprende

Excelente aporte el validador

Validaci贸n de etiquetas HTML

vaya segun yo ya conocia bien html, pero siempre tengo algun error

Muy buena herramienta para checar error jaja

Simplemente quiero expresar mis sentimientos con esta canci贸n:
https://www.youtube.com/watch?v=0yr75-gxVtM

Aguante Stranger Things!!!

Al momento de analizar el c贸digo en el validador, en lugar de solamente copiar un fragmento, es mejor copiar todo el c贸digo, de lo contrario nos mostrar谩 m谩s errores de los que en realidad tenemos debido a que el validador analiza si todo lo que pegaste esta correcto para mostrarlo como p谩gina web.

Tipos de errores en HTML, debugging y servicio de validaci贸n de etiquetas
Errores sint谩cticos: Son errores de escritura en el c贸digo y evitan que el programa funcione. Pueden ser errores de tipado.

Errores l贸gicos: En estos la sintaxis es correcta, pero el c贸digo no hace lo que deber铆a. El programa funciona, pero de forma incorrecta.
VALIDADOR HTML

What a excellent service, i didn鈥檛 know about it, its so helpful

<header> <h1>Platzi video</h1>
  • Cuenta
  • Cerrar Sesi贸n
</header> <footer > <h3>Contactanos </h3> <h5>Pol铆tica y privacidad </h5> <h5>Terminos y condiciones </h5> </footer>

Super!!! Recomiendo siempre utilizar una extensi贸n que te permita ver mejor estos errores, usualmente Prettier y Intellisense (dependiendo el lenguje que usaran hay para casi todos)

En VSC existen muchas extensiones que ayudan a verificar que el c贸digo HTML, CSS y dem谩s, est茅 bien escrito, y todo esto en tiempo real, es decir, mientras se va escribiendo鈥

https://validator.w3.org/ Agregada a favoritos excelente herramienta

Para debuggin esta bueno el curso de chrome dev tools, fundamental

para vs code la extension Live Server les permite ver los cambios sin tener que estar refrescando la pagina

l extension Auto Rename Tag les permite ver donde inicia y termina una etiqueta y cambiar el nombre a ambas al mismo tiempo

Excelente Debugging con las herramientas del navegador y la nueva herramienta del W3C.org

No sab铆a que exist铆an nombres para los tipos de errores 隆hoy s铆 que aprend铆 algo nuevo!

Muy buena herramienta para hacer debugging, W3C Validator.

Excelente clase

no sab铆a que el W3C tiene esa funcionalidad.

Buena herramienta, nos ahorrar谩 dolores de cabeza 馃槃

Que valiosa herramienta para debugguear el html.

muy bueno lo del validador html, no conocia esta herrramienta excelente explicacion

No conoc铆a la validaci贸n de etiquetas, se ve como algo muy interesante para tener un c贸digo mas limpio.

Excelente !! 馃槃

Tipos de errores.

Muy buena explicaci贸n

waooo que pro

Excelente aporte para validar codigo

Qu茅 buen dato!