Projeto Acadêmico - FATEC Itaquera > Curso: Desenvolvimento de Software Multiplataforma (DSM)
Disciplina: Desenvolvimento Web I - 1º Semestre
- 📌 Sobre o Projeto
- 🎓 Contexto Acadêmico
- 🛠️ Tecnologias e Metodologia
- 📁 Estrutura de Arquivos
- 🚀 Como Executar
- 👥 Autores
O Receitinhas Brasileirinhas é uma plataforma web desenvolvida para facilitar o acesso à cultura gastronômica nacional. O foco do projeto é aplicar conceitos de Web Standard, semântica HTML5 e design responsivo para criar uma experiência de usuário fluida e educativa.
- Democratização: Tornar receitas tradicionais acessíveis através de uma interface simples.
- Responsividade: Garantir que o aluno ou cozinheiro acesse a receita do celular na cozinha ou do desktop.
- Performance: Uso de práticas de desenvolvimento que garantem carregamento rápido (Clean Code).
Este projeto faz parte da grade curricular da FATEC Itaquera. Ele serve como avaliação prática para consolidar os fundamentos de:
- Estruturação de documentos com HTML5.
- Estilização avançada e Layouts com CSS3 (Flexbox/Grid).
- Organização de diretórios e versionamento com Git/GitHub.
- Arquitetura de informação para sistemas multi-páginas.
| Tecnologia | Finalidade |
|---|---|
 |
Estruturação semântica das receitas e menus. |
 |
Estilização, layout responsivo e identidade visual. |
 |
Controle de versão e colaboração. |
 |
