Discover and read the best of Twitter Threads about #CSS

Most recents (24)

Tout le monde sait ce qu'est `width` en CSS ?

Mais connais-tu ?

width: fit-content
width: min-content
width: max-content

J'ai pris longtemps avant de les connaître moi !

Et, je n'ai pas envie que ce soit ton cas...

#RT ❤️

👇 #thread #css #web
0. Comment fonctionne width

Contrairement à la height, la width prend par défaut toute la place disponible !

Alors que la height ne prend que la place minimum !

Pourquoi ? Ce sera le sujet d'un autre Thread

En fait, la valeur par défaut de width est « auto »
Donc quelle valeur peut prendre width ?

1. des mesures (100%, 100px, 1rem)
2. Keywords (auto, fit-content, max-content, min-content)

Let's explore the keywords !
Read 8 tweets
El 90% de la información de la web es texto.

Mejora la usabilidad y diseño de tus proyectos web con un excelente diseño tipográfico.

Te dejo tips y herramientas.

🧵 HILO
Escoge máximo dos fuentes.

1. Una para títulos, subtítulos, botones, etc.
2. Otra para párrafos

Puedes combinar sus pesos y estilos.

🛠 Genera combinaciones de fuentes con: fontjoy.com
Los párrafos máximo deben tener entre 50 y 70 caracteres de ancho.

Más de esto es difícil de leer para el usuario.

Puedes usar la unidad "ch" de #CSS.
Read 9 tweets
Para crear una librería de components en #reactjs siempre te recomiendan:

1. Empezar de cero 🤢
2. Usar una librería y cambiar los estilos 😢

Hay una tercera y MEJOR opción:

✨ Componentes primitivos ✨

❤️ ¿Me ayudas con un RT?

🧵 HILO
Los components primitivos son accesibles y sin estilo para construir #DesignSystems y #webapps de alta calidad.

Proporcionan todas las bases necesarias para que desarrolles tus propios components con el diseño que quieras rápidamente.

Empieza lista...
Reach UI busca convertirse en la base accesible de tu #DesignSystem basado en React.

reach.tech
Read 8 tweets
¿Eres #developer, pero te cuesta diseñar?

Te dejo mi serie: ✨ Diseño para desarrolladores ✨

Donde explico #DisenoUI desde la perspectiva de un #developer.

🧵 HILO
Aprende a crear lo básico que necesitas para cualquier diseño:

1. Colores
2. Fuentes
3. Variantes

Aprende como identificar lo malo del layout de tu #webapp y como arreglarlo.

Read 10 tweets
💪🏽 ¿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
Read 5 tweets
¿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
Comment centrer une div en CSS 🏋️

Je vois encore et toujours passer ce meme 🤯

Rejoins l'élite en connaissant tous les moyens de centrer une div 📢

Voici les 3 solutions :

- Flexbox 🏋️
- Grid 🔱
- Hack (expliqué) 💥

#RT ❤️

🧵 #thread #css #web
1. Grid

Je le présente en premier car il tient littéralement en deux lignes de code !

Plus aucune excuse !

Le "place-content" est un shorthand pour définir "align-content" et "justify-content" simultanément
2. Flex

Un peu comme grid mais sans le shorthand, donc il faut 3 lignes !

Je ne vais pas en expliquer plus 👍
Read 8 tweets
Tu utilises toujours Flex 😑

Certaines fois tu DOIS utiliser Grid ✅ !

Je te présente le :

➡️ "World famous Grid CSS Snippet"

Regarde l'effet parfais que ça donne avec la vidéo 🤩

#RT ❤️

🧵 #thread #css #grid #flex
Quand l'utiliser ?

Comme tu peux le voir dans la vidéo, c'est quand tu as une liste d'élément et que tu veux plusieurs items par liste en fonction de la taille d'écran !

Tu trouveras surement d'autres use-case !

Voici le "World famous Grid CSS Snippet" : Image
Mon but, c'est que tu le comprennes, donc je vais décomposer chaque partie ✅

Déjà voici une petite CodeSandBox pour que tu puisses tester : codesandbox.io/s/the-ultimate…
Read 11 tweets
✅ ¿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
🙃 ¿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
Image overlay

