Discover and read the best of Twitter Threads about #HTML

Most recents (24)

HTML es la base de la web y una de las herramientas principales para crear el frontend de todos los sitios.

Te dejo 10 trucos de #HTML que hubieras querido conocer antes
🧵👇🏻
0️⃣ Color picker

Un input de toda la vida se vuelve un color picker simplemente definiendo el type igual a color.
1️⃣ Progress bar

HTML tiene su propia barra de progreso, la cual te permite jugar con sus atributos para sacarle el máximo provecho.
Read 14 tweets
1- 👨🏼‍💻Yazılım mesleğim sayesinde birebir yaşadığım bir işi büyük oranda kolaylaştırdım.

Bu seride gerçek bir durumdan ve buna karşı geliştirdiğim çözümden bahsedeceğim.

Buyrunuz 0 TL ile MVP Çıkartmak;
#yazılım #javascript #html #proje
2- İş kısaca; Çalıştığımız şirket belli şehirlerde, anlaşmış olduğu kombi-petek tamiri/temizliği yapan ustalara müşteri buluyor. Bunu çoğunlukla reklamlar aracılığı ile yapıyor. Ve her şehirde farklı bir numara çıkıyor. Bu çağrıları cevaplıyor ve kayıt alıyoruz.
3. Sorumluluğumuzda üç tel hattı ve dört şehir var. Reklamlarda o şehirlere ait numaraları gösteriyoruz. Bizim yapmamız gereken şehirlere göre kayıt oluşturmak ve bu kayıtları ustalara iletmek. İşe ilk başladığımızda defter ve kalem ile kayıt alıyoduk. bu süreçte epey hata yaptık
Read 14 tweets
🙊 Secreto para los que están empezando: "80% de lo que van a hacer con #JavaScript en #frontend es agarrar objeto o array y “pintar” #html"

Necesitas saber:

✅ CRUD
✅ Fetch API (Headers, Request, Response y Promise)
✅ Array: filter, map y reduce
✅ DOM manipulation

LINKS 👇🏽
¿Qué es CRUD?

Acrónimo de "Create, Read, Update, Delete" son las operaciones que hacemos en casi cualquier app.

Más info:

🔗 developer.mozilla.org/es/docs/Glossa…
🔗 codepen.io/ianseabrook/pe…
El Fetch API es una utilidad del navegador que te permite hacer requests HTTP.

Más info:

🔗 developer.mozilla.org/en-US/docs/Web…
🔗 robertomiguelz.blogspot.com/2018/02/que-es…
Read 7 tweets
File Path Declaration in #HTML
A simple thread 🧵
What is a file path?

👉 When building a website,we work with various files like css,js or images.

They should be linked properly to avoid any errors when running your code in a browser. 

An HTML file path defines the location of a particular file in a website folder structure.
We use file paths to define

🔹Images.
🔹Audios.
🔹Videos. 
🔹CSS/JS files.
🔹Display other websites documents in our website folder structure.
Read 14 tweets
昨天,我有在@aWSBclub_cn 举办的一个@TwitterSpaces 和昨晚有在听的小伙伴分享了一下@binance 的CEO @cz_binance 的一些故事。现在总结一下,供其他推友学习参考。因为 #binance 身上真的有太多东西供无论是 #Web2 还是 #Web3 的人参考和学习。从宇宙第一所和其CEO学到一点都对你往后的人大有收益
今天先来聊聊赵长鹏,后面有时间再聊下币安。
先说一下赵长鹏的家庭的基本情况。
#binance 的创始人赵长鹏@cz_binance 出生就很好。他爸爸是硕士研究生教师,最终成为一个拥有博士学位的教授。他很小的时候,他的父母就在中国的各个城市穿梭移动。他爸爸因为文化大革命大学取消所有课程,他作为老师被送到乡下做知青上山下乡的。文革结束后,其申请去英属哥伦比亚大学留学并被录取
Read 30 tweets
💡 #HTML Tip

You can drag an element by setting up the attribute draggable to true.

Here's how 👇 Image
Using this, I had also made a project. Have a look 👇

Link: amitturare.github.io/notion-task-li… Image
To learn more about this, you can check out 👇
w3schools.com/html/html5_dra…
Read 5 tweets
4 cursos gratis de Google para #webdevelopers

Mi recomendación es hacerlos en este ordén:

1. Learn CSS
2. Learn Responsive Design
3. Learn Forms
4. Learn PWA

❤️ RT para llegar a más developers

