Web Developer Fundamentals

1

Qu茅 aprender谩s sobre HTML y CSS

2

驴Qu茅 es el Frontend?

3

驴Qu茅 es Backend?

4

驴Qu茅 es Full Stack?

5

P谩ginas Est谩ticas vs. Din谩micas

Quiz: Web Developer Fundamentals

HTML

6

HTML: anatom铆a de una p谩gina web

7

Index y su estructura b谩sica: head

8

Index y su estructura b谩sica: body

9

Reto: crea tu lista de compras del supermercado

10

Anatom铆a de una etiqueta de HTML

Quiz: HTML

Etiquetas multimedia

11

Tipos de im谩genes

12

Optimizaci贸n de im谩genes

13

Etiqueta img

14

Etiqueta figure

15

Etiqueta video

Quiz: Etiquetas multimedia

Formularios

16

Etiqueta form e input

17

Calendar

18

Autocomplete y require

19

Select

20

Input type submit vs. Button tag

Quiz: Formularios

CSS

21

驴Qu茅 es CSS?

22

驴C贸mo utilizamos CSS?: por etiqueta, selector, class y por ID

23

Pseudo clases y pseudo elementos

24

Anatom铆a de una regla de CSS

25

Modelo de caja

26

Herencia

27

Especificidad en selectores

28

Demo de especificidad y orden en selectores

29

M谩s sobre selectores

30

Combinadores: Adjacent Siblings (combinators)

31

Combinadores: General Sibling

32

Combinadores: Hijo y Descendiente

33

Medidas

34

Medidas EM

35

Medidas REM

36

Max/Min width

37

Position

38

Display

39

Desaf铆o: Layout 1

40

Display Flex

41

Flexbox layouts

42

Variables

43

Web fonts

Quiz: CSS

Responsive Design

44

Responsive design: media queries

45

Estrategias de responsive: mostly fluid

46

Implementando mostly fluid

47

Layout shifter CSS

48

Column drop

49

Buenas pr谩cticas y ejemplos de responsive

50

Im谩genes responsive

Quiz: Responsive Design

Accesibilidad

51

Sem谩ntica

52

Textos

53

Labels, alt y title

Pr贸ximos pasos

54

Pr贸ximos pasos como Web Developer

55

Bonus: tabla de etiquetas HTML

No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Calendar

17/55
Recursos

Aportes 389

Preguntas 119

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

En VSC para Windows 10 , para convertir el c贸digo en comentarios es

CTRL+K 鈥 CTRL+C

Para seleccionar varias palabras iguales y modificarlas al mismo tiempo en VScode pueden usar control + D

Para comentar en Windows es 鈥淪HIFT+ALT+A鈥

Hola, encuentro muy 煤tiles estos atajos:

  1. Seleccionas la parte que quieres copiar, luego con SHIFT + ALT + FLECHA ABAJO copias todo abajo, presiona la flecha segun cuantas copias quieras realizar.
  2. Selecciona una palabra y con CTRL+D seleccionas la siguiente igual y sucesivamente, luego escribe lo que necesites.
  3. Con ALT+CLICK puedes crear multicursores, manten presionado ALT y da click donde desees el otro cursor.

Espero les sirva 馃槃

FIELDSET -> nos da un borde en el formulario. y poder seccionar un formulario
LEGEND -> nos permite ponerle como un titulo al formulario

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Calendario de clases de PLATZI</title>
</head>
<body>

    <h1>Calendar</h1>

    <form action="">
        <fieldset>
            <legend>Calendario PLATZI  (<b>primera forma</b>)</legend>

            <label for="hora">hora :</label>
            <input type="time" id="hora" name="hora"><br><br>

            <label for="dia">Dia :</label>
            <input type="date" id="dia" name="dia"><br><br>

            <label for="semana">Semana :</label>
            <input type="week" id="semana" name="semana"><br><br>

            <label for="mes">Mes :</label>
            <input type="month" id="mes" name="mes"><br><br>

            <input type="submit" value="Enviar" name="enviar">

        </fieldset>
    </form><br><br>

    <form action="">
        <fieldset>
            <legend>Calendario PLATZI (<b>segunda forma</b>)</legend>

            <label for="calendario">Calendario :</label>
            <input type="datetime-local" id="calendario" name="calendario"><br><br>

            <input type="submit" value="Enviar" name="enviar">
        </fieldset>
    </form>
    
</body>
</html>

asi quedarian

En la p谩gina de caniuse la segunda opci贸n de calendario no es compatible en Firefox ni Safari a煤n.

Este curso est谩 genial! Hasta ahora usaba la etiqueta <p> para todo jajaja, ya era hora de aprender buenas pr谩cticas y nuevas etiquetas. Es increible la profundidad a la que se puede llegar con html.

De momento he hecho 3 cursos de HTML completos en Platzi. Diego es el que mejor imparte las clases y estructura el contenido en mi opini贸n.

