Discover and read the best of Twitter Threads about #html

Most recents (24)

🌅 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
Here is a list of 7 useful/unique HTML attributes.

Let me know, if you were already familiar with any of the mentioned attributes! </>

🧵👇 #html #webdevelopers #webdev
1) Accept

The <input> element has this accept attribute that allows you to specify the types of files that can be uploaded by the user.

<input type="file" accept=".png, .jpg">
2) Contenteditable

This attribute indicates if an element should be EDITABLE by the user or not?

If the value is true then browser automatically allows editing.

<div contenteditable="true">This text is editable </div>
Read 8 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
#Learn 📚 #Linux🐧:

A thread

Some useful Linux terminal keyboard shortcuts you should know to increase productivity. 👇

#CodeNewbie #coder #computer #code #java #100DaysOfCode #golang #privacy #css #javascript #html #linuxfan #linuxwindows #linuxmint #linuxubuntu #linuxtips
1) Working With Processes📈
Use the following shortcuts⌨️ to manage running🏃 processes.
#linuxfan #linuxwindows #linuxmint #linuxubuntu #linuxtips #linux #programming #hacking #coding #python #cybersecurity #hacker #kalilinux #programmer #technology #coder #100DaysOfCode
2) Controlling the Screen💻
The following shortcuts⌨️ allow you to control what appears on the screen.

#linuxfan #linuxwindows #linuxmint #linuxubuntu #linuxtips #programming #hacking #coding #python #cybersecurity #hacker #kalilinux #programmer #technology #100DaysOfCode
Read 10 tweets
#Learn 🧠🐍#python: Sometimes when programming in python they're situations when you want to copy the contents of an existing list into another. Python has several ways of achieving that. In this thread you will learn different ways of achieving that with the help of examples. Image
1) Using the equal (=) sign operator:
Using = operator you can copy the contents of an existing list onto another/new list. But there's a problem with this method which I will explain on the next section. Image
The problem with the above method is that if you modify the new copied_fruits list the original list (fruits) is modified too, this is because the copied list (copied_fruits) is referencing/ pointing to same fruits list in memory.
Read 17 tweets
5️⃣ Aprende con estos cinco cursos de #Google, gratuitos y cortos. Fortalece tu carrera como #frontend #developer

⭐️ BONUS al final
❤️ RT para ayudar a la comunidad

👇🏽 THREAD Down pointing backhand index

#webdev #code #programmer #html #css #javascript #CodeNewbie
Fundamentals of Graphic Design: Aprenderás los principios fundamentales del diseño gráfico: creación de imágenes, tipografía, composición, color y forma. Principios que puedes aplicar al diseño web.

learndigital.withgoogle.com/digitalgarage/…

#graphicdesign #webdesign #ui #CodeNewbie
Front-End Web UI Frameworks and Tools: Bootstrap 4: Aprenderás sobre grids y diseño responsivo, componentes CSS y JavaScript de #Bootstrap, además sobre los preprocesadores #CSS, #Less y #Sass.

learndigital.withgoogle.com/digitalgarage/…

#responsivedesign #webdesign #boostrap #CodeNewbie
Read 8 tweets
🌅 Buenos días 🌅

Secreto para los que empiezan: 80% de lo que van a hacer con #JavaScript es agarrar un array o un objeto y “pintar” #html con eso

Necesitas saber: CRUD, Fetch API (Headers, Request y Response), array: filter, map, reduce, DOM manipulation y Promesas

LINKS 👇🏽
¿Que es CRUD?

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

Mas info:

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

Mas info:
🔗 developer.mozilla.org/en-US/docs/Web…
🔗 robertomiguelz.blogspot.com/2018/02/que-es…
Read 7 tweets
When I began #FrontEndDevelopment I got stuck in Tutorial Hell. It took me a long time to break out of it. Later I came across websites that give you a kick-starter, and I wish I knew them early.

Here's a list of sites that can help you break out of this hell!🧵
#webdevelopment
1. devchallenges.io
This site contains 3 challenge paths you can choose to build sample web page/ web sites. Every challenge comes with a sample design and level of difficulty.

#webdevelopment #FrontEndDevelopment
2. frontendpractice.com
Recreate from real websites to get an understanding of how things are built in the industry. Every challenge comes with a list of takeaways that will help you choose websites to build.

#webdevelopment #FrontEndDevelopment
Read 12 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 14 tweets
Se você é #programador já salva esse post com 5 sites que serão úteis pra você não perder mais tempo procurando ferramentas

🧵👇🏻
✅ Illustrations
Mais de 100 ilustrações totalmente grátis para utilizar nos seus designs
illlustrations.co
✅ Happy Hues
Site que te dá muitas combinações de paletas para os seus designs e mostra na prática como ficaria com as cores escolhidas, além da terminologia e a psicologia das cores.
happyhues.co
Read 7 tweets
6 coisas que possivelmente você NÃO SABIA que consegue fazer apenas com #CSS

🧵👇🏻
1️⃣ Drop shadow
Sabe quando você quer colocar sombra apenas no elemento, não no box inteiro? Fazer aquela sombra ficar certinha e não quadrada. Poisé, da pra fazer isso só com CSS Image
2️⃣ Smooth Scrolling
Que tal fazer o seu scroll ficar mais fluído apenas com CSS, sem ter que usar nenhuma lib de Javascript? Image
Read 8 tweets
💡CSS - Attribute Selectors you probably don't know about.

A thread...

#webdevelopment #webdesign #webdeveloper #html #website #coding #programming #css #javascript #development
1. Select element(s) having attribute of name ‘attr’. No matter what the value is.
👉 [attr]
Try it on Codepen: codepen.io/junaidshaikh_j…

#webdevelopment #webdesign #webdeveloper #html #website #coding #programming #css #javascript #development Image
2. Select element(s) having the attribute of name ‘attr’ whose value is having an exact match to ‘value’
👉 [attr = value]
Try it on Codepen: codepen.io/junaidshaikh_j…

#webdevelopment #webdesign #webdeveloper #html #website #coding #programming #css #javascript #development Image
Read 10 tweets
Essential html tips you must know: 😋
Thread 🧵👇🏻

1️⃣ Viewport:
Make your website responsive by adding this viewport tag
ps: No website is complete without this tag 😅

#javascript #100daysofcode #Coding #Python #programming #webdevelopment #codinglife #developer #WomenWhoCode Image
2️⃣ Theme colour:
Add an extra touch by customising the colour of the mobile browser header. 👇🏻

#javascript #100daysofcode #Coding #Python #programming #webdevelopment #DataScience #developer #WomenWhoCode #code #CodeNewbie Image
3️⃣ Charset:
Avoid any special characters showing up incorrectly by specifying the charset in your HTML code 👇🏻

#javascript #100daysofcode #Coding #Python #programming #webdevelopment #codinglife #developer #WomenWhoCode #womenintech #html #Website Image
Read 5 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!