Desenvolvimento Web / CSS e CSS3

Single-page application com CSS FlexBox e design responsivo

Que tal estruturar do zero uma landing page (SPA) usando CSS FlexBox e ainda trabalhar o design responsivo? Veja nessa aula do play o exemplo prático e em produção de como desenvolver sua estrutura com FlexBox.

Por Robson V. Leite

Publicado por Robson V. Leite
em 19/01/2018 às 10h57

Lista VIP UpInside

Entre para nossa lista VIP e receba vídeo aulas, artigos e tutoriais exclusivos e com prioridade

  QUERO ENTRAR

Aula exclusiva UpInside Play

Acessar aula no Play

Compartilhe:

Seja bem-vindo(a) a mais uma aula ROCK aqui no play da UpInside. Hoje vamos ver como estruturar uma landing page que segue o modelo de Single-Page Application usando todos os conceitos de estrutura com CSS Flexbox.

Vamos aplicar o conceito em diferentes níveis da estrutura para entender o comportamento e aplicação desse conceito para estruturar o layout e distribuir o conteúdo.

Material da aula:

Você pode fazer o download do material da aula diretamente no nosso GIT e conta com o exemplo finalizado no diretório raiz.

E para acompanhar a aula você tem a pasta PLAY, onde tem o HTML com marcação inicial e o CSS zerado para executar o passo a passo da aula.

CLICA AQUI que eu te levo até o repo deste play ;)

O Layout:

Durante a aula vamos estruturar uma landing page de alta conversão, veremos dobras de conteúdo que servem CTA, bullet-points, sobre o autor e formulário de optin.

Mas a ideia principal da aula é mostrar a você o conceito de FlexBox aplicado em uma página do zero até o layout pronto para ir para a produção.

Veja como ficou:

Single-page application com CSS FlexBox e design responsivo

Então é isso. Espero que esse play possa tirar todas as suas dúvidas sobre como estruturar qualquer projeto utilizando o FlexBox, que sem sombra de dúvidas nos deixa infinitamente mais produtivos.

Aquele forte abraço e nos vemos nos comentários!

Compartilhe:

Em Desenvolvimento Web:

Deixe seu comentário: