📄Ejercicio HTML & CSS 🎨
La teoría se aprende practicando y la idea de este ejercicio es que practiquemos un poco de etiquetas.
Como menciona la metodología de este workshop se aprende haciendo y por ello te invito a practicar un poco las etiquetas. y los estilos, la idea es que uses la teoría o investigues un poco en internet para lograr el resultado esperado y tambien uses un poco la imaginación para añadir más elementos, si lo deseas.
Creemos unas tarjetas de personajes
Para hacer nuestra tarjeta de personajes nos basaremos en la siguiente imagen:
Primero lo que haremos será crear nuestro documento html base, esto lo haremos en un editor, puede ser visual studio code (local en tu maquina) o codepen.
En el caso de que uses codepen, no es necesario crear la estrucutura anterior, por defecto esta viene incluida internamente y lo que colocaras en las sección del HTML será solo las etiquetas que estarían en el <body></body>
La siguiente imagen sería como se veria tu codepen:
En la seccion del HTML, crearemos nuestras etiquetas.
Como es una card, analicemos que elementos tiene:
-- Imagen
-- Nombre del personaje
-- Título del personaje
-- Redes sociales
-- botón de contact
Una vez analices los elementos, podemos empezar a crear las etiquetas, HTML tienen algunas etiquetas de significado semántico, algunas son demasiado intuitivas para con solo leer la etiqueta saber que puede hacer en el documento.
La etiqueta <img /> nos ayuda a añadir imagenes. Podemos usar una imagen placeholder quedando de esta manera nuestra etiqueta:
Para el nombre del personaje ,título y universidad, podemos usar un h1, h2 y h3.
Luego vendrian las redes sociales, que las podemos colocar usando imagenes, como por ejemplo:
Luego vendría un boton
Ya tenemos nuestra card pero se va a ver muy desorganizada:
Vamos a colocar esos elementos que tenemos dentro de una caja contenedora o un elemento que sea el que los contenga como un <div></div>, esta etiqueta es muy general.
Nuestro HTML quedaría así:
Ahora es momento de colocar estilos, y en la sección de codepen que dice CSS, ahi los vamos a incluir. Empezaremos creando selectores de etiqueta y empezaremos a hacer los ajustes necesario para ver bien nuestra card.
Si agregamos los siguientes estilos, van a notar que nuestra card se va ajustando poco a poco.
Para diferenciar las dos images, que una es de red social y la otra es la imagen del personaje, podemos añadir una tributo clase a una de las imagenes, para diferenciarla, por ejemplo:
Para añadir los estilos usamos el selector de clase:
Te invito a terminar el ejercicio tomando como base el mockup o imagen de la card y aplicando los tags o etiquetas que consideres necesarios, ademas de los estilos.
Última actualización
¿Te fue útil?