CSS

CSS Grid – Um Guia Interativo (Parte 1 – Containers)

Olá Web Developers!

Há um bom tempo que os navegadores já suportam bem o CSS Grid. Porém, ainda há pessoas com algumas dúvidas sobre o seu funcionamento. Por isso desenvolvi um guia interativo para te ajudar a entender como ele funciona.

Já fizemos aqui um guia completo sobre FlexBox. Para conferir:

Guia Interativo FlexBox – Parte 1 (Containers)
Guia Interativo FlexBox – Parte 2 (Itens)

Caso você esteja em dúvida sobre usar Flexbox ou CSS Grid, também já fizemos um post sobre isso: Flexbox ou CSS Grid?

HTML5 e CSS3 - Desenvolvimento web Básico
Curso de HTML5 e CSS3 - Desenvolvimento web Básico
CONHEÇA O CURSO

O Que É CSS Grid?

O CSS Grid é um sistema de estruturação de layout que o CSS nos fornece. Diferente do Flexbox, que apenas nos permite trabalhar em uma única dimensão, o CSS Grid nos permite configurar layouts em duas dimensões (linhas e colunas). A junção de linhas e colunas formam uma grade, o que dá o nome a esse sistema (Grid).

O CSS Grid é bem poderoso e completo, permitindo que certas coisas sejam feitas de mais de uma maneira, o que pode confundir muitos iniciantes. Portanto, aqui irei mostrar as principais partes da forma mais simples para que você já termine de ler este post sabendo trabalhar com o CSS Grid.

Primeiro de tudo temos que saber que teremos propriedades CSS para trabalhar com o elemento que possui nossos itens (grid container ou elemento pai) e propriedades para os nossos itens da grid (elementos filhos).

Grid Container

Neste primeiro post veremos as propriedades que ficam no elemento pai dos nossos itens, o grid container.
Teremos basicamente um container com alguns itens dentro. Dependendo do exemplo a quantidade de itens poderá ser alterada.

<div class="container" >
    <div class="item" ></div>
    <div class="item" ></div>
    <div class="item" ></div>
    <div class="item" ></div>
    <div class="item" ></div>
    <div class="item" ></div>
</div>

Display

Primeiro precisamos definir que o nosso container é do tipo “grid”; Fazemos isso com a propriedade “display”.

.container{
    display: grid;
}

Isso irá criar uma grid do tipo block, significando que o .container irá ocupar a linha inteira.
Caso você queira containers inline, utilize display: inline-grid;

grid-template-columns e grid-template-rows

Como estamos trabalhando com uma grade, precisamos indicar quantas linhas e quantas colunas nossa grade terá.
Para colunas usamos o grid-template-columns e para linhas usamos o grid-template-rows.

Se queremos 3 colunas, não indicamos com o número três. O que fazemos na verdade é indicar qual o tamanho de cada coluna que queremos. A medida pode ser em qualquer unidade (px, em, %, cm, etc). Cada valor deve ser separado por um espaço.

Exatamente da mesma maneira nós declaramos as linhas utilizando a propriedade grid-template-rows.

grid-template-areas

Até agora só declaramos o tamanho das nossas colunas e linhas. Você deve ter notado que nossos itens vão se organizando na grid de acordo com a ordem em que estão no HTML.

Porém, o CSS Grid nos permite ir além disso: podemos dar nomes para cada área da nossa grade e depois indicar onde cada elemento deve ir. Dessa maneira fica bem simples de entender a estrutura da nossa grid. Fazemos isso com a propriedade grid-template-areas.

Vamos alterar um pouquinho o nosso HTML. Iremos colocar as classes header, sidenav, content e footer nos itens da grid para podermos indicar a posição de cada um deles depois.

<div class="container" >
    <div class="item header" ></div>
    <div class="item sidenav" ></div>
    <div class="item content" ></div>
    <div class="item footer" ></div>
</div> 

Para cada item, vamos declarar a propriedade grid-area, que serve para indicar o nome da área em que cada elemento deverá ocupar na grid. Para facilitar eu dei o mesmo nome das classes, mas você pode dar o nome que quiser.

.header{
  grid-area: header;
}
.sidenav{
  grid-area: sidenav;
}
.content{
  grid-area: content;
}
.footer{
  grid-area: footer;
}

Agora vamos ao que interessa: indicar o nome das áreas da nossa grid.
Para dar nomes às áreas de uma mesma linha, escrevemos dentro de aspas "". Ao abrir novas aspas estaremos indicando que estamos indo para a linha seguinte.

No exemplo abaixo nós escrevemos o nome das áreas em uma única linha. Mas para ficar mais simples de entender nós poderíamos ter escrito em linhas separadas. Fica visualmente mais legível:

.container{
    grid-template-areas: "header header" 
                         "sidenav content" 
                         "footer footer";
}

Repetimos header e footer duas vezes porque declaramos duas colunas e queremos que eles ocupem as duas.

Experimente mudar os nomes das áreas de lugar e veja que nossos elementos irão mudar de posição também. Algumas sugestões:

  • “sidenav header” “sidenav content” “sidenav footer”
  • “header header” “content sidenav” “footer footer”
  • “header header” “content sidenav” “footer sidenav”

Se quiser criar uma área sem nome, coloque .. Experimente: “header header” “content sidenav” “. footer”

grid-column-gap, grid-row-gap e grid-gap

Nossos itens estão todos colados. Podemos indicar qual o espaço entre linhas e colunas.
Para isso usamos as propriedades grid-column-gap e grid-column-row.

O grid-gap é um atalho para declarar as duas propriedades em um só lugar.
Se você passar um único valor, os dois serão aplicados para o espaço para linhas e colunas. Se passar dois valores, o primeiro será para linhas e o segundo para colunas.

.container{
    grid-gap: 20px;
    grid-gap: 20px 50px;
}

* O prefixo grid- destas propriedades está sendo removido e já é suportado nos navegadores modernos. Portanto, também pode-se utilizar as propriedades column-gap, row-gap e gap.

HTML5 e CSS3 - Desenvolvimento web Avançado
Curso de HTML5 e CSS3 - Desenvolvimento web Avançado
CONHEÇA O CURSO

justify-items

Alinha todos os itens da grid horizontalmente dentro de sua própria célula (área).

  • stretch (padrão): estica os itens horizontalmente para eles preencherem sua célula
  • start: alinha os itens no início de suas células
  • end: alinha os itens no final de suas células
  • center: alinha os itens no centro de suas células