Buenas comunidad, tras ver esta clase me surgieron dos dudas:

  • 驴Cu谩l es la diferencia entre name y id?
  • 驴El input de tipo submit no deber铆a llevar un label como los otros inputs?
    Respecto a la primera pregunta:
    Name: Se usa en las peticiones HTTP enviadas desde el navegador al servidor, estas asocian los names y sus valores, es por eso que el URL se actualiza cuando pulsabamos el submit.
    Id: Este atributo se usa para identificar este valor del input en cuesti贸n para luego ser tratado por Javascript o CSS.

Ahora bien respecto a mi segunda duda:
Por lo visto label no es una etiqueta obligatoria, esta pensada para facilitar la navegaci贸n a los usuarios y adem谩s para usuarios que tienen dificultades para teclear bien las regiones peque帽as(como las checkboxes).

aaaah banda 48 horas para volverme desarrollador web

Cabe aclarar que los tipos de inputs utilizados en esta clase NO funcionan en Firefox.

Ya que estamos con esto de los comandos aqu铆 va mi aporte:

  • Con Alt + Flecha arriba/Flecha abajo : pueden mover la l铆nea, o l铆neas, de arriaba abajo o al rev茅s

  • Con Alt + Shift + Flecha arriba/Flecha abajo: Puede copiar toda la l铆nea, o l铆neas que tengan seleccionadas o en las cuales est茅n parados hacia arriba o abajo.

A la larga se hace mucho m谩s f谩cil cuando tienen que escribir mucho c贸digo.

Con un poco de css queda linda

<input type="button"> <!-- Crea un input de tipo boton -->

<input type="checkbox"> <!-- Crea un checkbox -->

<input type="color"> <!-- Crea un input para que el usuario seleccione colores -->

<input type="date"> <!-- Crea un input para que el usuario introduzca una fecha -->

<input type="datetime-local"> <!-- Crea un input para que el usuario introduzca una fecha mas especifica -->

<input type="email"> <!-- Crea un input para que el usuario introduzca su email -->

<input type="file"> <!-- Crea un input para que el usuario introduzca un archivo -->

<input type="hidden"> <!-- Crea un input oculto -->

<input type="month"> <!-- Crea un input para que el usuario introduzca un mes -->

<input type="number"> <!-- Crea un input para que el usuario introduzca numeros -->

<input type="password"> <!-- Crea un input para que el usuario introduzca una contrase帽a -->

<input type="radio"> <!-- Crea un input de tipo radio (parecido a checkbox) -->

<input type="range"> <!-- Crea un input de tipo rango -->

<input type="reset"> <!-- Crea un boton para resetear el contenido del formulario llenado por el usuario -->

<input type="search"> <!-- Crea un input de tipo search para buscar contenido -->

<input type="submit"> <!-- Crea un boton para enviar los datos del formulario -->

<input type="tel"> <!-- Crea un campo para a帽adir un numero de telefono -->

<input type="text"> <!-- Crea un campo para a帽adir texto -->

<input type="time"> <!-- Crea un campo para a帽adir una hora -->

<input type="url"> <!-- Crea un campo para a帽adir una URL -->

<input type="week"> <!-- Crea un campo para a帽adir una semana -->

<input type="disable"> <!-- Crea un campo de tipo inhabilitado -->

<!-- Creacion de un formulario, existen varios parametros -->
<form method="POST" action="" autocomplete="off">

    <!-- Para a帽adirle un titulo al input -->
    <label for="nombre-input">
        <span>Nombre input</span>
        <input name="nombre-input" type="text" placeholder="Nombre input">
    </label>

