Freddy Montes Profile picture
Jun 14, 2022 13 tweets 7 min read Read on X
¿No entiendes #CSSGrids?

#CSSGrids es lo mejor para hacer layouts modernos te explico lo básico en pocos tweets.

Hagamos este layout básico.

🧵 [1/13]
El primer paso es crear el #HTML. Es solo un padre con tres hijos. Nada fuera de lo común.

[2/13]
En el #CSS lo primero que hacemos es agregar width y height al 100% al <body> y <html> para que nuestro layout ocupe toda la página. Y bordes a los elementos hijos.

[3/13]
Para definir el grid, al padre (.page) le ponemos display: grid.

El resultado son el header, aside y main apilados uno arriba del otro ¿Por qué?, bueno porque ni él .page ni sus hijos tienen height o contenido que los haga ocupar espacio.

[4/13]
Agregamos height del 100% al .page y con esto vemos los hijos.

Por defecto el grid crea los espacios con el mismo height y el mismo width, porque eso se lo tenemos que definir con filas y columnas.

[5/13]
Primero vamos a definir columnas con la propiedad grid-template-columns: 250px 1fr.

Los valores de esta propiedad separados por espacio representan el ancho de cada columns en el grid, dos valores hacen dos columnas, tres valores, tres columnas y así.

[6/13]
La primera columna es 250px y la segunda 1fr.

fr es una unidad de CSS que significa "fracción" que representa una fracción del espacio disponible.

Por ejemplo si el .page mide 1000px como la primera columna mide 250px la segunda (1fr) va a ser 750px.

[7/13]
El resultado, todavía no es el esperado. ¿Por qué?

El grid tiene definida 2 columnas, pero tiene 3 hijos. Por lo que los dos primeros hijos (header y aside) toman las 2 primeras columnas de la primera fila, pero el tercer hijo "se va" a la segunda fila.

[8/13]
Para arreglar esto tenemos que hacer que el header ocupe las dos columnas de la primera fila

Lo hacemos con la propiedad "grid-column" el valor representa los tracks que queremos que ocupe separados por "slash", en este caso el header va del 1 al 3.

[9/13]
Ahora necesitamos que él <header> mida 100px de alto, para esto tenemos que definir filas.

La propiedad grid-template-rows nos permite definir el alto de las filas y funciona igual que las columnas, lo ponemos en 100px 1fr.

[10/13]
En el diseño tenemos "margenes" entre los elementos, para hacer esto usamos otra propiedad de grid que se llama "gap" que nos permite poner un espacio entre cada elemento del grid.

[11/13]
¡Listo! ya hiciste un layout básico con #CSSGrids.

DEMO: codepen.io/fmontes/pen/xx…

[12/13]
❤️ Si te gusto este thread dale RT al primer tweet y sígueme para más contenido.

📕 Y tengo un libro gratis de tips de #HTML, #CSS y #JavaScript fmontes.com/99

📸 También hago contenido en instagram.com/fmontes

[13/13]

• • •

Missing some Tweet in this thread? You can try to force a refresh
 

Keep Current with Freddy Montes

Freddy Montes Profile picture

Stay in touch and get notified when new unrolls are available from this author!

Read all threads

This Thread may be Removed Anytime!

PDF

Twitter may remove this content at anytime! Save it as PDF for later use!

Try unrolling a thread yourself!

how to unroll video
  1. Follow @ThreadReaderApp to mention us!

  2. From a Twitter thread mention us with a keyword "unroll"
@threadreaderapp unroll

Practice here first or read more on our help page!

More from @fmontes

Jul 24, 2023
🚨 NUNCA digas "NO" cuando en una entrevista te pregunten:

¿Tienes preguntas?

➡️ Quizás no sea una inocente pregunta y es para probar si tienes interés.

💬 Algunas ideas de preguntas, HILO 🧵

#devjobs #codenewbie #100daysofcode
¿Cuántos son en el equipo?
¿Cuál es el tech stack?
¿Usan agile, waterfall, otro?
¿Qué control de versiones?
¿Tienen unit e integration tests?
¿Cómo se componen los equipo?
¿Qué sistema de tracking usan?
¿Qué herramientas de comunicación?
¿La mayoría utiliza mac o windows?
¿Cómo evitan el burnout de los empleados?

