Fale com a gente no WhatsApp Fale com a gente no WhatsApp
Fale com a gente no WhatsApp

Curso de HTML5 + CSS3 - Box model e Posicionamento de Elementos

Domine o sistema Box Model do CSS3 e aprenda como utilizá-lo nos seus projetos

Nível Iniciante Categoria Desenvolvimento Front-end

  • Curso com 01h51 de vídeos
  • Certificado com 8 horas
  • 12 exercícios

Sobre o curso

Um dos pilares no desenvolvimento front-end, é a compreensão do modelo de caixa, o Box Model. Esse Box Model é a forma como funciona todos os elementos HTML, que como sabemos é a base de toda web. No curso você entenderá o que é o Box Model e aprenderá a manipular sua medidas, para poder, organizar e mensurar os elementos.

Além disso, vamos abordar outro tema de extrema importância, o posicionamento de elementos. Apresentaremos os principais tipos de positions dentro de uma página WEB, suas características e comportamentos

Um dos pilares no desenvolvimento front-end, é a compreensão do modelo de caixa, o Box Model. Esse Box Model é a forma como funciona todos os elementos HTML, que como sabemos é a base de toda web. No curso você entenderá o que é o Box Model e aprenderá a manipular sua medidas, para poder, organizar e mensurar os elementos.

Além disso, vamos abordar outro tema de extrema importância, o posicionamento de elementos. Apresentaremos os principais tipos de positions dentro de uma página WEB, suas características e comportamentos

O que irá aprender?

Entre vários outros conteúdos conheceremos:

  • O que é box model;
  • O que é display;
  • Tipos de display mais utilizados;
  • Todos as opções de posicionamento disponíveis;
  • Veremos exemplos práticos de posicionamento;
  • Aprenderemos como se trabalhar com z index.

Pra quem é esse curso?

Esse curso é voltado para desenvolvedores que querem entender e se aprofundar no modelo de caixa do HTML e aprender a manipular as medidas e posicionamento desses elementos, e entender como eles são renderizados na tela do navegador.

Quais os pré-requisitos para esse curso?

Os pré-requisitos não são obrigatórios, são apenas sugestões. Eles dão uma base de parte do conhecimento que é interessante ter para um bom aproveitamento nesse curso.

Metodologia

  • Videoaulas
  • Texto e imagens
  • Início Imediato
  • Testes de aprendizado

Sobre o professor

Amauri Blanco Corrêa

Amauri Blanco Corrêa

Estudante de Análise e Desenvolvimento de Sistemas, apaixonado por tecnologia. Atualmente focado na área de front-end e iniciando uma grande e brilhante caminhada tanto profissionalmente quanto pessoalmente nesse universo que é a programação.

Conteúdo programático

  1. O que é o box model

    Nesta aula entenderemos o conceito de box model e como manipular seus valores

    9 aulas
    • Apresentação
    • O que é o box model?
    • O código-fonte deste curso está no GitHub!
    • Trabalhando com margens
    • Trabalhando com as bordas
    • Trabalhando com paddings
    • Manipulando medidas de width
    • Manipulando height do elemento
    • Questionário
  2. Trabalhando com display dos elementos

    Nessa aula vamos conhecer os vários tipos de display, também vamos ver na prática os tipos mais utilizados e seus comportamentos.

    9 aulas
    • O que é display
    • Tipos de display
    • Display
    • Valores
    • Característica do display inline
    • Característica do display inline block
    • Conhecendo o inline flex
    • Conhecendo o display none
    • Questionário
  3. Posicionamento com static e fixed

    Já nessa terceira aula nos vamos ver como posicionamos elementos dentro de nossa página HTML, também faremos um exemplo prático com o position fixed.

    6 aulas
    • Position static
    • Position fixed
    • Exemplo de uso com menu fixo
    • Exemplo de uso com imagem
    • Conhecendo o position sticky
    • Questionário
  4. Posicionamento com relative e absolute

    Nesta quarta aula vamos conhecer outras duas formas de posicionar os elementos, veremos também características de comportamento de cada um.

    5 aulas
    • Trabalhando com position relative
    • Conhecendo o position absolute
    • Position absolute com container diferente de static
    • Trabalhando com z index
    • Questionário
Download da ementa

Cursos relacionados

Formação em que esse curso está inserido

Utilizada e amada por milhares! Veja mais opiniões reais

  • Excelente!

  • Curso completo e com explicações detalhadas sobre cada elemento. Equipe extremamente capacitada para a formação de futuros System Developers

  • Muito boa aula!

  • Qualidade do curso e o professor

  • Ótimo curso! Realmente bastante esclarecedor e didático. O conteúdo é bem completo, abrangendo diversos assuntos de forma dinâmica e complementar, o que ajuda, e muito, no aprendizado e na visão de aplicabilidade. Além de todo o ambiente e dos recursos disponíveis tornarem o estudo mais amigável e menos cansativo.

    Depoimento - Dimitrius
    C# (C Sharp) Básico
    Dimitrius Três Corações / MG
  • Esse curso para mim foi um desafio que eu recebi na empresa que eu trabalho, me fizerem uma proposta para eu aprender e me certificar em C# .NET em 90 dias. Esse curso foi minha salvação! Agora vamos para o Intermediário e por fim o Avançado!!! Agradeço...

    Depoimento - David
    C# (C Sharp) Básico
    David Fortaleza / CE
  • Curso Excelente, otimos professores, explicação muito boa...ja estou adquirindo o proximo curso c# avançado. Indico para qualquer um e garanto um dos melhores curso que ja fiz. Parabens a toda equipe.

    Depoimento - Fabrício
    C# (C Sharp) Básico
    Fabrício Cariacica / ES
  • Bom, já tinha um conhecimento em programação C#, resolvi fazer o básico só por fazer e me surpreendi, vi muitas coisas novas, entendi melhor vários conceitos, enfim, estou a caminho do intermediário e recomento é um ótimo curso.

    Depoimento - Roberto
    C# (C Sharp) Básico
    Roberto Itaquaquecetuba / SP
  • Já fui e paguei caro por um curso de C# que não me instruiu em nada, pois não tinha o conhecimento básico. Aí arrisquei no TreinaWeb, pois sempre tive preconceito com cursos assim... a distancia. Sempre achei que presencial com uma pessoa ali do seu lado era a melhor forma... estava enganado... Ótimo curso, didática excelente. E vamos agora para o Intermediário. Vlw equipe do TreinaWeb

    Depoimento - Leonardo
    C# (C Sharp) Básico
    Leonardo Nilópolis / RJ

Plano de acesso total!

Tenha um ano de acesso completo a todos os cursos da plataforma, incluindo novos lançamentos, mentoria de carreira e suporte direto com os professores!

Um ano de acesso completo

Contrate agora e tenha acesso ilimitado a todo o nosso portfólio. Isso inclui:

  • 1 ano de acesso a todos os cursos
  • Cursos novos toda semana
  • Suporte direto com professores
  • Aplicativos para Android e iOS
  • Plano de carreira personalizado
  • Certificados digitais inclusos
  • Suporte com SLA de 4 horas úteis
  • Acesso offline através dos apps
R$ 99,00 ECONOMIZE R$ 600,00
12x R$ 49,00 sem juros, no cartão de crédito
Matricule-se agora
Garantia incondicional de satisfação
Garantia incondicional de satisfação

Confiamos tanto nos resultados dos nossos cursos, que criamos uma garantia incondicional de satisfação para você, que são 7 dias de teste!