</form>  ```

si eres como yo nuevo te invito a que experimentes con el c贸digo as铆 aprender谩s mas mi experimento es esto

Notas de la clase

Vamos a poner form que es nuestra etiqueta principal que se convierte en el contenedor de nuestro formulario completo, vamos a hacer un formulario tipo calendario en donde vamos a pedir la hora, el dia, la semana y el mes para que el usuario pueda decirnos en que dia, semana, mes quiere llegar y de igual forma para poderse retirar.
En caso de que quisi茅ramos mandar esta informaci贸n para eso vamos a utilizar otro atributo que se llama name y el name va a ser igual el mismo atributo de form y id

<label for="hora">
        <span>Hora</span>
        <input type="time" id="hora" name="hora" />
      </label>
      <label for="dia">
        <span>D铆a</span>
        <input type="date" id="dia" name="dia" />
      </label>
      <label for="semana">
        <span>Semana</span>
        <input type="week" id="semana" name="semana" />
      </label>
      <label for="mes">
        <span>Mes</span>
        <input type="month" id="mes" name="mes" />
</label>

Vamos a utilizar otro input con un tipo que se va a llamar submit, que lo que va a hacer es vas a ver en el navegador como se va a renderizar este input en particular, quiere decir enviar

 <input type="submit" />

Otra forma de colocar esto es:

<form action="">
      <label for="calendario">
        <span>Calendario</span>
        <input type="datetime-local" name="calendario" id="calendario" />
      </label>
      <input type="submit" />
</form>

En el type se pone datetime-local, le estamos diciendo que queremos el tiempo fecha de nuestra 谩rea local, con eso pregunta dia mes a帽o y hora, 4 cosas en un solo input.

Me esta explotando la cabeza, he utilizado js, he hecho todo al rev茅s, no solo para el usuario es mas c贸modo, es que tambi茅n nosotros estamos mas satisfechos con el resultado

Resumen


Se utilizaron los siguientes tipos de inputs para hacer un calendario:

<h5>Componentes independientes:</h5>
  • time = Hora especifica
  • date = Fecha de un d铆a especifico.
  • week = Semana especifica.
  • month = Mes especifico.
<h5>Componentes integrados:</h5>
  • datetime-local = Fecha y hora especifica sin zona horaria.
<h5>Los datos se env铆an con el input:</h5>
  • submit= Boton para enviar la informaci贸n de los inputs del formulario.

Para los que tengasn teclado Microsoft en espa帽ol Ctrl + 鈥渢ecla donde esto }鈥

Un aporte m谩s

Chicos, un dato. En VSC colocando html:5 y enter te renderiza toda la estructura del html.

馃槃

A mi gusto prefiero solo poner " CTRL+ } " y se comenta autom谩ticamente
y para des comentar lo mismo.
es mas r谩pido que otras opciones y solo son dos teclas

otro truco es con ALT + SHIFT
En este caso puedes escribir en varias lineas seleccionadas

Mas informaci贸n de este ultimo:

Les comparto algunos tipos de input

<input type=鈥渂utton鈥>
<input type=鈥渃heckbox鈥>
<input type=鈥渃olor鈥>
<input type=鈥渄ate鈥>
<input type=鈥渄atetime-local鈥>
<input type=鈥渆mail鈥>
<input type=鈥渇ile鈥>
<input type=鈥渉idden鈥>
<input type=鈥渋mage鈥>
<input type=鈥渕onth鈥>
<input type=鈥渘umber鈥>
<input type=鈥減assword鈥>
<input type=鈥渞adio鈥>
<input type=鈥渞ange鈥>
<input type=鈥渞eset鈥>
<input type=鈥渟earch鈥>
<input type=鈥渟ubmit鈥>
<input type=鈥渢el鈥>
<input type=鈥渢ext鈥>
<input type=鈥渢ime鈥>
<input type=鈥渦rl鈥>
<input type=鈥渨eek鈥>

As铆 coment茅 el c贸digo en Windows 10 en VSC.
SHIT ALT A

En mi caso para convertir el c贸digo en comentario fue
Alt + Shift + A

name: Es un atributo de los inputs nos ayuda en el caso que queramos enviar la informaci贸n a alguna URL. Debe ser igual que el atributo for de label y por lo tanto que el id del input.

Para que no se vea tan amontonado, pueden usar la etiqueta <br> que es un salto de linea para que dentro del form podamos hacer un formato en vertical como en el siguiente ejemplo

<body>
    <h1>When would you like to start your travel?</h1>
    <form action="">
        <label for="week">
            <span>Week</span>
            <input type="week" id="week" name="week">
        </label>
        <br> <br>
        <label for="month">
            <span>Month</span>
            <input type="month" id="month" name="month">
        </label>
        <br> <br>
        <label for="day">
            <span>Day</span>
            <input type="date" id="day" name="day">
        </label>
        <br> <br>
        <input type="submit">
    </form>
</body>

https://damiandeluca.com.ar/visual-studio-code-atajos-de-teclado-shortcuts

estos son los shortcut de visual en espa帽ol para los que no se les da bien el ingles c:

Me encanta porque estoy aprendiendo mucho m谩s de lo que aprend铆 en el liceo 馃槏 Ahora me doy cuenta de que con todo este conocimiento mis proyectos de fin de a帽o hubiesen sido mucho m谩s amenos y f谩ciles de llevar 馃槏馃槏馃槏馃槏 El poder del conocimiento es incre铆ble 鈽猴笍

Aqu铆 mi versi贸n

aqu铆 les dejo el c贸digo html y css

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Calendario</title>
    <link rel="stylesheet" href="./claendar.css" />
  </head>
  <body>
    c
    <header>
      <h1>CONFIGURE SU ENTREGA</h1>
    </header>

    <main>
      
      <div class="requisitos">
        <h2>Verifique bien la informacion colocada en esta seccion</h2>
        <form action="calendario">
          <label for="">
            <span class="span">Calendario</span>
            <input type="text" id="calendario" name="calendario" />
          </label>
        </form>

        <form action="nombre">
          <label for="">
            <span class="span">Nombre</span>
            <input type="datetime-local" id="nombre" name="nombre" />
          </label>
        </form>

        <form action="telefono">
          <label for="">
            <span class="span">Telefono</span>
            <input type="number" id="telefono" name="telefono" />
          </label>
        </form>

        <form action="email">
          <label for="">
            <span class="span">Email</span>
            <input type="email" id="email" name="email" />
          </label>
        </form>
        <form action="enviar">
          <input class="enviar" type="submit" />
        </form>
      </div>
    </main>
  </body>
</html>

body {
  background-color: rgba(236, 212, 169, 0.283);
}
h1 {
  display: flex;
  justify-content: center;
  color: rgba(43, 58, 226, 0.681);
}

h2 {
  font-size: 12px;
  display: flex;
  justify-content: center;
  color: rgba(226, 43, 43, 0.681);
}
main {
  display: flex;
  justify-content: center;
}
.requisitos {
  display: flex;
  justify-content: center;
  flex-wrap: nowrap;
  flex-direction: column;
  align-items: center;
  border: 2px solid rgb(98, 0, 255);
  border-radius: 10px;
  width: 344px;
}

form {
  margin-top: 30px;
}
.enviar {
  background-color: rgba(137, 43, 226, 0.373);
  color: rgb(10, 10, 10);
  margin-top: 20px;
}
.span {
  color: rgb(0, 0, 0);
  background-color: rgba(137, 43, 226, 0.373);
}

Para comentar en VS con Windows 10 selecciona el texto y pulsa Shift + Alt + a

Para los comentarios en Mac yo us茅 cmd+shift+7

馃惐鈥嶐煉 <input> permite crear controles interactivos para formularios, con el fin de recibir datos del usuario.

Diferentes formatos de input y labels

Opci贸n 1

<label for="lastname">Last Name</label>
<input type="text" id="lastname" />

Opci贸n 2

<label>
  Firstname
  <input name="firstname" />
</label>

Opci贸n 3

<label>
  <span>Lastname</span>
  <input name="lastname" />
</label>

Por fin pude aprender como comentar el codigo
Alt+shift+A

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Form-02</title>
</head>
<body>
    <h1>Formulario Complejo</h1>
    <form action="">
       <label for="hora">
           <span>Hora</span>
           <!-- El atributo "name" nos ayuda para identificar la info que estamos enviando -->
           <input type="time" id="hora" name="hora" />
       </label>
       <br />
       <br />
       <label for="hora">
            <span>D铆a</span>
            <input type="date" id="dia" name="dia" />
        </label>
        <br />
        <br />
       <label for="hora">
            <span>Semana</span>
            <input type="week" id="semana" name="semana" />
        </label>
        <br />
        <br />
       <label for="hora">
            <span>Mes</span>
            <input type="month" id="mes" name="mes" />
        </label>
        <br />
        <br />
        <input type="submit">
    </form>
    <br />
    <br />
    <br />
    <h1>Formulario Sencillo</h1>
    <form action="">
        <label for="calendario">
            <input type="datetime-local" id="calendario" name="calendario" />
        </label>
        <br />
        <br />
        <input type="submit" />
    </form>
</body>
</html>```

