DEV Community: Matheus Felizardo

Criando mosaicos facilmente com grid-area e grid-template-area

Matheus Felizardo — Sun, 05 Dec 2021 17:19:39 +0000

Vocês conhecem esse modo de organizar um layout com o display grid usando grid-area e grid-template-area?
Eu gosto de usar pra montar mosaicos mas pode ser usado pra montar até mesmo o layout da página toda.

Primeiro você faz o desenho do layout que quer montar (só pra facilitar a visualização)
Exemplo:

Depois você estrutura seu HTML.
Eu gosto de utilizar as classes pra montar o layout quando vou utilizar o grid-area.



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./index.css">
    <title>Grid</title>
</head>
<body>
    <div class="container">
        <div class="item-1"></div>
        <div class="item-2"></div>
        <div class="item-3"></div>
        <div class="item-4"></div>
    </div>
</body>
</html>

Depois você coloca as propriedades no CSS que irão montar o mosaico.

1- Você irá setar o display grid no "container", ele que irá organizar a disposição dos itens no mosaico, vou colocar também uma altura para o meu mosaico, nesse caso



.container {
display: grid;
height: 300px;
}

2- Você vai setar um "apelido" para cada item do mosaico, usando a propriedade "grid-area", aproveitei para colocar um background.



.item-1 {
    grid-area: item-1;
    background: #ec934a;
}

.item-2 {
    grid-area: item-2;
    background: #e46c6c;
}
.item-3 {
    grid-area: item-3;
    background: #85fd7b;

}
.item-4 {
    grid-area: item-4;
    background: #7fbdf0;
}

3- Após isso, você vai setar no container, o template que você quer para o mosaico usando a propriedade grid-template-areas. Nela você vai basicamente desenhar o layout que você quer, onde cada abertura de aspas e fechamento, é uma linha.



.container {
    display: grid;
    height: 300px;
    grid-template-areas: 
    "item-1 item-2"
    "item-1 item-3"
    "item-1 item-4"
    ;
}

Observe como o layout foi desenhado de acordo com a formatação no grid-template-areas