align-items

Alinha todos os itens da grid verticalmente dentro de sua própria célula (área).

  • stretch (padrão): estica os itens verticalmente para eles preencherem sua célula
  • start: alinha os itens na parte de cima de suas células
  • end: alinha os itens na parte de baixo de suas células
  • center: alinha os itens no centro de suas células

place-items

Atalho para align-items e justify-items em uma única declaração.

justify-content

O justify-item alinha cada item dentro de sua própria área. Já o justify-content alinha horizontalmente as áreas em relação ao container.

  • stretch: redimensiona os itens da grid para preencherem a largura do container. Apenas funciona se você não tiver declarado uma largura para as colunas.
  • start: alinha as áreas no início da grid
  • end: alinha as áreas no final da grid
  • center: alinha as áreas no centro da grid
  • space-around: distribui as áreas com o espaço a sua volta
  • space-between: distribui as áreas com o espaço entre elas
  • space-evenly: distribui o espaço igualmente entre as áreas

align-content

O align-item alinha cada cada item dentro de sua própria área. Já o align-content alinha verticalmente as áreas em relação ao container.

  • stretch: redimensiona os itens da grid para preencherem a altura do container. Apenas funciona se você não tiver declarado uma altura para as linhas.
  • start: alinha as áreas no topo da grid
  • end: alinha as áreas na base da grid
  • center: alinha as áreas no centro da grid
  • space-around: distribui as áreas com o espaço a sua volta
  • space-between: distribui as áreas com o espaço entre elas
  • space-evenly: distribui o espaço igualmente entre as áreas

place-content

Atalho para align-content e justify-content em uma única declaração.

grid-auto-columns e grid-auto-rows

Pode ser que você precise criar novas linhas ou colunas, as quais ainda não estão declaradas. Ao serem criadas, qual o tamanho delas?
Estas propriedades nos permitem indicar qual será o tamanho de novas linhas e colunas criadas.

Um exemplo bem simples é caso você não tenha declarado o tamanho das linhas ou colunas. Ao adicionar novos elementos, eles ficarão com o tamanho indicado nestas propriedades.

Nós aprendemos a posicionar os itens da grid passando o nome das áreas.
Porém, há outra maneira (um pouco mais complicada) de se fazer isso. Após indicar o tamanho das áreas e colunas, podemos indicar em que linha/coluna o item começa e em que linha/coluna ele termina. Ficaria assim:

.item{
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 2;
    grid-row-end: 3
}
/*ou com os atalhos:*/
.item{
    grid-column: 1 / 2;
    grid-row: 2 / 3;
}
/*ou com esse atalho*/
.item{
    grid-area: 1 / 2 / 2 / 3;
}

Se você declarar, por exemplo, para um item se posicionar em uma linha ou coluna que não foi declarada, ele ficará com as dimensões declaradas em grid-auto-columns e grid-auto-rows também.

grid-auto-flow

Se você possui itens que não possuem uma área declarada para ficar, esta propriedade indica se estes itens devem ir para uma nova linha ou coluna.

grid

Atalho para definir em uma única declaração as seguintes propriedades: grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns e grid-auto-flow

Funções e Valores Especiais

O CSS Grid também veio com palavras-chave que guardam valores especiais e também novas funções para dar ainda mais poder à criação de nossos layouts.

Valores Especiais

Ao declarar as dimensões das linhas e colunas, podemos indicar algumas palavras especiais ao invés de valores numéricos:

  • min-content: o elemento ficará com o tamanho mínimo de seu conteúdo
  • max-content: o elemento ficará com o tamanho máximo de seu conteúdo
  • auto: utiliza o espaço disponível

No exemplo a seguir, o primeiro item ficará com o tamanho mínimo de seu conteúdo, ou seja, seu texto. O segundo item ficará com o tamanho máximo necessário para caber seu conteúdo (texto).
Já o terceiro elemento ficará com o espaço que sobrou.

A unidade fr

Além de indicar a dimensão de linhas e colunas com as tradicionais unidades como px, % e em, agora também contamos com o fr.
Esta unidade indica fração.

No código abaixo cada uma das colunas ficará com 1/3 do espaço disponível (1fr + 1fr + 1fr = 3).

.container{
  /***********/
  grid-template-columns: 1fr 1fr 1fr;
  /***********/
}

No código abaixo a primeira coluna ficará com 50px, a segunda com 2/5 do espaço disponível e a terceira, com 3/5 (2fr + 3fr = 5).

.container{
  /***********/
  grid-template-columns: 50px 2fr 3fr;
  /***********/
}

Experimente brincar com os valores das colunas no Playground abaixo:

A função minmax()

Imagine que você tenha uma linha ou coluna que pode variar de tamanho, mas que ela não pode passar de um valor mínimo ou máximo. Esta função nos permite indicar ambas as dimensões limites.

No código abaixo a primeira e terceira coluna terão 1fr de largura. A segunda coluna terá seu tamanho alterado de acordo com a largura de seu container. O tamanho mínimo será 100px e o máximo será 50% da largura do container (isso mesmo, podemos misturar unidades diferentes!).

.container{
  /***********/
  grid-template-columns: 1fr minmax(100px, 50%) 1fr;
  /***********/
}

Isso ajuda muito a ter mais controle do tamanho dos elementos e também nos poupa de escrever vários media queries.

A função fit-content()

Esta função recebe um único parâmetro, o tamanho máximo que um elemento pode chegar. É como se você usasse o min-content, mas com um controle de tamanho máximo que o elemento pode ter.

Uma diferença principal com o minmax() é que o minmax() sempre buscará ocupar o maior espaço possível, enquanto o fit-content() não ocupará mais espaço do que o necessário.

A função repeat()

Quando precisarmos criar mais de uma linha ou coluna com a mesma dimensão, utilize a função repeat() para não ter que ficar escrevendo várias vezes. Primeiro indicamos o número de repetições e depois, o valor a ser repetido.

No código abaixo nossa primeira coluna terá 50px de largura. Depois teremos 3 colunas com 20px e uma última com 1fr.

.container{
  /***********/
  grid-template-columns: 50px repeat(3, 20px) 1fr;
  /***********/
}

Experimente mudar a quantidade de repetições e o valor da dimensão dos itens repetidos no Playground abaixo.

auto-fill e auto-fit

Junto ao repeat() podemos usar as palavras especiais auto-fill e auto-fit. Isso ajuda muito na hora de criar layouts responsivos de forma bem simples.

Nos exemplos abaixo, note que eu não indiquei quantas colunas eu quero. Na função repeat() eu usei os valores auto-fill e auto-fit.

O auto-fill tenta preencher o espaço disponível com quantos itens der, não importando se os itens estão vazios. Já o auto-fit também tenta colocar quantas colunas der, expandindo os itens para caber no espaço disponível.

Veja que, como estamos usando a função minmax(), também temos controle do tamanho mínimo e máximo dos itens.

CSS Flexbox – Um Guia Interativo (Parte 2 – Itens)

Olá Web Developers!

No post anterior vimos as propriedades que usamos no container ao trabalhar com Flexbox. Agora veremos as propriedades que utilizamos nos itens do container.

Itens

Lembre-se que temos propriedades CSS para trabalhar com o elemento que possui nossos itens (container ou elemento pai) e propriedades para os nossos itens (elementos filhos).

Neste post veremos as propriedades que ficam nos elementos filhos.
Teremos basicamente um container com alguns itens dentro.

HTML5 e CSS3 - Desenvolvimento web Básico
Curso de HTML5 e CSS3 - Desenvolvimento web Básico
CONHEÇA O CURSO

Para vermos a diferença das propriedades aplicadas em um item específico, vamos adicionar a este item a classe .selected.

<div class="container" >
    <div class="item" ></div>
    <div class="item selected" ></div>
    <div class="item" ></div>
</div>

order

Por padrão, os itens de um Flex Container são exibidos na ordem presente no HTML.

Com a propriedade order nós podemos alterar a ordem dos elementos. O valor deve ser um número inteiro, negativo ou positivo.

flex-grow

Indica o quanto um item pode crescer caso seja necessário. Deve ser um número inteiro positivo.

Isso significa que se todos os itens tiverem o valor 1, o espaço disponível será distribuído igualmente a todos eles.

Caso um dos itens tenha o valor 2, este item poderá ter duas vezes mais espaço do que os outros.

flex-basis

Define o tamanho padrão de um elemento antes do espaço disponível ser distribuído. O valor pode ser em px, %, em, etc.

Se o valor for auto, ele irá olhar para o valor de width e height do item.

Se o valor for content, ele irá olhar para o tamanho do conteúdo do item.

flex-shrink

Indica o quanto um item pode encolher caso seja necessário. Deve ser um número inteiro positivo.

Isso significa que se todos os itens tiverem o valor 1, o espaço disponível será distribuído igualmente a todos eles.

Caso um dos itens tenha o valor 2, este item poderá ter metade do espaço do que os outros.

flex

Esta propriedade é apenas um atalho para flex-grow, flex-shrink e flex-basis, nos permitindo declarar os valores em uma única propriedade.

.item.selected{
    flex: 2 4 50px;
}
HTML5 e CSS3 - Desenvolvimento web Básico
Curso de HTML5 e CSS3 - Desenvolvimento web Básico
CONHEÇA O CURSO

align-self

Você deve se lembrar da propriedade align-items que vimos no post sobre as propriedades do container.

A propriedade align-self nos permite sobrescrever o valor desta propriedade para um único item. Assim podemos, por exemplo, colocar um único item no final de uma linha enquanto todos os outros estão no começo.

CSS Flexbox – Um Guia Interativo (Parte 1 – Containers)

Olá Web Developers!

Há um bom tempo que os navegadores já suportam bem o Flexbox. Porém, ainda há pessoas com algumas dúvidas sobre o seu funcionamento. Por isso desenvolvi um guia interativo para te ajudar a entender como o Flexbox funciona.

Se estiver com dúvidas entre usar Flexbox ou CSS Grid, confira o nosso post de comparação: https://www.treinaweb.com.br/blog/flexbox-ou-css-grid/

HTML5 e CSS3 - Desenvolvimento web Básico
Curso de HTML5 e CSS3 - Desenvolvimento web Básico
CONHEÇA O CURSO

O que é Flexbox?

O Flexbox (Flexible Box) nos permite organizar, alinhar e distribuir itens dentro de um container. Com ele fica mais simples definir o tamanho e o alinhamento vertical e horizontal de itens.

Primeiro de tudo temos que saber que teremos propriedades CSS para trabalhar com o elemento que possui nossos itens (container ou elemento pai) e propriedades para os nossos itens (elementos filhos).

Container

Neste primeiro post veremos as propriedades que ficam no elemento pai dos nossos itens, o container.
Teremos basicamente um container com três itens dentro.

<div class="container" >
    <div class="item" ></div>
    <div class="item" ></div>
    <div class="item" ></div>
</div>

display

Primeiro precisamos definir que o nosso container é do tipo “flex”; Fazemos isso com a propriedade “display”.
No exemplo abaixo, utilize o checkbox para ligar/desligar o Flexbox.

flex-direction

Indica a direção dos itens, definindo o que vamos chamar de eixo principal (main-axis).

  • row (padrão): da esquerda para direita
  • row-reverse: inverso de row
  • column: de cima para baixo
  • column-reverse: inverso de column

flex-wrap

O comportamento padrão dos itens de um elemento flex é ficar em uma única linha. Se a largura total de todos os itens for maior do que o espaço disponível, os itens continuarão na mesma linha.

Esta propriedade permite que os itens sejam jogados em outra linha caso não haja mais espaço na linha.

  • nowrap (padrão): todos os itens ficam em uma única linha
  • wrap: os itens que não cabem na linha são jogados para baixo
  • wrap-reverse: os itens que não cabem na linha são jogados para cima

flex-flow

Esta propriedade é apenas um atalho para flex-direction e flex-wrap, nos permitindo declarar o valor de ambos em uma única propriedade.

.container{
    display: flex;
    flex-flow: row wrap;
}

justify-content

Define o alinhamento dos itens ao longo do eixo principal.

  • flex-start (padrão): os itens ficam junto no começo da linha
  • flex-end: os itens ficam juntos no final da linha
  • center: os itens ficam centralizados na linha
  • space-between: os itens são distribuídos igualmente no espaço disponível. O primeiro item fica no começo da linha e o último fica no final.
  • space-around: os itens são distribuídos igualmente no espaço disponível ao redor deles.
  • space-evenly: os itens são distribuídos igualmente no espaço disponível.

flex-direction: column