Chicos si no saben muy bien lo que hace una etiqueta busquenla en Google, entren a la p谩gina de mozilla developer!

Es informaci贸n muy buena!

RESUMEN.

  • Se usa para recibir datos de hora, d铆a, mes, a帽o.
  • El input tipo 鈥渟ubmit鈥 genera un bot贸n para enviar los datos.
<label for="calendar">
	<span>Calendario</span>
	<input type="datetime-local" id="calendar" name="calendar">
	<input type="submit">
</label>

Hola ,
En Safari no detecta el tipo hora ni fecha!
saludos

Asi quedo 馃槂

Pues yo la verdad estoy sorprendido y me emociona cosas tan simples como medio crear un formulario. Si falta estilo dise帽o y muchas, pero muchas cosas m谩s, pero en mi vida pens茅 que podr铆a hacerlo, no me imagino cuando te metes m谩s a fondo. lo que me sorprende es que con el simple hecho de inspeccionar una p谩gina puedes ver cosas nuevas!

Para la gente nueva, el atajo que dice diego para comentar a mi no me sirvio. En cambio use Alt + Shfit + A Espero les sirva

M谩s informaci贸n de los inputs Aqui

Clase 17 - Calendar


驴Para qu茅 nos sirve el atributo name de la etiqueta <input>?

  • Nos permite asignar un valor que servir谩 como identificador de la informaci贸n que se env铆e por medio de dicho input hacia la base de datos.

