Te explico 4 selectores de #CSS que quizás no conocías o quizás si, no sé, pero igual te los explico.

❤️ RT para que todos aprendamos

🧵 THREAD
Se llaman "Selectores Parciales" te permite seleccionar elementos haciendo match parcial o completo del valor de sus atributos.

Para aplicarlos se usan [] y dentro el nombre del atributo y el valor.
Empecemos con el más común "igual" y se representa con el símbolo = .

Seleccionamos un elemento que tenga el atributo "lang" con el valor igual a "en-US".
Ahora vamos a seleccionar cuando el valor del atributo comience con "algo", y para eso usamos ^=

Entonces aquí seleccionamos todos los elementos que tengan un id con un valor que comience con "panel-".
Ahora al contrario, seleccionamos cuando el valor del atributo termine con "algo" y para ese usamos $=

Entonces aquí seleccionamos todos los elementos que tengan un id con un valor que termine con "-dialog".
Y finalmente, seleccionamos cuando el valor del atributo contiene "algo" en cualquier posición y para ese usamos *=

Aquí seleccionamos todos los elementos que contengan la palabra "product" en el valor de su id.
Para resumir, es seleccionar con los "operadores"

= igual
$= termina con
^= comienza con
*= contiene

❤️ Si te gustó este hilo, dale RT al primer tweet.
📕 Descarga mi libro gratis: fmontes.com/99
📸 Sígueme 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

19 Oct
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
Read 11 tweets
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

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!

:(