Lembre-se que esta propriedade alinha os itens em relação ao eixo principal. Isso significa que se você mudar o valor de flex-direction, a direção do posicionamento será outra.

align-items

Define o alinhamento dos itens perpendicularmente em relação ao eixo principal.
Pense nele como um justify-content, mas que alinhará os itens no outro eixo.

  • stretch (padrão): estica os elementos para preencherem o container.
  • flex-start: os itens ficam junto no começo do eixo perpendicular
  • flex-end: os itens ficam juntos no final do eixo perpendicular
  • center: os itens ficam centralizados no eixo perpendicular
  • baseline: parecido com o center, mas usando a base da linha como referência. No exemplo abaixo, note como os textos dos itens ficam alinhados.

flex-direction: column

Lembre-se que esta propriedade alinha os itens em relação ao eixo principal. Isso significa que se você mudar o valor de flex-direction, a direção do posicionamento será outra.

align-content

Alinha as linhas do container.
Por alinhar as linhas, esta propriedade só tem efeito quando há mais de uma linha.

  • stretch (padrão): estica as linhas para preencherem o espaço restante.
  • flex-start: as linhas ficam juntas no começo do container
  • flex-end: as linhas ficam juntas no final do container
  • center: as linhas ficam centralizadas no container
  • space-between: as linhas são distribuídas igualmente. A primeira linha fica no começo do container e a última fica no final.
  • space-around: as linhas são distribuídas igualmente no espaço disponível ao redor delas.

flex-direction: column

Lembre-se que esta propriedade alinha os itens em relação ao eixo principal. Isso significa que se você mudar o valor de flex-direction, a direção do posicionamento será outra.

HTML5 e CSS3 - Desenvolvimento web Básico
Curso de HTML5 e CSS3 - Desenvolvimento web Básico
CONHEÇA O CURSO

Playground

Para testar, brinque um pouco com cada uma das propriedades para ver as possibilidades:

Templates gratuitos para aplicações administrativas

Com a necessidade da criação de aplicações em um menor tempo possível, é cada vez mais viável a utilização de templates prontos para reduzir o tempo de desenvolvimento. Por isso, diversos templates, principalmente para áreas administrativas, foram sendo criados e compartilhados na internet, dos quais veremos alguns neste artigo.

Django - Templates
Curso de Django - Templates
CONHEÇA O CURSO

AdminLTE

O AdminLTE é um template administrativo css gratuito todo construído sobre o Bootstrap 3. Em sua recente atualização, algumas novidades foram adicionadas, tais como: Reescrita completa do JavaScript, suporte NPM e Bower, além de sua documentação. Open source, o AdminLTE é uma excelente opção aos desenvolvedores que buscam componentes responsivos e reutilizáveis.

Painel do adminLTE

A partir dá página Demo do AdminLTE é possível ter um Live Preview do template e testar todas as suas funcionalidades antes de realizar seu download.

O download e informações do template podem ser obtidos pelo site oficial do AdminLTE.

CoreUI

O CoreUI é um template gratuito baseado no Bootstrap 4 para criação de interfaces administrativas funcionais e sofisticadas. Trabalha com uma grande variedade de frameworks, tais como: Angular, Laravel e [React](O que é o React Native? “React”), o que permite que este template seja utilizado nos mais diversos projetos.

A partir da página Demo do CoreUI é possível ter um Live Preview do template e analisar sua vasta biblioteca de componentes, que trás consigo as vantagens em adicionar diversos botões, formulários e muitos outros componentes para facilitar o desenvolvimento.

Painel do CoreUI

Seu download pode ser feito através da página oficial do CoreUI.

Laravel - Framework PHP (Parte 1/3)
Curso de Laravel - Framework PHP (Parte 1/3)
CONHEÇA O CURSO

Light Bootstrap

Seguindo a mesma linha dos dois templates citados anteriormente, o Light Bootstrap é um template administrativo gratuito baseado no Bootstrap 4, desenhado para ser bonito e simples, além de facilitar a criação de aplicações administrativas. Provê uma grande coleção de elementos que possibilita a criação de apps das mais variadas formas.

Sua barra lateral pode ser alterada entre 6 cores diferentes (preto, azul, verde, laranja, vermelho e roxo), tornando sua experiência muito mais confortável.

Painel do bootstrap light

É possível acessar sua Live Preview através dá página Demo do Light Bootstrap.

Seu download pode ser realizado acessando o Github do Light Bootstrap.

Material Dashboard

O Material Dashboard, apesar de ser construído utilizando o Bootstrap 4, possui uma interface inspirada nos padrões de design do Google, o Material Design.

Seu visual é limpo e elegante, tornando-se uma ótima alternativa. Além disso, o Material Dashboard possui 60 componentes dos mais variados tipos e três páginas de exemplo para você iniciar seus projetos.

Painel do Material Dashboard

Sua Live Preview pode ser acessada na página demo do Material Dashboard, onde é possível ter uma breve visualização do template, antes de realizar seu download.

Após analisar suas funcionalidades, o download pode ser feito através da página do Material Dashboard.

Star Admin

Com uma aparência fantástica, o Star Admin é, com certeza, uma ótima opção a considerar quando queremos desenvolver um sistema administrativo. Também construído utilizando o Bootstrap 4, este template possui um visual único e arrojado, tornando sua aparência um ponto fortíssimo.

Além disso, o Star Admin possui uma grande coleção de widgets e componentes para os mais variados usos.

Painel Star Admin

A partir da página Demo do Star Admin é possível acessar a Live Preview deste template e seu download, feito através da página Star Admin Free.

Java - Criação de aplicações web com Spring Boot
Curso de Java - Criação de aplicações web com Spring Boot
CONHEÇA O CURSO

Conclusão

Neste artigo vimos alguns templates para utilizarmos no desenvolvimento de aplicações administrativas e o quanto eles agilizam a criação de novos projetos.

Desenvolvedor Front-end Júnior
Formação: Desenvolvedor Front-end Júnior
HTML, CSS e JavaScript são a base de toda a web. Tudo o que você está vendo aqui agora depende deste tripé.Nesta formação vamos iniciar aprendendo lógica. Teremos uma introdução ao HTML e CSS e conheceremos a linguagem JavaScript.
CONHEÇA A FORMAÇÃO

Trabalhando com Sprites no CSS

Olá , Web Developers!

