56 lines
3.3 KiB
Markdown
56 lines
3.3 KiB
Markdown
|
---
|
||
|
|
id: 587d78af367417b2b2512b04
|
||
|
|
title: Costruire la Landing Page per un prodotto
|
||
|
|
challengeType: 3
|
||
|
|
forumTopicId: 301144
|
||
|
|
dashedName: build-a-product-landing-page
|
||
|
|
---
|
||
|
|
|
||
|
|
# --description--
|
||
|
|
|
||
|
|
**Obiettivo:** Costruire un'app [CodePen.io](https://codepen.io) funzionalmente simile a questa: <https://codepen.io/freeCodeCamp/full/RKRbwL>.
|
||
|
|
|
||
|
|
Soddisfa le seguenti [user story](https://en.wikipedia.org/wiki/User_story) e fai passare tutti i test. Usa il tuo stile personale.
|
||
|
|
|
||
|
|
Puoi utilizzare HTML, JavaScript, e CSS per completare questo progetto. CSS è raccomandato perché è 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 diversi 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 <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>usando questo modello CodePen</a> 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 al tuo progetto di lavoro con tutti i suoi test passati.
|
||
|
|
|
||
|
|
# --solutions--
|
||
|
|
|
||
|
|
```html
|
||
|
|
// solution required
|
||
|
|
```
|