Sitios para aprender y practicar CSS

Sitios para practicar y mejorar tu CSS:

Aquí te dejo una lista de sitios web muy útiles cuando estas utilizando CSS. estos enlaces son juegos, documentación oficial de referencia, bibliotecas de fuentes, colores e imágenes


Todos los enlaces fueron obtenidos del CURSO DE FRONTEND  de la plataforma de Aprendizaje PLATZI.

Agradezco a Estefany Aguilar Restrepo quien impartió este curso de manera épica.

ella trabaja como desarrolladora frontend en La Haus (Bienes inmobiliarios) y como profesora en PLATZI

A ella la puedes encontrar como el seudónimo de teffcode en diferentes redes sociales, te recomiendo seguirla, ya que comparte muy buen material relacionado a CSS y tecnologías Front End
https://twitter.com/teffcode?lang=es 

https://co.linkedin.com/in/teffcode 
https://github.com/teffcode
https://www.teffcode.com/

Ahora si, aquí están los enlaces prometidos:

HTML: 
Para comenzar, es necesario que tengas los conocimientos básicos de HTML, aquí hay una buena documentación de las etiquetas HTML que existen:
https://htmlreference.io/

Una vez construyas tu estructura HTML puede serte útil este sitio web, que puede revisar todas las etiquetas que utilizaste y mostrarte los errores
Validador de etiquetas:
https://validator.w3.org/

CSS:
Mozilla es un referente que tiene muy buena documentación en cuanto a tecnologías web, por lo que verás varios enlaces a mozilla sobre diferentes temas

Documentación de las propiedades existentes en CSS:
https://cssreference.io/

Referencia Oficial de Mozilla sobre Pseudoclases:
https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes

Referencia Oficial de Mozilla sobre Pseudoelementos:
https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements


Bibliotecas:
Mientras estás creando un sitio web, vas a necesitar contenido adicional, aquí te dejo diferentes sitios donde puedes obtener todos estos elementos, gratis.

Biblioteca de Emojis:
te muestra un tablero con emojis, solo da click al que te guste y estará en tu portapapeles para que lo pegues en cualquier editor de texto
https://coolsymbol.com/emojis/emoji-for-copy-and-paste.html

Bibliotecas de iconos
https://iconos8.es/

Biblioteca de fuentes:
con fuentes me refiero a tipos de caligrafía, google nos ofrece descargar la fuente para luego incluirla en el código, o el código HTML para incluir la fuente directamente desde los repositorios de google
https://fonts.google.com/

Biblioteca de Fotos:
Definitivamente es mala idea que incluyas cualquier imagen en tu sitio web, ya que la imagen podría tener copyrigth.
Usa imágenes propias o que tengas permisos para utilizarlas o usa una de este sitio donde puedes obtener fotos y videos que comparten creadores talentosos totalmente gratis
https://www.pexels.com/es-es/

Bibliotecas de colores:
Cuando creas un sitio web, es importante tener una paleta de colores. Aquí te dejo enlaces de sitios donde puedes obtener los codigos RGB o hexadecimal de los colores que podrías incluir en tu sitio web
https://picular.co/Video
http://paletton.com/

En especial me gusta coolors.co te permite compartir paletas de color con un enlace, útil para trabajar en equipo
https://coolors.co/001514-fbfffe-6b0504-a3320b-e6af2e

Arquitecturas de CSS
Cuando trabajes en el desarrollo de sitios web, lo mejor es que uses una arquitectura, para que tu código pueda ser entendido por otros desarrolladores sin tantos problemas.

Aquí te dejo documentación oficial para que elijas la arquitectura que se adapte a las necesidades de tu proyecto, en mi caso elegí BEM.

CSS orientada a objetos
https://www.smashingmagazine.com/2011/12/an-introduction-to-object-oriented-css-oocss/

BEM
BLOQUE - ELEMENTO - MODIFICADOR
http://getbem.com/introduction/

SMACSS
arquitectura de CSS escalable y modular
http://smacss.com/

ITCSS
Triangulo invertido de CSS
https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/

ATOM
CSS modular y escalable, inspirada en química
https://bradfrost.com/blog/post/atomic-web-design/


Tecnologías para maquetación en HTML5
desde HTML5 la propiedad display (que permite trabajar con los layouts) nos ofrece las tecnologías FLEXBOX o CSS-GRID, no debemos pensar que una tecnología es mejor que otra, simplemente en algunas ocasiones lo recomendavle será usar flexbox y en otras ocasiones CSS-GRID

FLEXBOX documentación oficial
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

conceptos básicos de FLEXBOX
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox

Definitivamente, la manera que me ayudo mas a afianzar los conocimientos de FLEX, fue este juego, donde usando propiedades CSS para FLEX debemos colocar ranitas en sus hojas

FLEXBOX FROGGY
https://flexboxfroggy.com/#es

CSS-GRID documentación oficial
https://css-tricks.com/snippets/css/complete-guide-grid/

CSS-GRID documentación oficial Mozilla
https://developer.mozilla.org/en-US/docs/Web/CSS/grid

Jen Simmons es diseñadora y programadora senior en Mozilla, ella tiene un sitio web, donde tiene ejemplos de CSS usando CSS-GRID
https://labs.jensimmons.com/

Jen Simmons también tiene un canal en youtube, llamado Layout Land, donde podrás encontrar contenido relacionado a CSS
https://www.youtube.com/channel/UC7TizprGknbDalbHplROtag

Similar al juego de las ranas para flex, está este juego donde tendrás que regar plantas usando propiedades de CSS-GRID, muy recomendado
https://cssgridgarden.com/#es


Accesibilidad:
Cuando creamos sitios web, es nuestra responsabilidad, otorgar toda la información posible a los lectores de pantallas para las personas no videntes.

Para esto debemos trabajar en nuestro código para utilizar las etiquetas de manera adecuada y tomar en cuenta el tab-index de las etiquetas

Aquí te dejo unos enlaces que serán de ayuda
Configuración de voces:
https://support.apple.com/es-lamr/HT202362

ANDI herramienta de pruebas de accesibilidad
https://www.ssa.gov/accessibility/andi/help/install.html

herramienta de prueba de navegacion tabindex
https://developer.mozilla.org/es/docs/Web/HTML/Atributos_Globales/tabindex



Storybook
https://storybook.js.org/docs/guides/guide-html/