驴Para qu茅 nos sirve el input de tipo week?

  • Nos permite crear un campo en el que se nos desplegar谩 un calendario de semanas del a帽o, con el cual el usuario podr谩 ingresar la informaci贸n que le est谩n pidiendo llenar.

驴Para qu茅 nos sirve el input de tipo month?

  • Nos permite crear un campo en el que se desplegar谩 un calendario con los meses del a帽o, con el cual el usuario podr谩 ingresar la informaci贸n que le est谩n pidiendo.

驴Para qu茅 nos sirve el input de tipo submit?

  • Nos permite crear un bot贸n que le permitir谩 al usuario enviar la informaci贸n que ha ingresado en el formulario.

驴Qu茅 pasa cuando enviamos informaci贸n de un formulario usando el input de tipo submit y no hay ning煤n destino al cual enviar?

  • La informaci贸n enviada aparecer谩 en la ruta de la p谩gina web.

驴Qu茅 significa comentar nuestro c贸digo?

  • Nos permite crear texto que no se va a ver reflejado en el navegador pero que s铆 permanecer谩 en nuestro archivo.

驴C贸mo podemos crear un comentario en HTML?

  • Lo podemos hacer con la siguiente sintaxis.
<!-- Comentario -->

驴Qu茅 usos le podemos dar a los comentarios?

  • Los podemos usar como instrucciones y explicaciones del funcionamiento de un bloque de c贸digo.
  • Eliminar temporalmente un bloque de c贸digo.

驴Para qu茅 nos sirve el input de tipo datetime-local?

  • Nos permite crear un campo en el que podemos ingresar la siguiente informaci贸n:
  • Fecha (d铆a, mes y a帽o).
  • Hora.

El atributo NAME viene ha ser el nombre del par谩metro o argumento que se env铆an al momento de hacer clic en el BOT脫N SUBMIT del formulario, cada par谩metro se env铆a con su respectivo valor.

Para hacer calendarios en un form tenemos dos formas una es mas sencilla que otra, empezaremos por la m谩s compleja que con esa podemos tener control de que datos queremos recaudar, comenzaremos con la etiqueta <form> que ser谩 nuestra etiqueta principal que se convierte en el contenedor de nuestro formulario completo quedando de la siguiente forma haciendo un formulario tipo calendario:

<form action=鈥溾>
<label for=鈥溾>
<span>Hora</span>
<input type=鈥渢ime鈥 id=鈥渉ora鈥 name=鈥渉ora鈥 />
</label>

Lo que queremos es que en este formulario indiquen hora, d铆a, semana y mes.

Otro input que utilizaremos es submit <input type=鈥渟ubmit鈥 /> Este input es el que nos ayudar谩 a que salga el bot贸n 鈥渆nviar鈥 en nuestro formulario. Este input va hasta abajo de todo nuestro c贸digo para llenar formulario, por ejemplo:

<form action=鈥溾>
<label for=鈥渉ora鈥>
<span>Hora</span>
<input type=鈥渢ime鈥 id=鈥渉ora鈥 name=鈥渉ora鈥 />
</label>

<label for=鈥渄ia鈥>
<span>D铆a</span>
<input type=鈥渄ate鈥 id=鈥渄ia鈥 name=鈥渄ia鈥 />
</label>

<label for=鈥渟emana鈥>
<span>Semana</span>
<input type=鈥渨eek鈥 id=鈥渟emana鈥 name=鈥渟emana鈥 />
</label>

<label for=鈥渕es鈥>
<span>Mes</span>
<input type=鈥渕onth鈥 id=鈥渕es鈥 name=鈥渕es鈥 />
</label>

<input type=鈥渟ubmit鈥 />
</form>

La forma sencilla de crear un formulario es la siguiente:

<form action=鈥溾>
<label for=鈥渃alendario鈥>
<span>Calendario</span>
<input type=鈥渄atetime-local鈥 id=鈥渃alendario鈥 name=鈥渃alendario鈥 />
</label>
</form>

Est谩 mal, la etiqueta label tiene etiqueta de cierre, y entre ellas, se pone el nombre de lo que se quiiere preguntar. NO es necesario poner span.

para poner como comentarios me sali贸 con shift+alt+a

Hola Gente soy nuevo aqui

Input types


Compa帽eros les comparto los principales tipos de inputs que se utilizan.


Referenciado de: https://www.webfx.com/blog/images/assets/cdn.sixrevisions.com/demos/0345-new_html5_form_input_types/new-html5-form-input-types.html

Atajos para MacOS

Me agrada que todo este curso sea sem谩ntico, en muchos cursos hacen todo con un div

En la versi贸n actualizada VSCode 1.27.2 la abreviatura Alternar bloquear comentario es:

Alt + Shfit + A

Para comentar el c贸digo en Windows 10 pueden usar:
Alt + Shift + A

oigan para que se les sea de ayuda en windows para comentar es ctrrl+/, en linux es ctrl+/ y shift+ctrl+/ y por ultimo en mac es cmd en vez de ctrl.

