Fabricio Méndez

Le faltó el número cien mil. One hundred thousand.

Aquí les dejo una tabla que les puede ayudar con los números.

https://www.ef.com/wwen/english-resources/english-grammar/numbers-english/

Vuelvo a EDTeam después de unos cuantos meses sin tocar código, hasta compré la versión premium para volver con todo, la verdad es que las ganas han vuelto y no las quiero volver a perder.

Me desanimé porque sentí que nunca era suficiente lo que aprendía, cada vez que quería postularme a un empleo parecía que no cubría ninguna de las áreas o pedían tantas cosas que ni siquiera lo intentaba.

Con la pandemia empezamos un negocio familiar y yo lo atiendo, nos va bien pero yo aspiro a más, no es eso lo que quiero; quiero echar código y ver la magia en la pantalla.

Lo curioso es que de alguna manera en este tiempo sin tocar código, descubrí una gran pasión por la poesía, es algo que hago casi a diario. Esa pasión es la que quiero volver a tener también con la web.

Al hacer abrir los enlaces me aparece un recuadro que dice esto:

Welcome

Firebase Hosting Setup Complete

You're seeing this because you've successfully setup Firebase Hosting. Now it's time to go build something extraordinary!

No sé si es un dato útil pero las páginas son .php no .html, lo digo porque había algo relacionado a extensiones .html en la configuración.

Tengo esto ~~~@mixin grid ($number, $columns, $gap) { display: grid; grid-template-columns: repeat($number, $columns); gap: $gap; } ~~~ Es bastante básico pero me sirve para lo que quiero.

El problema que tengo es la cantidad de columnas.

Me queda algo como esto ~~~@include grid (2 , 1fr , 20px) ~~~ Dos columnas de 1fr con un gap de 20px.

¿Pero que tal si quiero más columnas de diferentes tamaños?. He intentado algunas cosas pero no me salen bien.

Sucede que en VsCode tengo instalado el Live Server, accedo a la carpeta de css así "/css/main.css" y se ve bien en todos los navegadores. Pero si abro los archivos directamente del explorador de windows, no carga el css en el navegador. Tengo que cambiar la ruta a algo como "../../css/main.css"

La verdad me marea porque no sé que ruta usar, tengo entendido que si uso siempre el / sin ... antes , estoy accediendo a la carpeta raíz, por lo que debería cargar el archivo sin tener que estar retrocediendo con tantos .../../.../

Donde enseñen a grabar, componer y manejar programas de audio, sería muy bueno.

Algo como: Faltan 2 días 3 horas y 4 minutos.

He visto que con JavaScript se puede, la verdad no sé de momento ese lenguaje. No es necesario estilos, con el funcionamiento está bien. Gracias.

Se trata de alineación con flexbox, únicamente escribiendo clases. Aquí https://codepen.io/Fabricio93/pen/qBBZmjR?editors=1100.

Básicamente escribes "flex- " al contenedor padre y luego donde quieres colocar los elementos, primero el eje X y luego el Y.

Por ejemplo, "flex-left-top" colocaría los elementos arriba y a la izquierda.

Luego para cuando es "flex-direction: column," las clases comienzan con "column- " , un ejemplo sería "column-center-bottom", estaría centrado abajo.

Visualmente siempre escribes el eje X y luego el Y, me pareció más fácil así ya que me generaba cierta confusión cuando cambiaba el eje principal.

Después quedan las clases, flex-space-a, flex-space-b y flex-space-e, vienen de space-around , space-between y space-evenly. Se pueden combinar con las otras.

Aquí un ejemplo:

Los elementos estarían centrados en ambos ejes con un space-between.

Sería eso, me gustaría saber que les pareció y si hay algún error. Hay que pulir algunas cosas pero voy despacio.

Si tengo una página HTML muy extensa, ¿puedo separar el código en otros archivos y luego importarlos en zonas específicas del documento?

¿Qué lenguaje recomiendan para hacerlo?

Quiero compartirles links de páginas que he ido encontrando y me fueron muy útiles a la hora de estudiar. Espero que les sirva como a mí, saludos.

//Páginas para colores

Norfipc

¿Alguna vez necesitaste el color de una red social? Aquí encontrarás el color hexidecimal de las redes sociales más populares y también de algunos sitios. https://norfipc.com/redes-sociales/colores-redes-sociales-marcas-sitios-internet.php

Encycolorpedia

Como su nombre lo indica, es una enciclopedia de colores. No solo te da el hexadecimal sino también el nombre. La verdad no sabía que un color se podía llamar "Café Cortado Cósmico" https://encycolorpedia.es/named

Adobe Color

Ofrece una infinidad de posibilidades para crear tus paletas de colores personalizadas. https://color.adobe.com/es/create/color-wheel

//Páginas para CSS

Animate css

El clásico animate css, no hay mucho que decir. Para sentirte pro al ver como el texto se mueve al cargar una página. https://animate.style/

Templated

¿Te quedaste sin ideas y buscas inspiración? Aquí encontrarás una amplia variedad de Templates. Recuerda que inspirarte en un diseño no es copiar y pegar código, eso no se hace, nene malo. https://templated.co/

CSS Matic

Muy buena página para generar bordes, fondos y textura de ruidos. Es tan intuitiva que hasta la abuela la puede usar tomando el té de la tarde. https://www.cssmatic.com/

//Página para HTML

El conocido Can I Use. Básicamente para consultar qué soporte tienen los navegadores respecto a alguna propiedad css o etiqueta html que quieras usar. Es más que eso pero "te lo resumo así nomás" https://caniuse.com/#

//Páginas para Iconos

Flaticon

Falconmasters le dio a esta página como si no hubiera un mañana. Igual es un pro, aprendí mucho con él <3 https://www.flaticon.com/

Iconfinder

Una de mis favoritas, ofrece gran variedad de iconos, gratis y premium. https://www.iconfinder.com/

FontAwesome

Nadie puede hablar de FontAwesome https://fontawesome.com/icons?d=gallery&m=free

//Páginas para Imágenes

Genfavicon

Generador de Favicon (el icono pequeño que vez en la pestaña del navegador). https://www.genfavicon.com/es/

Squoosh

Página para optimizar imágenes si no quieres andar crackeando el "fotochop" https://squoosh.app/

Tiny Png

Otra página para optimizar imágenes. Esta es más conocida por el Kung-fu panda. https://tinypng.com/

Subtle Patterns

Muchos patrones de texturas. https://www.toptal.com/designers/subtlepatterns/

//Páginas de textos

Dafont

Excelente página de fuentes para descargar. Debes tener cuidado ya que no todas son gratis para uso comercial y algunas requieren de crédito al autor. https://www.dafont.com/es/

Google Fonts

Si no lo conoces no sé que haces leyendo esto. Es google. https://fonts.google.com/

//Página de CDN

Cdnjs Creo que debe tener todos los cdns de la historia de internet. https://cdnjs.com/#

Por último y no menos interesante, VSCodeThemes. Visualiza temas para VSCode, editor de código de pro y una de las cosas decentes que tiene Microsoft. https://vscodethemes.com/ ~~~lenguaje ~~~