It is the must known technique by every web developer. They are different ways to add text over image in an appealing way.

we can see more on this thread. 🧵

#100DaysOfCode #CSS Image
Types of overlay

• Text overlay - adding text over image. ex: landing page banners with captions.

• Image overlay - adding image over image. ex: images with logos/ brand names as watermark.

We will see different methods to add with some examples.
Add text over image directly.

It is rarely suitable, because it has lot of constraints to get better look.

• Image should be dark.
• Text has to be white.

Brighter the image, poorer the readability. so use this only for dark images. Image
Read 10 tweets
💥Strangers Things (Cosas extrañas en CSS)💥

Todos encontramos cosas extrañas en código CSS continuamente. Pero veamos algunas de ellas, y la forma recomendada de abordarlas hoy en día...

¡Te lo explico en un par de tweets!

#StrangerThings4 #css #javascript

🧵🔽 Image
1️⃣ No agrupes selectores en la misma línea, separa.
2️⃣ Aunque tengas canal alfa, usa RGB() y no RGBA(). Incluso ya puedes usar hexadecimal con canal alfa.
3️⃣ Si tienes propiedades con valores múltiples, separa en múltiples líneas. Image
4️⃣ Usa variables CSS. Se colocan al inicio, separados por una línea en blanco del resto de props. ¡Y tienen ámbitos locales!
5️⃣ Se pueden guardar todo tipo de datos: medidas, gradientes, colores, funciones css, keywords, etc...
6️⃣ Con `var()` puedes usarlas y añadir un fallback. Image
Read 14 tweets
All about Dates and Timers in #javascript you need to know as a web developer.
#100DaysOfCode
🧵👇
📌The Date object in JavaScript is used to represent a moment of time. This time value (known as UNIX-TIME) is since 1 January 1970 UTC(Coordinated Universal Time). We can create a date using the Date object by calling the new Date() constructor as shown in the below syntax.
📌Different Ways of Creating Date and Time
Read 9 tweets
We often forget that being a web developer is not only about #html, #css or #javascript! #react or #angular! #python or #php!
Sure these helps you build wonderful looking websites but database and data structure is vital! Security is a must! Scalability is key!
Sure if you claim you are a #Frontend developer, you can easily say that you don’t have to worry about all the ‘backend’ stuff I just mentioned! And here is where I completely disagree! To be successful you have to understand the back end and how it works!
Understanding the database you are building a front page for helps you have a bigger picture of the wealth of data you have! How to present it and how to make it available!

Securing a database is the #dba job! Network system engineer secure the network where your site is!
Read 5 tweets
🤮 ¿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
🔶30+ #CSS Code Generators🔶

A MEGA Thread🧵👇 30+ CSS Generators
➀ Dark Theme Generator

✧ With this, we can generate dark CSS code easily after pasting the url of webpage.

⇨ nighteye .app/dark-css-generator
➁ Animations Keyframes Generator

✧ With this, we can generate CSS Keyframe animations with a visual timeline editor.

⇨ keyframes .app
Read 35 tweets
All you really need is 1 application to get started in #coding.

A browser.

In a Chromebook, a smartphone, or any PC, you can learn and practice.

Anywhere.

Here are 8 websites for writing code online, for FREE:
🧵
1) JSbin

Takes care of all your #javascript, #HTML, and #CSS. Has a built-in console as well.

jsbin.com
2) GDB online

Debugger and Compiler. Support for many languages and versions including(but not limited to) #python, #javascript, Pascal, #HTML, #CSS, C, C++, Perl, Ruby, C#, and PHP.
Allows you to make multiple file programs.
onlinegdb.com
Read 8 tweets
Cursos gratis y cortos de los programadores más cracks que yo conozco:

- #JavaScript (de todo) y Flexbox de @wesbos
- #CSS grids de @jensimmons
- #ReactJS y NextJS de @leeerob

❤️ RT comparte el amor!

