Discover and read the best of Twitter Threads about #CSS

Most recents (24)

[ 🗨️TREAD / 🥱RANT / 📃MICRO ESSAY ]

💠#WebDev Time to grow up or wake up!💠

We can't solve the current problems of web app developers with another shiny new framework, it's a crazy road to infinity hell.

What goes around comes around also in #dev #tech; about #CSS: Before CSS, nearly all presentational attributes of HTML doc
and I point to @tailwindcss here, which has a built-in sunk cost, that many developers will discover, when they need to refactor their codebases to use something newer / better / modern / shiny.
I think frameworks can't solve the CSS UI problem with the current approach, because this is a design problem (which @tailwindui is trying to solve, but is based on the wrong approach); this is interesting: Inheritance is a key feature in CSS; it relies on the ancest
Read 13 tweets
Un ⚡️lightning #thread de mis libros favoritos para Front End 🧵#javascript #CSS

Varios de estos recursos los sigo leyendo cada cierto tiempo, y son excelentes para prepararse en la entrevista especializada de Front End de las empresas grandes en Silicon Valley / #FAANG

[1/x]
Eloquent Javascript: mi biblia de JS enfocado al browser. Desde APIs del DOM hasta técnicas para mejorar el performance de las aplicaciones web.

Si tuvieras que elegir un libro de esta lista, que sea este.
Marca un antes y después como developer.

eloquentjavascript.net
#CSS Secrets: Cuando empecé mi carrera como front end, odiaba CSS.

Este libro me abrió la mente para descubrir que no lo odiaba, sino que no lo entendía. Y va mucho más allá: no solo ser técnico, pero creativo al crear una UI.

amazon.com/CSS-Secrets-So…
Read 7 tweets
#Thread 🧵Necesitas conocimientos de algoritmos / Big O para la entrevista de #FrontEnd en #Google o #Facebook?

R: Sí!

Este es un ejemplo de que pueden preguntar en la entrevista especializada de FE, donde mostrarás el dominio de performance y #Javascript/#CSS

👇🏼 [1/x]
Este es el escenario: tienes una lista de checkboxes. Puedes tener n checkboxes (mucho ojo aquí! 👁).

Primer challenge: necesitamos una forma eficiente de agregar un evento input a todos los checkboxes.

Antes de avanzar al siguiente tweet, qué forma se te ocurre?
Mmm, una forma que se me ocurre es simplemente tomar todos los checkboxes del DOM y agregarles un listener.

Funciona? Sí.
Es eficiente: absolutamente no.

n checkboxes significan n eventos. Big O(n) -> lineal.

#Javascript tiene algo que nos puede ayudar a mejorar esto?
Read 12 tweets
1/ So nun werde ich hier noch mal zum angekündigten, Zusammenhang Zwischen der Webseite ⛔️linke-blockt ⛔️und der #Doxing Szene geben, dies wird ein langer #Thread
Wie kommen #Hacker an #Daten ? #Doxing

man lockt Sie auf eine Webseite #OSINT #WhiteHat

sueddeutsche.de/digital/datenk…
2/ Man landet auf einer sog. #LandingPage
, diese ist schnell geladen und hat nur 10 html Zeilen und ca. 10 #Javascripte ,
Diese #Sripte tun Ihre Arbeit, und der Anwender wird abgekloppft, #knocking ,
zu diesem Zeitpunkt kennt der Server schon einiges #dnssniff #ipgeoilog #CSS #Ports ! und #JavaSkripte#Twitter  #Java#Remote #Get der #Knocking ...Dies #CSS wird im Hintergru...
3/ Da jeder #Hacker faul ist lässt er natürlich andere seine Arbeit machen #Browser , #CPU, #framework #Cookie #Cloudserver #Datenbank wo die Ergebnisse des #Doxing dann in Millisekunden je nach verfügbarer Internetleitung gespeichert werden ohne das der #User was merkt ! #SSS #CSS #Framework Freeware au...#Favicon vektor angiff ? @h...#SSS Server Side Scripting ...#Browsererweiterung mit #ph...
Read 6 tweets
Top 10 Projects For Beginners To Practice #HTML and #CSS Skills

