Jaime Cisternas

Después de tomar un par de cursos de HTML, CSS y JavaScript me aventuré a realizar un projecto personal(es un juego). Para mi representa la calidad de los cursos de EDTeam ya que sin ellos, no lo hubiese podido realizar. Lo subí a un host. www.myjcrweb.com/dg_index.html.
Después de un curso de Nodejs logré adaptarlo para una versión remota, pero actualmente funciona solo en localhost. Si alguien puede darme un tip de los pasos a seguir para subirlo a la web, se lo agradeceria.

Alguien sabe, por qué window.open() and @media funcionan bien en Chrome y Firefox, pero no funciona en Safari.

Viewport = 1000px
Tamaño original de elementos = 24
5 items
flex-grow 1 1 4 1 1

Σ flex-grow = 8
Espacio restante = 1000 - (5 * 24) = 880
Fomula general:
Tamaño resultante = Width original + flex-grow / Σ flex-grow x espacio diponible
Tamaño resultante = 24 + 1 / 8 x 880 = 134 --------- 24 + 4 / 8 x 880 = 464

En el ejemplo, el título, con position:absolute, queda detrás del párrafo. Pero pude comprobar que eso depende de la posición que tenga en el html. Si el título está después en el html, entonces queda sobre el párrafo.

Noté una pequeña diferencia entre background y background-color durante la clase de selectores cuando se utilizó un ícono como background de un elemento button con un estilo para la clase .button{ background: yellow; } Deje el icono sobre el elemento

*, *::before, *::after{ box-sizing: border-box; } body{ --border-radius-50: 50px; --border-radius-150: 150px } .box-top{ width: 420px; height: 30px; margin-left: 220px; margin-top: 100px; background:hsl(10,90%, 50%); border-top-right-radius: 150px 25px ; border-top-left-radius: 150px 25px ; }

.box-center{ width: 500px; height: 350px; background:hsl(10,90%, 50%); margin: -11px 180px 0 180px; padding-top: 110px; border-top-right-radius: var( --border-radius-50) var( --border-radius-150); border-bottom-right-radius: var( --border-radius-50) var( --border-radius-150); border-top-left-radius: var( --border-radius-50) var( --border-radius-150); border-bottom-left-radius: var( --border-radius-50) var( --border-radius-150); } .box-bottom{ width: 430px; height: 30px; margin: -12px 100px 0 215px; background:hsl(10,90%, 50%); border-bottom-right-radius: var( --border-radius-150) var( --border-radius-50); border-bottom-left-radius: var( --border-radius-150) var( --border-radius-50); } .play{ height: 100px; width: 100px; margin-left: 220px; border-width: 50px 50px 50px 80px ; border-style: solid; border-color: transparent transparent transparent white; }

Alvaro, no se si ya lo has notado o alguien ya te lo comentó, pero, lo que yo he notado, al menos en mi editor (VSCode v.1.44.1) , que cuando utilizas el mismo nombre para el id y para la variable, no te muestra todas las opciones despues del punto. Si declaro: const padre = document.getElementById('parent') en lugar de const parent = document.getElementById('parent')
Y luego utilizo: padre. El editor me muestra todas las opciones.

let a = 'Hola' , b = 'Mundo'

let saludo = { a, b, [a+b]: 'Mi primer saludo', c: a + b, d: [a, b, a + b] }

num.forEach ( (el) => console.log( el * el ) )