Só irei fazer mais alguns ajustes de tamanho que quero para minhas colunas usando o grid-template-columns e o gap para gerar um espaçamento entre os elementos ```CSS

.container {
display: grid;
height: 300px;
gap: 15px;
grid-template-columns: 150px 200px;
grid-template-areas:
"item-1 item-2"
"item-1 item-3"
"item-1 item-4"
;
}

O resultado é a criação do nosso layout de forma fácil
![Resultado](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/luirrp3l6usfqamlzq8v.png)

Um exemplo real de galeria que criei num projeto utilizando essas propriedades

![Exemplo real](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a88un8s7l9ie6jy4codn.png)

E ai, já conhecia essa propriedade com o diplay grid, já utilizava ou vai começar a utilizar a partir de agora?

Maiores informações: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas

Qualquer dúvida é só perguntar, e forte abraço!!

Linkedin: https://www.linkedin.com/in/matheus-felizardo
Site Pessoal: https://www.matheusfelizardo.com.br/

Como uma página funciona? Integração HTML - CSS - Javascript

Matheus Felizardo — Fri, 29 Oct 2021 23:53:57 +0000

Quando eu estava começando no mundo da programação, meu maior desafio foi entender como as coisas aconteciam numa página.

No início geralmente é complicado, por que normalmente quando começamos a estudar, vemos primeiro o HTML, depois o CSS, juntamos um pouco os dois, depois vemos Javascript, e depois juntamos os três, bem lentamente. Então não vemos rápidamente como eles se integram.

Nessa postagem vou tentar mostrar um pouco como acontece essa integração e porque é importante estudar essa base da programação web antes de avançar pra um framework ou uma outra linguagem.

HTML

O HTML, HyperText Markup Language, é o "esqueleto".
É uma linguagem de marcação que é interpretada pelo navegador para montar a estrutura da página.

Exemplo de código HTML (criar um arquivo index.html):

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Meu blog - Exemplo</title>
</head>
<body>
    <h1>Felizardo News</h1>
    <section>
        <h2>Doação de animais no centro de Cabo Frio</h2>

        <p>Acontece nessa quinta feira, 04/11, a grande feira de doação de animais na cidade de Cabo Frio./ </p>
        <p>Esses animais foram resgatados em situação de rua, muitos filhotes, e tratados pelo Centro de Animais Felizardo, e agora estão prontos para receberem todo amor de um lar</p>

        <button>Saiba Mais</button>
    </section>
</body>
</html>

Vamos analisar melhor o efeito de algumas tags desse código utilizando o dev-tools do Google Chrome (F12).
Na aba "Elements" do dev-tools podemos ver bem como é montado essa estrutura.

Como podemos observar, o HTML montou uma estrutura básica da página, porém não é assim que são as páginas que visitamos, certo?
Exato, é aí que entra o nosso próximo tópico.

CSS

O CSS é que trás o estilo à nossa página.
Com ele podemos modificar a posição dos elementos HTML, as cores, adicionar backgrounds, espaçamentos, efeitos.
Irei adicionar algumas propriedades de CSS no arquivo HTML que criei, e podemos fazer isso de três formas:

colocando o estilo diretamente no arquivo HTML, dentro de uma tag <style>;
colocando diretamente na tag HTML (exemplo: <p style="color: blue;">Texto azul </p>);
colocando em um arquivo externo, que é como utilizarei;

Mas não se preocupe com isso, futuramente irei fazer uma nova postagem sobre Arquitetura de CSS, explicando algumas formas de desenhar o CSS do seu projeto.
No arquivo index.html, iremos adicionar a tag <link rel="stylesheet" href="./index.css"> antes da tag <title>, que faz a ligação entre o index.html e index.css.

Exemplo de código CSS (criar um arquivo index.css):

body {
    background-color: #333;
    padding: 1rem;
    color: #FFF;
}

section {
    max-width: 600px;
    border: 1px solid #95f8bb;
    padding: 1rem;
}

h1 { 
    font-size: 2rem;
    text-align: center;
    margin-bottom: 3rem;
    text-transform: uppercase;
    letter-spacing: 4px;
}

h2 { 
    font-size: 1.4rem;
    margin: 0;
    color: #fff;
}

button {
    padding: 0.5rem 1rem;
    border: none;
    cursor: pointer;
    background: mediumpurple;
    margin-top: 1rem;
    color: #FFF;
    font-weight: bold;
    font-size: .925rem;
    border-radius: 4px;
}

Com o CSS aplicado é possível perceber a mudança entre um contexto só com HTML e um com HTML + CSS.

E pelo dev-tools podemos verificar também o CSS que foi aplicado em cada elemento:

Mas e o Javascript?

Javascript

O Javascript cria basicamente todas as interações feitas na página.
É através dele que muitas ações são tomadas, como por exemplo, ao clicar num botão de fechar um pop-up na página, esse elemento sumir.
Então com ele manipulamos aqueles elementos da árvore DOM do HTML e damos vida à página.
Vou dar um exemplo um pouco mais avançado de ao clicar no botão "Saiba Mais" do nosso exemplo, ele abra um modal com a notícia.
Eu farei isso manipulando o CSS através do Javascript (pode não ser a melhor forma, mas dá pra visualizar bem um uso do javascript)

O objetivo é mostrar a interação entre o javascript e o CSS nesse caso.
Para isso, eu criei um outro elemento HTML com a notícia, já estilizado com o CSS e com o conteúdo completo da notícia. E coloquei ele com um atributo no HTML (noticia-container) para ficar mais fácil de manipular, assim como os botões.
Nesse estilo HTML, eu coloquei a noticia escondida 2000px para a esquerda, ou seja, ela já está na tela, porém está oculta. Quando eu clico em "Saiba mais", pelo javascript eu altero o estilo CSS que coloca a notícia 2000px para esquerda e coloco na posição original (0px), com isso, o container com a notícia aparece na tela.
Ao clicar em "Fechar", eu manipulo o CSS para que o container com a notícia novamente vá 2000px para a esquerda.

Baixe aqui o código completo

E aí, conseguiu entender como funciona essa interação entre o HTML, CSS e Javascript?
Agora é só estudar os principais conceitos dessas tecnologias para ficar fera e conseguir criar páginas incríveis, pois é assim que a maioria das páginas funcionam.

Uma importante qualidade de um bom dev é pesquisar, então vou deixar aqui boas referências para os assuntos abordados:

Linkedin: https://www.linkedin.com/in/matheus-felizardo/
Site pessoal: https://matheusfelizardo.com.br

Minha jornada e migração para área de TI

Matheus Felizardo — Sun, 03 Oct 2021 22:02:29 +0000

Fala galera!!
Como minha primeira postagem aqui no blog, vou falar de algo muito especial, que é o caminho que trilhei pra iniciar na área de TI.

Antes de mais nada, vou fazer uma breve apresentação.
Me chamo Matheus Rodrigues Felizardo, muita gente me chama de Felizardo, tenho 26 anos e sou formado em Gestão de TI na Estácio, atualmente cursando pós graduação em Engenharia de Software na PUC Minas. Trabalho como desenvolvedor de software, atuando mais no front-end com React.

Minha carreira antes do TI

Quando eu tinha 18~19 anos eu tomei uma decisão de começar a trabalhar no lugar de estudar para tentar entrar numa faculdade pública. A intenção era trabalhar e depois começar a pagar uma faculdade particular num curso que eu queria (na época nutrição) e assim fiz.
Como muitos brasileiros iniciam, entrei numa empresa de callcenter (Atento Brasil) para trabalhar com atendimento ao cliente na área de seguro saúde e logo nos primeiros meses já tracei um objetivo, que era ser contrato pelo cliente, o Bradesco Seguros. Para esse objetivo, eu precisaria de pelo menos estar cursando o ensino superior ou tecnológo.
Então no lugar de fazer nutrição, eu pensei em fazer o curso de Gestão de TI, pois tecnologia foi algo que eu sempre tive muita afinidade e pensei que conseguiria assimilar mais facilmente, além da duração do curso ser inicialmente de 2 anos e meio.

O curso

O curso de Gestão de TI foi muito importante pra minha carreira, não bem na área de TI, mas no quesito de entender como funcionava um projeto e um pensamento mais maduro como profissional. Tive muitas disciplinas que abordavam boas práticas de projetos e muitos exemplos de profissionais com anos de experiência que dividiam turma comigo. O curso em si não focava muito na parte de programação e também ouvi muitos comentários negativos de pessoas que já eram gestoras, falando que o programador era somente mais um trabalho braçal, então como era muito novo, nem cogitei verificar a área e foquei no objetivo (entrar no Bradesco).

Processos seletivos na Atento

Eu trabalhei durante cerca de 4 anos na Atento, e nesse período eu fiz dois processos seletivos e tive êxito nos dois.
Um quando eu era atendente, que foi para ser backoffice no SAC na Atento, prestando serviço para o próprio Bradesco, esse eu fiz depois de cerca de 1 ano e meio de empresa.
E o outro foi o tão esperado processo para o Bradesco Seguros, que foi quando abriu uma vaga para ser atendente na ouvidoria da empresa.
Nesse processo para o Bradesco, inicialmente tinham mais de 50 pessoas da Atento e 1 vaga. Muitos foram reprovados na prova e nas dinâmicas eu fui tão bem que eu sabia que seria aprovado (humildemente falando).

Bradesco Seguros

O Bradesco realmente foi tudo aquilo que eu esperava no início. Uma empresa ótima, com ótimos benefícios, um ótimo salário para o cargo de atendente, trabalhava 6 horas por dia sem final de semana, PLR motivadora, porém ao entrar na minha equipe, eu percebi que tinha algo ali que eu já não queria. Por ser tão bom, na minha equipe tinham muitas pessoas que estavam a mais de 10 anos no cargo, e eu pensei que não poderia me acomodar e ficar tanto tempo ali.
Então, estudei muito sobre a empresa, sobre os produtos (saude, auto/re, vida e previdência), tentei entender melhor o processo das áreas e participar de coisas além do meu cargo. Porém, em 3 anos de empresa abriu somente um processo seletivo, que não fui aprovado.
Essa falta de oportunidades me desmotivou muito pois eu tava vendo o tempo passar e percebendo que se eu não mudasse meu pensamento, ficaria ali pra sempre (na minha cabeça).

Pandemia e a maior mudança da minha vida

Durante a pandemia, comecei a trabalhar remotamente e ganhei 3~4 horas no dia, que ficava no transito, e decidi estudar alguns assunto e procurar algo para ter como carreira.
Em abril de 2020 resolvi dar uma olhada em como estava o mundo da programação e comecei a estudar html, css e javascript. Diferente do que foi na faculdade, quando só havia tido C#, gostei bastante e resolvi estudar afundo para tentar iniciar na carreira.
Fui me envolvendo nas comunidades, pelo facebook e principalmente na da rocketseat.
Comecei a amar o mundo da programação e as comunidades, e em setembro, depois de estar estudando por 5 meses, resolvi que iria pedir demissão do Bradesco para focar nos estudos de programação pois estava sentindo que era o que eu deveria fazer.
E assim o fiz, em setembro mesmo, para surpresa de todos da minha equipe, pedi o desligamento da empresa para o primeiro dia de outubro.
No meu planejamento eu demoraria cerca de 2 anos para conseguir ingressar no mercado como junior e ganhar perto do que eu ganhava no Bradesco.

Início da carreira em programação

No dia seguinte que pedi demissão, recebi o contato de uma empresa de tecnologia (Inforce) com uma oportunidade para atuar como desenvolvedor front end trainee e para isso deveria fazer um pequeno projeto que disponibilizaram pelo github.
Após aproximadamente 15 dias desempregado recebi a excelente notícia que havia sido aprovado.
Seguir a minha intuição deu muito certo nesse caso. Além de ser contratado na Inforce, após 3 meses eu fui promovido para desenvolvedor junior. Ou seja, antecipei em quase 2 anos meus objetivos principais de arrumar um trabalho e atuar como junior, além de ganhar um pouco mais perto do que ganhava no Bradesco em menos de 4 meses.

Novos desafios

Passado aproximadamente 9 meses de experiência na Inforce, recebi o contato de uma recrutadora pelo Linkedin questionando se eu gostaria de participar de um processo seletivo para a Intelie, minha empresa atual, para trabalhar com React e Java, além de outras tecnologias promissoras.
Eu fiz o desafio, fui muito bem e acabei sendo contratado.

E agora estou nessa nova etapa da minha nova carreira, que é o esforço para chegar num nível pleno, o que eu tenho certeza que virá com o tempo.

Tenho algumas coisas que estão sendo priorizadas para minha carreira atualmente, como buscar fluência no inglês, evoluir tecnicalmente, aprender mais sobre arquitetura de software, terminar minha pós e ter uma experiência profissional no exterior.
Em outras postagens falarei mais de como estou conectando meus objetivos e também de como eu estudei inicialmente.