Codifique um site de pequenas empresas usando frameworks web populares
Aprenda design web codificando o mesmo site usando Bootstrap 4, Bootstrap 5, Bulma, Semantic UI, Foundation e Materialize
Avaliação: 4.2 de 57 avaliações
Total de horas: 12.5
Aulas: 137
Nível: Iniciante
Sobre o Curso
Este curso é para pessoas que são novas no design web e desejam uma introdução rápida a vários frameworks CSS front-end populares. Ao fazer este curso, você será apresentado às versões mais recentes do Bootstrap 4, Bootstrap 5, Bulma, Semantic UI, Foundation 6 e Materialize. Esses frameworks são amplamente utilizados por designers e desenvolvedores web em todo o mundo.
Neste curso, você aprenderá como criar um site de pequenas empresas usando diferentes frameworks CSS front-end. Cada framework será abordado individualmente, começando do zero e guiando você pelo processo de criação do mesmo projeto. Embora o layout geral e o design permaneçam consistentes em todos os projetos, haverá pequenas diferenças visuais devido às características e estilos exclusivos de cada framework.
O objetivo de recriar o mesmo projeto com diferentes frameworks é entender como cada framework utiliza estruturas de código, classes e atributos diferentes para criar componentes semelhantes. Você também obterá insights sobre as variações visuais de cada componente e aprenderá sobre as possibilidades e limitações de cada framework.
Sobre o Projeto
O projeto tem como foco a criação de um site de pequenas empresas. Você aprenderá como estruturar o conteúdo, projetar uma interface amigável ao usuário e garantir a responsividade em diferentes tamanhos de dispositivos usando uma grade responsiva.
O projeto incluirá as seguintes páginas:
- Início: Menu, dropdown, seção hero, mensagem, destaques, layout de grade responsiva com cards, rodapé com ícones
- Serviços: Menu, dropdown, layout de grade responsiva com imagens grandes, texto e botões, rodapé com ícones
- Sobre: Menu, dropdown, texto, layout de grade responsiva com imagens, rodapé com ícones
- Equipe: Menu, dropdown, layout de grade responsiva com imagens, ícones e títulos, rodapé com ícones
- Contato: Endereço, horário de funcionamento, formulário de contato, Google Maps incorporado
Sobre os Frameworks
Os seguintes frameworks serão usados para criar o site de pequenas empresas:
- Bootstrap 4 (compatível com a versão mais recente v4.6.0)
- Bootstrap 5 (compatível com a versão mais recente v5.1.0)
- Bulma (compatível com a versão mais recente v0.8.0)
- Semantic UI (compatível com a versão mais recente v2.4.2)
- Foundation 6 (compatível com a versão mais recente v6.5.3)
- Materialize (compatível com a versão mais recente v1.0.0)
Cada framework utilizará componentes e recursos específicos para criar o site de pequenas empresas. Aqui estão as partes de cada framework que serão abordadas:
Bootstrap 4:
Layout: Containers, Sistema de grade
Conteúdo: Tipografia, Imagens
Componentes: Alerta, Botão, Card, Dropdown, Formulários, Grupo de entrada, Jumbotron, Navbar
Utilitários: Borda, Incorporação, Flex, Espaçamento, Texto
Bônus: Você também aprenderá como usar o Font Awesome 5 para adicionar ícones ao seu projeto e como usar o Google Fonts para adicionar fontes da web.
Bootstrap 5:
Layout: Containers, Sistema de grade
Conteúdo: Tipografia, Imagens
Componentes: Alerta, Botão, Card, Dropdown, Formulários, Grupo de entrada, Navbar
Utilitários: Borda, Incorporação, Flex, Espaçamento, Texto
Bônus: Você também aprenderá como usar o Font Awesome 5 para adicionar ícones ao seu projeto e como usar o Google Fonts para adicionar fontes da web.
Bulma:
Modificadores: Auxiliares de cor, Auxiliares de tipografia
Layout: Colunas, Container, Rodapé, Hero, Seção
Formulários: Geral, Entrada, Seleção, Textarea
Elementos: Botão, Conteúdo, Ícone, Imagem, Notificação, Título
Componentes: Card, Dropdown, Navbar
Bônus: Você também aprenderá como usar o Font Awesome 5 para adicionar ícones ao seu projeto.
Semantic UI:
Elementos: Botão, Container, Cabeçalho, Ícone, Imagem, Entrada, Lista
Coleções: Formulário, Grade, Menu, Mensagem
Módulos: Dropdown, Incorporação
Visualizações: Card
Foundation 6:
Geral: XY Grid, Formulários, Ícones
Utilitários: Utilitários de prototipagem
Controles: Botão
Navegação: Barra superior, Menu
Containers: Chamada, Card, Dropdown
Materialize:
CSS: Cor, Grade, Auxiliares, Mídia
Componentes: Botões, Cards, Rodapé, Ícones, Navbar
JavaScript: Dropdown, Sidenav
Formulários: Seleção, Entradas de texto
Espero que você se sinta inspirado a criar seu próprio site de pequenas empresas após concluir este curso. Se o fizer, compartilhe o link comigo. Eu adoraria ver!