Hoje veremos como trabalhar com sprites no CSS. Se você não sabe o que é, no vídeo abaixo eu explico o que são Sprites e quais suas vantagens:

O Sprite

Nós vamos utilizar a seguinte imagem como nosso Sprite, que possui vários logos de programas feitos com Electron.

Preparando a base

Primeiro precisamos criar uma classe que será a base do nosso sprite. Essa classe será repetida em todo lugar que quisermos usar o sprite. Vamos dar o nome de tw-sprite.

Para que ela possa ficar na mesma linha que outros elementos e também podermos alterar suas dimensões, vamos deixar com display: inline-block.
Vamos indicar a nossa imagem como background-image e também indicar que não queremos que ela se repita.

.tw-sprite{
  display: inline-block;
  background-image: url("url da imagem");
  background-repeat: no-repeat;
}

Podemos chamar essa classe em qualquer lugar que quisermos chamar nossa imagem, como na seguinte div por exemplo:

<div class="tw-sprite"></div>

Indicando a imagem – Dimensões

Agora já temos uma base para começar a usar a nossa imagem. Mas agora precisamos indicar qual das imagens queremos usar. Para isso nós precisamos criar uma segunda classe que, em conjunto com a primeira classe que criamos, irá indicar exatamente imagem que queremos exibir.

Vamos supor que queremos o logo do GitHub. Vamos criar uma classe que vai se chamar tw-sprite-github. Então nossa div vai ficar assim:

<div class="tw-sprite tw-sprite-github"></div>

Na segunda classe nós iremos primeiro indicar a largura e altura da imagem com as propriedades width e height. Você pode ver o resultado brincando com o exemplo interativo a seguir:

Indicando a imagem – Posição

Além do tamanho, também precisamos mover a posição da imagem para podermos indicar a imagem que queremos.

Para isso utilizamos a propriedade background-position, que nos permite mover a imagem que estamos usando no background-image. Você pode ver o resultado brincando com o exemplo interativo a seguir:

Como queremos a imagem do GitHub, nossa classe ficará com os seguintes valores:

.tw-sprite-github{
    width: 70px;
    height: 70px;
    background-position: -340px -150px;
}

Conclusão

Claro que este é apenas um exemplo para mostrar como funciona a criação de Sprites com CSS.

Por ser muito trabalhoso e manual (principalmente se precisar ficar adicionando novas imagens), há várias ferramentas em que inserimos as imagens que queremos. A ferramenta já junta todas as imagens em um único arquivo e gera as classes CSS de acordo com nossas instruções.

Há ferramentas online e outras que você pode instalar diretamente do npm.

Abaixo uma lista de ferramentas para criação de Sprites CSS:

Até a próxima!

HTML5 e CSS3 - Desenvolvimento web Básico
Curso de HTML5 e CSS3 - Desenvolvimento web Básico
CONHEÇA O CURSO

Criando páginas para repositórios com o GitHub Pages

O GitHub é uma das maiores ferramentas para armazenamento e gestão dos nossos projetos. Ele possui um recurso bem interessante que facilita a divulgação e apresentação dos projetos lá hospedados. Este recurso é o GitHub Pages, que permite que criemos uma página web para nossos repositórios totalmente gratuita. Legal né? Então fica ligado que neste artigo veremos como criar uma página de apresentação para um repositório.

Git - Fundamentos
Curso de Git - Fundamentos
CONHEÇA O CURSO

Criando o repositório:

A primeira coisa a se fazer é criar um repositório no GitHub para que consigamos gerar a página web para ele. Para isso, vamos até a rota https://github.com/new e configuramos todas as suas preferências:

novo repositorio github

Nesta página vamos informar o nome do repositório, sua descrição e o tipo de visibilidade (público ou privado). Feito isso, clicamos no botão verde “Create repository”.

Ativando o GitHub Pages:

Após isso, o repositório será criado e seremos redirecionados para sua tela inicial. Lá, clicamos no botão “Settings” no menu superior da tela. A partir disso, seremos redirecionados para a tela de configurações do repositório que, dentre diversas configurações, existe uma seção chamada “GitHub Pages”, conforme podemos ver abaixo:

Configuração Github Pages

Nesta seção há duas opções. Podemos criar uma página a partir de um código presente no próprio repositório ou por meio de um modelo disponibilizado pelo próprio GitHub. Caso você queira desenvolver sua própria página, selecione a branch que você quer salvar seu arquivo index.html e clique no botão save (primeira parte da seção).

Selecionando o tema

Para este artigo, vamos selecionar um modelo disponibilizado pelo próprio GitHub. Sendo assim, clicamos no botão “Choose a theme”. Feito isso, uma nova página será aberta onde podemos ver a lista de todos os temas disponíveis para uso:

Selecionando o tema

Agora é só selecionar o que você prefere e clicar no botão verde “Select Theme”. Feito isso, uma janela para que possamos customizar a página do nosso repositório será aberta. Vale lembrar que as informações são escritas em Markdown, por isso precisamos seguir este formato.

Repositório Github pages index

Após editar o conteúdo da nossa página, vamos até o final da mesma e clicamos em “Commit Changes”. Isso irá gerar um novo commit com as mudanças feitas.

Finalmente, após todos estes passos, já podemos acessar a página do repositório através da rota:

https://treinaweb.github.io/repositorio_teste_github_pages/

Concluindo:

Com isso, notamos o quão fácil é criar uma página de apresentação para nossos repositórios de forma totalmente gratuita. Podemos, também, utilizar projetos um pouco mais complexos utilizando HTML, CSS e JavaScript, mas isso fica para um próximo artigo, ok? 🙂

Um abraço e até lá!

Git e GitHub - Controle de versão
Curso de Git e GitHub - Controle de versão
CONHEÇA O CURSO

Barra de progresso que muda de tamanho e cor com apenas uma variável do CSS

Olá, Web Developers!

Hoje veremos como aproveitar variáveis do CSS para criar uma barra de progresso bem simples e controlar sua largura e cor usando apenas uma variável.

Se você nunca trabalhou com variáveis do CSS, temos aqui um vídeo onde explico de forma bem simples e rápida como utilizar: https://www.treinaweb.com.br/blog/videos/variaveis-com-css-puro/

HTML5 e CSS3 - Desenvolvimento web Básico
Curso de HTML5 e CSS3 - Desenvolvimento web Básico
CONHEÇA O CURSO

Começando com a barra de progresso

Uma barra de progresso pode ser uma simples div. Vamos iniciar nossa div com o seguinte código:

<div class="progress-bar" ></div>
.progress-bar{
  height: 50px;
  padding: 5px;
  background-color: #ccc;
}

Exibindo o progresso

É muito comum utilizar outra div como progresso, mas também podemos utilizar pseudo-elementos para inserir um conteúdo na div principal. Dessa maneira nosso HTML não precisará ter duas divs para termos nossa barra de progresso, deixando nosso código ainda mais simples.

.progress-bar{
  height: 50px;
  padding: 5px;
  background-color: #ccc;
  /* pseudo-elementos precisam de um
    conteúdo para terem altura.
    Como não teremos conteúdo no nosso
    pseudo-elemento, utilizar
    "display: flex" o força a
    ter a altura do elemento pai.
    */
  display: flex;
}

.progress-bar::before{
  content: "";
  /* Por enquanto colocamos
    uma largura e uma cor
    com valores fixos
    */
  width: 50%;
  background-color: red;
}

Alterando o tamanho do progresso com variáveis

O progresso sempre vai de 0% até 100%. Isso é bem simples: vamos criar uma variável no CSS com o valor inicial de 0 e utilizá-la na largura do nosso pseudo-elemento.

.progress-bar{
  /* vamos declarar nossa
    variável com o nome de
    "progress". Ela terá seu
    valor entre 0 e 100.
    */
  --progress: 50;
  height: 50px;
  padding: 5px;
  background-color: #ccc;
  display: flex;
}

.progress-bar::before{
  content: "";
  /* aqui estamos chamando
    nossa variável. Como a
    largura do pseudo-elemento
    estará entre 0% e 100%, temos
    que converter o valor da nossa
    variável em porcentagem. Para
    isso, basta multiplicar por 1%.
    */
  width: calc(var(--progress) * 1%);
  background-color: red;
}

Agora ao alterarmos nossa variável teremos o tamanho do nosso progresso alterado também.

Como alterar as cores?

Vamos ver como alterar cores baseadas em um valor. É muito comum utilizarmos nomes das cores, o padrão RGB, onde indicamos um valor de 0 a 255 de vermelho (Red), verde (Green) e azul (Blue) ou o Hexadecimal, onde também indicamos a quantidade de vermelho, verde e azul, mas de 00 até FF (255 em hexadecimal).

Porém, outro modo de se declarar cores, que é menos comum de ser ver sendo utilizado na web, é o HSL. Para isso precisamos conhecer o círculo cromático.

O círculo cromático é esse círculo colorido. Lembre-se que o círculo possui 360º. O vermelho está bem em cima, onde consideramos ser o início do círculo. Então podemos indicar cada cor a partir de um ângulo:

  • Vermelho: 0º ou 360º
  • Amarelo: 60º
  • Verde: 120º
  • Ciano: 180º
  • Azul: 240º
  • Magenta: 300º

No HSL nós indicamos as cores a partir de três valores:

  • H(hue – matiz): uma das propriedades que nos permite diferenciar uma cor da outra. Passamos um número entre 0 e 360 de acordo com o círculo cromático acima.
  • S(saturation – saturação): indica se a cor é mais brilhante ou fosca. Passamos um valor entre 0% e 100%.
  • L(light – luz): indica a quantidade de luz na cor. Passamos um valor entre 0% (deixa a cor preta) e 100% (deixa a cor branca).

Então com base nisso podemos deixar o valor de saturação e luz fixos e mudar apenas o valor da matiz.

Como barras de progresso costumam ir do vermelho ao verde, vamos alterar esse valor de 0 até 120.

Alterando a cor com variáveis

Nossa variável de progresso vai de 0 a 100 e temos que fazer nossa cor ir de 0 até 120. Então basta usarmos regra de três para criar nossa fórmula.

Se quando nossa variável chegar a 100 teremos que ter nossa matiz em 120, então quando nossa variável estiver em 50 vamos querer que nossa matiz seja X:

100 = 120
50  = x

Teremos a seguinte fórmula:

x = 120 * 50 / 100

Simplificando, basta multiplicar 1.2 pelo valor da nossa variável. Então vamos usar a função “hsl()” do CSS com saturação e luz com valores fixos e a matiz sendo calculada por essa nossa fórmula.

.progress-bar::before{
  content: "";
  width: calc(var(--progress) * 1%);
  background-color: hsl( calc(var(--progress) * 1.2) , 80%, 50%);
}

Agora ao alterarmos nossa variável CSS o progresso e a cor serão alterados juntos.

Se quiser deixar a barra mais suave, podemos utilizar a propriedade transition:

.progress-bar::before{
  content: "";
  width: calc(var(--progress) * 1%);
  background-color: hsl( calc(var(--progress) * 1.2) , 80%, 50%);
  transition: all 0.2s ease;
}
}

HTML5 e CSS3 - Desenvolvimento web Avançado
Curso de HTML5 e CSS3 - Desenvolvimento web Avançado
CONHEÇA O CURSO

Truques de como selecionar o n-ésimo item com CSS usando a pseudo-classe :nth-child

Olá, Web Developers!

Quando estamos trabalhando com CSS, pode haver momentos em que a gente irá precisar selecionar um ou mais elementos em um grupo de elementos.

Pode ser que você queira selecionar todos os elementos pares, um elemento a cada três ou todos após o quarto elemento.

Para isso podemos usar a pseudo-classe :nth-child.

HTML5 e CSS3 - Desenvolvimento web Básico
Curso de HTML5 e CSS3 - Desenvolvimento web Básico
CONHEÇA O CURSO

Como base utilizaremos o seguinte HTML e CSS:

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
ul{
  list-style-type: none;
  display: flex;
  justify-content: center;
  margin: 0;
  padding: 0;
}

li{
  width: 50px;
  height: 50px;
  background-color: gray;
  border-radius: 100%;
}

E teremos o seguinte resultado:

Agora utilizaremos o nth-child para selecionar os <li>.

Selecionar apenas o nº elemento

Para selecionar um elemento em um grupo, basta passarmos para o nth-child a posição desse elemento.

Exemplo: selecionar 5º elemento.

li:nth-child(5) {
    background-color: red;
}

Selecionar todos após o nº elemento

Para selecionar todos após um determinado elemento, basta passar n + e o número do elemento a partir do qual você quer selecionar.

Exemplo: selecionar todos a partir do 5º elemento (inclusive).

