Author: Pedro Lucas Porcellis <porcellis@eletrotupi.com>
all: update readme
README.md | 96 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++
diff --git a/README.md b/README.md index 98f1d87b70f4e8934fc4681356fd44a3007de0fd..4afc77bd04f07a9bf44fb7db906070e8a78030ff 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,97 @@ -# frontend +# Projeto: Aplicação Web Integrada com HTML, CSS e JavaScript + +## Propósito do Projeto + +Esse projeto foi feito pra juntar tudo que iriamos ver sobre HTML, CSS e +JavaScript na disciplina. A ideia é criar uma aplicação web funcional, acessível +com boas práticas de desenvolvimento. O foco é garantir uma experiência legal +pra quem usar e manter o código organizado pra quem quiser mexer depois +(literalmente ninguém). + +--- +## O que o Projeto Tem + +### Semântica e Acessibilidade + +- Usa elementos HTML5 semânticos como `<header>`, `<nav>`, `<main>`, `<section>`. +- Segue boas práticas de acessibilidade, como: + - Texto alternativo (`alt`) nas imagens. + - Navegação acessível pelo teclado com `tabindex` e atributos `aria-*`. + - Contraste adequado entre texto e fundo, seguindo as regras WCAG. + - Labels descritivos nos formulários pra melhorar a usabilidade. + +### Responsividade + +- O design é mobile-first, então funciona bem em telas pequenas e maiores. +- Usei Flexbox, Grid e media queries pra ajustar o layout conforme o tamanho da + tela. +- Tem um menu responsivo (menu hambúrguer). + +### JS + +- Manipula o DOM pra criar conteúdos dinâmicos. +- Faz validação de formulários direto no navegador. +- Usa métodos legais como `filter`, `map` e `reduce` pra trabalhar com dados. + +### APIs + +- Usa duas APIs HTML5: Geolocation e Web Storage. + +### Organização do Código + +- Tudo bem separado pra facilitar a vida de quem mexer nessa birosca (ninguém): + - `/css/style.css` pros estilos. + - `/js/script.js` pra lógica do JavaScript. +- Estrutura limpa pra manutenção e expansão. + +--- +## Como Rodar o Projeto + +### O que Tu Precisas + +- Python 3 instalado no teu computador. + +### Passo a Passo + +1. Clona o repositório do projeto: + ```sh + git clone https://github.com/pedrolucasp/frontend-1 + ``` +2. Vai pro diretório do projeto: + ```bash + cd frontend-1 + ``` + +3. Sobe um servidor HTTP local com Python: + ```bash + python -m http.server + ``` + +4. Abre o navegador e acessa o endereço: + ``` + http://localhost:8000 + ``` + +5. Va juegar + +--- + +## Estrutura do Projeto + +``` +/projeto +├── /css +│ └── style.css # Arquivo de estilos da aplicação +├── /js +│ └── script.js # Arquivo com a lógica de JavaScript +├── /assets +│ └── (imagens e ícones usados no projeto) +├── index.html # Página principal +└── README.md # Documentação do projeto +``` + +--- + +**Licença**: MIT. Verifica o LICENSE.