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 2 votes
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
11 meses atrás

Show de bola!

Feito com s2 por OneBitCode

best christian dating sites for seniors
1
0
Would love your thoughts, please comment.dating scene san diego
%d blogueiros gostam disto: