Discover and read the best of Twitter Threads about #css

Most recents (24)

🤮 ¿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 Image
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. Image
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
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
Getting Better At CSS 🌻

I see lot of people who are starting with web development struggle with #CSS, even some experienced ones.

Here are some suggestions + #resources to help get better at CSS : A thread ✨➡️

1/n
First, Let me talk about my relationship with CSS.

I remember my first encounter with CSS in June 2021 on Tanay's YT channel. You can think of it as my first date with CSS.

2/n
I was nervous and kind of afraid of it because of the CSS memes lol, but I managed and after spending a few hours with CSS I kinda started liking it.

This is what I created on my first date by following the session :
My first ever portfolio
…e2000090645fc--zuberdunge.netlify.app

3/n
Read 24 tweets
🌅 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
👉 Además de alojar la mayoría de proyectos #OpenSource, @github es un buen lugar para descubrir contenido interesante.

🏅 Aquí te dejo 10 repositorios para #devs que deberías conocer. Cada uno de ellos te aportará algo.

#100DaysOfCode #CodeNewbie

¡Dentro hilo! 🧵⬇️ Cartel: 10 repositorios de github para developers que deberi
1. Free Programming Books

github.com/EbookFoundatio…

⭐️ Este repo tiene que ser el primero. De los repositorios con más estrellas de #Github. No solo encontrarás libros de programación en múltiples idiomas, también otros recursos y videos.
2. Developer Roadmap

github.com/kamranahmedse/…

Otro de mis favoritos. ¿Quieres saber por dónde empezar tu camino #desarrollo web? Aquí tienes hojas de ruta con las tencnologías y conceptos que debes saber para dominar un “camino”.
Por ejemplo #frontend, #backend, #DevOps...
Read 15 tweets
[Thread] Autour du projet @airswap, un #DEX peu connu de nom mais que vous avez probablement utilisé sans le savoir.

Son histoire, l'utilité et ce qu'il apporte à l'écosystème #crypto, vous saurez tout.

Un #thread en collab avec @TheDiggers_io pour la sortie du site web ! Image
Ce #thread fait suite à l'AMA réalisé sur le Discord @TheDiggers_io dont l'objectif est un récapitulatif global.

Nous allons aborder l’histoire du projet, ses fonctionnalités et ce qu’il apporte par rapport aux autres #DEX.

Un tour complet sur un #projet ancien mais prometteur. Image
L'histoire

1er choc mes amis, @airswap a été fondée en 2017 par Michael Oved et Don Mosites issue d’une start-up aux US.

A l’origine, leur but était de #dev des systèmes de #trading de façon totalement décentralisée.

En parallèle, ils ont aussi fondé la plateforme @fluidityio Image
Read 30 tweets
All the Ways to Center a Div in CSS! 👇
Thread 🧵

#CSS #Frontend #Javascript Image
✅ For this, let's consider the following Image which is inside a div tag and the parent element of this div tag is the header tag.

So lets now look at all the ways we can center the div in CSS!👇 ImageImage
1) Traditional Way:

For the parent element,
Set the position to 'relative' and height to '100vh'.

For the child element,
Set top, and left to '50%' and transform to 'translate(-50%,-50%)'

⭐ And Done... Your Child Div is now set to Center! ImageImage
Read 6 tweets
🌅 Buenos días 🌅

¿Buscando proyectos para practicar o para portafolio?

🧵 Te dejo 3 que me gustan por acá

#frontend #webdev
Desarrollar una pagina de producto para crowfunding y aprende:

1️⃣ Responsive design
2️⃣ Transiciones en hover states
3️⃣ Layouts con #CSS

frontendmentor.io/challenges/cro…
🏠 Room homepage

El layout de este está retador, pero te queda un proyecto interesante para mostrar en tu portafolio.

frontendmentor.io/challenges/roo…
Read 4 tweets
If you want to #learntocode, focus on learning and understanding concepts.

Here's a small thread to help you out! 👇🏻
Start with #HTML because it'll allow you to quickly get something on the screen. That is the ultimate motivator, and the feedback loop is perfect: edit, save, refresh!
The Mozilla Developer Network (MDN) Website includes an awesome tutorial for HTML: developer.mozilla.org/en-US/docs/Lea…

While exploring HTML, start using a tool like VSCode, which is a free Integrated Development Environment (#IDE).
Read 39 tweets
¿Quieres aprender #frontend y no sabes ni por donde empezar?
Ruta (2021) para aprender las bases del Front-end

#HTML #CSS #Javascript

🧵Abro hilo.
CUALQUIER web está construida con HTML. Un buen primer paso sería aprender todas las etiquetas HTML que existen (o al menos, la mayoría).

Esta tabla periódica explica las etiquetas que existen en español (ampliando información pulsando en cada una):

lenguajehtml.com/html/introducc…
Hay que elegir un buen editor de código. Existen muchos (Sublime Text, ATOM, etc...) o incluso IDEs más potentes (WebStorm, etc...), pero el editor más popular hoy en día para frontend es Visual Studio Code (VSCode):

Puedes descargarlo desde aquí:
💾code.visualstudio.com
Read 25 tweets
¡Ojo! ¡Una caja Funko Pop! dibujada en 3D con #CSS!
ManzDev (Twitch Code Streamer) ¡en edición limitada!

Por aquí links:
🐈Repo: github.com/ManzDev/twitch…
👀Demo @CodePen codepen.io/manz/pen/Yzxav…
🎬Video del making-of:

#html #css #javascript #webcomponents
Como curiosidades, hemos diseñado todo sin utilizar imágenes, sólo usamos #CSS para diseñar, y #WebComponents (nativos) para encapsular y reutilizar.

- 11 WebComponents
- 515 líneas totales de Javascript
- 449 líneas totales de CSS
Utilizamos la tipografía «Heroes Legend» para el logo, y la tipografía Bebas Neue para el resto de textos. Nuestra versión se llama «Punko FOP!» (gracias a pbl78 por la idea).
Read 11 tweets
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".
Read 7 tweets
ALL html Global attributes:

These are attributes that all HTML tags have in
common.

#HTML #CSS #javascriptdeveloper
Please Support!! So I can create more quality content! #RetweeetPlease #Like #Share 🧵
accesskey Attribute:

Is an HTML shortcut key. Most people do this using JavaScript but HTML5 supports it.

Now when you press the “S” key your button will be activated. Image
class Attribute:

Fits any tag.

Now I can create a CSS class and put the visual configuration I want. Image
Read 16 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 18 tweets
• Top blogs to Follow as a Web Developer 🔥
A thread 🧵👇

#100DaysOfCode #Coding #programming #javascript #FrontEndDevelopment #backendDevelopement #CSS
01- CSS - Tricks.
css-tricks.com
02- CSS Author.
cssauthor.com
Read 9 tweets
Did you know you can use the CSS clip-path property to create any Shapes? Here is a thread to explain it most beginner-friendly way,

🧵 👇
The CSS clip-path helps to clip a region of an HTML element and show it. The outside of the clipped region is hidden.

See the image below. A circular region is clipped from a div of equal height and width. The circle is visible, and the rest is hidden.

👇 Image
There are 6 CSS functions to create shapes.

1. circle
2. inset
3. polygon
4. ellipse
5. A clip source using url()
6. path

You need an idea of the coordinate system to use the first 4 functions. It is easy. Just imagine an x and y-axis with an initial coordinate at (0,0).

👇 Image
Read 12 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!