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)