Jhan M.

Mucho tiempo se ha vinculado que un Frontend debe de saber de diseño y UX/UI, si bien puede adquirir aquellos conocimientos de esas áreas, al momento de trabajar en un empresa o startup de tecnología cumplirá funciones especificas y el encargado de la interfaz y el diseño vinculado al código será un maquetador web o un Web Designer.🚀

Este es el trabajo en codepen.io de Alexis Mora Angulo UX Lead en EDteam.💙

Me he dado cuenta que debo de hacer una lista de shortcuts ya que Asana es una aplicación de productividad debe tener shotcuts.

Creo que dentro de todas las formas mencionadas de crear una tarea. Me quedo con el shortcut es más práctico y productivo. 🤹‍♂️

📌Recuerden: Tab + B Crear una tarea

¿Les gustaría una lista de Shotcuts de Asana?🤔

Me gusta la opción de Asana cuando hayas realizado ya sea una búsqueda o búsqueda avanzada.😌

1. Refinar búsqueda: Te permite agregar más filtros de búsqueda. 🧐

2. Guardar el informe: Te permite guardar los resultados de la búsqueda con todos los parámetros. Me hace recordar el guardar de Slack.😮

3. Ordenar: última modificación: Te permite tener una mejor organización en la lista de resultados de búsqueda. 📁

En la clase se nos comentó que sería óptimo organizar nuestro código de CSS por similudes, podemos asociarlos con las propiedades de CSS, pero ¿cómo organizarlos?🤔

Una de las propuestas al momento de hacerlo con propiedades es la siguiente:

• Propiedades de Texto: font-family, font-size, line-height ...

• Propiedades de Posicionamiento: position, z-index, top ...

• Propiedades de Modelo de caja: box-sizing, width, height ...

• Propiedades de Colores: color, background, border-color ...

• Otras propiedades: cursor, content ...

Psdt. También existen organizadores de código de CSS en la web como CSScomb🕵️‍♂️

1. Por la etiqueta Link, es el más recomendable.🚀

<link rel="stylesheet" href="styles.css">

1. Por la etiqueta Styles dentro del , lo negativo es que solo aplica estilos a ese archivo HTML.😬

<style></style>

1. Atributo Style, solo aplica estilos a una etiqueta HTML.🥴

<h1 style="color:red">Hola</h1>

1. Por @import url(), se puede vincular un import dentro de otro archivo CSS, pero puede existir bloqueos dentro de los archivos por el import.🤐

@import url(styles.css)

1. Por la etiqueta Link, es el más recomendable.🚀

<link rel="stylesheet" href="styles.css">

1. Por la etiqueta Styles dentro del , lo negativo es que solo aplica estilos a ese archivo HTML.😬

<style></style>

1. Atributo Style, solo aplica estilos a una etiqueta HTML.🥴

<h1 style="color:red">Hola</h1>

1. Por @import url(), se puede vincular un import dentro de otro archivo CSS, pero puede existir bloqueos dentro de los archivos por el import.🤐

@import url(styles.css)

No sabía que CSS tendría similitudes en su evolución igual que el HTML en considerarlos CSS3 Y HTML5 respectivamente. Y su evolución por módulos le ha permitido a CSS seguir creciendo.🥳

• Elementos de bloque

Forman un bloque visible en la página. Aparecerán en una línea nueva después de cualquier contenido anterior. Suelen ser elementos estructurales de la página.

<p>Mi nombre es Jhanpiere Montes</p>

• Elementos en línea

Los elementos en línea están contenidos dentro de elementos de bloque y que delimitan solo pequeñas partes del contenido del documento. Un elemento en línea no hará que aparezca una nueva línea en el documento.

<p>Mi nombre es <strong>Jhanpiere Montes</strong></p>

• Elementos vacíos o self closing

Los elementos en línea están contenidos dentro de elementos de bloque y que delimitan solo pequeñas partes del contenido del documento. Un elemento en línea no hará que aparezca una nueva línea en el documento.

<img src="https://ed.team"/>

1. Crea una carpeta dentro de tu computadora. Ejm: curso-html 🎯

2. Abrir VScode y click en 'Open Folder' o 'Abrir carpeta' y seleccionas la carpeta que has creado. 🤖

3. Una vez que hayas abierto la carpeta dentro de VScode, crea un archivo llamado 'index.html' 🚀