¿Cómo miden el éxito de una persona en esta posición en sus primeros meses?

¿Cuánto tiempo pasa desde que aprueba un feature hasta que ese código llega a producción?

¿Podría nombrar tres metas de este año del equipo?

Por @kamihack
Read 6 tweets
May 3, 2023
Hay 5 herramientas que yo uso en todos mis proyectos #web.

1. Iconfinder
2. Un generador de #css gradientes
3. Descargar y usar Google Fonts como Web Fonts
4. Y un lorem ipsum para imágenes
5. La mejor documentación

Acá el thread 🧵

#codenewbie #100daysofcode #webdeveloper Image
Para descargar iconos uso puedes descargarte los iconos en #svg o png hasta 512px y hay muchos iconos gratuitos de calidad. 1/5iconfinder.com
Nunca me he aprendido la sintaxis de #css gradients así que esta herramienta me permite generar el código con una interfaz bien bonita: 2/5cssgradient.io
Read 7 tweets
Jan 26, 2023
¿No entiendes #CSSGrids?

Te explico lo como hacer un layout básico en pocos tweets.

Hagamos este layout...

🚀 RT para salvar un colega

🧵 [1/13]
El primer paso es crear el #HTML. Es solo un padre con tres hijos. Nada fuera de lo común.

[2/13]
En el #CSS lo primero que hacemos es agregar width y height al 100% al <body> y <html> para que nuestro layout ocupe toda la página. Y bordes a los elementos hijos.

[3/13]
Read 13 tweets
Nov 28, 2022
🎯 Para aprender #web hay que hacer proyectos, te dejo 3 APIS con 3 ideas para desarrollarlo desde cero.

🧵 THREAD CORTO
❤️ RT please
🦅 Red List of Threatened Species API

Desarrolla una aplicación informativa sobre todas las especies en peligro de extinción puedes filtrar por muchas categorías.

apiv3.iucnredlist.org/api/v3/docs
🏋🏽‍♂️ The FatSecret Platform API

Crea una aplicación con información nutricional. Esta base de datos tiene miles de registros listos para ser usados.

platform.fatsecret.com/api/
Read 5 tweets
Nov 24, 2022
💣 Problema: No puedes estimar bien el tiempo de tus tareas

✅ Solución: Entiende los sesgos cognitivos que tenemos los humanos y que nos dificultan las estimaciones de tiempo.

🧵 Te explico cuáles son y como solucionarlos

❤️ RT para enseñarles a los demás a evitar úlceras.
1️⃣ El simple efecto de urgencia

Problema: Priorizamos las tareas que son “time-sensitive” (ex. responder emails) sobre las que no.

Solución: Es mejor priorizar cómo urgentes/no urgentes e importantes/no importantes.
2️⃣ El efecto Zeigarnik o “porque no podemos dejar de pensar en lo que tenemos que hacer”

Problema: Ocupamos nuestro cerebro recordando que tenemos que hacer en lugar de haciendo

Solución: Usa un sistema administrador de tareas.
Read 9 tweets
Nov 21, 2022
🙃 ¿Te quedas pegado cuando intentas hacer un proyecto de #programacion?

😉 Te explico un método para salir de esa pega y evitar la frustración.

🧵 THREAD
🧠 Cuando no puedes arrancar es porque estás viendo la aplicación como una sola tarea gigante y tu cerebro está tratando de resolverla, pero en realidad lo que debes hacer es resolver muchas tareas pequeñas.

➡️ Vamos con un ejemplo.
🤑 Desarrollemos un #app para calcular propinas.

Ok, pero ¿Por dónde comienzo?

☝🏽 Lo primero yo recomiendo es hacer un pequeño dibujo de como se va a ver con anotaciones de como va a funcionar.
Read 18 tweets

Did Thread Reader help you today?

Support us! We are indie developers!


This site is made by just two indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member ($3/month or $30/year) and get exclusive features!

Become Premium

Don't want to be a Premium member but still want to support us?

Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal

Or Donate anonymously using crypto!

Ethereum

0xfe58350B80634f60Fa6Dc149a72b4DFbc17D341E copy

Bitcoin

3ATGMxNzCUFzxpMCHL5sWSt4DVtS8UqXpi copy

Thank you for your support!

Follow Us!

:(