Executando verificação de segurança...
8
Programmer404
3 min de leitura ·

[ Conteúdo ] Antes do JavaScript, HTML e CSS...

Introdução:

Pelo o título, pode parecer estranho a primeira vista, pois iniciar com HTML e CSS antes do JavaScript é o básico do básico, porém, ultimamente vários novatos não tem pensado assim...

Recentemente naveguei por diversas comunidades no Twitter e Discord, e a quantidade de novatos que reclamam que CSS e HTML é fácil e que queria mudar logo para o javaScript, é grande. Só que, na prática, nenhum deles sabe usar CSS e HTML, sabe no máximo para que serve e é sobre isso que quero discutir.

Pare de Negligenciar HTML e CSS só porquê são fáceis

Recentemente, como eu disse anteriormente, naveguei por diversas comunidades sendo elas principalmente no Twitter e Discord. Após dias de observação, notei que a rejeição a se dedicar mais ao CSS e HTML tem aumentado bastante...

Dito isso, abri o perfil de todos ou troquei uma ideia, e a maioria era iniciante no mundo do Front-end e louco para aprender javaScript. A outra pequena parcela geralmente era programador Back-end, mas aqui, imagino que se justifica, ao menos um pouco.

O Problema disso

Além de navegar por comunidades, eu fechei alguns freelancers recentemente. Todos eles me mandaram o código do site pronto, e era somente para tornar responsível, mas quando eu abro o código...

Ao abrir o código, tem várias <div> aninhadas de forma desnecessárias, além de tá bem poluído com nomes de classes nada semântico e tudo visualmente bagunçado... e no CSS, era extremamente pior.

No CSS, havia praticamente todos os elementos com um position:absolute e para coisas simples que podia ser um simples flex.

Códigos como esse, era comum encontrar lá:

.button {
    position: absolute;
    left: 1000px
    padding-top: 10px;
    padding-bottom: 10px;
}

Esse foi um exemplo minimalista do tamanho da calamidade.

Onde eu quero chegar com isso?

Simples! Se você não domina nem HTML e CSS perfeitamente, que dizem ser fácil (e realmente é, só leva tempo para aplicar corretamente, principalmente CSS), então, porque ir para JavaScript?

Um mal HTML implica intrinsecamente um mal CSS, pois quando não temos um bom HTML estruturado, precisamos fazer mais "gambiarra" para os elementos ficarem certinhos. Outra coisa é o SEO, pois se você não sabe o que é isso, e se sabe não aplica direito, de nada adianta fazer um site...

Um site com SEO baixo, é um site de péssima qualidade, fato. Como melhorar isso? É simples também! HTML Semântico, atributo aria-label, dentre outras estratégias. Mas, a atual geração de Front-end, quer apenas uma div para testar seu botão mudando a cor de fundo...

Se no HTMl já tem todos esses problemas, imagina no CSS? Se você é Front-end, você precisa sim ter um conhecimento amplo em CSS e saber estilizar páginas de forma correta. Ninguém precisa decorar todas as propriedades, mas ao menos, as mais comuns como display, e seus valores como flex e grid, color para mudar a cor da texto, propriedades de background, padding, dentre outros que usamos em todos os sites, o mínimo é saber de cór, afinal, você nem precisa de esforço para isso, como você aplica sempre, é um processo natural.

Conseguem ver o problema? Se você não sabe aplicar HTML e CSS, seu site vai ser um site ruim com toda a certeza. HTML e CSS são simples, mas sua importância não deve ser subestimadas só porque são linguagens de desenvolvimento e não de programação.

Conclusão:

Apesar de eu ter dito "novos programadores", não estou generalizando todos, nunca é bom generalizar. Sei que tem alguns poucos que dominam bem os fundamentos e aplicam eles muito bem. O que acharam do Post?

Carregando publicação patrocinada...
5
Pilati

Pare de Negligenciar HTML e CSS só porquê são fáceis

Quem disse que CSS é fácil?