🧵 HILO Image
El #javascript30 de @wesbos es un clásico javascript30.com son 30 videos de vainilla #JavaScript code challenges. Aprendes de todo, #arrays, #canva, sonido, etc.
También de @wesbos tenemos cssgrid.io para aprender #cssgrids en 25 videos y flexbox.io para aprender #flexbox en 20 videos.
Read 7 tweets
#CSS Thread

Salam all,

I've been receiving quite a few queries regarding the CSS #Essay. The following thread focuses on the nuanced aspects of the paper that most CSS candidates tend to overlook during preparation:

1/17
There is quite a lot of uncertainty surrounding the Essay paper with each academy/mentorship program suggesting a separate technique.
While there is no formal guideline provided by FPSC on the subject, the examiner feedback reports can shed some light on what's expected.

2/17
The essay is supposed to judge a candidate's ability to explain a topic in a rational, well-researched, and comprehensive manner. The arguments you make must be grammatically-correct, relevant, and backed by research. Flowery and emotive expression isn't necessary.

3/17
Read 19 tweets
Assalam Alaikum everyone,

As per popular demand, this #CSS thread will focus on #Islamiat. Make no mistake about it - it is one of the toughest subjects to pass. Recently, examiners have scrutinised and checked the paper very stringently. This is because of some issues: 1/16
A lack of RESPECT FOR THE SUBJECT: “Matriculation/ O level main parh liya hai, Ham Musalman hain.. ye tou pass ho hijayega.” WRONG. The subject demands attention to the philosophy of each topic and critical analysis. 2/16
Not quoting QURANIC VERSES AND HADITH: Merely writing down an answer as you would for any other subject with no reference to the supreme constitutional authority of Islam, the Quran, is a recipe for disaster. For every answer, you should write 5-6 Quranic verses and hadith. 3/16
Read 16 tweets
Hablando de que hay muchos recursos gratuitos y super completos para aprender tecnologías como #javascript, #golang y más...

Aquí un thread 🧵 express con los cursos gratis que conozco :)
web.dev, de Google, tiene cursos de responsive design, #PWA, #CSS, performance en la web, y más

🥳
developers.google.com/learn tiene un muchísimooos cursos! Introducción a @golang, Dart, Java, Python, Firebase, Android...

Todos gratis!
Read 10 tweets
💡 #CSS Tip

Use 𝘀𝗵𝗮𝗽𝗲-𝗼𝘂𝘁𝘀𝗶𝗱𝗲 𝗽𝗿𝗼𝗽𝗲𝗿𝘁𝘆 to curve text around a floating image!

Here's how 👇
It also works on all the major browsers except IE.

To learn more: developer.mozilla.org/en-US/docs/Web…
Thanks for reading it!

Hope you found it useful, if yes then make sure to follow me @Amit_T18 for such content and retweet the first tweet :D
Means a lot!
Read 3 tweets
Here's a complete roadmap of topics to master VueJS

A Thread 🧵

#vue #vuejs #100DaysOfCode #webdevelopment #webdev #programming #coding #javascript #HTML #HTML5 #CSS3 #CSS #programming
1⃣ Prerequisite
- #HTML / #CSS Basics
- Basic #Javascript Concepts ✌️
2⃣ Vue Basics
- What is Vue
- Component Basics (Template, script, data, methods)
- Handling User Inputs
- Conditionals and Loops
- Computed properties and watchers
- Class Bindings (CSS Classes) 😀
Read 11 tweets
¿Quieres saber cómo está el mercado de talento #tech en Latinoamérica? (incluyendo salarios)

@getonbrd lanzó su reporte anual con datos de:

23,000+ trabajos
900,000+ aplicaciones
250,000+ professionales

❤️ RT

👇🏽 HILO
🥷🏽 ¿Cuáles son los skills más solicitados por las empresas?

En programación en general:

💛 #JavaScript de primero (obvio Boby)

2️⃣ #CSS, #Git y #React peleándose el segundo lugar

🇺🇸 "English" en un sólido tercer lugar. Image
👩🏽‍🎨 En Diseño / #UX

El primer lugar es una pelea a cuchillo entre @figmadesign y @Adobe

Seguido de #UIDesign, #wireframes y @sketch

Y por supuesto Inglés. Image
Read 13 tweets

Related hashtags

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.00/month or $30.00/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!