li:nth-child(n + 5) {
    background-color: red;
}

Selecionar os primeiros n elementos

Para selecionar os primeiros n elementos, basta fazer igual ao exemplo anterior, mas deixamos o n negativo.

Exemplo: selecionar os primeiros 5 elementos.

li:nth-child(-n + 5) {
    background-color: red;
}

Selecionar um a cada n elementos a partir do primeiro

Para selecionar um a cada n elementos, basta multiplicar este número a n.

Exemplo: selecionar um elemento a cada 3.

li:nth-child(3n + 1) {
    background-color: red;
}

A explicação dessa seleção é imaginar que o n assume vários valores, e como estamos multiplicando por 3 e somando com 1, teremos:

**(3n) + 1**
(3 x 0) + 1 = 1 (seleciona o 1º elemento)
(3 x 1) + 1 = 4 (seleciona o 4º elemento)
(3 x 2) + 1 = 7 (seleciona o 7º elemento)
(3 x 3) + 1 = 10 (seleciona o 10º elemento)

Para selecionar a cada 2 elementos começando do primeiro, você pode indicar que quer selecionar os números ímpares. Então os seguintes códigos terão o mesmo resultado:

li:nth-child(2n + 1) {
    background-color: red;
}

li:nth-child(odd) {
    background-color: red;
}

Selecionar um a cada n elementos (ignorando o primeiro)

Mesmo que o anterior, mas não selecionaremos o primeiro elemento.

Exemplo: selecionar um elemento a cada 3.

li:nth-child(3n) {
    background-color: red;
}

Para selecionar a cada 2 elementos sem contar o primeiro, você pode indicar que quer selecionar os números pares. Então os seguintes códigos terão o mesmo resultado:

li:nth-child(2n) {
    background-color: red;
}

li:nth-child(even) {
    background-color: red;
}

Selecionar um a cada n elementos a partir do nº elemento

Mesmo que o anterior, mas indicamos quantos elementos queremos pular.

Exemplo: selecionar um elemento a cada 3 a partir do 3º elemento.

li:nth-child(3n + 3) {
    background-color: red;
}

Contando a partir do último elemento

Além do nth-child também temos o nth-last-child, que podemos usar do mesmo modo como fizemos anteriormente. A diferença é que ele começa no último elemento.

Para selecionar os últimos n elementos, basta fazer igual ao exemplo de selecionar os n primeiros elementos, mas usando o nth-last-child agora.

Exemplo: selecionar os últimos 5 elementos.

li:nth-last-child(-n + 5) {
    background-color: red;
}

HTML5 e CSS3 - Desenvolvimento web Avançado
Curso de HTML5 e CSS3 - Desenvolvimento web Avançado
CONHEÇA O CURSO

Slideshow apenas com CSS

Olá, Web Developers!

Hoje vou mostrar como criar um slideshow bem simples apenas com CSS.

HTML5 e CSS3 - Desenvolvimento web Básico
Curso de HTML5 e CSS3 - Desenvolvimento web Básico
CONHEÇA O CURSO

A estrutura dos Slides

Primeiro vamos montar nossos slides. Como teremos vários, vou usar a tag ul. Então, cada li será um slide. Dentro do li poderemos ter o conteúdo que quisermos.

<ul class="slides-list" >
    <li class="slide" >
      <img src="https://picsum.photos/300/300?image=8" />
    </li>
    <li class="slide" >
      <img src="https://picsum.photos/300/300?image=0" />
    </li>
    <li class="slide" >
      <img src="https://picsum.photos/300/300?image=6" />
    </li>
    <li class="slide" >
      <img src="https://picsum.photos/300/300?image=1" />
    </li>
</ul>

Estilização básica dos slides

Agora nós iremos fazer uma estilização bem simples na lista de nossos slides.

.slides-list{
  /*remove os estilos da lista*/
  list-style-type: none;
  margin: 10px 0;
  padding: 0;

  /* 
    deixa todos os itens da lista
    na horizontal e todos com a
    mesma largura
  */
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
}

Exibindo um slide de cada vez

Agora temos um slide do lado do outro. Mas temos que fazer com que apareça apenas um de cada vez. Bom, isso é muito simples: basta que cada slide (li) preencha 100% da largura disponível, certo?

Com o CSS Grid nós já fizemos com que todos os li possuam o mesmo tamanho e ocupem todo o espaço disponível. Então temos que fazer com que o ul seja maior para que cada li ocupe 100% da largura do espaço disponível.

Se temos quatro slides (li), e cada um precisa ocupar 100% do espaço disponível, nosso ul precisa ter um tamanho de 400%.

Poderíamos fazer da seguinte maneira:

.slides-list{
    ...
    width: 400%;
    ...
}

Mas isso vai deixar o nosso código fixo. Vamos aproveitar que hoje em dia o CSS aceita variáveis!

.slides-list{
    --total-items: 4;
    ...
    width: calc(var(--total-items) * 100%);
    ...
}

Usamos uma variável do CSS para armazenar o total de itens em nosso Slideshow, e passamos essa variável para a função calc(). Assim podemos mudar facilmente o total de itens dos nossos slides.

Agora conseguimos ter apenas um único slide na tela de cada vez. Mas por termos um elemento muito longo, apareceu uma barra de rolagem na tela. Não é isso que queremos em um Slideshow.

Vamos então colocar a nossa lista ul dentro de um contêiner, e vamos indicar por CSS que esse contêiner não terá barra de rolagem. Desse jeito o que estiver além das dimensões do contêiner ficará escondido.

<div class="slide-show" >
  <ul class="slides-list" >
    <li class="slide" >
      <img src="https://picsum.photos/300/300?image=8" />
    </li>
    <li class="slide" >
      <img src="https://picsum.photos/300/300?image=0" />
    </li>
    <li class="slide" >
      <img src="https://picsum.photos/300/300?image=6" />
    </li>
    <li class="slide" >
      <img src="https://picsum.photos/300/300?image=1" />
    </li>
  </ul>
</div>
.slide-show{
  overflow: hidden;
}

Escolhendo qual slide será exibido

Agora que conseguimos deixar apenas um slide na tela, ficamos apenas com o primeiro slide preso na tela. Como podemos então indicar que queremos exibir o segundo, terceiro, etc?

Isso também é simples. Podemos pegar o ul e movê-lo com a propriedade left.

.slides-list{
  ...
  position: relative;
  left: 0%;
  ...
}

