Atividade Avaliativa - SEO Agency 🪪

👤 Melissa Rafaela Pereira - 81795

📖 Aprendizagem Industrial em Desenvolvimento de Sistemas - WEG - AI MIDS 77

Descrição do Projeto 📝

Este projeto foi passado pelo professor Kristian Erdmann no dia 31 de julho, tendo como objetivo a criação de um projeto com página web responsiva a partir de um layout sorteado no figma. O projeto contém versões para dispositivos móveis(375px) e desktop(1440). Nosso objetivo é transformar o design visual em um site funcional, com foco em:

Fidelidade ao design original	📥
Responsividade utilizando abordagem Mobile First	🔎
Uso correto de tags HTML semânticas para melhor estruturação	⚙️
Organização modular do CSS, incluindo uso de variáveis CSS	📤
Separação clara entre estrutura (HTML) e apresentação (CSS)	📖
Documentação clara para facilitar entendimento e manutenção	📌

• Link do Figma: https://www.figma.com/proto/Ezj9LSd0qKR1t3fcfmt5HZ/Projeto---Melissa-R.-Pereira---FrontEnd?node-id=0-1&t=IOk5UkjdHhDl5PtT-1

Estrutura 🏠

SEO-AGENCY
└── assets
└── fonts
    ├── Archivo
    └── Inter
├── index.html
├── README.md
└── style.css

Preview 👾

Tecnologias Utilizadas

Como Rodar 📤

OPÇÃO 1️⃣:

1. Baixando o projeto.ZIP: Baixe o arquivo do projeto no link mencionado anteriormente, para isto você deve clicar em <> Code especificada em azul/verde, e selecionar a opção baixar Download ZIP.

2. Extrair o arquivo.ZIP: Após baixar o arquivo.ZIP, encontre ele na pasta downloads e extraia o arquivo.

3. Abra o arquivo index.html: Após extrair a pasta SEO-AGENCY entre nela abra o arquivo index.html - Você pode fazer isso de duas formas:

   • Clicando duas vezes no arquivo (modo mais rápido).
   • Usando um servidor local com extensão live server.

OPÇÃO 2️⃣: Clonar com Git. Se você não desejar baixar o arquivo, você pode fazer acessar via terminal (ou prompt) 🖥️

bash
git clone https://github.com/usuario/repositorio.git

Processo 👩‍💻

No primeiro dia de desenvolvimento, comecei a criação do projeto analisando o Figma fornecido e definindo quais seções poderiam ser implementadas, além de identificar as fontes que precisaria importar. Com essa base, iniciei a construção do HTML, seguindo os elementos previamente vistos.

Após concluir o HTML, passei para o CSS, adotando a abordagem mobile first. Primeiro, importei as fontes e defini as variáveis root dos estilos. Em seguida, desenvolvi o código voltado para dispositivos mobiles. Com essa etapa finalizada, iniciei a construção da versão desktop, utilizando media queries para garantir a responsividade.

• Desafios: A parte mais difícil do desenvolvimento foi criar imagens que ficavam sobrepostas, pois foi algo que eu não havia visto ainda e foi um grande desafio entender como fazer e deixar responsivo. Além disso, o tempo de elaboração do projeto, pois percebi que, mesmo melhorando meus conhecimentos a respeito, ainda tenho dificuldades em desenvolver front-end com rapidez.

Contato 📲

• 📩 Email Escolar: melissa_r_pereira@estudante.sesisenai.org.br

• ✉️ Email Pessoal: melissa.pereira1601@gmail.com