Gab 💎

Web Developer 💻 | Crafting Digital Experiences

[Gab 💎 @DevGabrl]

@fveiras_ Cuales serían las url de tus sitios?

[Gab 💎 @DevGabrl]

@Soy_Politicon @LuisGasulla Podrías explicarte un poco más? Tengo una bebé de 8 meses

[Gab 💎 @DevGabrl]

Para consultas e inscripciones, visiten la página de la universidad: https://t.co/J5ws4f0pHS 📷
¡𝙉𝙤 𝙨𝙚 𝙦𝙪𝙚𝙙𝙚𝙣 𝙖𝙛𝙪𝙚𝙧𝙖 𝙮 𝙖𝙨𝙚𝙜𝙪𝙧𝙚𝙣 𝙨𝙪 𝙡𝙪𝙜𝙖𝙧 𝙚𝙣 𝙚𝙡 𝙘𝙪𝙧𝙨𝙤!

[Gab 💎 @DevGabrl]

🌟 ¡𝙂𝙧𝙖𝙣𝙙𝙚𝙨 𝙣𝙤𝙩𝙞𝙘𝙞𝙖𝙨! A través de la 𝙐𝙏𝙉 𝙁𝙍𝙏, estaré dictando el curso virtual de "𝙄𝙣𝙩𝙧𝙤𝙙𝙪𝙘𝙘𝙞𝙤́𝙣 𝙖 𝙡𝙖 𝙋𝙧𝙤𝙜𝙧𝙖𝙢𝙖𝙘𝙞𝙤́𝙣 𝙒𝙚𝙗 𝙁𝙪𝙡𝙡-𝙎𝙩𝙖𝙘𝙠". Los cupos son 𝙢𝙪𝙮 𝙡𝙞𝙢𝙞𝙩𝙖𝙙𝙤𝙨.

[Gab 💎 @DevGabrl]

Van sesiones #2 y #3 de cómo crear un Portfolio Web Responsive 🙌🚀👍

[divzone @div_zone]

Buenas! 🙌 Acabo de publicar los videos #2 y #3 de cómo crear un Portfolio con HTML y CSS. Les dejo links en comentarios 👇
.
.
.
.
#portfolio #portafolio #curso #cursogratis #html #css #programaciónweb #aprenderprogramacion

[Gab 💎 @DevGabrl]

Nuevo video #1 de 7 🙌 así todos pueden crear un Portfolio Web. FELIZ 9 DE JULIO

[divzone @div_zone]

Buenas! 🙌 Feliz 9 de Julio 🙌 Acabo de publicar un nuevo video sobre cómo crear un Portafolio con HTML y CSS. Es el video #1 de 7 Les dejo link en el primer comentario 👇
.
.
.
.
.
.
.
#portfolio #portafolio #curso #cursogratis #html #css #programaciónweb #aprenderprogramacion

[Gab 💎 @DevGabrl]

@chroman Les dejo un tuto de 8min. Por si tienen poca idea de Git - GitHub https://t.co/7ItNbo0UqY

[Gab 💎 @DevGabrl]

@natayadev Flojo en Git - GitHub? Te lo enseño en 8 min. https://t.co/7ItNbo0UqY

[Gab 💎 @DevGabrl]

@midudev Flojo en GitHub? Mira este video https://t.co/7ItNbo0UqY

[Gab 💎 @DevGabrl]

Git y GitHub en 8 min.🔥

[divzone @div_zone]

💻🔥 Nuevo video de solo 8 minutos para principiantes en Git y GitHub. No se lo pierdan! https://t.co/Jaiu3lAwrF
.
.
.
#git #github #commit #repositorio #programacion

[Max Prilutskiy @MaxPrilutskiy]

Just so y'all know:

Every time you push code, you appear on this real-time wall at the @github HQ.

[Gab 💎 @DevGabrl]

¡Hola! Te invito a unirte a la comunidad de DivZone que estamos creando en Discord. Es el lugar perfecto para aprender sobre programación de software y compartir información sobre oportunidades laborales. ¿Te sumas? Unite aquí: https://t.co/CMAxeR9bNh

[Gab 💎 @DevGabrl]

🤣

[Pouya 🧙 Blueprint MCP @Saadeghi]

Web developers in the near future

[JNS @_devJNS]

JavaScript tips 💡

[Gab 💎 @DevGabrl]

🌞 Ignite Your Interest in Solar Energy: Websites to Unleashing the Power of the Sun:

💡 https://t.co/KaJDD8iETc

💡 https://t.co/0YHQpZaKke

💡 https://t.co/KsK5ecPctL

💡 https://t.co/wlGEHlfjNs

[jhey ʕ•ᴥ•ʔ @jh3yy]

CSS Tip! 💪

You can create these tab controls with CSS :has() + radio buttons ✨

.tabs:has(input:nth-of-type(3)) { --count: 3; }
.tabs:has(:checked:nth-of-type(3)) { --active: 2; }
.tabs::after { translate: calc(var(--active, 0) * 100%) 0;
width: calc(100% / var(--count));
}

Two CSS :has() tricks here combined with a rendering trick 🤙

The tab control is a container using display: grid. You can use :has() to count the number of tabs in the container:

.tabs:has(input:nth-of-type(3)) { --count: 3; }
.tabs:has(input:nth-of-type(4)) { --count: 4; }

Using the cascade, the last valid :has() gives you the number of tabs 🫶

Once you know the number of tabs, you know how to size the indicator:

.tabs::after {
content: "";
position: absolute;
height: 100%;
width: calc(100% / var(--count));
}

It's a pseudoelement that uses --count to determine its size 📏

The next :has() trick is determining which tab is active or :checked as it's an input [type=radio]

.tabs:has(:checked:nth-of-type(2)) { --active: 1; }
.tabs:has(:checked:nth-of-type(3)) { --active: 2; }

You can use a zero-indexed translation here. If the second input is :checked, set --active: 1, then translate the pseudoelement on the tabs to that position 👉

.tabs::after { translate: calc(var(--active, 0) * 100%) 0; }

The last rendering trick is using mix-blend-mode 👀

The tabs have a black background-color, the pseudoelement is white, and the label text is white. When you use mix-blend-mode: difference on the pseudoelement it will give this effect that the text transitions from white to black sliding across 😎

.tabs::after {
color: hsl(0 0% 100%);
mix-blend-mode: difference;
}

You can totally mix up the colors here though and go with a different effect. The mechanics of how you can use CSS :has() is the main point here 🙏

As always, any questions, suggestions, etc. let me know

@CodePen link below! 👇 (There's even a @tailwindcss play for this one too 👀)

[Gab 💎 @DevGabrl]

@JoshBurnsTech How do you get your first project with so much competition?

[Gab 💎 @DevGabrl]

Mastering the art of soft skills is key for a standout resume! 🌟 Boost your professional appeal with:

Effective Communication 🗣️
Team Collaboration 🤝
Adaptability to Change 🔄
Time Management ⏰
Problem-Solving Skills 🧩

#SoftSkills #SkillsForResume #CareerTips

[Ritika kaurr @Ritika_kaurr]

Frontend vs Backend 🤝

[Khalil Dev @codewithkhalil]

You’re in tech?! I follow you!