Aprende a mejorar el #UX, el #SEO y la #accesibilidad de tu sitio web con estos:

🚀 9 trucos de #HTML

🎁 Regalo al final ;)

❤️ RT para compartir.

THREAD 👇🏽
Enfocar un <input /> cuando tu página carga.

Es una buena practica de #UX si tienes una pagina donde la tarea comienza en un input.

Por ejemplo Google enfoca el campo de búsqueda al cargar.
Agrega el atributo "download" para forzar a el navegador a descargar el archivo del <a>.

Por ejemplo algunos navegadores abren PDF pero quizás necesitas forzar que el usuario lo descargue
Para mostrar fecha y hora debes usar la etiqueta <time> ya que esta es la manera semántica de mostrar este tipo de dato.
Los links también sirven también para enviar correo, llamar por teléfono o enviar un Whatsapp, usarlos de esta manera mejora mucho el #UX de tu pagina.
Un acordeon es un componente de #UI que le permite al usuario mostrar y ocultar contenido cuando lo necesite, es muy usado por ejemplo en "preguntas frecuentes".

Tipicamente usamos #JavaScript pero se puede hacer solo con #HTML.
¿Como hace un conteo inverso? puedes usar el atribulo "reversed" en la etiqueta <ol>
El elemento input es mucho más que solo un campo de texto, puedes tener un selector de colores fácil, rápido y accesible.
Cargar imágenes con “lazy load”.

Lazy load es una estrategia para cargar elementos cuando se vayan a usar lo que mejora el performance, en el caso de las imágenes usas el atributo loading.

Las imágenes van a cargar cuando el usuario haga scroll hacia ellas.
Indicarle al navegador el lenguaje de tu documento es importante para SEO, accesibilidad etc.

Para ponerlo a todo el documento se agrega a la etiqueta html al inicio de la página con el atributo "lang".
📔 ¿Quieres 90 tips más? descarga mi libro gratis: fmontes.com/99

📸 Sígueme en instagram.com/fmontes donde publico videos sobre como moverse en la industria tech, encontrar trabajos y tips para programadores junior.

• • •

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

24 Sep
🙃 ¿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 18 tweets
23 Aug
🌅 Buenos días 🌅

🌟 Aprender #frontend. El path más perfecto jamás creado (es broma ¿o no?)

1. #HTML y #CSS
2. Proyecto
3. Proyecto
4. Proyecto
5. #JavaScript y proyecto
6. Proyecto
7. #React y proyecto
8. Y más proyec...

Te dejo 4 sitios donde encontrar proyectos (THREAD)
Resuelve los desafíos de #HTML, #CSS y #JavaScript del mundo real mientras trabajas con #diseñosui profesionales.

frontendmentor.io/challenges
Mejora tus conocimientos de #HTML y #CSS practicando con plantillas de diseño reales. Y ofrecen un canal de Slack para preguntas y dudas.

codewell.cc/challenges
Read 6 tweets
2 Aug
5️⃣ Aprende con estos cinco cursos de #Google, gratuitos y cortos. Fortalece tu carrera como #frontend #developer

⭐️ BONUS al final
❤️ RT para ayudar a la comunidad

👇🏽 THREAD Down pointing backhand index

#webdev #code #programmer #html #css #javascript #CodeNewbie
Fundamentals of Graphic Design: Aprenderás los principios fundamentales del diseño gráfico: creación de imágenes, tipografía, composición, color y forma. Principios que puedes aplicar al diseño web.

learndigital.withgoogle.com/digitalgarage/…

#graphicdesign #webdesign #ui #CodeNewbie
Front-End Web UI Frameworks and Tools: Bootstrap 4: Aprenderás sobre grids y diseño responsivo, componentes CSS y JavaScript de #Bootstrap, además sobre los preprocesadores #CSS, #Less y #Sass.

learndigital.withgoogle.com/digitalgarage/…

#responsivedesign #webdesign #boostrap #CodeNewbie
Read 8 tweets
21 Jul
🌅 Buenos días 🌅

Secreto para los que empiezan: 80% de lo que van a hacer con #JavaScript es agarrar un array o un objeto y “pintar” #html con eso

Necesitas saber: CRUD, Fetch API (Headers, Request y Response), array: filter, map, reduce, DOM manipulation y Promesas

LINKS 👇🏽
¿Que es CRUD?

Acronimo de "Create, Read, Update, Delete" son las operaciones que hacemos en casi cualquier app.

Mas info:

🔗 developer.mozilla.org/es/docs/Glossa…
El Fetch API es una utilidad del navegador que te permite hacer requests HTTP.

Mas info:
🔗 developer.mozilla.org/en-US/docs/Web…
🔗 robertomiguelz.blogspot.com/2018/02/que-es…
Read 7 tweets
7 Jul
¿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 14 tweets
1 Jul
Conseguir trabajo como #developer no es tan sencillo. Incluso con la demanda tan alta que existe se hace un poco cuesta arriba.

Existe mucha incertidumbre y en este hilo te dejo algunos recursos para ayudarte.

🚀 RT para ayudar a otros.

#devjobs #trabajoremoto

HILO 👇🏽
¿Cuánto pedir? Tienes que establecer tu rango salarial.

Esto va a depender del país donde vivas y del país de la empresa.

En glassdoor.com puedes ver salarios aproximados por puesto y país.

🚨 NO OLVIDES que estos números son aproximados, pero te da una idea.
Otro sitio para buscar salarios aproximados para tu posición y país es payscale.com.

Tiene otras opciones interesantes para calcular TU precio en el mercado.

🚨 NO OLVIDES que estos números son aproximados no puedes guiarte 100% por esto.
Read 10 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

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

Donate via Paypal Become our Patreon

Thank you for your support!

Follow Us on Twitter!

:(