freeCodeCamp

3.9 KiB

Raw Blame History

id	title	isRequired	challengeType	videoUrl	localeTitle
bd7158d8c442eddfaeb5bd18	Build a Tribute Page	true	3		Construa uma página de homenagem

Description

Objetivo: criar um aplicativo CodePen.io que seja funcionalmente semelhante a este: https://codepen.io/freeCodeCamp/full/zNqgVx . Cumpra as histórias de usuário abaixo e faça todos os testes para passar. Dê seu estilo pessoal. Você pode usar HTML, JavaScript e CSS para concluir este projeto. CSS simples é recomendado porque é isso que as lições cobriram até agora e você deve praticar com o CSS simples. Você pode usar o Bootstrap ou o SASS, se desejar. Tecnologias adicionais (por exemplo, jQuery, React, Angular ou Vue) não são recomendadas para este projeto, e usá-las é por sua conta e risco. Outros projetos lhe darão a chance de trabalhar com diferentes pilhas de tecnologia, como o React. Aceitaremos e tentaremos corrigir todos os relatórios de problemas que usam a pilha de tecnologia sugerida para este projeto. Codificação feliz! User Story # 1: Minha página de tributo deve ter um elemento com um id="main" , que contém todos os outros elementos. User Story # 2: Eu deveria ver um elemento com um id="title" , que contém uma string (ou seja, texto) que descreve o assunto da página do tributo (por exemplo, "Dr. Norman Borlaug"). User Story # 3: Eu deveria ver um elemento div com um id="img-div" . User Story # 4: Dentro do elemento img-div , eu deveria ver um elemento img com uma id="image" . User Story # 5: Dentro do elemento img-div , eu deveria ver um elemento com um id="img-caption" que contém conteúdo textual descrevendo a imagem mostrada em img-div . User Story # 6: Eu deveria ver um elemento com um correspondente id="tribute-info" , que contém conteúdo textual descrevendo o assunto da página de tributo. User Story # 7: Eu deveria ver a elemento com um id="tribute-link" , que direciona para um site externo que contém informações adicionais sobre o assunto da página do tributo. DICA: Você deve dar ao seu elemento um atributo de target e configurá-lo para _blank para que seu link seja aberto em uma nova guia (ou seja, target="_blank" ). User Story # 8: O elemento img deve redimensionar responsavelmente, em relação à largura de seu elemento pai, sem exceder seu tamanho original. User Story # 9: O elemento img deve estar centrado dentro de seu elemento pai. Você pode criar seu projeto, bifurcando essa caneta CodePen . Ou você pode usar este link CDN para executar os testes em qualquer ambiente que desejar: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js . Quando terminar, envie o URL para o seu projeto de trabalho com todos os testes sendo aprovados. Lembre-se de usar o método Read-Search-Ask se você ficar preso.

Instructions

Tests

tests: []

Challenge Seed

Solution

// solution required

3.9 KiB Raw Blame History