Espaçamentos e a mágica do CSS Box Model | Masterclass #10

Поделиться
HTML-код
  • Опубликовано: 9 янв 2025

Комментарии • 98

  • @tavareshenrique
    @tavareshenrique 4 года назад +108

    Fala Maykão, como sugestão, seria legal um vídeo sobre HTML semântico, por exemplo, quando usar corretamente section, aside, nav dentre outras básicas ao invés da gente por div pra tuda hahaha. Parabéns pelo vídeo e grande abraço!

    • @huandreysouza1129
      @huandreysouza1129 4 года назад

      rt

    • @BossGamer123
      @BossGamer123 4 года назад +1

      Canal Curso em Vídeo tem um curso bem básico de HTML e CSS que ensina essa parte mais semântica do HTML

    • @dpwoficial
      @dpwoficial 2 года назад +1

      Aqui tem um vídeo bem legal sobre semântica HTML: ruclips.net/video/nVTqo48Fo3c/видео.html

  • @definitivamentenaoeovictor6478
    @definitivamentenaoeovictor6478 4 месяца назад

    Que vídeo bom. Muito explicativo embora meio rápido pra mim kkk. Mas aprendi o que precisava!

  • @elisandralopes917
    @elisandralopes917 2 года назад

    Excelente aula, muito esclarecedora!

  • @kelvinymickael5855
    @kelvinymickael5855 Год назад

    Muito bom, aprendi dms com esse vídeo!!! Obg Maykii

  • @parckroom1088
    @parckroom1088 3 года назад +1

    boa aula curti bastante

  • @adamsinstrutor-tecnico484
    @adamsinstrutor-tecnico484 2 года назад

    Parabéns, excelente!

  • @jonatasdeoliveiracoelho4691
    @jonatasdeoliveiracoelho4691 4 года назад +7

    Que aula sensacional, Mayk. Quando se aprende os fundamentos, os porquês, tudo se torna mais fácil e empolgante. Vídeos assim até ajudam as pessoas a não desistirem de programação. Parabéns, Mayk e equipe Rocket!

    • @rocketseat
      @rocketseat  4 года назад

      Muito obrigado pelo feedback Jonatas!!! 💜😍😍

  • @rickardo9094
    @rickardo9094 3 года назад

    Eu tava aqui quase arremessando o computador na parede, mas o seu video me salvou! Que aula fenomenal, fico eternamente grato.

  • @larijek
    @larijek Год назад

    muito obrigada,mano! ajudou muito

  • @mbs2488
    @mbs2488 2 года назад

    Excelente ! Tudo Muito bem explicado ! ! Parabéns pelos vídeos ! ! !

    • @rocketseat
      @rocketseat  2 года назад

      Faaaaaala, dev! Beleza? Que massa que curtiu! É tudo preparado com muito carinho pra vocês! Valeu pelo feedback! 😍 💜

  • @joeljesusJotaDrums
    @joeljesusJotaDrums 4 года назад +9

    cara muito bom, vc é muito dinâmico na explicação parabéns. Uma sugestão poderia trazer aula sobre scss

  • @madness3692
    @madness3692 2 года назад

    valeu cara, muito boa aula, nao tinha entendido certo sobre box model, e vi que é bastante necessario saber como usar os espaçamentos em paginas, valeu pela aula!

  • @carlosbarross
    @carlosbarross Год назад

    fala da tag nao sei qual a diferença entre só sei que uma quebra linha e a outra nao, ne?

  • @L3sF5s
    @L3sF5s 4 года назад +2

    Essas aulas são ouro pra programadores iniciantes, valeu rocketseat

  • @leonardometz4754
    @leonardometz4754 3 года назад

    Pela primeira vez consegui entender os conceitos de padding, border a fundo. Excelente aula!

  • @cintiasilva5564
    @cintiasilva5564 3 года назад

    Vc explica muito bem, Parabéns

    • @rocketseat
      @rocketseat  3 года назад +1

      Curtiu, Cintia? Valeu demais pelo feedback! 💜 🚀

  • @andersonfuhrsouza7505
    @andersonfuhrsouza7505 4 года назад

    fiz um workshop seu, agora to caçando aulas suas, muito top!

  • @EdZava
    @EdZava 4 года назад +4

    Legal os video Mayk, espero que continúe trazendo videos sobre CSS e responsividade.

  • @Manudoido100
    @Manudoido100 4 года назад

    Já assisti várias aulas do Mayk Brito, mas eu sempre me surpreendo com a excelente didática dele.

  • @Mark-xx1up
    @Mark-xx1up 4 года назад +1

    CSS tem sido uma dor de cabeça principalmente em posicionamento de elementos obrigado maykão por trazer este conteudo .

  • @abnertarso5141
    @abnertarso5141 4 года назад +3

    Bem na hora que precisava, obrigado

  • @emannueltx7604
    @emannueltx7604 4 года назад +1

    Parabéns Mayk, sua didática de ensino é muito boa! já consegui aprender muitos conteúdos que antes tinha dificuldade. Obrigado pela excelente aula e continue com o bom trabalho :)

    • @rocketseat
      @rocketseat  4 года назад

      Que massa Emannuel!! Muito obrigado pelo feedback! 💜💜

  • @mayaraperez8362
    @mayaraperez8362 3 года назад

    SENSACIONAL !! Consegui entender muito bem o função do box-sizing, meu sonho seria um vídeo com posicionamento de elementos com flexbox!! Nova inscrita 💜

  • @Virecom
    @Virecom 4 года назад

    Vídeo top e muito bem explicado! Show de bola..

  • @robsonb.widnef6183
    @robsonb.widnef6183 4 года назад +1

    Show man!. Só por mais vídeos com suas dicas..

  • @jeffersonnunes7898
    @jeffersonnunes7898 4 года назад

    Simplesmente incrível a didática desse fera, vulgo Mayk Brito. rs

    • @rocketseat
      @rocketseat  3 года назад +1

      Ele é brabo demais, Jefferson! 😍 💜

  • @rodrigoaraujo1608
    @rodrigoaraujo1608 4 года назад

    *Obrigado Maykão me ajudou bastante*

  • @edilsondefranca775
    @edilsondefranca775 3 года назад

    Vídeo maravilhoso, ajudou muito, muito obrigado, esse conteúdo estava muito obscuro na minha mente e agora clareou.

  • @alanchristian3209
    @alanchristian3209 4 года назад

    Mayk Brito é uma maquina de fazer CSS complexo ser convertido para CSS mel na chupeta :D Parabens Mayk SUCESSO!

  • @danielecosta5515
    @danielecosta5515 4 года назад

    Você é fera, Mayk. Gratidão!

  • @marcospatton
    @marcospatton 3 года назад

    Muito bom, tirou muitas dúvidas

    • @rocketseat
      @rocketseat  3 года назад

      Shooow, Marcos! 💜 🚀

  • @joaorocha278
    @joaorocha278 2 года назад

    Top demais valeu

  • @rodrigoo_ferreira
    @rodrigoo_ferreira 4 года назад +1

    Caraca, com você ensinando parece fácil ... Muito bom pra quem sofre com o front-end! Traz mais dicas, tipo efeitos, animações, etc

  • @gabrielgregorio6652
    @gabrielgregorio6652 4 года назад

    Comprei um curso de HTML E CSS por um preço razoavelmente alto e que não explica 1/3 do que aprendi aqui. Parabéns irmão! Acompanharei outros vídeos.

    • @gabrielgregorio6652
      @gabrielgregorio6652 2 года назад

      Voltando aqui pra falar sobre essa aula incrível! Assistindo ela mais uma vez e dando aquela revisada :D

  • @TheIguana3d
    @TheIguana3d 4 года назад

    Muito bom o conteúdo, irá ajudar muitos iniciantes e pessoas com dúvidas, obrigado !!!!!

  • @m4zeboy
    @m4zeboy 4 года назад

    Mais uma aula fenomenal do Maykão, o cara manda muito bem!!

  •  4 года назад

    Muito bom o conteúdo. Parabéns pela didática!

  • @nelsonarrais1925
    @nelsonarrais1925 4 года назад +3

    Top, aprendi aprendi em 15 minutos o q não aprendi em um curso.

    • @rocketseat
      @rocketseat  3 года назад

      Wooow! Bacana demais ler isso, Nelson! 😍 💜

  • @cadumoreira615
    @cadumoreira615 4 года назад

    Que aula sensacional! Parabéns, irmão

    • @rocketseat
      @rocketseat  4 года назад

      Wooow! Vaaleu, Cadu! 😍

  • @rogeriolabat9163
    @rogeriolabat9163 4 года назад +1

    muito bom, obrigado, me ajudou bastante, estava batendo cabeça aqui num layout, já que não sou muito bom em front-end, hehe

  • @Punusso
    @Punusso Год назад

    muito bom

  • @kauanreis94
    @kauanreis94 4 года назад

    Sensacional!

  • @eduardosp15
    @eduardosp15 4 года назад

    Fala Marykão! Parabéns pelo seu trabalho.
    Uma dica, seria interessante você falar sobre os bugs que acontecem no Internet Explorer, por ele não compreender algumas propriedades do Flex.

  • @carlosdanielso
    @carlosdanielso 4 года назад

    Salvou demaiiiis

  • @joaopedrostonemoreira1741
    @joaopedrostonemoreira1741 4 года назад

    Parabéns pelo ótimo conteúdo!! Fez muito sentido para mim e eu consegui entender muitas coisas que antes pareciam impossíveis. Muito obrigado!!

  • @carlostimoteoarruda4337
    @carlostimoteoarruda4337 4 года назад

    Show de bola... ops... de código

  • @AlexsandroPereira
    @AlexsandroPereira 4 года назад

    Que show este video assim, faz mais videos assim mais especificos sobre CSS e HTML! Valeww

  • @caiofurtado3988
    @caiofurtado3988 4 года назад

    Muito bom conteúdo!! Valeu!

  • @fjacyntho
    @fjacyntho 4 года назад

    Maykão, tem algum video do boxmodel para ensinar os modelos de alinhamento com css box model ?

  • @emanoeltech
    @emanoeltech 4 года назад

    Adorei o video!

  • @williamvitorino1334
    @williamvitorino1334 4 года назад +2

    29:17 nas laterais o margin: auto funciona pq o css tem acesso ao valor máximo do WIDTH da página e consegue calcular o centro, já o HEIGHT máximo da página é defeituoso(ao meu ver) e o css não consegue calcular o HEIGHT máximo da página.
    Tô errado? Bota uma div em um body vazio, sem estilo prévio, e bota width: 100%; height: 100%; pra ver. A div preenche o width todo, mas o height não.
    Mas pq? Pois, por padrão, o componente raiz da página tem width = largura da janela do navegador, mas isso não acontece no height. O height do componente raiz é indefinido por padrão.

    • @williamvitorino1334
      @williamvitorino1334 4 года назад

      @Vinicius Isso mesmo. Pq quando defini um height que tenha valor diferente de indefinido pra um comportamento, o componente filho consegue calcular o height baseado no pai...

  • @marcelcoelho9260
    @marcelcoelho9260 3 года назад

    Fala Maikão, qual extensão esta usando para grifar os erros/warnings no css ( como as propriedades ignoradas ). Valeu!!!

  • @carlosbarross
    @carlosbarross Год назад

    02:15 - Mas os elementos não são o conteúdo? Tipo, tag são tags, ex: é uma tag, já a imagem que aparece é o elemento, a mesma coisa para o audio, o audio é o elemento?

  • @CarlosRibeiro54321
    @CarlosRibeiro54321 2 года назад

    Para os ícones do terminal funcionarem no visual code, é preciso usar uma das fontes nerd. 👊🏽

  • @augustobuenodeoliveira3093
    @augustobuenodeoliveira3093 4 года назад

    Muito Bom

    • @rocketseat
      @rocketseat  4 года назад

      Que massa que curtiu! Valeeu Augusto! 💜

  • @mmarquete
    @mmarquete Год назад

    top demais não perco mais tempo ajustando margin, padding e ficando nervoso pq não funcionou kkkk

  • @D-Souza
    @D-Souza 4 года назад

    Cara, tudo bem ? só um pergunta bem idiota, mas enfim.
    Qual a configuração você esta usando em seu Vs Code para não haver linhas em branco entre as próximas tag's, por exemplo no meu Vscode fica uma linha em branco entre a tag de fechamento do para o fechamento da tag . Não sei se você conseguiu entender rsrs, é algum tipo de layout especifico dos Macs ? no meu caso eu estou o Vs no Windows. Tentei achar aqui nas confiurações porem só acho a opção de mudar o tamanho e a tipografia da fonte.

  • @lucas.n
    @lucas.n 5 месяцев назад

    29:40 seria 20% de que?

  • @personalpcgames8241
    @personalpcgames8241 4 года назад +1

    então o (box-sizing: border-borx) faz o elemento deixar de adicionar a propriedade de padding pra fora do elemento e coloca pra dentro do elemento ? é isso ?

    • @rocketseat
      @rocketseat  4 года назад

      Faaala, dev! 💜💜 Exatamente.. a propriedade border-box faz com que o tamanho seja a soma do conteúdo com border, padding 💜

  • @leoos5244
    @leoos5244 4 года назад +1

    Como sempre as melhores dicas..
    Qual o nome desse editor?

  • @lucaseduardo546
    @lucaseduardo546 3 года назад

    Qual a diferença entre: display: inline-block e display: flex ?

  • @luisgabrielmxm
    @luisgabrielmxm 4 года назад

    e o outline? no que ele impacta dentro dessa estrutura?

    • @dpwoficial
      @dpwoficial 2 года назад +1

      Nada; outline não faz parte de Box Model e não "ocupa" nenhum espaço (ou seja, não influencia no tamanho ou posição da "caixa").
      Justamente por isso, é bastante comum em debugs de CSS, porque dá para destacar elementos sem influenciar seu posicionamento/flow.

  • @GabrielFerreira-rl1ok
    @GabrielFerreira-rl1ok 4 года назад

    Clean

  • @fernandoh3o
    @fernandoh3o 3 года назад

    ALGUEM PODE ME AJUDAR? ESTOU USANDO ESSE CODIGO PRA ALTERAR O ESPAÇAMENTO ENTRE AS LINHAS DO MEU BLOG E NÃO FUNCIONA... MAS QUANDO COLOCO SÓ MARTIN OU MARGIN-LEFT OU RIGHT AI FUNCIONA.. alguem sabe porque?
    .entry-content {
    margin-bottom:48px !important;
    }

  • @igorthierry
    @igorthierry 4 года назад

    achei que meu discord tava aberto varias vezes kkk até sacar que era no vídeo rsrsrs

  • @gaigoz94
    @gaigoz94 3 года назад

    eu vou ficar olhando quantas vezes for necessário até entender isso kkkk

    • @rocketseat
      @rocketseat  3 года назад +1

      Tenho certeza que logo vai entender! 💜

  • @igorthierry
    @igorthierry 4 года назад +2

    primeira linha de CSS dos meu projetos é *box-sizing: border-box;* kkkkkk

    • @carlostimoteoarruda4337
      @carlostimoteoarruda4337 4 года назад +1

      box-sizing: border-box faz parte do meu my_reset pessoal

    • @GuilhermeReisKart
      @GuilhermeReisKart 4 года назад +2

      Eu não conhecia essa dica. Sempre fiquei muito puto por colocar o padding e o layout zoar todo, já tinha pesquisado na internet sobre o que poderia ser e nunca achei a resposta. Ainda bem que cliquei nesse vídeo, minha vida melhorou 100% agora kkkkkkk.

    • @carlostimoteoarruda4337
      @carlostimoteoarruda4337 4 года назад +1

      @@GuilhermeReisKart aprendi a pouco tempo também. Mas lembre-se do porque ele teve que usar o "overwerflow"... Xiii esqueci como escrever...

    • @elizduarte6547
      @elizduarte6547 4 года назад +1

      * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      }

  • @walisonmatheus9444
    @walisonmatheus9444 4 года назад +6

    Uma das coisas mais enjuadas de pegar

  • @CesarT3333
    @CesarT3333 4 года назад

    Só consigo dar um like. Queria dar 70 =/

  • @tjsremocada2543
    @tjsremocada2543 4 года назад

    parabéns não entendi nada

    • @rocketseat
      @rocketseat  3 года назад +1

      Opaaaa, tenta ver de novo dando pausas e anotando os pontos mais importantes! 💜
      É um pouco complexo no começo mesmo... 😥

    • @tjsremocada2543
      @tjsremocada2543 3 года назад

      Passando pra vc avisar que eu aprendi Rocketseat kkkkkk