PD:espero les sirva yo me complique un poco en ese pedaso

Si quieren modificar multiples variables o texto al mismo tiempo seleccionan la palabra y CTRL + SHIFT + L

  • Para generar un calendario, podemos hacer uso del tipo datetime-local, aunque tambi茅n podemos hacer uso de las etiquetas de time, date, week y month.
  • la etiqueta submit, para enviar los datos.

El type datetime-local no funciona en firefox, pero lo prob茅 en edge y s铆 funciona jaja me fall贸 mi navegador de confianza

En Firefox no funcionan algunas etiquetas :C

Para comentar en VSCODE ahora es con : ALT + SHIFT + A

es cosa mia o esta clase y la siguiente son las mismas?

Tambi茅n para hacer comentarios simplemente se puede usando
<!-- al colocarlo se autocompleta y queda para agregar el comentario que se desee.

<!---->

Para cometarios en MX linux (Debian) es CTRL SHIFT 7

lo logre. para comentar a mi me funciono ctrl+}

La diferencia de input type=鈥渟ubmit鈥 y button es que a button se le puede agregar m谩s etiquetas dentro y por ende se puede estilizar mejor

Lo hice de esta manera, usando diferente tipos de input

<I鈥檓 learning a lot! />

algunos tipos de input <input type=鈥渂utton鈥> <input type=鈥渃heckbox鈥> <input type=鈥渃olor鈥> <input type=鈥渄ate鈥> <input type=鈥渄atetime-local鈥> <input type=鈥渆mail鈥> <input type=鈥渇ile鈥> <input type=鈥渉idden鈥> <input type=鈥渋mage鈥> <input type=鈥渕onth鈥> <input type=鈥渘umber鈥> <input type=鈥減assword鈥> <input type=鈥渞adio鈥> <input type=鈥渞ange鈥> <input type=鈥渞eset鈥> <input type=鈥渟earch鈥> <input type=鈥渟ubmit鈥> <input type=鈥渢el鈥> <input type=鈥渢ext鈥> <input type=鈥渢ime鈥> <input type=鈥渦rl鈥> <input type=鈥渨eek鈥>

Aprendido en clase.馃挌

Apuntes de la clase:

<body>
    <form action="">
        <label for="hora">
            <span>Hora</span>
            <input type="time" id="hora" name="hora"> <!-- el atributo name tiene que ser el mismo que el for del label y el id del input -->
        </label>
        <label for="dia">
            <span>D铆a</span>
            <input type="date" id="dia" name="dia"> <!-- el atributo name tiene que ser el mismo que el for del label y el id del input -->
        </label>
        <label for="semana">
            <span>Semana</span>
            <input type="week" id="semana" name="semana"> <!-- el atributo name tiene que ser el mismo que el for del label y el id del input -->
        </label>
        <label for="mes">
            <span>Mes</span>
            <input type="month" id="mes" name="mes"> <!-- el atributo name tiene que ser el mismo que el for del label y el id del input -->
        </label>
        <input type="submit" name="" id=""> <!-- El input submit es un boton para enviar los datos del formulario -->
    </form>
    <br>
    <!-- Otra forma de hacer el Calendario -->
    <form action="">
        <label for="calendario">
            <span>Calendario</span>
            <input type="datetime-local" name="calendario" id="calendario"> <!-- El atributo datetime-local lo que hace es nos da la fecha 
                y el tiempo del 谩rea local para poder -->
        </label>
        <input type="submit">
    </form>
</body>