Tipografia otimizada para leitura (Poppins). |
A organização segue o padrão de separação de responsabilidades (assets, páginas e estilos):
site/
├── menu.html # Landing Page (Ponto de entrada)
│
├── css/
│ └── css_menu.css # Estilização Global (Flexbox, Responsivo)
│
├── img/ # Assets Visuais e Logos
│ └── logo.png # Logo do projeto
│
├── sites/ # Módulos de Categorias
│ ├── bebidas.html
│ ├── sobremesa.html
│ ├── pratos.html
│ ├── pascoa.html
│ ├── quem-somos.html # Informações institucionais
│ │
│ └── Receitas/ # Banco de dados de receitas (HTML estático)
│ ├── Bebidas/
│ │ ├── chocolate_quente.html
│ │ ├── limonada_suica.html
│ │ ├── suco_laranja.html
│ │ ├── vinho_quente.html
│ │ └── img/
│ │
│ ├── Pascoa/
│ │ ├── bacalhau.html
│ │ ├── colomba_pascal.html
│ │ ├── ovo_pascoa.html
│ │ ├── torta_chocolate.html
│ │ └── img/
│ │
│ ├── Pratos/
│ │ ├── feijoada.html
│ │ ├── lasanha.html
│ │ ├── moqueca.html
│ │ ├── strogonoff.html
│ │ └── img/
│ │
│ └── Sobremesa/
│ ├── bolo_cenoura.html
│ ├── brigadeiro.html
│ ├── mousse_maracuja.html
│ ├── pudim.html
│ └── img/
│
├── README.md # Documentação do projeto
└── LICENSE # Licença MIT
| Categoria | Descrição | Exemplos |
|---|---|---|
| 🍲 Pratos | Pratos principais da culinária brasileira | Feijoada, Moqueca, Strogonoff, Lasanha |
| 🥛 Bebidas | Bebidas tradicionais refrescantes e quentes | Suco de Laranja, Limonada Suíça, Vinho Quente, Chocolate Quente |
| 🍰 Sobremesas | Doces e sobremesas irresistíveis | Bolo de Cenoura, Brigadeiro, Mousse de Maracujá, Pudim |
| 🐰 Páscoa | Receitas especiais para festividades | Bacalhau à Brás, Colomba Pascal, Ovo de Páscoa, Torta de Chocolate |
- ✅ Design Responsivo: Layout adaptável para mobile, tablet e desktop
- ✅ Navegação Intuitiva: Menu de fácil acesso com categorias bem definidas
- ✅ Receitas Detalhadas: Instruções passo a passo com ingredientes organizados
- ✅ Performance Otimizada: Carregamento rápido sem dependências externas
- ✅ Semântica HTML5: Código estruturado e acessível
- ✅ CSS Moderno: Flexbox para layouts fluidos e adaptáveis
Nenhuma dependência complexa! O projeto utiliza tecnologias Vanilla Web (HTML5 puro + CSS3):
- ✅ Navegador moderno (Chrome, Firefox, Safari, Edge)
- ✅ Editor de código (VS Code, Sublime, etc.) - opcional, apenas para edições
- ⭕ Nenhum: Node.js, Python, Apache, etc. não são necessários
# 1. Clone o repositório
git clone https://github.com/imlucsz/Receitinhas_Brasileirinhas-Site.git
# 2. Navegue até a pasta
cd site
# 3. Abra menu.html no navegador
# Windows: Duplo clique em menu.html
# macOS: Clique direito > Abrir com > Navegador padrão
# Linux: xdg-open menu.html# 1. Instale a extensão "Live Server" no VS Code (ID: ritwickdey.LiveServer)
# 2. Clique com botão direito em menu.html
# 3. Selecione "Open with Live Server"
# O navegador abrirá automaticamente em http://localhost:5500# Python 3.x
cd site
python -m http.server 8000
# Python 2.x
python -m SimpleHTTPServer 8000
# Acesse em http://localhost:8000# Instale http-server globalmente (primeira vez)
npm install -g http-server
# Inicie o servidor
cd site
http-server
# Acesse em http://localhost:8080Você saberá que está funcionando quando:
- 🏠 A página inicial carrega com logo e menu
- 🎨 Os estilos CSS aparecem (cores, fontes, layouts)
- 🔗 Os links de navegação funcionam entre páginas
- 📱 O layout se adapta ao redimensionar a janela
- 🖼️ As imagens das receitas carregam corretamente
Landing Page (menu.html):
- Header com logo e título
- Menu de navegação com categorias
- Seção de destaques com cards de receitas
- Decoração com emojis temáticos
Páginas de Categoria:
- Lista de receitas da categoria
- Links para receitas completas
- Imagens de preview
Páginas de Receita:
- Ingredientes organizados
- Modo de preparo detalhado
- Imagens do processo
- Links de navegação
Este projeto é um excelente exercício prático dos seguintes conceitos:
| Conceito | Aplicação no Projeto |
|---|---|
| HTML5 Semântico | Uso de tags como <header>, <nav>, <main>, <section>, <article> |
| CSS3 Responsivo | Media queries e Flexbox para adaptação de layouts |
| Web Standards | Compatibilidade entre navegadores e boas práticas web |
| Arquitetura de Informação | Hierarquia clara de páginas e categorias |
| Mobile First | Design pensado primeiramente para dispositivos móveis |
| Clean Code | Código bem organizado e fácil de manter |
| 👤 Nome | 🎯 Função | 🔗 Contato |
|---|---|---|
| Lucas Araujo de Souza | Desenvolvedor Principal |  |
- Disciplina: Desenvolvimento Web I
- Instituição: FATEC Itaquera
- Curso: Desenvolvimento de Software Multiplataforma (DSM)
- Semestre: 1º
Se você conhece receitas incríveis ou quer melhorar o projeto:
- 🍴 Faça um Fork do repositório
- 🌿 Crie uma branch para sua contribuição (
git checkout -b feature/nova-receita) - 💾 Faça commit das mudanças (
git commit -m 'Adiciona receita: Brigadeiro Gourmet') - 📤 Push para a branch (
git push origin feature/nova-receita) - 🔄 Abra um Pull Request descrevendo suas mudanças
Ao adicionar uma nova receita, siga este padrão:
<div class="receita">
<h2>Nome da Receita</h2>
<p class="tempo">⏱️ Tempo: XX minutos</p>
<h3>Ingredientes</h3>
<ul>
</ul>
<h3>Modo de Preparo</h3>
<ol>
</ol>
</div>Este projeto é licenciado sob a MIT License - veja o arquivo LICENSE para detalhes completos.
MIT License - Você pode usar, modificar e distribuir este projeto livremente,
desde que inclua a licença original.
Durante o desenvolvimento deste projeto, foram consolidados:
- ✅ Estrutura semântica de documentos HTML5
- ✅ Criação de layouts responsivos com CSS3 e Flexbox
- ✅ Organização de arquivos e pastas em projetos web
- ✅ Versionamento com Git e GitHub
- ✅ Boas práticas de desenvolvimento web
- ✅ Mobile-first design thinking
- ✅ Performance web (redução de requisições, otimização de imagens)
- 📧 Entre em contato através do perfil GitHub
- 🐛 Abra uma issue para reportar bugs ou sugerir melhorias
- ⭐ Se o projeto foi útil, considere dar uma estrela no GitHub!
Desenvolvido com ❤️ para celebrar a gastronomia brasileira
Bom apetite! 🍽️✨