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

Posicionamiento en CSS

18/43

Lectura

El posicionamiento en CSS es una de las cosas más importantes, pues establece cómo van a estar ubicados nuestros elementos en la pantalla.

En CSS los elementos se posicionan utilizando las propiedades top (superior), bottom (inferior), left (izquierda) y right (derecha), pero sólo funcionarán si la propiedad position está establecida. Esto quiere decir que si quiero que mi elemento div esté completamente a la derecha, debo escribir en mi CSS lo siguiente:

div { position: absolute: right: 0; }

La propiedad position tiene 7 valores diferentes: relative, absolute, fixed, sticky, static, initial e inherit. Veremos de qué se tratan:

Posicionamiento en CSS.png

Aportes 230

Preguntas 1

Ordenar por:

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

Static position

Absolute position

Relative position

Fixed position


Positioning in web design

Para los que tengan dudas:

  • Relative: si le doy coordenadas x, y se va a mover con respecto a su posicion original

  • Absolute: si le doy coordenadas x, y se va a mover con respecto a la posicion 0,0 del la ventana del navegador
    o si esta contenido, pues segun el 0,0 de su padre

  • fixed: si le doy coordenadas x, y se va a mover con respecto a la posicion 0,0 del la ventana del navegador
    la cosa es que este se queda fijo en el navegador asi que aunque hagas scroll se queda quieto

  • sticky: como fixed solo que este tiene como un offset inicial, que cuendo scroleas arrastra el objeto al top de la ventana y se lo lleva

  • Static: que va a la deriva no tiene posicion definida, solo fluye con el documento (valor por defecto) :v

  • initial: es el mismo valor con el que se arranca, osea que es igual a static

  • inherital: es que hereda el valor de position que tenga el padre, osea que si el padre es fixed, el tambien sera fixed

encontre esto en stackoverflow, sin duda es la mejor repuesta para aprender a diferenciarlos

¿Cual es la diferencia entre position: relative, position: absolute y position: fixed?

Posicionamiento en CSS
El posicionamiento establece cómo van a estar ubicados nuestros elementos en la pantalla.
Hay cinco valores de posición diferentes:
• static
• relative
• fixed
• absolute
• sticky

Por si interesa en esta página hay una demo de position relative, absolute y sticky:

Los Posicionamientos aparte de habilitarnos las propiedades top, botton, left, right; estos tambien nos permiten usar la propiedad Z-index (a exepción del static). La propiedad z-index basicamente nos permite controlar el orden en el que se observan los objetos, osea quien esta por encima de quien, por defecto el ultimo en renderizarse estará por encima de los demás, aunque esto también depende de su posicionamiento. Al hacer uso de z-index podemos organizar ese orden a nuestro gusto donde un elemento con un mayor z-index que otro se verá por delante. Esta propiedad es muy beneficiosa pero puede volverse una tortura sino la entendemos completamente, por ejemplo si un elemento se le cambia su opacidad aunque sea a 0.99999 este elemento se verá por encima de los demás sin importar su z-index.

Si quieren profundizar más pueden leer el sigt articulo:
https://desarrolloweb.com/articulos/propiedad-z-index.html

Un claro ejemplo de position: sticky

Pienso que sin ejemplos no se comprende totalmente.

Compañeros, les comparto este enlace donde dan ejemplos. Position-CSS

Los position pueden ser complejos al inicio pero cuando los dominas son muy fáciles.

Por ejemplo, cuando quieres ubicar un elemento con respecto a otro lo que haces es usar el relative y absolute, al elemento que usas como referencia le pones el position relative y al elemento que quieres posicionar lo poners como absolute, suele ser muy usado para posicionar mas que nada los pseudo elementos ::before y ::after.

El fixed suele ser usado cuando quieres dejar un elemento fijo en la pantalla, por ejemplo el header, o a veces en algunas páginas web cuando te aparecen al lado de la pantalla las redes sociales.

Recomiendo mucho los videos de FalconMasters, es muy bueno explicando esto y tiene contenido muy genial con respecto a diseño web y CSS ^^

Si es bastante importante, sin embargo en la practica se pdra ver la diferencia, en mi opinion, fuera sido mas amplio si hubiese el video.

Este tipo de temas deberían ser explicadas con videos, ya que son cosas un poco más complicadas que las lecciones anteriores

Buen aporte, sin embargo estos temas quedarían mucho más claros con un video.

Compañeros, aprender CSS es bastante complejo por lo que te recomiendo seguir a la par los siguientes cursos que son complemento de este:

https://platzi.com/clases/html-css/
https://platzi.com/clases/css-grid-layout/

Aquí aprenderás y conocerás los conceptos básicos de CSS de forma práctica y más clara.
¡No se desanimen! Esto puede parecer poco complejo al inicio pero se vuelve más fácil. 😀

Aquí pueden encontrar documentación detallada sobre el tema:
https://developer.mozilla.org/en-US/docs/Web/CSS

