Aquí algunos Tips para ordenar el código de mis archivos: El primero es separar bloques de código con la etiqueta de comentario <!– INICIO DEL HEAD –> la idea es que se puedan diferenciar del resto .
Para comentar en CSS se requiera de la siguiente etiqueta: /* Aquí puedes escribir tu comentario */
Etiqueta <br> representa el Enter en nuestros documentos, mueven los objetos a la linea de abajo.
Etiqueta <span> es un contenedor en línea que se utiliza para marcar una parte de un texto o una parte de un documento.
La <span>etiqueta se diseña fácilmente con CSS o se manipula con JavaScript utilizando el atributo class o id.
La <span>etiqueta es muy parecida al elemento <div> , pero <div> es un elemento a nivel de bloque y <span>es un elemento en línea.
Tabular en el teclado funciona para separar secciones de código y estructurarlo para que se pueda leer mejor.
Elementos padre y hijos en html
En los documentos de html y css se refiere a las etiquetas que envuelven cosas, en el ejemplo que sigue DIV envuelve todo el código y SECTION envuelve a su vez otro código hijo. Todos ellos se transforman en elementos padres e hijos según corresponda. En display FLEX es muy importante reconocerlos ya que al usar las ID y CLASS afectara su comportamiento. La idea es que se encuentren correctamente escritos y envueltos.
<div id=»elemento-bloque»>
<img src=»image/foto.jpg» width=»800px»>
<section id=»boton-contacto»>
<ul>
<li><a href=»contacto.html»>Contáctame</a></li><div class=»recibir»>para recibir mas información</p>
</ul>
</section>
</div>
guia de ejercicios en FLEX:
En los proyectos donde hay grandes plataformas se crean Backlog, pero ¿Qué es un backlog?
El backlog de un producto es una lista de trabajo ordenado por prioridades para el equipo de desarrollo que se obtiene de la hoja de ruta y sus requisitos. Los elementos más importantes se muestran al principio del backlog del producto para que el equipo sepa qué hay que entregar primero.
Trello es un software de administración de proyectos con interfaz web y con cliente para iOS y android para organizar proyectos.
Todos los elementos de un sitio web son ENTES independientes donde hay equipos de trabajo actualizando cada sección: Por ejemplo en Facebook hay equipos desarrolladores del chat y se adjuntan diversas tareas a trabajar.
Propiedades Display
https://dev.to/lupitacode/la-propiedad-display-en-css-1b6a
La propiedad CSS display especifica si un elemento es tratado como block or inline element y el diseño usado por sus hijos, como flow layout (Diseño de Flujo), grid (Cuadricula) o flex(Flexible).
Formalmente la propiedad display establece los tipos de visualización interna y externa de un elemento. La tipo externa establece la participacion de un elemento en flow layout; la tipo interna establece el layout (Diseño) de los hijos. Algunos valores de display estan totalmente definidos con sus especificaciones propias; por ejemplo el detalle de que pasa cuando display: flex es declarado y definido en la especificación de Modelo Flexible de Caja (Flexible Box Model specification) de CSS.
Además de los Diferentes Tipos de caja de Visualización, el valor de none permite Desactivar la Visualización de un Elemento; cuando no se utiliza none, todos los elementos descendentes también quedan desactivados. El documento se procesa como si el elemento no existiera en el árbol de documentos.
Posicion relativa y absoluta
https://leannezhang.medium.com/difference-between-css-position-absolute-versus-relative-35f064384c6
posición: estática
De forma predeterminada, coloque un elemento en función de su posición actual en el flujo. Las propiedades
top,right,bottomy no se aplicanleft.z-index
position: relative
Coloque un elemento en función de su posición actual sin cambiar el diseño.
position: absolute
Coloque un elemento en función de su posición de antepasado posicionado más cercano.
Para empezar, cree un contenedor principal con 4 cajas una al lado de la otra.
Aquí es donde entra en juego la posición relativa. Mueva el cuadro verde en relación con su posición actual a 20 px desde la izquierda y la parte superior sin cambiar el diseño a su alrededor. De esta forma, dejando un hueco para el recuadro verde donde hubiera estado de no haber sido colocado.
Posición: absoluto es lo contrario.
Al aplicar posición: absoluta a GreenBox, no dejará ningún espacio donde habría estado. La posición de GreenBox se basa en su posición principal (el borde punteado). Por lo tanto, mueva 20px hacia la izquierda y hacia abajo desde el origen superior izquierdo del borde punteado.
En pocas palabras…
position: relative coloca un elemento relativo a su posición actual sin cambiar el diseño a su alrededor, mientras queposition: absolute coloca un elemento en relación con la posición de su padre y cambia el diseño a su alrededor.
Guía de ejercicio
jsbin.com/fimatipewa/edit?html,css,output