Essa pessoa não sabe CSS!

Se CSS fosse fácil não existiriam tantas libs para que as pessoas não precisassem usar CSS como Bootstrap, MaterialUI, Bulma...

E o pior, na minha opinião, TailwindCSS. Considero ele quase como um crime. Para não usar CSS se colcoa um framework para que você possa usar praticamente CSS Inline.

Em resumo a maioria das pessoa que eu conheço não sabem e não querem aprender CSS.

Mas Pilati, de onde você tirou esses dados?

Há um tempo atras postei uma vaga de dev Front-End. A única pessoa que me provou ter capacidade de reproduzir um layout do Figma em UI eficiente era um Dev Front-End Sênior com mais de 8 anos de experiência. todas as outras mais de 100 pessoas que aplicaram sequer sabiam propriedades básicas.

Resumo: Fiz eu mesmo toda a UI e sou Back-End

1
Programmer404
Autor
Autor

Eu acho CSS fácil de entender, porém, aplica-lo, eu acho difícil. Demorei meses até conseguir fazer bons layouts, e ainda hoje sigo me aprimorando. Como você disse, pessoas usam bibliotecas para usar CSS hoje em dia e não para acelerar o processo. Eu particularmente uso biblioteca somente em projetos maiores e quando tenho prazo curto pra entregar algo, assim acelera o processo, fora isso, CSS puro ou no máximo um Sass.

Há um tempo atras postei uma vaga de dev Front-End. A única pessoa que me provou ter capacidade de reproduzir um layout do Figma em UI eficiente era um Dev Front-End Sênior com mais de 8 anos de experiência. todas as outras mais de 100 pessoas que aplicaram sequer sabiam propriedades básicas.

Deveras preocupante esse relato. Eu acho que errar uma coisa ou outra, tudo bem. Atualmente estão errando tudo, até as medias das fontes. Pessoas usando medidas absolutas como Pixel é quase um crime...

Pegando um gancho com meu comentário acima: Só use Pixel para casos muito específicos! "Ah, mas como vou terminar o tamanho da fonte?", use rem ou em, o que muda entre elas é pouca coisa. 1 rem por exemplo é a mesma coisa que 16px. Então se você quiser 20px em rem, basta pegar os 20 e dividir por 16px (na verdade, por padrão é 16px, mas pode variar caso você mexa mais afundo no CSS, por isso, use a fonte base que você escolheu, senão mexeu em nada, é 16px) e assim temos 1.25rem que é a mesma coisa que 20px.

2
Pilati

Lembro que antes de lançarem vw e vh eu fiz um site inteiro só usando rem. Funcionava perfeitamente até a pessoa mudar o tamanho da fonte no SO hahaha.

Atualmente estão errando tudo, até as medias das fontes.

Eu fui um pouco mais a fundo. Pedia como se usava media query, transition e transform. Mas de longe a pergunta que mais desclassificava era "como se usa position absolute e fixed e qual a diferença entre as duas?"

Uma pergunta que deveria se aprender na primeira semana de estudos quase ninguém respondia certo.

1
Programmer404
Autor
Autor

Eu fui um pouco mais a fundo. Pedia como se usava media query, transition e transform. Mas de longe a pergunta que mais desclassificava era "como se usa position absolute e fixed e qual a diferença entre as duas?"

O mais engraçado é que o nome do valor é bem sugestivo por si só...

2
Pilati

o nome pode ser sugestivo, mas o que eu queria que a pessoa realmente respondesse é qual é a âncora de cada um?

Poucos mencionavam, e se mencionavam dificilmente saberiam explicar realmente o significado do que tavam falando

1
DaniloAbramowicz

Uma dúvida, essa entrevista que realizou era de uma vaga que pedia vários frameworks? Pois só vejo vaga de front end que pede diversas tecnologias para realizar sites “simples”.

Por curiosidade, poderia dar mais detalhes sobre esse layout que pediu para realizar? Para só senior conseguir realizar, imagino que a ui devia ser algo nível awwwards.

