Scribd
Upload
8 views6 pages

Front End Developer

cosas sobre front end developer

Uploaded by

Daniii jiji
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
8 views6 pages

Front End Developer

cosas sobre front end developer

Uploaded by

Daniii jiji
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 6

Front End Developer: HTML – CSS – JavaScript – API’s

UI Design

Backend Developer: Lenguajes de programación – BD

Como se almacenan los datos del programa de una forma segura.

FullStack Developer: Backend y Frontend en uno solo.

Frameworks CSS, HTML, JS.

Frontend Mentor
HTML: Lenguaje de marcas de hipertexto

Es un lenguaje para la estructura de los sitios web.

<p> = Parrafos

<nav> = navegaciones

<header> = encabezado del sitio o elemento

<main> = contenido principal

<footer> = pie de pagina

En visual estudio: html:5 y presionamos tap nos dara toda la estructura de un html común

H1 es más importante que el h6

CTRL + S para guardar los cambios

SVG: Scalable Vector Graphics

Cuando necesitar visualizar texto y el cliente aun no te da texto, puedes poner la palabra Lorem en
visual.

Si tiene un heading (h1-h6) tiene que tener un section salvo que sea el main#
CSS: Colores, tamaños, espacios y animaciones.

Hojas de estilo en cascada.

Anatomia de CSS:

p{

color: blue;

<link rel="preload" href="css/styles.css" as="style"> (para que


la hoja de estilos cargue más rápido)
<link href="css/styles.css" rel="stylesheet"> (para añadir hoja
de estilos externa)

/* */ Comentarios en CSS

!important pasa por encima de todos en especificidad

:root son pseudoelementos que no existen en el código html, permite almacenar variables de css

CTRL + A: Copia todo

margin-top:0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;

margin:0 auto 0 auto; (va en orden a las manecillas del reloj)


ambos son lo mismo

margin: distancia hacia afuera

padding: distancia hacia adentro

.navegacion-principal a:hover (esto permite que en el momento que


pones la flechita encima de el nav cambie de color el fondo)
<!----> agregar comentarios en HTML
/* */ agregar comentarios en CSS
ALT + SHIFT + A para comentarios en visual
align-items: center;(permite alinear verticalmente)
CTRL + D: SELECCIONA TODOS DE UNA MISMA PALABRA

Es una de las cosas más difíciles de entender en flexbox, por lo que te dejare
bastante teoria.

Si acudimos a la documentación para ver la definición de flex-basis veremos lo


siguiente:
“The flex-basis property sets the flex basis”

Bastante clara, ¿verdad? Pero, luego continúa con esto:

“It accepts the same values as the width and height property, plus
content”
Pero, entonces, si acepta los mismos valores que width y height, ¿para qué la
necesitamos?
Para hacernos una idea un poco más clara, flex-basis define el tamaño que, por
defecto, va a tener un elemento antes de que se distribuya en el espacio restante.

Diferencias entre flex-basis y width


flex-basis solo aplica a los hijos de un flex container mientras que width trabaja en
todos los elementos.
Flex-basis coincide con el width cuando el container tiene flex-direction: row y un
valor definido distinto de auto. Si el container tuviese flex-direction: column, flex
basis coincidiría con la altura del componente, igual que en el caso anterior,
siempre y cuando su valor no sea auto.
Flex-direction: row
En el caso de Flex-direction: row, el valor de la propiedad flex-basis prevalece
sobre la propiedad width. Fijáos que tenemos un width: 220px y un flex-basis:
200px. Si inspeccionamos el ítem, veremos que el ancho del elemento viene
determinado por el valor del flex basis.
En este caso, el main axis es el eje x, por lo que el ancho es controlado por flex-
basis. En cuanto a la altura, el flex item toma el valor que tenga la
propiedad height o, en su defecto, el alto del contenido. En este ejemplo, al no
tener contenido, hay que darle un valor a la propiedad height. Puedes ver la
prueba en este link.
En este caso, al no tener un flex-basis definido, toma el valor de width como
referencia para el ancho. La altura sigue siendo exactamente la misma.

Flex direction: column


En flex direction: column, como podemos observar, el flex-basis no controla el
ancho, sino la altura del elemento. Si nos fijamos, el ancho del ítem es el que
hemos definido en la propiedad width.
Esto pasa porque el main axis es el eje Y ajustando el flex-basis a la altura. Fijáos
que tenemos una altura de 100px y nuestros ítems un height: 200px definido,
coincidiendo, en este caso, el flex-basis con la altura del componente.
Hasta aquí parece que todo queda más o menos claro. La cosa se complica cuando
utilizamos flex-shrink y flex-grow.

Flex basis + Flex-shrink + Flex-grow


En este caso, el ancho de los elementos coincide con el valor del flex-
basis excepto en el primer ítem que, al tener un flex-grow: 1, su ancho ocupa todo
el espacio que queda disponible dentro del flex container, no coincidiendo ni con
los valores de las propiedades flex-basis ni width.
En el resto de elementos, el ancho coincide con el flex-basis, excepto cuando
hacemos el resize. En cuanto el container se hace más pequeño y no entran
los flex items con 100px, estos se van haciendo más pequeños de forma
proporcional (recordemos que por defecto tienen flex-shrink: 1), excepto el último
item que, al tener el flex-shrink: 0, se mantiene con el ancho fijo, el especificado
en flex-basis.
Por tanto, podemos decir que tanto flex-grow como flex-shrink afectaría tanto a las
propiedades width, height (en el caso de flex-direction: column) y también a flex-
basis.

Flex basis + Max Width + Min Width


Flex basis se ve afectado por las propiedades tanto de max-width como min-
width a la hora de limitar el ancho de un flex-item.
Pero, ¿qué pasa si ponemos un max-width junto con un flex-grow? El primer
ítem, al que le hemos dado un flex-grow: 1, no se inmuta, ya que su ancho se ve
limitado por el valor que hemos puesto en su max-width.
Exactamente ocurre lo mismo con el min-width y flex-shrink. Aquí podemos ver
un ejemplo de ello. En todos los ítems, en el resize, su ancho se queda fijo: el
valor que hemos dado al min-width.

Flex container con flex-item posicionados en absoluto


En este caso, como podemos ver, el flex-basis es ignorado. Esta propiedad no
funciona con flex items posicionados en absoluto. Sin embargo, los valores de las
propiedades width y height sí que se respetan.
Como veis, la diferencia entre flex-basis y la propiedad width tiene muchos matices
y, dependiendo de los valores, obtendremos distintos resultados.
Flex-basis nos permite controlar tanto el ancho como el alto de nuestros
componentes, permitiéndonos hacer componentes flexibles y fácilmente
manejables tan solo cambiando el eje sobre el que queremos que actúe.

You might also like