‫Istruttore: Iniziamo ora
‫a creare davvero il nostro modello di base.
‫Quindi il modello su cui si baseranno tutti
‫gli altri modelli in seguito.
‫Quindi, in pratica, convertiremo un normale file html, che
‫si trova nei file di avvio, in un modello Pug.
‫Quindi, in pratica, inizieremo a
‫creare il layout di questa pagina.
‫Quindi questa intestazione qui e anche il piè di pagina.
‫Ok, non il contenuto ovviamente, perché
‫lo costruiremo in modo più dinamico un po'
‫più tardi, ok.
‫Ma lasceremo tutto pronto,
‫in modo da poter poi iniettare tutto questo contenuto reale
‫in quel modello di base generale.
‫Quindi, facciamolo ora.
‫E iniziamo effettivamente liberandoci di
‫tutto questo contenuto che avevamo qui.
‫Quindi questo era davvero
‫solo per mostrarti le diverse caratteristiche di Pug.
‫E ora, apriamo questa panoramica. html, in modo
‫che possiamo praticamente convertirlo qui in Pug.
‫Ok, questo era il file html originale che
‫ho creato per progettare la pagina di panoramica che
‫abbiamo appena visto renderizzata dinamicamente.
‫Ok, questo è ciò che abbiamo in testa
‫e in realtà andiamo avanti e copiamo l'intero codice, in modo
‫da poter convertire ciò che manca qui.
‫Ok, quindi il contenuto del nostro titolo è
‫questo, quindi copiamolo, quindi sbarazziamoci,
‫e quindi questo è il contenuto della pagina principale, giusto.
‫Allora abbiamo già la favicon, e anche lo stile.
‫Quindi quello che ci manca è fondamentalmente questa
‫roba qui, per la risposta
‫dello sviluppo web, e anche questo collegamento al font di Google, ok.
‫Quindi, iniziando
‫da quello, instilla un
‫foglio di stile, quindi prendiamo questo
‫riferimento e sostituiamolo con virgolette singole.
‫Ok, allora voglio anche definire questi due, quindi
‫tagliamoli qui e
‫convertiamo semplicemente tutto ciò che abbiamo qui.
‫Va bene.
‫Oh e anche le virgolette singole.
‫Ok, mettiamo questo alla fine, quindi
‫questo è il nostro cappello per il nostro modello.
‫Successivamente, diamo un'occhiata all'intestazione.
‫Ok, quindi in pratica abbiamo questo intero elemento qui, con
‫solo un'intestazione in modo che la barra grigio scuro che hai visto
‫lì nella parte superiore della pagina.
‫E quindi
‫copiamo questo e mettiamolo qui.
‫Quindi, questo è un
‫sacco di codice e vedrai quanto poco codice sarà effettivamente in
‫seguito, una volta tradotto in Pug.
‫Ok, e qui ora mettiamo effettivamente
‫un commento visibile nel nostro html, dicendo HEADER.
‫Ok, quindi in realtà è senza il trattino.
‫Quindi, nel codice VS, quando premo il collegamento
‫al commento, crea automaticamente un commento Pug.
‫Ma qui, voglio davvero solo
‫un commento, disponibile anche nell'output html.
‫Comunque, ora creiamo l'elemento header e
‫vediamo cosa abbiamo qui.
‫Quindi abbiamo header con la classe di header.
‫E tutto ciò che dobbiamo fare per specificare
‫una classe è DOT e quindi il nome della classe.
‫Quindi, di nuovo intestazione.
‫Quindi, lì dentro, abbiamo un elemento nav.
‫E così, rientro, e poi nav. nav che è di nuovo il nome
‫della classe qui, e poi
‫abbiamo anche un altro nome di classe, e
‫così, un altro punto.
‫E questo è tutto.
‫Quindi tour di navigazione.
‫Quindi, se hai familiarità con l'architettura CSS, forse
‫stai vedendo che sto usando l'architettura BEM.
‫E quindi, nav è il blocco
‫e quindi qui questo tour è un modificatore.
‫E qui questi underscore sottolineano che questo
‫è un blocco o in
‫realtà un elemento.
‫Quindi blocco, elemento e modificatore.
‫Ok, quindi non è
‫molto importante, ma volevo solo menzionarlo.
‫Ad ogni modo, all'interno della navigazione,
‫abbiamo un elemento di collegamento.
‫Quindi, a, con la classe di nav__el.
‫Quindi qui abbiamo questo attributo href e quindi,
‫ricorda che usiamo le parentesi, quindi href
‫e
‫non lo impostiamo su niente.
‫Quindi, in pratica, questo è ciò che significa questo hash qui.
‫E poi, semplicemente il contenuto, quindi
‫tutti i tour.
‫Successivamente, abbiamo questo modulo qui, ma
‫in realtà non lo implementeremo
‫a questo punto.
‫Quindi liberiamocene.
‫Va bene e quindi questa è la nostra navigazione.
‫Quindi, questo codice
‫qui è sostanzialmente equivalente a questo.
‫E così il prossimo, abbiamo questo logo di intestazione.
‫Quindi, nuova riga, ma un livello indietro,
‫nel rientro in modo che sia allo stesso
‫livello della navigazione.
‫Quindi, proprio come è qui, giusto.
‫Ora, quando
‫è un div, non dobbiamo nemmeno dire div. headerlogo, in questo caso.
‫Quindi, quando si
‫tratta di un div, che è una specie di elemento block standard
‫in html, tutto ciò di cui abbiamo bisogno
‫è il punto e questo creerà automaticamente un elemento div.
‫Poi lì dentro, abbiamo questa immagine,
‫e quindi ovviamente ha bisogno di un paio di attributi, che
‫è il primo, la fonte.
‫Quindi immagine, logo, bianco. png, e poi
‫anche il testo alternativo, okay.
‫Successivamente, abbiamo quest'altra navigazione qui, e quindi di nuovo, è
‫allo stesso livello della
‫prima navigazione e di questo div.
‫Quindi un livello indietro nel
‫rientro e crea un nuovo elemento nav con il
‫class nav e l'utente class nav.
‫Poi lì dentro c'è un
‫collegamento, molto
‫simile a questo, quindi copiamolo per risparmiare un po' di tempo.
‫E poi qui dice: Le mie prenotazioni.
‫Poi un altro, e in realtà copiamolo di nuovo con la
‫differenza che non ha questo contenuto, ma
‫invece ha del contenuto in più al suo interno.
‫Così questo.
‫Quindi, di nuovo molto facile, immagine,
‫con la fonte, . jpg.
‫E ha anche un nome
‫di classe, quindi modifichiamo qui con il punto.
‫Quindi, nav, immagine utente.
‫E poi semplicemente una spanna dicendo Jonas.
‫E, come
‫puoi vedere, questa sarà effettivamente la parte
‫dinamica di questa intestazione.
‫E quindi in realtà tutto questo qui
‫diventerà un punto all'inizio.
‫Ok, ma comunque, finiamo di codificare questa parte qui.
‫Quindi, in pratica, questi due
‫pulsanti, quindi il pulsante di accesso e il pulsante di registrazione.
‫Quindi, ovviamente, non avrai il login
‫e il pulsante di registrazione allo stesso
‫tempo di avere questa navigazione utente qui.
‫Quindi le mie prenotazioni e poi il nome dell'utente, ok.
‫Ma di nuovo, mettiamolo qui per ora, e
‫poi commentiamo cosa non ci serve.
‫Quindi, pulsante, elemento di navigazione e anche elemento di navigazione
‫e quindi il modificatore cta per la registrazione.
‫E in realtà ce n'è anche uno prima di quello per il login, giusto.
‫Quindi, questo è questo.
‫Ok e quindi è davvero così.
‫Quindi questa
‫è l'intestazione, e vedi che
‫questo codice qui è equivalente a tutto ciò che abbiamo
‫qui che sembra molto più confuso, se
‫almeno me lo chiedi.
‫Quindi, cancellalo, e come ho detto,
‫questa navigazione utente qui, questa
‫parte sarà disponibile solo quando qualcuno
‫avrà effettuato l'accesso.
‫E quindi per ora, commentiamo completamente tutto questo.
‫Bene, quindi ora abbiamo il contenuto e quindi aggiungiamo un altro commento
‫qui e nel
‫nostro html, in realtà tutto
‫ciò che aggiungeremo ora è
‫questa sezione qui con la classe di panoramica.
‫Perché poi è lì che abbiamo tutte
‫queste schede di contenuto,
‫che ancora una volta, per ora, non includeremo lì.
‫Quindi, di nuovo, quello che
‫stiamo facendo ora è davvero solo uno scheletro, per così dire.
‫Va bene, allora sezione. panoramica.
‫Panoramica.
‫E per ora, mettiamo semplicemente un h1 qui
‫con il nome del tour che sta arrivando come variabile.
‫Va bene e ovviamente questa
‫sezione qui deve essere allo stesso livello di questa intestazione, fantastico.
‫Quindi tutto ciò che ci manca ora è il piè
‫di pagina alla fine della pagina.
‫Quindi andiamo lì e ci siamo.
‫Prendiamo tutto questo.
‫E questo dovrebbe essere effettivamente un elemento piè di pagina,
‫non solo un normale div.
‫Quindi un elemento footer con la classe footer, quindi un div, con
‫il logo class of footer, e così
‫di nuovo, non ho nemmeno bisogno di specificare l'elemento div.
‫Poi abbiamo un'immagine qui,. png e quindi
‫spero che digitando tutto questo da solo, fondamentalmente a mano, ti faccia mantenere
‫questa conoscenza su come tutto questo funzioni un po' meglio.
‫Ok, quindi questo è alt e ora questa navigazione a
‫piè di pagina, quindi un elenco non
‫ordinato, e ora lì dentro abbiamo un paio di
‫elementi dell'elemento dell'elenco.
‫Quindi elenca gli elementi, e poi lì dentro c'è un collegamento
‫in ciascuno di essi.
‫Quindi, fondamentalmente un con l'href del nulla.
‫E poi, Chi siamo.
‫Ora, qui in questa situazione, aver bisogno di
‫questa riga in
‫più solo per specificare questo li, non è proprio l'ideale.
‫Quindi quello che possiamo
‫fare qui è usare i
‫due punti, in questo modo, e quindi mettere tutto sulla stessa riga.
‫E quindi funzionerà ancora come se ci fosse una
‫nuova riga con un rientro,
‫ma fondamentalmente ci consentirà di fare tutto sulla stessa riga.
‫Ok, allora per qualche ragione l'evidenziazione della
‫sintassi smette di
‫funzionare, ma beh, non è così importante.
‫Quindi scarica le applicazioni, diventa
‫una guida, carriere.
‫Ed è proprio così.
‫Successivamente, abbiamo questo piè di
‫pagina, copyright, e quindi qui abbiamo solo un mucchio di testo.
‫Quindi qui specifica il
‫simbolo del copyright, ed è di Jonas Schmedtmann.
‫Quindi, sono io e proprio come in tutti i miei altri
‫corsi, voglio che tu sappia che sei libero di usare
‫questo progetto per te stesso.
‫Quindi fondamentalmente per inserirlo nel tuo portfolio o per
‫mostrare a chiunque tu voglia, che hai costruito
‫questo progetto nel mio corso.
‫Ora quello che non puoi fare è creare il tuo corso
‫basato su questo progetto.
‫Ed è triste doverlo dire, ma ovviamente ci sono
‫state persone che hanno usato il mio
‫progetto, fondamentalmente per mettere dei corsi gratuiti su
‫YouTube, dove hanno copiato i miei progetti, uno per uno.
‫Ok, quindi lascia che lo scriva qui.
‫Per i tuoi scopi, ad eccezione
‫della produzione, ovviamente, dei tuoi corsi o tutorial.
‫Ok e in effetti è così.
‫Va bene, quindi
‫questa è fondamentalmente la traduzione dello scheletro
‫che abbiamo qui, ovviamente eccetto il contenuto.
‫Ok, quindi non ne abbiamo più bisogno.
‫E, giusto per finire, diamo una rapida occhiata
‫e infatti, ecco il nostro contenuto.
‫Ora questo qui sembra un po' fuori posto perché questo
‫testo sul copyright qui è così lungo.
‫Quindi, fondamentalmente questa navigazione a piè di pagina.
‫Ma poiché questo è un contenitore flessibile, dovremmo essere
‫in grado di risolverlo
‫con un contenuto giustificato, flex-end, non questo.
‫Ok, e non preoccuparti se non hai familiarità con
‫i CSS, o anche con Flexbox, questo è solo
‫per risolvere semplicemente visivamente
‫il piccolo problema che abbiamo avuto qui.
‫Quindi cerchiamo il footer qui.
‫Eccoci qui.
‫Risolvilo qui e se
‫ora ricarichiamo,
‫sì, allora siamo a posto, perfetti.