Freddy Montes Profile picture
Jun 16 5 tweets 4 min read
💪🏽 ¿Quieres practicar o mejorar tu portafolio y no tienes ideas de proyecto?

😉 I GOT YOU

✨ 3 ideas de #webapps para practicar #frontend (incluye wireframes)

❤️ Ayudame con un RT

🧵 HILO
Un slider de productos responsive usando solo #CSS sin JavaScript.

1. Debe ajustarse a todos los tamaños de pantalla
2. Swap event para hacer el slide
3. Snap al borde de cada item

Hint: "css scroll snap"
#app para monitorear el precio de crypto (sí que hace falta 😢)

1. Un campo para buscar tokens
2. Agregar a la lista
3. Boton para eliminar

- API de precios: coinmarketcap.com/api/
- Backend: localstorage for v1 y un BaaS para v2
#app para crear y organizar flashcards.

1. Botón de crear
2. Formulario: title, content, image y tags
3. Agrupar por tags

Nice to have:
- Drag and drop para organizar
- Login y backend con Firebase?
❤️ 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

• • •

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

Jun 14
¿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]
Read 13 tweets
Jun 11
✅ ¿Quieres practicar #frontend sin quedarte pegado?

✨ Te preparé un ejercicio para hoy ✨

🧵 Thread con tareas y pasos a realizar para completarlo.

❤️ RT please

PD. Estoy probando este formato, si les gusta puedo desarrollar muchos más ¡feedback bienvenido!
La aplicación es un #webapp para crear de facturas que les permite a los usuarios crear facturas agregando y/o eliminando items.

Los items consisten en

- Descripción
- Precio

La aplicación debe calcular el total a medida que se van agregando o items.
Analicemos el diseño.

Es una sola pantalla con dos estados:

🪫 Sin items:
1. Formulario: descripción, precio y botón
2. Mensaje de "no hay ítems"

🔋 Con items:
1. Formulario: descripción, precio y botón
2. Líneas de la factura con botón para eliminar
Read 17 tweets
Jun 7
🙃 ¿Te quedas pegado cuando intentas hacer un proyecto de #programación?

😉 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 19 tweets
Jun 3
😭 Conseguir tu primer empleo en #frontend está difícil, lo sé.

😇 Mejorar tus posibilidades con un portafolio.

Te dejo los recursos que necesitas:

✅ ¿Como hacerlo?
❤️ Plantilla de portafolio GRATIS
💡 Diseños para proyectos

🥳 Ayudame con un RT

👇🏽 HILO
Escribí este post para dar más detalle sobre como y porque necesitas un portafolio.

Está lleno de recursos para crearlo, mantenerlo y publicarlo.

fmontes.com/es/blog/how-to…
Si el diseño no es lo tuyo, te dejo un template que diseño con todo lo necesario para desarrollar tu portfolio.

figma.com/community/file…
Read 5 tweets
May 24
¿Mal performance en tu #webapp o #paginaweb?

13 tips rápidos, fáciles y accionables para mejorar el #webperf

❤️ RT para repartir amor!

🧵 HILO
📊 Lo que no se mide no lo puedes arreglar.

Tienes que medir la performance de tu website.

Mis tools favoritas:

@____lighthouse
@gtmetrix
@pingdom Speed Test

Usa las recomendaciones en los resultados para mejorar.
@____lighthouse @gtmetrix @pingdom 🌄 Imágenes 1

Usa el tamaño correcto, si tienes que mostrar la imagen en 300px de width no metas una imagen de 5000px que pesa 5mb te afecta la performance.
Read 18 tweets
May 16
🤮 ¿La tipografía en tu sitio web se ve extraña?

🎼 Seguro no tiene "ritmo vertical" y este concepto te va a cambiar la vida.

📖 Te explico que es y como generarlo.

❤️ RT para evitar diseños feos.

🧵 THREAD
Para entender el ritmo vertical hay que saber que es el "baseline" en la tipografía.

Y no es más que la línea invisible sobre la que se apoya una línea de texto.
El ritmo vertical (vertical rhythm) es un concepto tipográfico que propone que todas las líneas de tu texto deben estar espaciadas unifórmente sin importar:

- Tamaño
- Alto de línea
- Margin o pdding

👀 Veamos un ejemplo...
Read 8 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 on Twitter!

:(