Foi um bom desafio esse [ambos finalizados]

Bem legal a ideia de trabalhar o flexbox em forma de jogo.

O dos sapinhos é bem tranquilo, só a última fase que da uma certa exagerada no desafio e requer que preste mais atenção em tudo ali. O joguinho dos canhões acho que o unico desafio real é saber onde colocar a peça especial onde tem maior area de efeito, pena que nele usa bem menos flexbox que no dos sapos, é um ambiente mais limitado. Mas ambos foram divertidos para poder praticar.

https://i.imgur.com/pSz9HGC.jpg

https://i.imgur.com/SUeVU4V.jpg

Aliás será que é tão necessário assim para alguem que mexe com programação ter que ficar decorando todas as sintaxes possiveis para tudo?

Flexbox pelo que percebi poderia ser apenas um menuzinho dropdown com pouco mais que uma duzia de opções, como em todas opções você só pode colocar os valores predeterminados (center, space-between e etc) isso poderia ser outra listinha com uma série de itens de acordo com a primeira opção. Ou seja, nem teria risco de digitar algo errado.

No geral quase tudo no CSS é assim pelo que percebi, como não vi a profundidade das linguagens de programação me parece que o CSS poderia muito bem funcionar com algum GUI que a pessoa nem precise se dar ao trabalho de digitar ou ter que lembrar exatamente cada nome de propriedade que existe ou venha a existir no futuro.

Existe alguma ferramenta do tipo pra tornar CSS/HTML mais ágil do que ter que ficar decorando cada nome possivel?

Olá Jilsea, tudo bem?

Primeiramente, peço desculpas pela demora em responder.

Realmente! No HTML e CSS existem muitos nomes, propriedade e sintaxes diferentes para aprender. Muitas vezes quando nos deparamos com isso no início, a impressão é que há uma lista gigante de palavras para decorar! Mas acredite, de tanto utilizarmos na prática, a escrita desses termos vai ficando cada vez mais automática. É um processo que todos passam e a tendência é que quanto mais se pratica mais ágil ficará!

Infelizmente a construção de uma página estática não é feita por meio de GUI, mas existem sim ferramentas e atalhos que podem otimizar esse desenvolvimento.

Figma

A primeira que quero citar é o figma, muito utilizado pelos designer para desenhar as interfaces web e serve como instrumento para desenvolvedores também. O figma é uma plataforma que gera a partir do modelo construído, algumas propriedades que serão uilizadas naquele projeto, como por exemplo, código das cores, tamanho das fontes, espassamentos, características das bordas etc. Pode ser utilizado como grande aliado e nos ajuda a não ficar "chutando" quais propriedades do CSS se encaixa melhor naquele contexto. Para saber mais sobre o figma, indico dar uma olhar nessa formação.

Autocomplete do editor de código.

Muitos editores de códigos já possuem por padrão uma sintaxe de autocomplete que nos ajuda na hora de codar, pois conforme vamos escrevendo as opções vão aparecendo. Além disso, também temos o Emmet Abbreviation que também é nativo de alguns editores (VS Code) e em outros é necessário instalação da extensão, o Emmet é um mecanismo de construção de blocos de código a partir da digitação de atalhos. Veja o exemplo:

Ao digitarmos header>div>h1+nav>li*6>a, ele irá construir isso:

<header>
    <div>
        <h1></h1>
        <nav>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
        </nav>
    </div>
</header>

É possível fazermos muitas coisas com os atalhos do Emmet, você pode saber mais na documentação.

Espero ter ajudado, em caso de dúvidas fique a vontade para perguntar. Bons estudos!