3.3 KiB
id, title, challengeType, forumTopicId, dashedName
| id | title | challengeType | forumTopicId | dashedName |
|---|---|---|---|---|
| 587d78af367417b2b2512b04 | Costruire la Landing Page per un prodotto | 3 | 301144 | build-a-product-landing-page |
--description--
Obiettivo: Costruire un'app CodePen.io funzionalmente simile a questa: https://codepen.io/freeCodeCamp/full/RKRbwL.
Compila le user stories qui sotto e fai passare tutti i test. Dalle il tuo stile personale.
Puoi utilizzare HTML, JavaScript, e CSS per completare questo progetto. Il CSS è raccomandato perché è stato l'argomento delle lezioni viste finora e dovresti fare pratica con il CSS di base. Se lo desideri puoi anche utilizzare Bootstrap o SASS. Ulteriori tecnologie (solo per fare un esempio jQuery, React, Angular, o Vue) non sono raccomandate per questo progetto, e usarle è a tuo rischio. Altri progetti ti daranno la possibilità di lavorare con differenti stack tecnologici come React. Accetteremo e cercheremo di risolvere tutte le segnalazioni di problemi che utilizzano lo stack tecnologico suggerito per questo progetto. Happy coding!
User Story#1: La pagina di destinazione del prodotto dovrebbe avere un elemento header con un corrispondente id="header".
User Story #2: Posso vedere un'immagine all'interno dell'elemento header con un corrispondente id="header-img". Un logo aziendale qui starebbe bene.
User Story #3: All'interno dell'elemento #header posso vedere un elemento nav con un corrispondente id="nav-bar".
User Story #4: Posso vedere almeno tre elementi cliccabili all'interno dell'elemento nav, ognuno con la classe nav-link.
User Story #5: Quando clicco su un pulsante .nav-link nell'elemento nav, sono portato nella sezione corrispondente della pagina di destinazione.
User Story #6: Posso guardare un video incorportato del prodotto con id="video".
User Story #7: La mia pagina iniziale ha un elemento form con un corrispondente id="form".
User Story #8: All'interno del modulo c'è un campo input con id="email" dove posso inserire un indirizzo email.
User Story #9: Il campo di input #email dovrebbe avere un testo segnaposto per far sapere all'utente a cosa serve il campo.
User Story #10: Il campo di input #email utilizza la validazione HTML5 per confermare che il testo inserito è un indirizzo email.
User Story #11: All'interno del modulo, c'è un input di tipo submit con un id="submit".
User Story #12: Quando clicco l'elemento #submit, l'email viene inviata a una pagina statica (usa questo URL fittizio: https://www.freecodecamp.com/email-submit).
User Story #13: La barra di navigazione dovrebbe sempre essere in cima alla viewport.
User Story #14: La landing page del prodotto dovrebbe avere almeno una media query.
User Story #15: La landing page del prodotto dovrebbe utilizzare la flexbox CSS almeno una volta.
Puoi costruire il tuo progetto usando questo modello CodePen e cliccando Save per creare il tuo pen. Oppure puoi usare questo link CDN per eseguire i test in qualsiasi ambiente tu voglia: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
Una volta fatto, invia l'URL del tuo progetto di lavoro con tutti i suoi test passati.
--solutions--
// solution required