A thread
#WomenWhoCode
1. A Tribute Page
The simplest website you can make as a beginner is a tribute page of someone you admire in your life. It requires only basic knowledge of HTML and CSS.
2. Webpage Including Form
Forms are always an essential part of any project and you will be working with a lot of forms in most of the applications . How to use a text field, checkbox, radio button, date, and other important elements in a single form.
Read 11 tweets
Hay 5 herramientas que yo uso en todos mis proyectos #web.

1. Iconfinder
2. Un generador de #css gradientes
3. Descargar y usar Google Fonts como Web Fonts
4. Y un lorem ipsum para imágenes
5. La mejor documentación

Acá el thread 🧵

#codenewbie #100daysofcode #webdeveloper
Para descargar iconos uso iconfinder.com puedes descargarte los iconos en #svg o png hasta 512px y hay muchos iconos gratuitos de calidad. 1/5
Nunca me he aprendido la sintaxis de #css gradients asi que esta herramienta me permite generar el código con una interfaz bien bonita: cssgradient.io 2/5
Read 16 tweets
15 Interesting #JavaScript and #CSS Libraries
A Thread
1.Leaflet( leafletjs.com/index.html) is one of the most popular open-source solutions for creating interactive maps. It offers everything you'd expect out of a map library - markers, layers, zooming, and many more basic and advanced features.
2.Flexbox grid system for React(jxnblk.com/reflexbox/) that allows developers to quickly build page layouts using a simple API of 3 React components - Grid, Flex, and Box. Since it utilizes the flexbox model, all grids with Reflexbox are responsive .
Read 16 tweets
How to learn coding quickly:

1. Figure out how the language works ❓
2. Build some apps ⚙️
3. Learn the basic principles 0⃣
4. Build some apps again ⚙️
5. Keep learning 📚
6. Keep building 🧱
7. Don't stop 🚀

#webdevelopment #100daysofcode #codenewbie #css #javascript #reactjs
"What do I need to do to learn coding quickly?"

Up pointing backhand index A simple step by step process for you to follow

#webdevelopment #100DaysOfCode #CodeNewbie #DEVCommunity #javascript #reactjs #python
How to Become a Better Developer with 7 Simple Principles

is FREE this weekend, go check it out

gum.co/7principles
Read 3 tweets
1/2 If you don't want to install any roam/js but you still want to have some colored blocks in #Roam, I have created a little custom #css that adds this in a limited fashion to vanilla #Roam :). #roamcult @Jeanvaljean689 @beauhaan @roamhacker

roamresearch.com/#/app/CatoMino… Image
2/2 It uses a new trick I have discovered that will have (hopefully) quite big consequences for my other CSS adventures :). The limitation is that you can only color the blocks themselves and not other children or the common parent.
Suitable also for multiplayer graphs :). @Jeanvaljean689 @beauhaan
Read 3 tweets
Les quiero dejar un tips para centrar elementos en CSS. 😀 Abro hilo.

#CSS #desarrolloweb
1/4 - Cuando el elementos tiene un comportamiento en linea (display: inline, inline-block, inline-flex, etc). Se lo puede centrar de forma horizontal aplicando "text-align: center" al contenedor.
2/4 - Si el elemento tiene un comportamiento en bloque (display: block, flex, grid, etc). Se lo puede centrar horizontalmente ajustando sus márgenes laterales en "auto"
Read 5 tweets
#CSS Building Blocks:

Understanding Inheritance

🧵A thread🧵
Inheritance says that:

Some CSS properties when set on a parent element can be inherited by the children elements.

For example:

When you set color property to body it gets inherited by all the children of the body.

Unless you specify other color property for an element. ImageImageImage
And some properties can't be inherited.