Sticky, no sabía sobre ello.
Aquí hay más sobre los Positions https://www.w3schools.com/css/css_positioning.asp

Este video explica un poco más gráficamente el tema:

Posicionamiento CSS

Considero que estas tres ultimas sesiones serian mas productivas si se exponen ejemplos y/o se ponen talleres para entender su aplicación.

que decepción encontrarme una explicacion de position asi , es un tema/propiedad super interesante para practicar y profundizar, saludos espero que mejore el contenido

En el curso de responsive design, dedican una clase entera con ejemplos a esto de las posiciones. Se los recomiendo

Les recomiendo ver dentro de la ruta Arquitectura Frontend explican el CSS positions en video para profundizar un poco mas con ejercicios prácticos: https://platzi.com/clases/1362-responsive-design/13547-css-positions/

En el curso de responsive design o desarrollo web explican Leonidas en una clase las posiciones de relative absolute y sticky

Recomiendo ver el curso definitivo de html y css del profesor degranda:
https://platzi.com/clases/html-css/

Siempre he tenido problemas con position, la verdad es que nunca me senté a leer cada uno, simplemente hacia prueba y error, no hagan eso jeje.

Los que aún no vieron el curso definitivo de HTML y CSS se los recomiendo mucho. En esta clase se explica el tema de Position en CSS: https://platzi.com/clases/2008-html-css/31058-position/

Investigaré un poco más, siento que para entenderlo mejor necesito verlo en la práctica

Seria mejor que estos temas se explicaran en vídeo, y con ejemplos practicos, Ya en en la practica se van a usar muy frecuentemente.

Creo que el posicionamiento en CSS es un tema mas complicaddo y deberia de ser mas tratado.

Pienso que este tanto los dos temas anteriores debieron ser abordados en video, sin embargo, la educación autodidacta requiere de fuentes externas siempre.

Interesante… pero seria mas memorable si lo llevamos a la práctica. Gracias!!

la teoria esta bien, pero hace falta mucha practica, seria bueno llevar el curso de desarrollo web; en donde profundizan los temas de html y mejor aun los de css con varios ejemplos

Me parece que seria bueno verlo en clase explicados con video para leer hay mucha documentación les recomiendo nos expliquen esto pero didácticamente gracias

por lo general para los que quieren que su header al hacer scroll hacia abajo siga siendo visible para los usuarios se le pone un position: sticky;

Pienso que no estaria mal una explicacion corta de cada uno en video.

en esta documentacion lo entendi mejor
https://www.w3schools.com/css/css_positioning.asp

en lo que llevo del curso he aprendido algunas herramientas y elementos que no conocía, que me han aportado a mi conocimiento pero requiere de un poco de más practica, adicional a la teoría brindada para que se complemente espero que se mejore el contenido del mismo para tener una formación más integral del mismo.

esta bien el material, pero seria mejor verlo en ejemplos explicados en video… Saludos

Que pasó con la profeeeeee!!!

este es el cuarto curso que veo en Platzi sobre HTML y CSS y de todos me llevo algo nuevo que no sabia. Por pequeña que sea.

tambien esperaba un super video para esto ! 😡
es una de las cosas que se me complican !

Chicos, no se desanimen… Ésto son aportes teóricos para que tengamos bases en estos conceptos. ¿Quieren ahondar más? ¡Investiguen! Si bien están pagando por una educación, es pertinente que entiendan que si Platzi quisiera darnos TODA la información acerca de programación y desarrollo web, los cursos durarían años, los mismos expertos lo dicen, programar se trata de leer, investigar y buscar más allá. Cuando no entiendan algún concepto vayan a youtube y miren videos, vayan a blogs de programación e investiguen ejemplos de los conceptos que no entendieron. No nos quedemos con lo del curso solamente, ánimo con ese espíritu curioso pues 😃

Tengo nociones básicas de html y css, y hasta ahora creo que me equivoque al pagar la suscripción de platzi con este curso, mucha teoría poca practica, esta teoría se puede encontrar en cualquier parte y seguirla, me esperaba otra cosa de este curso espero que en lo que sigue mejore, pero sin duda falta mucha practica como dice el dicho la practica hace al maestro, si bien esta bien la teoría creo que falta dedicación a la hora de enseñarla, tengo un curso de 9 dolares en otra plataforma y le da mil vueltas a este, repito hasta el momento veremos lo que sigue.

Aquí hay un buen ejemplo de cómo funciona el Sticky: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_sticky_element

Esta información es genial durante mucho tiempo busque de entender esto pero nunca me quedaba claro

Bueno ya muchas cosas esenciales las han dejado por fuera de las clases en video. Mala cosa

Se hubiera agradecido que todo se hubiera explicado en video, no es por ofender pero hasta un curso gratuito de youtube se toma la molestia de explicar estos atributos tan usados…