Sabemos que cada li possui um tamanho de 100%, certo? Então para exibir o primeiro slide, o left tem que ter valor 0.

Para exibir o segundo slide, temos que mover 100% para a esquerda, ou seja, left precisará ter o valor -100%.

Para exibir o terceiro slide, temos que mover 200% para a esquerda, ou seja, left precisará ter o valor -200%.

Vamos aproveitar novamente as variáveis do CSS e a função calc() para tratar isso.

.slides-list{
  --selected-item: 0;
  ...
  position: relative;
  left: calc(var(--selected-item) * -100%);
  ...
}

Para mudar o slide que será exibido basta alterar o valor da variável --selected-item.

Alterando o slide exibido

Vimos então como escolher o slide a ser alterado, bastando alterar a variável CSS --selected-item. Para alterar o valor dessa variável, poderíamos facilmente usar JavaScript. Mas como prometido, esse Slideshow irá usar apenas CSS.

Podemos alterar o valor da variável, indicando qual slide queremos visualizar, usando Radio Buttons.

Como temos 4 slides, vamos criar 4 Radio Buttons antes do nosso Slideshow. Vamos também deixar o primeiro marcado como checked.

Lembre-se de dar o mesmo name para todos, para que apenas um fique marcado.

<input type="radio" class="slide-controller" name="slide" checked />
<input type="radio" class="slide-controller" name="slide" />
<input type="radio" class="slide-controller" name="slide" />
<input type="radio" class="slide-controller" name="slide" />

E agora podemos nos aproveitar do pseudo-seletor :checked do CSS para indicar que o valor da variável --selected-item irá mudar de acordo com o Radio Button marcado.

.slide-controller:nth-child(1):checked ~ .slide-show .slides-list{--selected-item: 0;}
.slide-controller:nth-child(2):checked ~ .slide-show .slides-list{--selected-item: 1;}
.slide-controller:nth-child(3):checked ~ .slide-show .slides-list{--selected-item: 2;}
.slide-controller:nth-child(4):checked ~ .slide-show .slides-list{--selected-item: 3;}

Finalizando

Agora conseguimos escolher qual slide ficará na tela sem o uso de JavaScript. Mas tudo está muito estático. Podemos indicar uma transição para ter um efeito mais animado quando mudarmos de slide.

Para isso usaremos a propriedade transition.

.slides-list{
  ...
  transition: left 0.4s cubic-bezier(0.680, -0.550, 0.265, 1.550);
  ...
}

E só para centralizar todos os itens, vou colocar um text-align: center em body. Mas isso é só para finalizar o exemplo de maneira simples e rápida.

Também tem como melhorarmos a estilização, principalmente desses Radio Buttons, mas isso fica para outra ocasião. 😉

HTML5 e CSS3 - Desenvolvimento web Avançado
Curso de HTML5 e CSS3 - Desenvolvimento web Avançado
CONHEÇA O CURSO

FlexBox ou CSS Grid?

Olá, Web Developers!

Houve um tempo em que posicionar elementos pelo CSS poderia ser trabalhoso, dependendo do que fosse preciso criar.

Então veio o Flexbox, facilitando o posicionamento de elementos. Logo em seguida os navegadores começaram a dar suporte ao CSS Grid, e então muitos ficaram com a dúvida: FlexBox ou CSS Grid?.

Um erro comum é pensar que o CSS Grid veio para ocupar o lugar do FlexBox, já que os navegadores começaram a dar suporte mais recentemente. Mas esse é um grande erro.

  • Flexbox faz coisas que o CSS Grid não pode fazer;

  • CSS Grid faz coisas que o Flexbox não pode;

  • Ambos podem trabalhar em conjunto;

  • Há coisas que podemos fazer com ambos, mas que um faz de maneira melhor e mais simples;

Quando usar FlexBox?

Claro que podemos usar o flexbox para trabalhar com elementos em duas dimensões, mas flexbox é mais bem utilizado quando estamos trabalhando com elementos em apenas uma dimensão, seja linha ou coluna.

Um bom exemplo é quando criamos um menu, seja ele vertical ou horizontal.

Eu diria que ele é bom para alinhar elementos, não importa a direção.
Além disso, não precisamos nos importar com a quantidade de itens, já que o Flexbox não requer que isso seja declarado.

Quando usar o Grid?

Claro que podemos usar o Grid para trabalhar com elementos em uma única dimensão, mas ele é ótimo quando estamos trabalhando com elementos em duas dimensões, principalmente para definir a estrutura de uma página, o que seria muito mais difícil com FlexBox.

Você pode indicar onde um elemento começa e onde ele acaba na sua grid, o que te dá muita flexibilidade. Ou também pode-se dar nomes para as áreas da sua grid, e então indicar a um elemento que ele pertence àquela área, o que deixa o código muito mais legível e simples de manter, como mostrado no exemplo acima.

Então, se você tiver já um determinado número de linhas e colunas, provavelmente Grid será melhor do que o FlexBox para você neste momento.

Além disso, é provável que escreva bem menos media queries, já que podemos aproveitar funcionalidades como auto layout, minmax(), repeat() e auto-fill.

Quando usar os dois juntos?

E claro que podemos aproveitar o melhor dos dois mundos!

No exemplo acima foi feito o seguinte:

  • O layout da página foi definido com CSS Grid;

  • O cabeçalho possui um menu, o qual teve seus itens organizados com FlexBox;

  • Cada item do menu possui uma pequena estrutura para posicionar seus elementos (ícone e textos), que pode ser vista pelas bordas brancas. Isso foi feito com CSS Grid.

Conclusão

Então, dependendo da necessidade, um pode ser uma opção mais viável, mas não é errado usar o outro.

Nada te impede de comer com duas facas ou com dois garfos, mas usar os dois juntos e saber o melhor momento de usar cada um facilita a nossa vida, não é mesmo?

Conforme você for obtendo mais intimidade com FlexBox e CSS Grid, a escolha pelo melhor para a sua necessidade ficará cada vez mais intuitiva.

HTML5 e CSS3 - Desenvolvimento web Avançado
Curso de HTML5 e CSS3 - Desenvolvimento web Avançado
CONHEÇA O CURSO

© 2004 - 2019 TreinaWeb Tecnologia LTDA - CNPJ: 06.156.637/0001-58 Av. Paulista, 1765, Conj 71 e 72 - Bela Vista - São Paulo - SP - 01311-200