For example:

When you set a border or a box-shadow to an element it does not get transferred to the children of the element. ImageImageImage
Read 10 tweets
How to style #CSS Element State Pseudo Classes

🧵A thread🧵
:in-range and :out-of-range

Style number type inputs when the value entered by user is out-of-range or in-range. ImageImage
:enabled & :disabled

Style the elements in enabled (default) and disabled state.

Disabled state is handy when displaying immutable data and helping users avoid multiple clicks on a form button. How to use enabled and disa...
Read 7 tweets
If you are NOT a designer nor a front end savvy this 🧵 is for you!

Top 4 resources (+ bonus) I like to use for tricks, learning, and inspiration as a web dev who is not even close to a great designer nor a front end savvy.

Let's go!
#100DaysOfCode #HTML #CSS Image
1_ One-Line Layouts

I cannot emphasize enough how great this is if you have ever struggled with creating your base layout.

It is a 10 examples website with the actual HTML + CSS in place to let you understand (and copy 🙃) layouts!

1linelayouts.glitch.me
2_ CSS Tricks

This is a very well known resource but in case you haven¿t used it yet, go there. They have you covered with articles, videos, guides, everything.
A great resource to learn the insides and outs of front-end.

css-tricks.com
Read 7 tweets
A 🧵about CSS Selectors:

Going from Easy -> Complex...

👇
These are the commonly used CSS selectors:

1. Universal Selector ( * )

2. Element Selector ( p , a , div , ... )

3. Class Selector ( .my-class )

