MAPA - PROGRAMAÇÃO FRONT END 52_2025

Em nosso material de estudo sobre Programação Front-End, exploramos como o desenvolvimento de websites modernos depende da integração harmoniosa de diferentes linguagens e tecnologias. A combinação de HTML, CSS e JavaScript forma a base do desenvolvimento Front-End, permitindo a criação de interfaces interativas, responsivas e visualmente atraentes. Cada uma dessas tecnologias desempenha um papel específico: o HTML estrutura o conteúdo, o CSS estiliza a aparência, e o JavaScript adiciona interatividade e comportamentos dinâmicos às páginas web.

Com a evolução contínua dos dispositivos e navegadores, os desenvolvedores Front-End precisam adaptar-se constantemente às novas tendências de design, como o "flat design" para dispositivos móveis, e dominar bibliotecas e frameworks que facilitam o desenvolvimento, como jQuery, React e Bootstrap.

Fonte: NOEL, André Abdala. Programação Front End. Florianópolis, SC: Arqué, 2025. 232 p.

ATIVIDADE:

Com base em nosso material e em pesquisas complementares sobre desenvolvimento Front-End, você irá:

Criar um Website Completo: Desenvolva um website responsivo de tema livre (portfólio pessoal, blog, loja virtual simplificada, etc.) utilizando HTML5, CSS3 e JavaScript. O site deve conter pelo menos quatro páginas interligadas e demonstrar o uso adequado dos conceitos aprendidos na disciplina.

Implementar Recursos Específicos

Seu website deve obrigatoriamente incluir:

- Layout responsivo que se adapte a diferentes tamanhos de tela

- Menu de navegação funcional

- Formulário de contato com validação via JavaScript

- Uso de pelo menos dois efeitos interativos com JavaScript/jQuery

- Aplicação de conceitos de SEO básico no código

Documentação: Elabore um relatório técnico detalhando as escolhas de design, arquitetura do site, tecnologias utilizadas e desafios enfrentados. Inclua capturas de tela do resultado final e explique como o projeto aplica os conceitos estudados na disciplina.

Orientações Adicionais

- Hospedagem e Entrega: O código-fonte completo deve ser compactado em formato ZIP e enviado junto com o relatório. Caso deseje, pode também hospedar o site em plataformas gratuitas como GitHub Pages, Netlify ou Vercel e incluir o link no relatório.

- Organização do Código: O código deve estar bem organizado, com comentários explicativos e seguindo boas práticas de desenvolvimento Front-End.

- Originalidade: O design e conteúdo devem ser originais ou utilizar recursos com licença adequada, citando todas as fontes utilizadas.

REFERÊNCIAS:

TOKUMOTO, Ronie Cesar. Programação Front End. Maringá-PR: Unicesumar, 2018.

NOEL, André Abdala. Programação Front End. Florianópolis, SC: Arqué, 2025. 232 p.

SILVA, Maurício Samy. HTML5 – A linguagem de marcação que revolucionou a web. São Paulo: Novatec, 2021.

MDN Web Docs. Front-end web developer. Disponível em: https://developer.mozilla.org/pt-BR/docs/Learn/Front-end_web_developer. Acesso em: 8 abr. 2024.

W3Schools. HTML Tutorial. Disponível em: https://www.w3schools.com/html/. Acesso em: 8 abr. 2024.

W3Schools. CSS Tutorial. Disponível em: https://www.w3schools.com/css/. Acesso em: 8 abr. 2024.

ORIENTAÇÕES IMPORTANTES:

- Acesse o link com o vídeo gravado pelo professor para ajudá-lo na realização desta atividade MAPA. O acesso deverá ser realizado em: Sala do Café >> Dicas e Orientações (Studeo);

- Realize pesquisas complementares nas referências apresentadas pelo professor;

- Ao realizar pesquisas, não faça cópia fiel do texto e sempre insira as devidas referências dos autores;

- A entrega deve ser feita exclusivamente por meio do Template de entrega da atividade MAPA disponível em Arquivos>>Material da Disciplina (Studeo);

- Antes de enviar sua atividade, certifique-se de que respondeu a todas as perguntas e realize uma cuidadosa correção ortográfica;

- Após o envio não são permitidas alterações, ou modificações. Logo, você tem apenas uma chance de enviar o arquivo corretamente. Revise bem antes de enviar!

- Lembre-se que a interpretação da atividade também faz parte da avaliação;

- Procure sanar suas dúvidas junto a mediação em tempo hábil sobre o conteúdo exigido na atividade, de modo que consiga realizar sua participação; e

- Atenção ao prazo de entrega, evite envio de atividade em cima do prazo. Você pode ter algum problema com internet, computador, software, etc. e os prazos não serão flexibilizados, mesmo em caso de comprovação.

Bons estudos!

Em caso de dúvidas, encaminhar mensagem ao seu Professor(a) Mediador(a)