O que é Flexbox na prática [HandsOn]

 

O que é Flexbox na prática

Vamos entender nessa aula o que é o flexbox usando ele na prática em um projetinho que você pode fazer com que ele depois ganhe mais partes e fique ainda mais bonito.

 

Passo a passo

  1. Vamos criar uma pasta, que vai ter a nossa pasta de imagens e também o index html e o css
  2. Vamos criar a estrutura html e conectar ela com o css
  3. Agora iremos mudar o título aqui
  4. Agora iremos aqui fazer o header, que será onde teremos a nossa barra de navegação
  5. Vamos agora fazer as primeiras configurações do flexbox e também o seu primeiro uso dentro do css, para você entender melhor sobre box-sizing, recomendo que veja esse artigo da mdn: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
  6. Vamos agora configurar o nosso header, ele terá o display flex e também faremos as outras configurações para ele ficar do jeito que deve
  7. Vamos agora modificar todo o nosso hedaer
  8. Agora nós iremos criar logo após o header um parágrafo para ser o nosso título
  9. Agora nós iremos criar o nosso container, que vai ter nossas imagens e também os nossos textos.
  10. Agora, com as nossas categorias criadas, iremos fazer as configurações delas no nosso css
  11. Já estamos com tudo finalizado, basta agora fazermos o nosso footer, que poderia ter mais informações, poderia até mesmo ser um footer parecido com o header, é até um desafio para você, fazer um footer semelhante ao header, só que com mais informações
  12. Estilização deles agora
5 1 vote
Article Rating
fevereiro 16, 2022
Subscribe
Notify of
guest
1 Comentário
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Lucas G. Pamplona
Lucas G. Pamplona
3 meses atrás

Show de bola!

Feito com s2 por OneBitCode

1
0
Would love your thoughts, please comment.x
()
x
%d blogueiros gostam disto: