Todas las semanas escogemos un proyecto de la vida real para que construyas tu portafolio y te prepares para conseguir un trabajo. Todos nuestros proyectos están construidos con ChatGPT como co-pilot!
Únete al retoUn podcast de cultura tecnológica donde aprenderás a luchar contra los enemigos que te bloquean en tu camino para convertirte en un profesional exitoso en tecnología.
Escuchar el podcastDiseñar o hacer layouts es una de la cosas más difíciles en CSS/HMTL, nunca ha sido una buena tecnología para facilitar este proceso, lo que es extraño y triste pues era su principal objetivo.
Sin embargo, en los últimos años las cosas han mejorado, desde el año 2018 podemos usa las reglas CSS display: flex;
y display: grid;
.
Hay algunos frameworks de css como Bootstrap que se utiliza ampliamente en ~ 30% de los sitios web del mundo., Foundation, Material UI, etc. El objetivo de este ejercicio es pulir tus habilidades en CSS/HTML puro.
./assets
.Este proyecto viene con los archivos necesarios para empezar a trabajar, pero tienes dos opciones para empezar:
a) Abrir este link con Gitpod en tu navegador(recomendada): https://gitpod.io#https://github.com/breatheco-de/exercise-product-landing-page-plain-css
b) Clonar este repositorio localmente en tu computador:
1$ git clone https://github.com/breatheco-de/exercise-product-landing-page-plain-css.git
Asegúrate de tener instalado node.js en tu computador y ejecutar el siguiente comando en tu terminal para previsualizar tu sitio web:
1npx --yes http-server -c-1
💡 Importante:
Recuerda actualizar el remote
del proyecto con el de tu repositorio usando git remote set-url origin <your new url>
, y luego guardar tu código en tu nuevo repositorio usando add
, commit
y push
.
Nota: tendrás que actualizar tu navegador cada vez que actualices tu código.
El 40% de los errores al hacer HTML son tags o etiquetas de cierre faltantes o mal puestas, para evitarlo abre y cierra la etiqueta o tag al mismo tiempo y luego agrega el contenido de la etiqueta.
Elegir los nombres de las clases de CSS es el verdadero truco: los nombres de las clases le dan forma a tu forma de pensar. En lugar de usar nombres orientados a los negocios como producto1, producto2, nosotros, etc. Deberías usar nombres orientados al comportamiento como menú
o lista-horizontal
, etc. Eso te ayudará a reutilizar mucho las clases.
Don't use the <img>
for images that will be uploaded later by a user, you should instead use <div>
with background images, the image tag is only used for little things.
No uses el <img>
para imágenes que más tarde cargará un usuario, en su lugar deberías usar un <div>
con imágenes de fondo, la etiqueta de imagen solo se usa para pequeñas cosas.
Para prepararte mejor para completar estos ejercicios, sugerimos los siguientes materiales
Todas las semanas escogemos un proyecto de la vida real para que construyas tu portafolio y te prepares para conseguir un trabajo. Todos nuestros proyectos están construidos con ChatGPT como co-pilot!
Únete al retoUn podcast de cultura tecnológica donde aprenderás a luchar contra los enemigos que te bloquean en tu camino para convertirte en un profesional exitoso en tecnología.
Escuchar el podcast