3 questionamentos que todo Front-End iniciante já teve

Conheça 3 dicas super práticas que podem ser a solução para seus problemas como programadora iniciante

xjulices
reprogramabr
4 min readDec 14, 2018

--

Eu sempre quis escrever algo que fosse útil para as pessoas. Eu admiro muito quem escreve super bem e prende o leitor. Eu já quis cursar letras, mas ainda bem que descobri a programação!

Sentei aqui no meu quarto na mesa de estudos, olhei para a janela, maior chuva lá fora e fiquei refletindo “o que eu posso escrever que seja útil?”. Estava pensando em algo muito complicado, sendo que o que a gente mais sente dificuldade de achar no começo das coisas são as mais simples.

Photo by Max Nelson on Unsplash

As coisas simples que vão perdendo a importância com o tempo. Que são abandonadas por que acham que ninguém precisa lembrar mais delas.

Por isso, entrei no meu EU “super iniciante” da programação e separei coisas que EU tive dúvidas e dificuldades quando comecei a programar.

O que é uma ‘div’?

Sim, eu tinha muita dificuldade de entender o que era a santa DIV que todo mundo falava mas eu não conseguia enxergar ela ali.

Isso destravou quando coloquei na cabeça que as DIVs são “caixas”, divisões, pastas guardando coisas.

Simples assim.

Podemos colocar uma DIV para guardar um H1 e um P, como na imagem acima, ou uma DIV para guardar cada elemento, como no exemplo abaixo:

Importante lembrar que não é uma boa prática sair colocando DIV em todo lugar para o código ficar com espaços ou “guardar” tudo nessas “caixas”. Também é importante saber que, como foi comentado no texto da Vanessa Ariel, a DIV “mãe” é a que manda mais.

Então, por exemplo: se colocarmos uma característica de display: flex nela, na maior de todas, a “caixa que guarda”, ou seja, essa DIV que tem vários elementos dentro dela, tudo nela vai corresponder ao display: flex.

Isso faz com que não seja necessário colocar display-flex em cada elemento: h1 e P, por exemplo. Ah, e não esqueça de conferir se todas as suas DIVs estão fechadas, okay?

Por que meu CSS não está funcionando?

Essa é aquele mico que todos vamos pagar! Certeza! Eu digo isso brincando, acontece com todo mundo, é normal. Mas o mais legal é que é algo simples de resolver e a gente fica feliz rápido.

Quando o CSS não está aparecendo ou até mesmo o JS, na maioria dos casos no começo é por que esquecemos de chamar ele no link no documento HTML.

É real, é bobo, MAS ACONTECE! E mais de uma vez! Ainda bem que é simples de resolver nesse caso e ficamos aliviados que era só isso! ;)

Muita parentada no Javascript! Como organizar o código

NOTÍCIA FELIZ!!! No Javascript meu olho chega a ficar tonto de tantas chaves e parênteses e eu pensei um dia se não tinha como solucionar isso. Até que um dia eu peguei um computador que estava com uma extensão no Visual Code Studio que deixava tudo colorido para separar eles!

Assim é mais difícil de esquecer alguma maldita chavinha ou parênteses aberto! YAAAAAY! Não sei se tem essa extensão para o Sublime ou outro editor! Se eu descobrir eu atualizo! Sério, isso salvou muito minha vida! Amo!

Vai em:

FILE > PREFERENCES > EXTENSIONS
Ou
ARQUIVO > PREFERÊNCIAS > EXTENSÕES

Pesquise por Bracket Pair Colorizer, instale e seja muito feliz com muitas chaves e parênteses!{UHUL}(YAYYY)

Ele vai ficar assim:

Gostou? Espero ter ajudado vocês! Qualquer coisa é só entrar em contato comigo.

Até a próxima!

--

--