Sobre esta página

En esta página voy a enlistar cosas como:

  • Sitios donde aprender CSS y HTML que yo checo mucho.
  • Sitios de layouts gratis.
  • Sitios de recursos gratis (como scripts, códigos CSS, cursores personalizados, etc.)

En general, todo lo que encuentre y crea que valga la pena compartirlo. Solo aclaro que quizá muchas de las cosas estén en inglés, pero espero eso no sea un gran impedimento. Igual pondré algunas aclaraciones y así, respecto a cada sitio que enlisto.


CSS y HTML

Mostrar lista

Developer Mozilla en español.

Para mí, la mejor página para checar tanto tags de HTML como propiedades CSS. Lo único malo, es que en español no puedes ver los ejemplos en vivo que ponen y modificarlos por igual. Para eso, tendrías que usar la versión en inglés de la misma página. Para eso, en el URL cambia el "es" por "en-US". En serio, ver los ejemplos en vivo es simplemente maravilloso. Puedes probar cosas sin tener que cagarla en tu propio código.

W3Schools en inglés.

No podía faltar. Es concisa, pero bastante abstracta (en las explicaciones), y quizá eso pueda ser un impedimento para personas novatas (como yo a medias). Pero de todas formas, vale la pena tener esta página a la mano.

UniWEBsidad en español.

Bastante buena. No deja editar ejemplos, pero muchas gráficas por igual. Una alternativa de la pagina anterior por si no entiendes inglés. Además, pone si algo puede ser muy "avanzado" o no. Es un plus.

LenguajeCSS en español.

Sadgrl.Online Learn en inglés.


Layouts y tal

Mostrar lista Primero quiero aclarar que la mayoría de sitios/layouts que voy a poner son muy, um, dosmileros. No soy fan de los diseños corporativos neobrutalistas que ofrecen muchos sitios hoy en día. Algunos sitios enlistados tienen diseños "modernos", pero los estaré linkeando desde los layouts más antiguos. Si quieren diseños "modernos" como los de las Carrds o WordPress o cosas así, simplemente busquen en google "templates gratis para web" o similares. Les saldrán un chingo.

Layout Builder por Sadgrl.Online en inglés.

Bastante simple, pero efectivo. Este es el layout que utilizo en esta página y la del inicio, por ejemplo. Bastante intuitivo, solo tienes que picar botones y elegir cositas y se verá reflejado. Cuando sientas que es lo que quieres, solo pícale a "Generate" y copia-pega todo el código en tu archivo "index.html".

Layouts rescatados por Sadgrl.Online.

Plantillas HTML gratis. Tiene varios layouts "modernos", pero como dije, estoy linkeando el sitio desde la página más vieja. Divide los layouts según en objetivo, yo estoy linkeando los layouts "personales".

HTML Templates. Click en "Preview" para ver el ejemplo en vivo, "Download" para descargar el zip con los archivos de código que solo deben copiar-pegar después.

HTML.am. Los mismos pasos que la anterior.

Free Website Templates.

Free CSS.

Themes por REPTH.

Teppy's layouts & tips.

Codesharing.

Almost Sweet. Tres layouts simples, pero bonitos. Permite que se modifiquen, pero que acredites por el código original.

Templatemo.

Free HTML5 Templates.

Layouts de K-Pop.

WYSIWYG Templates. Muchos modernos, algunos viejos. Click a "Next Page" hasta que el URL diga "/templates6.html", porque de ahí en más son todos diseños corporativos.

Lovely Designs. Layouts anime. También tiene estilos para páginas 404 personalizadas.

CreateBlog. Ofrece varios layouts, incluyendo también para sitios como LiveJournal y el muerto Xanga.

Tessiamess layouts. Son más que nada para páginas específicas, como un layout para galería, pero aún así vale la pena enlistarlo.

Zonelets Theme Gallery. Nueve layouts, bastante básicos, pero funcionales. Resemblan un poco el look de los blogspots de antes.

FOOL LOVERS. Sencillos, pero super hermosos. Ahora, el sitio está en japonés. Igual tampoco es tan compicado todo, solo es cuestión de picarle a download y seguir los pasos que se siguen para cualquier otro layout enlistado. Si hay CSS, va al CSS Style; el HTML va en el HTML. Fácil.

flower&clover. Otra página en japonés.

Dream Fantasy. Oootra página en japonés. Click a "Template list" para ver la lista de layouts disponibles. Hay unos muy lindos.

PEEWEE. última página en japonés. La mayoría de layouts son de fondo blanco y muy sencillos, pero en la página dice que el CSS se puede editar. Eso sí, los créditos deben mantenerse intactos apesar de que hayas editado algo.


Recursos misceláneos

Sitios de alojamiento para archivos

FileGarden.

Cat Box. Permite subir archivos de hasta 200mbs.

ImgBB. Permite subir imágenes de hasta 32mbs.

Música

SCM Player. Tiene muchos estilos de reproductor. Te deja poner más de 10 canciones.

WebAmp. Un WinAmp que puedes poner en tu sitio.

WinAmp Musseum. Museo de skins WinAmp que puedes descargar y usar para el WebAmp anterior.

Cursores

Pueden hacer cualquier imagen, estática o GIF, como cursor. Las medidas óptimas son entre 30 y 42 píxeles. Neocities no permite que suban imágenes de cursores en formato .cur ni .ani a menos que sean Supporters, así que si descargan cursores de las páginas linkeadas y son de ese formato, conviértanlas a GIF o a PNG de fondo transparente.

RW-Designer. Gran variedad de cursores personalizados, permite buscar por tags y más populares. Puedes descargar paquetes que contienen todos los tipos de cursores en un tipo de estilo o bien cursores individuales en lo que se llama "Junkyard".

Cursors 4U.

Botones 88x31

The Largest 88x31 Collection on the Internet. 14 páginas donde pondrás ver y descargar botones para tu página. Tanto gifs como estáticos.

Otra colección de botones, pero solo GIFs.

My buttons wolrd.

Muchos botones. Orgnizados en orden alfabético.

Creador de botones online.

Otro creador de botones online.

Imágenes

Remove BG. Página para quitar el fondo de cualquier imagen.

GifCities. Aquí puedes poner cualquier palabra, como "butterfly" (también en español) y te dará como resultados gifs archivados de GeoCities que puedes descargar y usar después.

Bonnibel's Graphic Collection. Un directorio que incluye muchas imágenes de fondo transparente que puedes descargar, incluyendo GIFs. Están dividos por categorías, como animales, ciencia, etc.

Ichigo Directory. Directorio de páginas "kawaii" donde pueden descargar recursos para sus sitios, como pixel art, backgrounds, etc.

Backgrounds

Página que reune varias imágenes estilo tile (baldosa, teja; es decir, que se repite como si fuera un patrón), divididas por colores.

Tile-able Website Backgrounds. Sitio con 410 estilo de tiles, completamente gratuitos, que de hecho puedes editar ahí mismo los colores y descargar.

Toptal. Patrones/tiles sutiles y bastante sencillas, pero muy lindas. También divididos por colores/estilos.

Backgrounds de Neopets. Sí. De Neopets. Ya.

Tutorial para crear backgrounds tile, pero en inglés.

La tag de Tumblr, porque hay joyitas compartidas ahí.

Backgrounds Archive. Un pequeño sitio que archiva varios fondos, incluyendo tiles. Son gratis.

Websets by Lynn. Varias tiles por igual, sencillas pero lindas, y también tiene plantillas (estáticas y GIF) para botones 88x31.


AO3

Mostrar lista

Repositorio de tutoriales y guías hecho por mí (en AO3).