🧵 THREAD
Aprenderás los fundamentos de CSS como:

➡️ Box model
➡️ Cascade and specificity
➡️ Flexbox
➡️ Grid
➡️ z-index

Además, funciones, logical properties, todo lo que un #frontend debe saber.

web.dev/learn/css/
En este vas a aprender:

➡️ Responsive layouts
➡️ Responsive images
➡️ Typography
➡️ Accessibility

web.dev/learn/design/
Read 6 tweets
Input Type In Html 🧵↓
⇥ <input type="text">
⇥ <input type="password">
⇥ <input type="radio">
⇥ <input type="checkbox">
⇥ <input type="button">
⇥ <input type="color">
⇥ <input type="email">
⇥ <input type="file">
⇥ <input type="hidden">
⇥ <input type="image">
⇥ <input type="number">
#html
⇥ <input type="range">
⇥ <input type="search">
⇥ <input type="tel">
⇥ <input type="time">
⇥ <input type="date">
⇥ <input type="datetime-local">
⇥ <input type="week">
⇥ <input type="month">
⇥ <input type="url">
⇥ <input type="submit">
⇥ <input type="reset">
#htmlinput
Read 4 tweets
You can't keep a good thing down.

#LinkedData is a classic example, despite confusion that has swirled around it for years.

I was watching @timberners_lee's @TEDTalks presentation on the subject earlier today, and it has aged very well.



#Web30

🧵
#LinkedData principles add a powerful dimension to #StructuredData creation, courtesy of a #Hyperlink functioning as an unambiguous Entity Name.

Here's a @YouTube video titled "How the hyperlink changed everything" about this "deceptively simple" tool.

Image
Once you the power of #LinkedData settles in, its importance to #KnowledgeGraph creation becomes clearer.

Here's a nice explainer video.



#SemanticWeb #Web30
Read 7 tweets
I try to write fairly simple & #valid #HTMLgist.github.com/s2k/8e54698e01…
Validating it with validator.w3.org/nu/#textarea, I get the error 'No p element in scope but a p end tag seen.'
What? Why? Removing the *list* from the HTML, gets rid of the error… Why?!?
I. don't. get it. 1/2
What am I missing? 🥴 #HTML #ValidationError
Uh-oh, I'm talking to myself. Again… 
Here's an explanation: html.spec.whatwg.org/multipage/grou…
Read 4 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
🌅 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
Putin viendo tus mensajes de #Git en los commits Image
Putin viendo tu código #JavaScript de hace 1 año Image
Putin viendo cómo creas el botón #HTML con <div> en vez de usar <button> Image
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
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
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
HTML Attributes that you probably don't know...
Thread 🧵🔥

#100DaysOfCode #coding #programming #FrontEndDevelopment #html Image
Image
Image
Read 6 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
🧵 7 pasos para empezar en el desarrollo #web3

(... y no morir en el intento)

Guía corta (y tremendamente sobre-simplificada) desde los 42.000 pies de altura ✈️

#web3 #dev
1) En primera instancia es recomendable que entiendas de que va la #web3 y la industria crypto.

#web3 es muuuucho más que dinero mágico de Internet.

La descentralización ha impactado las finanzas, los video juegos y hasta la manera de crear organizaciones.
2) Puedes ingresar al mundo de la #web3 aprovechando tus conocimientos en desarrollo web actuales.

Empieza masterizando #JavaScript #React #HTML Y #CSS.

Las aplicaciones desde luego funcionan ligeramente distinto, pero no es nada del otro mundo.
Read 8 tweets
Are you looking for Javascript Projects and Tutorial including HTML , CSS ?

👉Here is 30 Day Vanilla JS challenge
Build 30 things 30 Days with 30 Tutorial ⬇️

Link of Github for codes 🔗github.com/YUG2477

#100DaysOfCode #javascript30 #DEVCommunity #html

Threads 🧵🧵👇
Day 1
▶️ Javascript Drum Kit 🥁
Learn 👉
how to build drumkit , dealing with Event key and keycode for keyboard and how to link sound to particular key entered.

Link🔗github.com/YUG2477/30-Day…

Final look ⬇️
Day 2
▶️ Built Clock with js and css 🕐

Learn 👉 how to move the different hands of clock with particular angles .
👉 Maths for calculating mins Degree , seconds Degree and hour Degree link them using js by setInterval.

Link🔗github.com/YUG2477/30-Day…

Final look ⬇️
Read 27 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

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!