Genial la propiedad sticky, siempre pensé que era muy difícil crear ese efecto.

Me hacen falta muchas cosas, ejemplos, cual es mejor usar en diferentes casos, como y en qué elementos es mejor usar cada uno. Estoy un poco decepcionado con éste curso.

Siempre es bueno repasar estos conceptos porque te ayudan a recordarlos y entenderlos mejor

Mi talón de aquiles 😦

Aquí hubiese sido bueno un ejemplo en video, para poder comprender que hace cada una de las propiedades.

Buen contenido, sin embargo creo que sería mejor que estos temas se explicaran en video

Un uso divertido de fixed es con los header sirve para que este siempre siga al usuario

Ya había visto esa función en algunas páginas, hasta hoy supe que se llama sticky

buena información hubiese sido bueno colocar ejemplos de ello de parte del curso o mini ejercicios para ir probando las propiedades para practica

Este tema es muy importante saberlo, no entiendo el poco esfuerzo y dedicación que le dieron 😕 Una simple googleada puede darte más información que esto.

Hubiera estado mejor una explicación en video, aunque supongo que ya hay otro curso que lo explica a detalle

sigo leyendo y tratando de entender todo!!! a no desanimar y seguir aprendiendo!
De estudiar nunca pares! (Yoda)

Si no les quedo claro, pueden ver esta clase
https://platzi.com/clases/2008-html-css/31058-position/

Aqui tambien explica como es el posicionamiento en css
https://css-tricks.com/almanac/properties/p/position/

Buena teoría, pero recuerden practicar mucho.

muy buena información

la perfeccion explicada!

Justo esta parte hubiese estado buenísima en video, con animaciones y ejemplos. Para leer lo busco en internet. baja muchísimo la calidad de la plataforma este tipo de cosas, uno paga por un curso explicado por alguien que sabe supuestamente, espera además recibir un feedback mínimamente… gato por liebre

aqui podemos profundizar mas sobre position

https://www.youtube.com/watch?v=OWKXEJN67FE&t=4016s

Muy buena informacion, pero sería mejor con ejemplos concretos.

Seria interesante que hubiera una forma de tener pagina guardadas para cuando se necesiten consultarla sin necesita de entrar en le curso y ponerse a buscar la clase especifica

Current Position: Understood

Siempre es uno de los temas más difíciles en CSS, es bueno repasarlos Saludos!

Tristemente no me queda claro.

Tengo que practicar el Position.💚🚀💻

Aun hay mucho por aprender

gracias

Con la falta de ejemplos me siento un poco perdido 😦

Muy buenas descripciones, pienso que ayudan a más de uno a entender esas propiedades.

Me encantan estos posts… información precisa y útil! 👍🏽

deberia haber un archivo para descargar y tener esta informacion, o un video donde se pueda practicar

wow me sorprende la forma tan sencilla y comprendible de esta explicacion, vale oro este resumen

Buena Información , Un ejemplo de Position --> fixed , seria por ejemplo , si se quiere crear un chat que este fijo siempre en alguna parte del navegador , con eso el usuario siempre lo tendra disponible.

la diferencia entre position absolute y relative, es que en position abosolute el elemento no guarda su espacio en el que estaba inicialmente, pero en position relative tu lo puedes mover a donde quieras y ningun otro elemento ocupara el espacio inicial del primero😉

Tener en cuenta que position:sticky no funcionara si es descendiente (sin importar el nivel) de una tique que tenga un estilo de overflow: hidden sin importar que su padre directo tenga scroll

que diferencia hay con el display?, no lo se, no me esta gustando mucho este curso, muchas explicaciones de este tipo… me recuerda a las clases en linea de las primarias… “lee esto y ya”

Aquí les dejo documentación sobre position
https://developer.mozilla.org/es/docs/Web/CSS/position

Se debe profundizar más!

es interesante conocer las propiedades porque luego las usamos y no sabemos su funcionamiento!

Conocía las 5 primeras opciones.
Sin embargo, porque han puesto el texto como imagen, hubiese sido mejor ponerlo como texto para poder copiarlo.

Aquí les comparto estas dos documentaciones para poder investigar más acerca del posicionamiento en CSS. 😃
https://developer.mozilla.org/es/docs/Web/CSS/position
https://www.w3schools.com/css/css_positioning.asp

Excelente contenido

Es un gran resumen

Con las notas que tomaron aquí, les comparta la que realice, escogiendo lo mejor que vi, sobre el posicionamiento en CSS.

Posicionamiento en CSS.

La propiedad position controla el tipo de posicionamiento utilizado por un elemento, dentro de sus elementos padres

Los elementos con el valor Static no reconocen los valores top, bottom, right y left

div {position:static;}

Si esto entra en el examen… Mmmmmmmmmm (Sin comentarios)
🤨🤨🤨😐😐😐

Uno de los mejores aportes que se puede tener sobre CSS, el posicionamiento.