Atributos de type
type
El tipo de control a mostrar. Su valor predeterminado es text, si no se especifica este atributo. Los posibles valores son:
button: Bot贸n sin un comportamiento espec铆fico.
checkbox: Casilla de selecci贸n. Se debe usar el atributo value para definir el valor que se enviar谩 por este elemento. Se usa el atributo checked para indicar si el elemento est谩 seleccionado. Tambi茅n se puede usar el atributo indeterminate (el cual solo se puede establecer programaticamente) para indicar que la casilla est谩 en un estado indeterminado (en la mayor铆a de las plataformas, se dibuja una l铆nea horizontal a trav茅s de la casilla).
color: HTML5 Control para espicificar un color. Una interfaz de selecci贸n de color no requiere m谩s funcionalidad que la de aceptar colores simples como texto (m谩s informaci贸n).
date: HTML5 Control para introducir una fecha (a帽o, mes y d铆a, sin tiempo).
datetime: HTML5 Deprecated Control para introducir una fecha y hora (horas, minutos, segundos y fracci贸n de segundo), basado en la zona horaria UTC. Esta caracter铆stica ha sido removida de WHATWG HTML.
datetime-local: HTML5 Control para introducir fecha y hora, sin zona horaria espec铆fica.
email: HTML5 Campo para introducir una direcci贸n de correo electr贸nico. El valor introducido se valida para que contenga una cadena vac铆a o una direcci贸n de correo v谩lida antes de enviarse. Las pseudo-clases :valid y :invalid son aplicadas segun corresponda.
file: Control que permite al usuario seleccionar un archivo. Se puede usar el atributo accept para definir los tipos de archivo que el control podr谩 seleccionar.
hidden: Control que no es mostrado en pantalla, pero cuyo valor es enviado al servidor.
image: Bot贸n de env铆o de formulario con gr谩fico. Se debe usar el atributo src para definir el origen de la imagen y el atributo alt para definir un texto alternativo. Se puede usar los atributos height y width para definir el tama帽o de la imagen en p铆xeles.
month: HTML5 Control para introducir un mes y a帽o, sin zona horaria espec铆fica.
number: HTML5 Control para introducir un n煤mero de punto flotante.
password: Control de l铆nea simple cuyo valor permanece oculto. Se puede usar el atributo maxlength para especificar la longitud m谩xima del valor que se puede introducir.
radio: Bot贸n radio. Se debe usar el atributo value para definir el valor que se enviar谩 por este elemento. Se usa el atributo checked para indicar si el elemento est谩 seleccionado de forma predeterminada. Los botones radio que tengan el mismo valor para su atributo name est谩n dentro del mismo 鈥済rupo de botones radio鈥. Solo un bot贸n radio dentro de un grupo puede ser seleccionado a la vez.
range: HTML5 Control para introducir un n煤mero cuyo valor exacto no es importante. Este control usa los siguientes valores predeterminados si no se especifica cada atributo:
min: 0
max: 100
value: min + (max - min) / 2, o min si max es menor que min
step: 1
reset: Bot贸n que restaura los contenidos de un formulario a sus valores predeterminados.
search: HTML5 Cuadro de texto de l铆nea simple para introducir textos de b煤squeda. Los saltos de l铆nea son eliminados autom谩ticamente del valor introducido.
submit: Bot贸n que env铆a el formulario.
tel: HTML5 Control para introducir un n煤mero telef贸nico. Los saltos de l铆nea son eliminados autom谩ticamente del valor introducido, pero no hay otra sintaxis forzada. Se pueden usar atributos como pattern y maxlength para restringir los valores introducidos en este control. Las pseudo-clases CSS :valid y :invalid son aplicadas segun corresponda.
text: Campo de texto de l铆nea simple. Los saltos de l铆nea son eliminados autom谩ticamente del valor introducido.
time: HTML5 Control para introducir un valor de tiempo sin zona horaria espec铆fica.
url: HTML5 Campo para editar una URL. El valor introducido se valida para que contenga una cadena vac铆a o una ruta URL absoluta antes de enviarse. Los saltos de l铆nea y espacios en blanco al principio o al final del valor son eliminados autom谩ticamente. Se pueden usar atributos como pattern y maxlength para restringir los valores introducidos en el control. Las pseudo-clases :valid y :invalid son aplicadas segun corresponda.
week: HTML5 Control para introducir una fecha que consiste en n煤mero de semana del a帽o y n煤mero de semana sin zona horaria espec铆fica.

en windows 10 para comentar y quitar los comentarios CONTROL + /

No sabia de los type que us贸 el profe, esta genial

Para comentar tambien puedes hacerlo con

Ctrl + k + c


Para des-comentar con

Ctrl + k + u

鈥擨鈥檓 trying to check some input types that they haven鈥檛 worked in Firefox browser, but in chrome does, it looks like the video. Could someone tell me how can I solve this issue? Thanks. I鈥檇 really appreciate your help.
Chrome

Mozilla

Nonetheless, I checked the Firefox browser would be up to date.


This is my form code

<form>
    <label for="hour">
        <span>Hour</span>
        <input type="time" id="hour" name="hour"/>
    </label>
    <label for="day">
        <span>Day</span>
        <input type="date" id="date" name="date"/>
    </label>
    <label for="week">
        <span>Week</span>
        <input type="week" id="week" name="week"/>
    </label>
    <label for="month">
        <span>Month</span>
        <input type="month" id="month" name="month"/>
    </label>
    <input type="submit">
</form>

Estoy por estos lares por el #PlatziChallenge y no tenia idea de la cantidad que funcionalidades que uno se pierde por tomar cursos r谩pidos como Aprende HTML en 30 minutos xd.
Es muy gratificante caer en cuenta de estas cosas, gracias Diego.

no me funcion贸 el cmd+alt+7 en mi mac, tuve que hacerlo manual

En linux para comentar se puede usar:

  • CTRL + A : Comentar un bloque de codigo (Varias lineas)
  • CTRL + / : Comentar una sola linea de codigo

Otra forma de comentar en VSC es usando el comando ctrl + }