4. Id Selector ( #CSS 😉)

👇 Common CSS selectors
5. Attribute Selectors

👇 How to use attribute select...
Read 9 tweets
Learnt #HTML & #CSS in the 1st month, used them in the 2nd month to recreate:

Twitter's homepage
YouTube's homepage
Gmail's homepage
Google's homepage
A modern creative landing page with fancy effects.
Built some UI components.
👨🏾‍💻🚀
Next #JavaScript🤺
#100DaysOfCode #CodeNewbie ImageImageImageImage
Read 7 tweets
Learn CSS Grid for #FREE thread 🧵

Want to learn CSS Grid for free but not sure where to start?
I've compiled a list of free resources that covers:

🧬References
📖Complete Guides
📝Tutorials & Examples
🛠️Tools

⬇️⬇️⬇️

#100DaysOfCode #CodeNewbie #CSS #CSSgrid
Complete Guides [1/2]

@css Complete guide to Grid - css-tricks.com/snippets/css/c…

@codrops CSS Grid reference -tympanus.net/codrops/css_re…

Learn CSS Grid by @jonsuh - learncssgrid.com

CSSGarden - cssgridgarden.com
Read 8 tweets
#100DaysOfCode

How to get started with CSS?

Thread 👇🏻🧵

#CodeNewbies #webdevelopment #CSS #Webdesign
1. First and foremost, Learn about display property(inline and block for the first time).

2. Difference between padding, margin and border. There effect on the element size.

3. Positioning properties are the most confusing concept in CSS. So try to play with it.

👇🏻
4. Learn about more tricky display value like flex, grid and so on.

5. After all that try to explore the pseudo elements. They are useful in making CSS art / illustration.

6. Try to play with all the background properties at least once.

👇🏻
Read 4 tweets
#javascript tip:

Did you know you can style the console log output using #CSS ?

#100DaysOfCode #CodeNewbies #javascript30 Image
If you're into cloud computing and want to learn AWS concepts, here's an awesome e-book by Daniel Vassallo.

gumroad.com/a/238777459/Ms…
This tweet is going viral 🙏🏻

Follow me for more such JavaScript, HTML, CSS, SaaS tips 🙂
Read 3 tweets
I keep Getting DMs for CSS resources

A few things which I always use when creating an art / illustration.

Thread [1 of 8] 🧵

#CSS #100DaysOfCode #programming #webdevelopment #webdesign
This site has some amazing color palettes. I always choose colors from here
You can search for youe shades too.w3

colorhunt.co

[2 of 8]
Whenever I get stuck at a particular CSS property, I always look for w3 school
(Many of you may know this already)

w3schools.com/css/

[3 of 8]
Read 9 tweets
How to Learn React — A roadmap from beginner to advanced

Hii Dev's
This is a fundamental guide for #Developers this and also will try to make it easy and helpful one.

🧵A Thread🧵

#100DaysOfCode
Prerequisites

1. Basic knowledge of HTML, CSS, and JavaScript.
2. Basic understanding of ES6 features.
1. Let
2. Const
3. Arrow functions
4. Imports and Exports
5. Classes
3. Basic understanding of how to use npm.

#100DaysOfCode
🧵
React Fundamentals/ Basics

1. Create React App
2. JSX, HyperScript, Virtual Dom
3. #CSS & Styles in React
4. Components & Props, Props Types
5. #HTML and Fragments
6. Special Props, Children, Key, InnerHtml
7. Conditions and Loops in JSX

#100DaysOfCode
#newbie
🧵
Read 11 tweets
#HTML & #CSS are not programming. A thread…
While CSS and HTML are not a programming language as such, being able to masterfully craft things with them requires a level of logical and creative thinking which is perhaps in some ways harder than "proper" programming. Let me explain…
A programming language tends to have very clear logic to allow "if X, do Y" type things. HTML & CSS also allow you to define "if X, do Y" type things, but through a nightmarish abstraction of a nested document tree and some declarations about how the things in that tree behave.
Read 11 tweets
1/ A Question ??? Graduation from world top-notch institutions and opting #CSS as a preferred career where one will have no material application of his hard-earned professional degree. What are vision and objectives ??? Job seeking with certain privileges ???
2/ If CSS inspired much, why not general bachelorette/masters and give a try to your luck. Proud of a senior school fellow, now a PSP in BPS-21 had forgone his choice of MBBS, went for general bachelorette and finally ended up as PSP, he stood courageous.
3/ #AitzazAhsan @hasaankhawar @Razarumi #ZubairKhurshidBhatti and lot of other forgone #CSS for their ambitions and still living happily. Graduating from @UniofOxford #Horward @SOAS #LSE and @warwickuni like institutes and ending up finally in price check campaigns is absolutely
Read 6 tweets
CSS & the right to education
1/12 The earliest memory of this term CSS that I remember is Ist year of college when a relative told Abu on a family gathering " Naveed ko CSS ki tayari karwao na. I am sure he can pass" #CSS2019
2/12 I didn’t paid attention as my 150% attention was towards cricket,but somehow it remained on back of my mind as I was not seeing any future in cricket due to lack of support or zero support. from family I talked about it with a college mate &his immediate response was,
3/12 " CSS is reserved for the superior class of our society we live in"
This is a boy who was a son of a Lance Naik &hence studied with me at FG public school...who scored enough marks in matric to be part of any good college in surroundings instead he ended with me in Commerce
Read 14 tweets
Segue o #fio de um #historiador sobre o curso Programação Web @metropoledigi @ufrnbr. Ideia dada por @brennovich no dia da #MarchaVirtualpelaCiencia @SBPCnet. Conversas com Brenno, @freireopaulo, @Guimme_ e outros sobre #programacao #Tecnologia #web #Historia #ensino #ti
04/05/2020: Começo da matéria Lógica de #Programação. De cara me lembrei dos livros de #HarukiMurakami que se passam nos anos 1980. Vários personagens aparecem japoneses aprendendo sobre #input e #output nos recém lançados editores de texto e computadores pessoais. #literatura
04/05/2020 Me lembrou conversa com @iberemoreno sobre editores de textos que funcionam com lógica de #programação. Aqueles em que ao invés de tentar reproduzir na tela o que você vê no papel, partem para a o que você "quis dizer" é que vai para o resultado final. 1/3
Read 71 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!