Atividade Prática 10 - Containers com BootStrap Título da Prática: Construindo uma página Web Responsiva com Containers Bootstrap Objetivos: Esta atividade tem como objetivo permitir que você pratique e aplique o conhecimento adquirido durante a aula sobre a implementação de Containers utilizando o framework Bootstrap. Materiais, Métodos e Ferramentas: Um editor de texto de sua escolha (ex: Visual Studio Code, Sublime Text, Atom, etc.), navegador web e Bootstrap (Você pode linkar o Bootstrap via CDN ou fazer o download da biblioteca para o seu projeto) Atividade Prática 1. Crie uma página Web que inclua um cabeçalho, um corpo e um rodapé. 2. No cabeçalho, adicione o nome da sua página web e um menu de navegação com pelo menos três itens. 3. No corpo da página, adicione três seções diferentes usando containers do Bootstrap. Cada seção deve incluir um título e um parágrafo de texto. 4. No rodapé, adicione um copyright com o ano atual. 5. Aplique estilos à sua página usando classes do Bootstrap, como por exemplo as classes para cores de fundo e texto. 6. Certifique-se de que sua página é responsiva e se adapta a diferentes tamanhos de tela. Vamo qu
Aqui está um guia passo a passo para criar uma página da web responsiva com containers Bootstrap:
Materiais, Métodos e Ferramentas:
- Um editor de texto de sua escolha (como Visual Studio Code, Sublime Text, Atom, etc.).
- Navegador da web instalado.
- Bootstrap (você pode incluir o Bootstrap via CDN ou fazer o download da biblioteca para o seu projeto).
Passo 1: Estrutura Básica HTML
Comece criando a estrutura básica de um documento HTML. Você pode usar o seguinte código como ponto de partida:
https://sourceb.in/weXPfl59Ot
Passo 2: Cabeçalho e Menu de Navegação
Dentro do `<body>`, adicione o cabeçalho e o menu de navegação:
https://sourceb.in/zRHpQSmNuv
Passo 3: Corpo da Página com Containers
Agora, no corpo da página, adicione três seções diferentes usando containers Bootstrap. Certifique-se de adicionar títulos e parágrafos de texto a cada seção:
https://sourceb.in/NWWMNFRWMr
Passo 4: Rodapé
Adicione o rodapé com o ano atual:
https://sourceb.in/u0RpfqYzLE
Passo 5: Estilos do Bootstrap
Certifique-se de que você incluiu o Bootstrap corretamente (via CDN ou importando os arquivos CSS) para que as classes do Bootstrap funcionem.
Passo 6: Responsividade
O Bootstrap é por padrão responsivo, então a página deve se adaptar a diferentes tamanhos de tela. Teste sua página em dispositivos móveis e redimensionando a janela do navegador para garantir que ela seja responsiva.
Isso conclui a criação de uma página web responsiva com containers Bootstrap. Lembre-se de personalizar o conteúdo, o estilo e o título conforme necessário para atender às suas necessidades específicas.
Lista de comentários
Resposta é Explicação:
Aqui está um guia passo a passo para criar uma página da web responsiva com containers Bootstrap:
Materiais, Métodos e Ferramentas:
- Um editor de texto de sua escolha (como Visual Studio Code, Sublime Text, Atom, etc.).
- Navegador da web instalado.
- Bootstrap (você pode incluir o Bootstrap via CDN ou fazer o download da biblioteca para o seu projeto).
Passo 1: Estrutura Básica HTML
Comece criando a estrutura básica de um documento HTML. Você pode usar o seguinte código como ponto de partida:
https://sourceb.in/weXPfl59Ot
Passo 2: Cabeçalho e Menu de Navegação
Dentro do `<body>`, adicione o cabeçalho e o menu de navegação:
https://sourceb.in/zRHpQSmNuv
Passo 3: Corpo da Página com Containers
Agora, no corpo da página, adicione três seções diferentes usando containers Bootstrap. Certifique-se de adicionar títulos e parágrafos de texto a cada seção:
https://sourceb.in/NWWMNFRWMr
Passo 4: Rodapé
Adicione o rodapé com o ano atual:
https://sourceb.in/u0RpfqYzLE
Passo 5: Estilos do Bootstrap
Certifique-se de que você incluiu o Bootstrap corretamente (via CDN ou importando os arquivos CSS) para que as classes do Bootstrap funcionem.
Passo 6: Responsividade
O Bootstrap é por padrão responsivo, então a página deve se adaptar a diferentes tamanhos de tela. Teste sua página em dispositivos móveis e redimensionando a janela do navegador para garantir que ela seja responsiva.
Isso conclui a criação de uma página web responsiva com containers Bootstrap. Lembre-se de personalizar o conteúdo, o estilo e o título conforme necessário para atender às suas necessidades específicas.
Espero ter ajudado! :D