simplemente se selecciona el area y se usa el comando y para descomentar es el mismo (igualmente se selecciona)
Esto es por si no les sirve el comando propuesto por el profe.
Comentar es sumamente util.

Comentar en VS Code:
Para aprender a comentar en VS Code te recomiendo primero probar con una linea y una vez lo domines comentar lo que desees dejar a un lado en tu c贸digo.

  1. Mant茅n presionado la tecla control (Ctrl).
  2. Sin dejar de presionar Ctrl presionas la tecla K.
  3. Despu茅s de presionar la tecla K presionas la tecla U.

Una vez comentado te aparecer谩n los s铆mbolos ( <!鈥 ) como apertura y ( 鈥> ) como cierre de comentario.

Nota: No es necesario sombrear o seleccionar el texto para una linea.

El resumen del c贸digo en clase con algunos a帽adidos

Formulario con calendario 鈥渕anual鈥 y mas espec铆fico

<form action="">
	<label for="hora"><span>Hora</span></label>
	<input type="time" id="hora" name="hora" />
	<!--
name sirve para identificar el dato que se env铆a desde un formulario similar a las variables. Ej hora="15:36"
-->
	<label for="dia"><span>D铆a</span></label>
	<input type="date" id="dia" name="dia" required />

	<label for="semana"><span>Semana</span></label>
	<input type="week" id="semana" name="semana" />
	<!--
El tipo week muestra un calendario donde se puede seleccionar la semana de un a帽o al dar click sobre un d铆a o los espacios para colocar el n煤mero de la semana y el a帽o.
-->
	<label for="mes"><span>Mes</span></label>
	<input type="month" id="mes" name="mes" />
	<!--
El tipo week muestra un calendario donde se puede seleccionar la semana de un a帽o al dar click sobre un d铆a o los espacios para colocar el n煤mero de la semana y el a帽o.
-->
	<input type="submit" value="Solicitar" />
	<!--
El tipo submit muestra un bot贸n que realiza el env铆o de datos a donde apunta el atributo "action" de la etiqueta form,
value sirve para modificar el texto predeterminado dentro del boton de env铆o
-->
</form>

Formulario con calendario sencillo

<form action="">
	<label for="Calendario"><span>Calendario</span> </label>
	<input type="datetime-local" id="calendario" name="calendario" />
	<input type="submit" value="Solicitar" />
	<!--
El tipo datetime-local muestra un calendario con horario
-->
</form>

que gran tip lo de comentar, yo lo hacia antes de una manera manual

Fragmento de codigo en modo comentar (para windows 10) teclas: Ctrl+K y luego Ctrl+C.

Aunque estamos viendo algo b谩sico por ahora, me parece genial recordar toda esta informaci贸n, para aplicar a nuevos proyectos

Not茅 que en Firefox no sale el men煤 desplegable para cada campo. Cre铆 que hab铆a alg煤n error con el c贸digo, pero en Chrome confirm茅 que estaba todo en orden.

Para comentar en Mac, prueben:

cmd + /

Intencionalmente pense, de seguro se llama week y si se llama asi XD

Coloque el submit, pero en vez de enviar me sale un mensaje que dice 鈥淓nviar consulta鈥 eso es algo nuevo?

<form action="">
        <label for="calendario">
            <span>calendario</span>
            <input type="datetime-local" id="calendario" name="calendario">
        </label>
        <input type="submit">
    </form>
<code> 
<form action="">
        <label for="hora">
            <span>Hora</span>
            <input type="time" name="hora" id="hora" />
        </label>
        <h1>                </h1>
        <label for="dia">
            <span>Dia</span>
            <input type="date" name="dia" id="dia">
        </label>
        <h1>                </h1>
        <label for="semana">
            <span>Semana</span>
            <input type="week" name="semana" id="semana">
        </label>
        <h1>                </h1>
        <label for="mes">
            <span>Mes</span>
            <input type="month" name="mes" id="mes">
        </label>
        <h1>                </h1>
        <input type="submit" name="" id="">
    </form>

En atom para windows 10, para convertir el codigo en comentarios es:

CTRL + Shift + 7

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta name="viewpoint" content="width=device-width, inictial-scale= 1.0"/>
    <title></title>
  </head>
  <body>
    <header></header>
    <main>
      <form action="">
        <label for="hora">
          <span>Hora</span>
          <input type="time" id="hora" name="hora"/>
        </label>

        <label for="dia">
          <span>D铆a</span>
          <input type="date" id="dia" name="dia"/>
        </label>

        <label for="semana">
          <span>Semana</span>
          <input type="week" id="semana" name="semana"/>
        </label>

        <label for="mes">
          <span>Semana</span>
          <input type="month" id="mes" name="mes"/>
        </label>
        <input type="submit"/>
      </form>
    
    </main>
    <footer></footer>
  </body>
</html>

console.log("Excelente!");