2
cyp

CSS é uma linguagem fácil, mas não é fácil usar CSS corretamente. A mesma coisa vale para HTML.

Vejo muitas pessoas que falam que é fácil, legado, e são as que menos sabem.

Depois de algum tempo usando ambas, me aprofundei tanto em CSS que até escrevi um compilador para o mesmo e vejo que ainda tenho muito que aprender. A maioria dos frameworks que os "novos programadores" tentam aprender são soluções para problemas inexistentes.

Se eu posso culpar alguém, são os "professores" que implicam que HTML/CSS/JS é legado e você deveria começar com React, Angular, Vue, etc...

1
Programmer404
Autor
Autor

Rapaz, a pessoa que fala que JavaScript, HTML e CSS é legado, nem pode ser chamado de professor... Como diabos alguém que não entende JavaScript vai aprender um framework que é baseado no javaScript? Deve ser por isso que tem muito programador "React" hoje em dia.

2
refeals

Ser fácil não é o mesmo que ser simples - CSS é MUITO complexo. Frontend nos últimos anos foi (ainda é?) uma porta de entrada em que o dev não precisa se preocupar com várias questões mais complexas da programação, mas criar um código bom definitivamente não é simples.

Hoje confunde-se Javascript com React com NextJS. São todos complementares, mas cada um no seu quadrado e com seu nível de complexidade. Veja o tanto de conteúdo por ai dizendo "devo aprender CSS ou Tailwind?".

Essa ideia de que o frontend é fácil não passa de um mito.

2
Programmer404
Autor
Autor

Como eu disse mais acima, CSS é fácil de entender e difícil de aplicar. Front-end tem sim muita complexidade... vejo muitos falando que é simples e que nem devia existir, mas essas mesmas pessoas não sabem centralizar uma div, criar uma responsividade digna, aplica um UI/UX bom, garante um SEO top, utiliza de cores certas, configura PWA, se preocupa com limpeza de inputs, dentre outras coisas.

Essa ideia de que o frontend é fácil não passa de um mito.

Definiu bem essa frase.

2
gabrielr97

Infelizmente, devido a bolha de desenvolvimento de software que surgiu na pandemia e estourou em meados 2022, surgiram muitos devs que pularam muitas etapas básicas no desenvolvimento. Isso tá refletindo muito hoje, onde o mercado tá pedindo muitos devs seniores pra tampar os buracos que esses devs da bolha deixaram.

2
cluberjay

Gostei muito do seu post , vou procurar conteudos sobre SEO , mas por hora dê uma olhada em como centralizo um elemento Html e me dê um feedback sincero por favor .

width 50%.
max-width 500px.
margin auto.

Uma coisa q percebo sobre semântica , muita gente usa div pra tudo , quando existem tags para o uso de muitos casos. Exemplo simples : por quê vou envelopar o conteudo principal de uma página com div se existe a tag main para isso?

1
Programmer404
Autor
Autor

Não é a maneira ideal de centralizar algo. Depende muito qual tipo de elemento você está centralizando, mas no geral seria algo como:

.container {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
}

Mas, como eu disse, depende de como você quer centralizar o elemento e o tipo dele. No geral, é basicamente esse que eu disse. Você também pode testar e ir adaptando a suas necessidades.

2
BrunoAseff

Tenho que assumir que eu estou literalmente nessa

Comecei a aprender programação com javascript, css e html. Na parte do css eu acabei não dando tanto foco achando que era tudo muito fácil (que é o que normalmente falam em cursos) e acabei aprendendo só o básico e pulando direto para tópicos mais avançados.

Agora, qualquer coisa que eu crio consigo me dar muito bem com a parte lógica, mas na hora de deixar tudo bonito eu fico "patinando" bastante, tendo que pesquisar além do normal.

No fim passo mais tempo tentando centralizar um botão do que criando todo o resto kkkk

Mas, já aprendi minha lição e estou estudando css

1