Web 1 - IFSP

Repositório de projetos práticos do curso Desenvolvimento Web 1 do Instituto Federal de São Paulo (IFSP).

Aqui você encontrará uma coleção de projetos didáticos focados no aprendizado de fundamentos web com HTML5, CSS3 e JavaScript.

Professor: Bianca Pedrosa
Período: 2026
Última atualização: 11 de maio de 2026

---

📁 Estrutura de Projetos

🍰 Bolo

Projeto Introdutório - HTML e CSS Básico

Projeto inicial focado em aprender os conceitos fundamentais de desenvolvimento web.

Arquivos:

• index.html - Estrutura HTML básica com elementos semânticos
• style.css - Estilização CSS pura, sem frameworks

Conceitos aprendidos:

• Tags HTML semânticas
• Seletores CSS básicos
• Box model
• Tipografia
• Cores e fundos

Objetivo principal: Compreender a separação entre conteúdo (HTML) e apresentação (CSS)

---

🌿 Plantas

Projeto de Estilização - Layout e Responsividade

Exercício que explora estilos CSS e layout simples com imagens.

Arquivos:

• index.html - Conteúdo sobre plantas
• estilo.css - Estilos para layout e tipografia

Objetivo: Praticar posicionamento de elementos e uso de CSS para organização visual.

---

🧾 Formulários

Projetos de Formulários HTML + CSS

📝 Cadastro

Formulário de cadastro com validação básica.

🎤 DevCon

Formulário para evento DevCon.

💬 Feedback

Formulário de feedback.

Conceitos: Inputs, labels, validação, CSS para forms.

---

📊 Tabelas

Projetos com Tabelas HTML

🚗 Carros

Tabela de carros com estilos.

🕒 Horário

Tabela de horários.

👥 Pessoas

Tabela de pessoas.

📺 Streaming

Tabela de serviços de streaming.

Conceitos: Estrutura de tabelas, thead/tbody, estilização.

---

🏗️ Semântica

HTML Semântico

• index.html - Exemplo de HTML semântico correto
• div-soup.html - Exemplo de "sopa de divs" (anti-padrão)

Objetivo: Entender a importância do HTML semântico para acessibilidade e SEO.

---

📱 Responsividade

Design Responsivo com CSS

🎯 Grid

Layout usando CSS Grid.

📐 Media Queries

Uso de media queries para responsividade.

Conceitos: Flexbox, Grid, Media Queries, Mobile-first.

---

🏗️ Bootstrap

Projetos com componentes e estilo via Bootstrap

A pasta bootstrap contém exemplos que utilizam o framework Bootstrap para criar interfaces com layouts prontos, barras de navegação e sliders.

Arquivos de destaque:

• navbar.html - Exemplo de barra de navegação responsiva
• slide12.html, slide13.html - Exemplos de carrossel/slider
• container.html - Exemplo de uso de container e grid do Bootstrap

Conceitos: Framework CSS, classes utilitárias, componentes prontos, responsividade rápida.

---

💱 Conversor de Moedas

Aplicação de conversão com JavaScript

O projeto conversorMoedas é um exemplo de como criar uma calculadora de moedas usando JavaScript para manipular valores e atualizar a interface.

Arquivos de destaque:

• index.html - Interface do conversor
• script.js - Lógica de cálculo e manipulação dos valores
• style.css - Estilos da página

Conceitos: DOM, eventos, manipulação de valores numéricos, formatação de moeda.

---

🧠 JavaScript

Projetos com JavaScript

🧮 Calculadora

Calculadora funcional com e sem eval.

📋 Arrays

Manipulação de arrays: carrinho, conversor, convidados, sorteador.

🎉 Festa

Cálculo para festa: buffet.

💰 Gorjeta

Calculadora de gorjeta em grupo.

⚖️ Peso

Calculadora de peso ideal.

Conceitos: Funções, arrays, DOM manipulation, eventos.

---

🌐 DOM

Manipulação do DOM

• calculadora.html - Calculadora com DOM
• frutas.html - Exemplo com frutas

Conceitos: getElementById, querySelector, event listeners.

---

🍽️ DOM Cardápio

Cardápio Interativo

Sistema de pedido para restaurante usando DOM e módulos ES6.

Arquivos:

• index.html - Interface do cardápio
• index.js - Lógica JavaScript
• dados.js - Dados dos produtos
• index.css - Estilos

Conceitos: Módulos ES6, manipulação dinâmica do DOM, eventos.

---

🥗 DOM Nutrição

Aplicação de Nutrição

Projeto de nutrição com DOM.

Estrutura: HTML, CSS, JS, imagens.

---

📈 DOM Relatório

Relatórios com DOM

• index.html - Relatório básico
• relatorioAsync.html - Relatório assíncrono
• basic.js, script.js - Scripts

Conceitos: JavaScript assíncrono, manipulação de dados.

---

📄 JSON

Trabalho com JSON

• formEndereco.html - Formulário com dados JSON

Conceitos: JSON.parse, JSON.stringify, integração com forms.

📚 Conceitos Aprendidos

• HTML5: Semântica, formulários, tabelas, acessibilidade
• CSS3: Seletores, layout (Flexbox/Grid), responsividade, animações
• JavaScript: DOM manipulation, eventos, arrays, objetos, módulos
• Ferramentas: VS Code, Git, GitHub

📝 Licença

Este repositório é para fins educacionais.

🎯 Tecnologias Utilizadas

• HTML5 - Marcação semântica e estrutura de conteúdo
• CSS3 - Estilização moderna e layouts
• JavaScript - Interatividade e manipulação do DOM

---

🚀 Como Usar

Clonar o repositório

git clone https://github.com/BiancaPedrosa/web.git
cd web

Abrir um projeto

1. Navegue até a pasta do projeto desejado (ex: listas/Bolo)
2. Abra o arquivo index.html diretamente no navegador
3. Ou use um servidor local para melhor experiência (recomendado)

---

📝 Informações Adicionais

Sobre este Repositório

Este repositório contém exercícios práticos e projetos do curso Desenvolvimento Web 1 do IFSP. Cada projeto foi desenvolvido para ensinar conceitos específicos de desenvolvimento web front-end.

📞 Suporte

Para dúvidas sobre os projetos, entre em contato com o professor ou consulte a documentação oficial:

• MDN Web Docs
• W3C - HTML Specification
• CSS Working Group Drafts