# Introduzione

Il  luogo ideale per apprendere linguaggi di programmazione attraverso lezioni interattive ed esercizi pratici. Offriamo corsi completi su Node.js, HTML, CSS, Express.JS, PHP e molto altro

## Benvenuti nella Sezione Learning di ZioMark's HUB!

La nostra Sezione Learning è il cuore pulsante per chi desidera approfondire i linguaggi di programmazione attraverso lezioni interattive ed esercizi pratici. Offriamo moduli educativi completi su Node.js, HTML, CSS, PHP, Express, e molti altri linguaggi e tecnologie. Ogni corso è progettato per guidarti dall'apprendimento delle basi fino alla realizzazione di progetti complessi, permettendoti di costruire una solida comprensione teorica e pratica.

{% hint style="info" %}
Le lezioni vengono pubblicate su base regolare, solitamente 1 o 2 lezioni a settimana.
{% endhint %}

Che tu sia agli inizi del tuo percorso di apprendimento o desideroso di espandere ulteriormente le tue competenze, troverai materiale adatto a tutti i livelli. Unisciti a noi per esplorare nuovi linguaggi, risolvere esercizi sfidanti e discutere le tue soluzioni con altri appassionati.

***

> #### Cresci con la nostra community e trasforma la tua passione in expertise!

***


# Strumenti

Nello sviluppo software, l'uso di un ambiente integrato di sviluppo (IDE) o di un editor di testo avanzato può significativamente aumentare la produttività rispetto a un semplice editor come Blocconote. 

Questi strumenti offrono funzionalità come l'evidenziazione della sintassi, il completamento automatico del codice e la gestione integrata dei progetti, che aiutano a scrivere codice più velocemente e con meno errori.

### Visual Studio Code (VS Code)

**Visual Studio Code** è un editor di testo leggero ma potente sviluppato da Microsoft. È gratuito, open source e disponibile per Windows, macOS e Linux.

* **Sito Web**: [Visual Studio Code](https://code.visualstudio.com/)
* **Caratteristiche principali**:
  * Supporto per numerosi linguaggi di programmazione.
  * Integrazione con Git per il controllo versione direttamente dall'editor.
  * Vasta gamma di estensioni disponibili tramite il Marketplace.
  * Debugging integrato.
  * Terminal integrato.
  * Personalizzazione elevata tramite temi e estensioni.

### Atom

**Atom** è un editor di testo open source sviluppato da GitHub. È modulare, molto personalizzabile e anch'esso supporta diversi linguaggi di programmazione.

* **Sito Web**: [Atom](https://atom.io/)
* **Caratteristiche principali**:
  * Interfaccia utente pulita e moderna.
  * Supporto per plugin e temi installabili tramite il gestore di pacchetti integrato.
  * Integrazione con Git e GitHub.
  * Sistema di autocompletamento intelligente.
  * Supporto per il lavoro collaborativo tramite Teletype.

### Sublime Text

**Sublime Text** è un editor di testo avanzato noto per la sua velocità e efficienza. È disponibile per Windows, macOS e Linux ed è particolarmente apprezzato per la sua interfaccia utente snella e le potenti funzionalità di ricerca.

* **Sito Web**: [Sublime Text](https://www.sublimetext.com/)
* **Caratteristiche principali**:
  * Evidenziazione della sintassi per molti linguaggi di programmazione.
  * Funzionalità "Goto Anything" per accedere rapidamente a file, simboli o linee.
  * Ampio supporto per scorciatoie da tastiera per una navigazione veloce.
  * Modalità Distraction Free.

### IntelliJ IDEA

**IntelliJ IDEA** di JetBrains è un potente IDE specificamente progettato per la programmazione Java, ma supporta anche altri linguaggi di programmazione come Kotlin, SQL, JavaScript, Scala e altri.

* **Sito Web**: [IntelliJ IDEA](https://www.jetbrains.com/idea/)
* **Caratteristiche principali**:
  * Analisi del codice in tempo reale.
  * Refactoring del codice estremamente potente.
  * Supporto per framework moderni.
  * Tools integrati per la costruzione, il test e il debugging del software.
  * Gestione di database e strumenti SQL integrati.

### Perché Preferire Questi Strumenti al Blocconote?

Gli IDE e gli editor di testo avanzati offrono una serie di funzionalità progettate per facilitare la scrittura del codice:

* **Evidenziazione della Sintassi e Completamento del Codice:** Aiutano a leggere il codice più facilmente e riducono gli errori.
* **Integrazione con Sistemi di Controllo di Versione:** Facilitano la gestione delle modifiche.
* **Debugging Integrato:** Permette di trovare e correggere bug più velocemente.
* **Supporto per la Gestione dei Progetti:** Aiuta a mantenere organizzati grandi progetti.


# HTML

## Corso di HTML su ZioMark's HUB

**Esplora il mondo del Web con il nostro corso completo di HTML su ZioMark's HUB!** Questo corso è progettato per fornire agli appassionati di tecnologia e agli aspiranti sviluppatori le competenze essenziali per iniziare a costruire siti web da zero. Attraverso lezioni dettagliate e interattive, imparerai tutto ciò che riguarda il HyperText Markup Language (HTML), dalla struttura di base agli elementi più avanzati come form, tabelle e multimedia.

### **Cosa Offre il Corso?**

* **Lezioni Progressive:** Da concetti introduttivi a tecniche avanzate, il nostro corso copre ogni aspetto di HTML, assicurando che anche i principianti possano seguire e crescere.
* **Esercizi Pratici:** Ogni lezione include esercizi pratici che ti permettono di applicare immediatamente ciò che hai imparato, consolidando le tue nuove conoscenze.
* **Supporto Continuo:** Accedi a una community di appassionati e esperti pronti a rispondere alle tue domande e guidarti attraverso i tuoi progetti di coding.

### **Per Chi È Adatto Questo Corso?**

Che tu sia un completo principiante desideroso di capire come vengono costruiti i siti web, o un designer che vuole ampliare le proprie competenze tecniche, questo corso è perfetto per chiunque voglia imparare a creare pagine web accessibili e responsive.

### **Unisciti a Noi e Trasforma la Tua Passione in una Professione**

Non perdere l'opportunità di apprendere una delle competenze più richieste nel mondo del lavoro digitale. Inizia il tuo viaggio di apprendimento con noi su ZioMark's HUB e porta le tue capacità creative al livello successivo


# Parte 1: Introduzione a HTML

Ecco la prima lezione di HTML, una lezione introduttiva che include una panoramica storica, la spiegazione dell'uso e della rilevanza di HTML, e un semplice esercizio per iniziare.

Benvenuti alla prima lezione del nostro corso di HTML! Oggi esploreremo cos'è HTML, la sua storia, perché è così importante nel mondo dello sviluppo web, e come potete iniziare a utilizzarlo per creare le vostre prime pagine web.

### Cosa è HTML?

HTML, che sta per HyperText Markup Language, è il linguaggio di markup standard per la creazione di pagine web e applicazioni web. Con HTML, si possono creare struttura e contenuti di una pagina, come testo, immagini, video e altri elementi interattivi.

### Breve Storia di HTML

HTML fu creato da [Tim Berners-Lee](https://it.wikipedia.org/wiki/Tim_Berners-Lee), un ingegnere e informatico britannico, mentre lavorava al CERN nel 1990. Il primo prototipo di HTML era un linguaggio semplice che permetteva di collegare documenti di testo tramite hyperlink, rendendo facile la navigazione tra di essi. Da allora, HTML è cresciuto enormemente in complessità e capacità, evolvendosi attraverso varie versioni fino all'attuale HTML5, che supporta grafica avanzata, multimedia e molte altre funzionalità per applicazioni web moderne.

### Perché Usiamo HTML?

HTML è la base di tutto il web. È usato per strutturare e organizzare il contenuto sulle pagine internet e funge da fondamento su cui si costruiscono stili ([CSS](/css)) e comportamenti interattivi ([JavaScript](/javascript)). Senza HTML, non ci sarebbero pagine web, solo testo puro e non formattato. Ogni sito web che visitate è costruito usando HTML, rendendolo uno degli strumenti più essenziali per qualsiasi sviluppatore web.

### Esercizio Iniziale

Per iniziare a mettere in pratica quello che abbiamo imparato, creiamo una semplice pagina HTML che contenga un titolo, un paragrafo e un immagine.

#### Istruzioni:

1. Apri il tuo editor di testo preferito.
2. Crea un nuovo file e salvalo con l'estensione `.html`, per esempio `mioPrimoFile.html`.
3. Copia e incolla il codice seguente nel file:

```html
<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <title>La mia prima pagina HTML</title>
</head>
<body>
    <h1>Ciao, mondo!</h1>
    <p>Questo è il mio primo paragrafo in HTML, che eccitante!</p>
    <img src="la_mia_immagine.png">
</body>
</html>
```

4. Salva il file dentro una cartella del tuo pc e successivamente aprilo con il tuo browser preferito (Edge, Google Chrome, ecc...) per vedere la tua prima pagina web!

<figure><img src="https://i.imgur.com/thVQZZG.png" alt=""><figcaption><p>Come aprire il proprio file .html nel browser</p></figcaption></figure>

<figure><img src="/files/9DDBa1lwIVW2fJIirYX7" alt=""><figcaption></figcaption></figure>

### Conclusione

Complimenti! Hai creato la tua prima pagina web utilizzando HTML. Ora hai una comprensione di base di cosa sia HTML, la sua storia e perché è così importante nel design e sviluppo web. Nelle prossime lezioni, approfondiremo altri elementi di HTML, come liste, immagini, form e molto altro.

Buona programmazione e alla prossima lezione!


# Parte 2: Tabelle, Form e \<a>

Ecco la seconda lezione su HTML, concentrata su argomenti più avanzati come le tabelle, i form, e l'introduzione degli elementi \<a href>.

Benvenuti alla seconda lezione di HTML! Dopo aver coperto le basi nella nostra prima lezione, ora esploreremo come utilizzare HTML per creare tabelle, form per la raccolta di dati e introdurremo l'uso degli elementi `<a href>` per i collegamenti.

### Tabelle in HTML

Le tabelle in HTML sono strutturate tramite i tag `<table>`, `<tr>`, `<th>`, e `<td>`:

* `<table>`: definisce il contenitore della tabella.
* `<tr>`: indica una nuova riga (table row).
* `<th>`: sta per table header, usato per intestazioni di colonne o righe.
* `<td>`: table data, usato per i dati nelle celle della tabella.

#### Esempio di Tabella

```html
<table border="1">
  <tr>
    <th>Nome</th>
    <th>Cognome</th>
  </tr>
  <tr>
    <td>Zio</td>
    <td>Mark</td>
  </tr>
  <tr>
    <td>Mark</td>
    <td>Zio</td>
  </tr>
</table>
```

<figure><img src="/files/j5oSMkvmq4n2jRaWjnO6" alt=""><figcaption></figcaption></figure>

### Form in HTML

I form sono utilizzati per raccogliere input dall'utente. Un form è definito con il tag `<form>` e può contenere elementi di input come `<input>`, `<textarea>`, e `<button>`.

#### Esempio di Form

```html
<form action="/submit" method="post">
  <label for="name">Nome:</label>
  <input type="text" id="name" name="name">
  <label for="age">Età:</label>
  <input type="number" id="age" name="age">
  <button type="submit">Invia</button>
</form>
```

<figure><img src="/files/x6OUoPGsUt8LBh9f0Qtn" alt=""><figcaption></figcaption></figure>

### Introduzione a `<a href>`

Il tag `<a>`, noto come anchor tag, è utilizzato per creare collegamenti. L'attributo `href` specifica l'URL della pagina a cui il link deve puntare. Puoi usare `target="_blank"` per aprire il link in una nuova scheda.

#### Esempio di Link

```html
<a href="https://learn.ziomark.xyz" target="_blank">Visita ZioMark</a>
```

<figure><img src="/files/Fv5qXvymUTSgd389T3dM" alt=""><figcaption></figcaption></figure>

### Esercizio Finale

Crea una pagina HTML che contenga una tabella, un form e un link a un sito di tua scelta. Assicurati di:

* Utilizzare almeno due `<tr>` nella tua tabella.
* Includere nel form un campo di testo e un pulsante di invio.
* Aggiungere un link che apra in una nuova scheda.

#### Schema della Pagina

```html
<!DOCTYPE html>
<html>
<head>
  <title>Esercizio HTML</title>
</head>
<body>
  <table border="1">
    <tr>
      <th>Prodotto</th>
      <th>Prezzo</th>
    </tr>
    <tr>
      <td>Libro</td>
      <td>€15</td>
    </tr>
    <tr>
      <td>Caffè</td>
      <td>€1</td>
    </tr>
  </table>

  <form action="/submit" method="post">
    <label for="email">Email:</label>
    <input type="email" id="email" name="email">
    <button type="submit">Iscriviti</button>
  </form>

  <a href="https://learn.ziomark.xyz" target="_blank">Visita Wikipedia</a>
</body>
</html>
```

### Anteprima

<figure><img src="/files/q6z0ZPdVV7idbQ3CHalL" alt=""><figcaption></figcaption></figure>

Questa lezione ti ha fornito una panoramica approfondita su come utilizzare tabelle, form e link in HTML, arricchendo la tua pagina web con elementi interattivi e informativi. Buon lavoro con l'esercizio!


# Parte 3: Attributi di \<a>

Ecco una lezione completa sui vari attributi che possono essere utilizzati in un tag \<a> in HTML con particolare attenzione agli attributi rel="follow" e rel="nofollow".

Benvenuti in questa lezione dedicata alla comprensione degli attributi di collegamento in HTML, focalizzandoci particolarmente su `follow` e `nofollow`, ma esplorando anche altri attributi utili. Questi attributi giocano un ruolo fondamentale nella definizione del comportamento dei link in termini di **SEO** e di interazione utente.

### Cosa sono `follow` e `nofollow`?

In HTML, l'attributo `rel` nel tag `<a>` specifica la relazione tra la pagina corrente e l'URL linkato. Gli attributi `follow` e `nofollow` influenzano come i motori di ricerca interagiscono con questi link:

* **`follow`**: Non è un valore effettivamente utilizzato o necessario. In assenza di un `nofollow`, si presume che il link sia di tipo `follow`, che indica ai motori di ricerca di seguire il link e di considerarlo nel ranking del SEO.
* **`nofollow`**: Questo valore viene usato per dire ai motori di ricerca di non seguire il link a fini di ranking. È utile per linkare siti ai quali non si vuole passare autorità da parte del proprio sito, come nei commenti degli utenti o in link sponsorizzati.

### Altri Attributi Importanti del Tag `<a>`

Oltre a `follow` e `nofollow`, ci sono diversi altri attributi che possono essere utilizzati con il tag `<a>` per controllare comportamenti specifici:

* **`href`**: L'URL della pagina verso la quale il link deve puntare.
* **`target`**:
  * `_blank`: Apre il link in una nuova finestra o tab.
  * `_self`: Apre il link nella stessa finestra o tab (comportamento predefinito).
  * `_parent`: Apre il link nel frame genitore.
  * `_top`: Apre il link nel topmost frame.
* **`title`**: Fornisce informazioni aggiuntive su dove il link porterà. Questo testo appare generalmente come un tooltip quando l'utente posiziona il mouse sul link.
* **`download`**: Questo attributo suggerisce che il link è destinato al download di un file. Quando usato, il browser scaricherà il file anziché navigare verso l'URL.
* **`rel`** (valori aggiuntivi):
  * `noopener`: Impedisce che la nuova pagina aperta possa controllare quella originaria.
  * `noreferrer`: Impedisce il passaggio dell'HTTP referrer header alla nuova pagina.
  * `external`: Indica che il link porta a un sito esterno. Non ha effetti funzionali, ma può essere utilizzato per definire stili CSS specifici.

### Esempi di Utilizzo

Ecco come potresti utilizzare questi attributi in un link HTML:

```html
<a href="https://www.example.com" rel="nofollow" target="_blank" title="Visita Example.com!">Visita Example</a>
```

<figure><img src="/files/eiwqgeiEhqXOT0HsMSn8" alt=""><figcaption></figcaption></figure>

In questo esempio, il link porta a "example.com", dice ai motori di ricerca di non seguire il link, si apre in una nuova scheda, e mostra un tooltip quando l'utente passa il mouse sopra.

### Conclusione

Capire come e quando usare gli attributi di `<a>` può migliorare notevolmente l'usabilità del tuo sito, la sicurezza e la performance SEO. Sperimenta con questi attributi per vedere come influenzano l'interazione degli utenti e dei motori di ricerca con il tuo sito.


# Parte 4: L'Elemento \<img>

Ecco una lezione completa sulla gestione degli attributi dell'elemento \<img> in HTML, perfetta per imparare ad integrare immagini in modo corretto nelle nostre pagine HTML

Benvenuti alla quarta lezione del nostro corso di HTML! Oggi esploreremo in dettaglio l'elemento `<img>`, utilizzato per incorporare immagini in una pagina web. Scopriremo come funziona l'attributo `src` e altri attributi importanti che migliorano la funzionalità e l'accessibilità delle immagini.

## Cos'è il tag `<img>` ?

L'elemento `<img>` è un tag self-closing in HTML, il che significa che non ha una tag di chiusura. È utilizzato per inserire immagini nel documento HTML, rendendo le pagine più visive e coinvolgenti.

## Attributo `src`

L'attributo `src` (source) è l'attributo più importante di `<img>`; specifica il percorso dell'immagine che desideri mostrare sulla pagina web.

### Esempio di Utilizzo di `src`

```html
<img src="immagine.jpg" alt="Descrizione dell'immagine">
```

In questo esempio, `immagine.jpg` è il file dell'immagine che verrà mostrato sulla pagina. Il percorso può essere relativo (come mostrato sopra) o assoluto (incluso un URL completo).

## Attributo `alt`

L'attributo `alt` (alternative text) fornisce una descrizione testuale dell'immagine, che è cruciale per l'accessibilità. Aiuta le persone che non possono vedere le immagini a comprendere di cosa tratta l'immagine, ed è anche visualizzato nel caso l'immagine non possa essere caricata.

### Esempio di `alt`

```html
<img src="logo.png" alt="Logo dell'azienda XYZ">
```

## Altri Attributi Importanti

* **`title`**: Fornisce informazioni aggiuntive sull'immagine quando l'utente passa il mouse sopra l'immagine. Questo testo appare come un tooltip.

  ```html
  <img src="cane.jpg" alt="Un cane marrone che corre nel parco" title="Cane che corre">
  ```
* **`width` e `height`**: Specificano la larghezza e l'altezza dell'immagine in pixel. Questo può aiutare a migliorare il layout della pagina permettendo al browser di riservare lo spazio per l'immagine prima del suo caricamento completo.

  ```html
  <img src="montagna.jpg" alt="Vista di una montagna al tramonto" width="500" height="300">
  ```
* **`loading`**: Questo attributo permette di controllare il caricamento pigro (lazy loading) delle immagini, che è utile per le pagine con molte immagini. Valori: `auto`, `lazy`, `eager`.

  ```html
  <img src="panorama.jpg" alt="Panorama della città" loading="lazy">
  ```

## Esercizio Pratico

Ora che hai imparato a usare l'elemento `<img>` e i suoi attributi, prova a creare una piccola galleria di immagini sulla tua pagina web:

1. Crea un file HTML.
2. Inserisci almeno tre immagini diverse utilizzando il tag `<img>`.
3. Utilizza gli attributi `src`, `alt`, `title`, `width`, `height`, e `loading` dove appropriato.

Ecco un esempio di come potrebbe apparire il tuo codice:

```html
<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <title>Galleria Immagini</title>
</head>
<body>
    <img src="natura1.jpg" alt="Foresta nebbiosa al mattino" title="Foresta Nebbiosa" width="300" height="200" loading="lazy">
    <img src="natura2.jpg" alt="Lago tra le montagne" title="Lago Montano" width="300" height="200" loading="lazy">
    <img src="natura3.jpg" alt="Deserto sotto il cielo stellato" title

="Cielo Stellato nel Deserto" width="300" height="200" loading="lazy">
</body>
</html>
```

## Anteprima

<figure><img src="/files/NwEtJAf71VGsdORmZz0G" alt=""><figcaption></figcaption></figure>

## Conclusione

Ora hai una comprensione solida di come incorporare e gestire immagini in HTML. L'uso appropriato degli attributi `<img>` non solo arricchisce visivamente il tuo sito web, ma contribuisce anche a renderlo più accessibile e performante.


# CSS

Partecipa al corso di CSS su ZioMark's HUB per imparare a creare siti web esteticamente piacevoli e responsive. Dalle basi alle tecniche avanzate, padroneggia il CSS e trasforma il design web!

## Corso di CSS su ZioMark's HUB

**Sblocca il potenziale del design web con il nostro corso approfondito di CSS su ZioMark's HUB!** Questo corso è pensato per aspiranti sviluppatori e designer che desiderano padroneggiare Cascading Style Sheets (CSS), lo strumento essenziale per controllare l'aspetto visivo dei siti web. Dal layout di base alle animazioni sofisticate, ti guideremo attraverso tutto ciò che devi sapere per rendere i siti web non solo funzionali ma esteticamente piacevoli.

### **Cosa Imparerai?**

* **Fondamenti di CSS:** Comprendi le regole, i selettori, e le proprietà che sono la base di ogni stile.
* **Layout e Design Responsive:** Impara a creare layout che si adattano a dispositivi di diverse dimensioni usando Flexbox e Grid.
* **Stilizzazione Avanzata:** Esplora tecniche avanzate come le transizioni, le trasformazioni e le animazioni per aggiungere dinamismo e interattività alle pagine.
* **Best Practices:** Acquisisci competenze su come organizzare i fogli di stile per progetti scalabili e manutenibili.

### **Per Chi È Adatto Questo Corso?**

Questo corso è ideale sia per chi è ai primi passi nel mondo del web design sia per chi ha già delle conoscenze di HTML e vuole migliorare l’aspetto visivo e l’usabilità dei propri progetti web.

### **Unisciti a Noi per Diventare un Maestro del CSS!**

Con esempi pratici, progetti reali e il supporto di una community attiva, sei nel posto giusto per trasformare le tue idee in realtà visivamente impressionanti. Preparati a dare una svolta creativa ai tuoi siti web con il corso di CSS su ZioMark's HUB!


# Parte 1: Introduzione a CSS

Ecco la prima lezione che introduce il CSS, spiegando cos'è, perché è importante per il design web, e un po' della sua storia, seguita da un semplice esercizio pratico.

Benvenuti alla prima lezione del nostro corso di CSS su ZioMark's HUB! In questa lezione, esploreremo cos'è CSS, la sua storia e perché è così cruciale nello sviluppo web moderno.

### Cosa è CSS?

CSS (Cascading Style Sheets) è un linguaggio di fogli di stile utilizzato per descrivere la presentazione di un documento scritto in HTML o XML (inclusi linguaggi basati su XML come SVG o XHTML). CSS definisce come gli elementi devono essere visualizzati sullo schermo, sulla stampa, o in altri media.

### Breve Storia di CSS

CSS fu proposto per la prima volta da [Håkon Wium Lie](https://en.wikipedia.org/wiki/H%C3%A5kon_Wium_Lie) il 10 ottobre 1994. Al momento della sua proposta, il web stava diventando sempre più popolare, ma era limitato in termini di opzioni di design. CSS è stato sviluppato per permettere ai documenti di essere presentati in modi diversi e per garantire che questa presentazione fosse separata dal contenuto del documento, una pratica che è ora un principio fondamentale del web design.

### Perché Usare CSS?

1. **Controllo del Layout:** CSS offre un controllo completo su come gli elementi sono disposti nella pagina, consentendo layout complessi e reattivi.
2. **Riutilizzabilità:** I fogli di stile possono essere usati su più pagine, rendendo il design più coerente e riducendo la duplicazione del codice.
3. **Miglioramento della Manutenibilità:** Separare il contenuto dalla presentazione rende più facile gestire e aggiornare entrambi.
4. **Accessibilità:** CSS può migliorare l'accessibilità del contenuto, permettendo diverse rappresentazioni dello stesso documento per soddisfare esigenze diverse, come grandi stampe, lettori di schermo, e dispositivi mobili.

### Esercizio Pratico

Per questo esercizio, creeremo un semplice documento HTML e applicheremo alcuni stili CSS di base.

#### Istruzioni:

1. Apri il tuo editor di testo preferito e crea un nuovo file chiamato `index.html`.
2. Incolla il seguente codice HTML e CSS:

```html
<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <title>Introduzione a CSS</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 40px;
            background-color: #f8f8f8;
        }
        h1 {
            color: navy;
            margin-bottom: 20px;
        }
        p {
            font-size: 16px;
            color: #666;
        }
    </style>
</head>
<body>
    <h1>Benvenuti al corso di CSS</h1>
    <p>CSS è un linguaggio potente che controlla l'aspetto visivo delle pagine web.</p>
</body>
</html>
```

3. Salva il file e apri `index.html` nel tuo browser per vedere il risultato.

<figure><img src="/files/keASle2wDdEdAIYEfDyj" alt=""><figcaption></figcaption></figure>

### Conclusione

Complimenti! Hai appena creato la tua prima pagina web con stili CSS personalizzati! Hai visto come CSS può influenzare l'aspetto del testo e dello sfondo. Continua a seguire il corso per scoprire più dettagli e funzionalità avanzate di CSS.


# Parte 2: Tailwind CSS

Tailwind CSS è un framework CSS utility-first che permette di costruire rapidamente interfacce utente personalizzate senza uscire dal tuo markup

Tailwind è un framework CSS progettato per essere altamente personalizzabile e facilita lo styling di elementi HTML direttamente nelle classi del tuo markup.

## Perché Usare Tailwind CSS?

* **Rapidità di sviluppo:** Aggiungi stili direttamente nelle tue classi HTML, evitando switch costanti tra HTML e CSS.
* **Personalizzazione:** Facile da personalizzare per adattarsi al design system della tua applicazione.
* **Responsività:** Gestisce la responsività con classi basate su breakpoint facilmente applicabili.
* **Consistenza:** Riduce la duplicazione e aumenta la coerenza utilizzando utility configurabili.

## Installazione di Tailwind CSS

Per iniziare con Tailwind CSS, puoi aggiungerlo al tuo progetto tramite npm o yarn. Qui ci concentreremo sull'installazione con npm.

```bash
npm install tailwindcss
```

Dopo l'installazione, puoi configurare Tailwind nel tuo progetto generando il file di configurazione:

```bash
npx tailwindcss init
```

Questo comando crea un file `tailwind.config.js` che puoi personalizzare secondo le tue necessità.

{% hint style="info" %}
E' possibile inizializzare tailwindcss anche tramite CDN\ <mark style="color:purple;">`<script src="https://cdn.tailwindcss.com"></script>`</mark>
{% endhint %}

## Configurazione del tuo progetto

Dopo aver installato Tailwind, integralo nel tuo foglio di stile. Ad esempio, in un progetto PostCSS:

1. Crea un file CSS (es. `src/styles.css`).
2. Aggiungi le direttive Tailwind per layer:

```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```

Ora Tailwind è pronto per essere utilizzato nel tuo progetto.

## Esercizio Finale: Creazione di una Card

**Obiettivo:** Costruire una card di presentazione per un prodotto utilizzando Tailwind CSS.

### Requisiti:

* La card deve avere un'immagine, un titolo, una descrizione e un bottone.
* Deve essere responsiva e ben organizzata su dispositivi mobile e desktop.

### Codice HTML di partenza:

```html
<div class="max-w-sm rounded overflow-hidden shadow-lg">
  <img class="w-full" src="/img/your-image.jpg" alt="Product Image">
  <div class="px-6 py-4">
    <div class="font-bold text-xl mb-2">Titolo del Prodotto</div>
    <p class="text-gray-700 text-base">
      Descrizione del prodotto qui. Qualcosa di accattivante e breve.
    </p>
  </div>
  <div class="px-6 pt-4 pb-2">
    <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
      Acquista ora
    </button>
  </div>
</div>
```

<figure><img src="/files/C2UVwF8qt0Kz10nw2vHy" alt=""><figcaption></figcaption></figure>

### Istruzioni:

1. Modifica l'HTML e le classi Tailwind per personalizzare il design della tua card.
2. Aggiungi effetti di transizione su hover per il bottone.
3. Assicurati che la card sia responsiva, aggiungendo classi come `sm:`, `md:` per adattare il layout ai vari breakpoint.


# Parte 3: Responsive Design e Media Query

Benvenuti alla Lezione 3 del nostro corso di CSS su ZioMark's HUB. In questa sessione, ci concentreremo sul Responsive Design e sull'uso delle Media Query per creare pagine web che si adattano a vari dispositivi, dal pc al cellulare.

## Cos'è il Responsive Design?

Il Responsive Design è un approccio alla progettazione web che rende le pagine efficaci su una varietà di dispositivi e finestre di dimensioni diverse. Questo si ottiene tramite l'uso flessibile di layout, immagini e CSS.

### Principi chiave del Responsive Design:

* **Fluid Grids:** Utilizzare percentuali per le dimensioni degli elementi anziché pixel fissi.
* **Immagini Flessibili:** Immagini che si ridimensionano all'interno dei loro contenitori.
* **Media Queries:** CSS utilizzato per modificare lo stile di un sito in base alle caratteristiche del dispositivo.

## Introduzione alle Media Query

Le media query sono strumenti potenti in CSS che permettono di applicare stili condizionali a pagine web basate su caratteristiche del dispositivo come la larghezza del viewport, l'orientamento e la risoluzione.

### Sintassi Base

Una media query si compone di un tipo di media e di almeno una query che controlla la presentazione dei contenuti. La sintassi base è la seguente:

```css
@media (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}
```

Questa media query applica uno sfondo lightblue al body solo quando la larghezza del viewport è uguale o inferiore a 600px.

<figure><img src="/files/7C9tVnTSFRw11wdyeIWV" alt=""><figcaption></figcaption></figure>

## Esercizio Finale: Creazione di un Layout Responsive

**Obiettivo:** Creare un layout di pagina che includa un header, tre colonne di contenuto e un footer. Il layout dovrà adattarsi a schermi di smartphone, tablet e desktop.

### Requisiti:

* Header e footer devono estendersi per tutta la larghezza del viewport.
* Le tre colonne devono essere disposte orizzontalmente su schermi larghi e verticalmente su schermi piccoli.

### Codice HTML di Partenza:

```html
<div class="container">
  <header>Header</header>
  <div class="content">
    <div class="column">Colonna 1</div>
    <div class="column">Colonna 2</div>
    <div class="column">Colonna 3</div>
  </div>
  <footer>Footer</footer>
</div>
```

### Aggiungi il CSS Responsive:

```css
.container {
  width: 100%;
}

header, footer {
  background: #333;
  color: white;
  text-align: center;
  padding: 10px 0;
}

.content {
  display: flex;
  flex-wrap: wrap;
}

.column {
  flex: 1 1 33%; /* default to three columns */
  padding: 10px;
}

@media (max-width: 768px) {
  .column {
    flex: 1 1 100%; /* stack on smaller screens */
  }
}
```

### Anteprima

<figure><img src="/files/Ppuk59llQbYmqhePQ76x" alt=""><figcaption></figcaption></figure>

### Istruzioni:

1. Utilizza il codice HTML di partenza.
2. Aggiungi le regole CSS sopra per gestire il layout generale.
3. Modifica le media query per adattare il design al cambiare delle dimensioni dello schermo.


# JAVASCRIPT

Iscriviti al corso di JavaScript su ZioMark's HUB per padroneggiare la programmazione interattiva e creare siti web dinamici. Dalle basi ai framework moderni, diventa uno sviluppatore JavaScript

## Corso di JavaScript su ZioMark's HUB

**Dai vita alle tue pagine web con il nostro corso intensivo di JavaScript su ZioMark's HUB!** JavaScript è il linguaggio di programmazione indispensabile per aggiungere interattività e dinamicità ai siti web. Questo corso è progettato per insegnarti tutto ciò che devi sapere su JavaScript, partendo dalle fondamenta fino alle tecniche più avanzate.

### **Cosa Imparerai?**

* **Fondamenti di JavaScript:** Introduzione alle variabili, tipi di dati, funzioni, e strutture di controllo.
* **Manipolazione del DOM:** Impara a interagire e modificare la struttura della pagina in tempo reale.
* **Eventi e Asincronicità:** Gestisci eventi utente come click e input per creare esperienze utente coinvolgenti e responsive.
* **JavaScript Moderno:** Approfondisci concetti avanzati come ES6+, programmazione funzionale e asincrona.
* **Framework e Librerie:** Introduzione a framework popolari come React, Angular, e Vue.js che estendono le capacità di JavaScript.

### **Per Chi È Adatto Questo Corso?**

Il corso è perfetto per chiunque voglia iniziare a programmare o per sviluppatori che intendono approfondire la loro comprensione di JavaScript e delle sue applicazioni moderne.

### **Trasforma la Tua Capacità di Codifica con JavaScript!**

Con esercizi pratici, progetti reali e il supporto di una community di esperti, questo corso ti metterà sulla giusta strada per diventare un abile sviluppatore JavaScript. Che tu stia creando la tua prima funzione o sviluppando applicazioni complesse, ZioMark's HUB è il luogo ideale per apprendere e crescere.


# Parte 1: Introduzione a JS

Benvenuti alla prima lezione del nostro corso di JavaScript su ZioMark's HUB! Oggi scopriremo cos'è JavaScript, esploreremo un po' della sua storia e vedremo perché è uno dei linguaggi di programmazione più importanti e utilizzati nel mondo dello sviluppo web.

### Cosa è JavaScript?

JavaScript è un linguaggio di programmazione dinamico che può essere eseguito nei browser di tutto il mondo. È essenziale per lo sviluppo di siti web moderni, permettendo agli sviluppatori di aggiungere interattività, manipolare elementi della pagina, e comunicare con server web, tutto in tempo reale.

### Breve Storia di JavaScript

JavaScript fu creato da Brendan Eich nel 1995 mentre lavorava per Netscape Communications. Originariamente noto come Mocha, poi rinominato in LiveScript, e infine in JavaScript, questo linguaggio è cresciuto enormemente in popolarità e funzionalità. Oggi, JavaScript non solo viene eseguito nei browser, ma anche sui server (Node.js) e in molte altre applicazioni grazie alla sua natura versatile.

### Perché Usare JavaScript?

1. **Universale e Onnipresente:** JavaScript è supportato da tutti i moderni browser web senza bisogno di plugin.
2. **Interattivo:** Rende i siti web interattivi e reattivi ai comportamenti degli utenti.
3. **Versatile:** Può essere usato sia per lo sviluppo frontend che backend (con Node.js).
4. **Comunità Vasta:** C'è una vasta comunità di sviluppatori JavaScript e una ricca selezione di librerie e framework, come React, Angular e Vue.js.

### Esercizio Pratico

Per iniziare a familiarizzare con JavaScript, creiamo una semplice pagina HTML che utilizza JavaScript per mostrare un messaggio di benvenuto.

#### Istruzioni:

1. Apri il tuo editor di testo preferito e crea un nuovo file chiamato `index.html`.
2. Incolla il seguente codice HTML e JavaScript:

```html
<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <title>La mia prima pagina JavaScript</title>
</head>
<body>
    <h1>Benvenuto in JavaScript!</h1>
    <button onclick="mostraMessaggio()">Clicca qui!</button>
    <script>
        function mostraMessaggio() {
            alert('Ciao, mondo! Questo è il tuo primo script JavaScript!');
        }
    </script>
</body>
</html>
```

3. Salva il file e apri `index.html` nel tuo browser.
4. Clicca sul pulsante nella pagina per vedere il messaggio di alert.

### Anteprima

<figure><img src="/files/CwO2zM0aExWARc4Z1qPN" alt=""><figcaption></figcaption></figure>

### Conclusione

Complimenti! Hai appena creato la tua prima pagina web che utilizza JavaScript per interagire con l'utente. Continua a seguire il corso per approfondire e espandere le tue conoscenze in JavaScript!


# Parte 2: Lo storage locale

Ecco la seconda lezione sul corso di JavaScript focalizzata su localStorage e IndexedDB. Questa lezione copre le basi di questi due importanti meccanismi di storage sul lato client-

Benvenuti alla seconda lezione del nostro corso di JavaScript su ZioMark's HUB. Oggi, esploreremo due delle opzioni più comuni per la memorizzazione di dati lato client: `localStorage` e `IndexedDB`. Queste tecnologie permettono di salvare dati direttamente nel browser dell'utente, migliorando le prestazioni dell'applicazione e fornendo una persistenza dei dati anche quando la connessione a internet non è disponibile.

### Cosa è `localStorage`?

`localStorage` è una funzionalità che permette ai siti web di salvare coppie chiave-valore nel browser di un utente. I dati salvati con `localStorage` sono persistenti fino a quando non vengono esplicitamente cancellati attraverso il codice o pulendo la cache del browser.

#### Caratteristiche di `localStorage`:

* **Semplicità di uso**: Interfaccia semplice per salvare, leggere e rimuovere dati.
* **Capacità**: Limitato a circa 5MB per dominio.
* **Sincronicità**: Le operazioni di `localStorage` sono sincrone e possono potenzialmente bloccare il thread principale se i dati sono grandi.

#### Quando usare `localStorage`?

`localStorage` è ideale per piccole quantità di dati che non richiedono operazioni complesse e possono essere gestite in modo sincrono. È ottimo per salvare preferenze utente, stati di interfaccia e altri dati di piccole dimensioni.

### Cosa è `IndexedDB`?

`IndexedDB` è un database NoSQL lato client che permette di immagazzinare quantità molto più grandi di dati strutturati, inclusi file/blobs. È una soluzione potente per applicazioni web che necessitano di lavorare con una grande quantità di dati offline.

#### Caratteristiche di `IndexedDB`:

* **Capacità di storage maggiore**: Non ha un limite fisso, ma è influenzato dalla capacità del dispositivo.
* **Supporto per transazioni**: Permette operazioni complesse su più record.
* **Asincrono**: Le operazioni sono asincrone e non bloccano il thread dell'interfaccia utente.

#### Quando usare `IndexedDB`?

`IndexedDB` è adatto per applicazioni che necessitano di gestire una grande quantità di dati o che richiedono operazioni su database come ricerca, aggiornamento e sincronizzazione di dati complessi.

### Esercizio Pratico: Salvare e Recuperare Dati

Ora che abbiamo esplorato `localStorage` e `IndexedDB`, proviamo a utilizzarli con un semplice esercizio.

#### Obiettivo:

* Salvare un oggetto dati in `localStorage` e `IndexedDB`.
* Recuperare i dati al ricarico della pagina e visualizzarli in console.

#### Passaggi dell'Esercizio:

1. **Utilizzo di `localStorage`**:
   * Salva un oggetto dati (es. `{ username: 'ziomark', status: 'active' }`).
   * Al caricamento della pagina, verifica se il dato esiste e stampalo in console.

```javascript
// Salvataggio dei dati in localStorage
localStorage.setItem('userData', JSON.stringify({ username: 'ziomark', status: 'active' }));

// Recupero dei dati da localStorage
const userData = JSON.parse(localStorage.getItem('userData'));
console.log(userData);
```

2. **Utilizzo di `IndexedDB`**:
   * Implementa una funzione per salvare lo stesso oggetto in `IndexedDB`.
   * Recupera e stampa i dati in console al caricamento della pagina.

```javascript
// Creazione di una funzione per inizializzare IndexedDB
function initDb() {
    let db;
    const request = indexedDB.open('myDatabase', 1);

    request.onupgradeneeded = function(event) {
        db = event.target.result;
        db.createObjectStore('users', { keyPath: 'id' });
    };

    request.onsuccess = function(event) {
        db = event.target.result;
        // Salvataggio dei dati
        const transaction = db

.transaction(['users'], 'readwrite');
        const store = transaction.objectStore('users');
        store.add({ id: 1, username: 'ziomark', status: 'active' });

        // Recupero dei dati
        const getRequest = store.get(1);
        getRequest.onsuccess = function() {
            console.log(getRequest.result);
        };
    };

    request.onerror = function(event) {
        console.error('Database error: ' + event.target.errorCode);
    };
}

// Esegui questa funzione al caricamento della pagina
initDb();
```

### Conclusione

Con questa lezione, hai imparato le basi di `localStorage` e `IndexedDB` e come possono essere utilizzati per gestire dati persistenti nel browser. Continua a esplorare queste tecnologie per migliorare le tue applicazioni web.


# NODE.JS

Partecipa al corso di Node.js su ZioMark's HUB e impara a creare applicazioni web efficienti e scalabili. Espandi le tue competenze in sviluppo javascript backend con Node.JS!

## Corso di Node.js su ZioMark's HUB

**Diventa uno sviluppatore backend competente con il nostro corso completo di Node.js su ZioMark's HUB!** Node.js è una piattaforma potente basata sul motore JavaScript V8 di Chrome, che consente di eseguire JavaScript sul lato server. Questo corso ti guiderà attraverso tutto quello che devi sapere per costruire applicazioni web scalabili e performanti con Node.js.

### **Cosa Imparerai?**

* **Concetti Base di Node.js:** Introduzione all'ambiente di Node.js, gestione dei moduli e creazione del primo server.
* **NPM (Node Package Manager):** Impara a utilizzare e pubblicare pacchetti, gestendo dipendenze essenziali per i tuoi progetti.
* **Asincronia in Node.js:** Profondizza concetti come callback, promise e async/await per gestire operazioni asincrone.
* **Costruzione di API RESTful:** Sviluppa API moderne utilizzando Express.js che interagiscono con database e frontend.
* **Testing e Deployment:** Impara le migliori pratiche per testare e distribuire applicazioni Node.js su piattaforme cloud.

### **Per Chi È Adatto Questo Corso?**

Questo corso è ideale per sviluppatori frontend che desiderano espandere le loro competenze nel backend, così come per chiunque sia interessato a costruire applicazioni web moderne e efficienti con JavaScript.

### **Espandi le Tue Competenze in Sviluppo Web!**

Attraverso lezioni dettagliate, esercizi pratici e supporto diretto, questo corso ti prepara a entrare nel mondo professionale come sviluppatore Node.js. Unisciti a noi e inizia a trasformare le tue idee in applicazioni reali e ottimizzate.


# Parte 1: Introduzione a Node.js

## Cosa è Node.js?

Node.js è un ambiente di esecuzione open source per JavaScript costruito sul motore JavaScript V8 di Chrome. Permette agli sviluppatori di utilizzare JavaScript per scrivere strumenti di linea di comando e per script lato server — eseguire script sul lato server per produrre contenuto dinamico prima che la pagina venga inviata al browser dell'utente.

## Perché usare Node.js?

* **Non bloccante, basato sugli eventi**: Node.js usa un modello di I/O non bloccante e basato sugli eventi, rendendolo efficiente e adatto per applicazioni real-time.
* **JavaScript ovunque**: consente di usare JavaScript sia sul client sia sul server, facilitando lo sviluppo web.
* **Vasto ecosistema**: NPM (Node Package Manager) è il più grande ecosistema di librerie open source al mondo, rendendo facile aggiungere nuove funzionalità.

## Installazione

Per iniziare con Node.js, devi installarlo sul tuo computer. Puoi scaricare l'installer più recente da [sito ufficiale di Node.js](https://nodejs.org/).

Dopo aver scaricato e installato Node.js, apri il terminale e digita il seguente comando per verificare l'installazione:

```bash
node -v
```

Questo comando restituirà la versione di Node.js installata, confermando che l'installazione è riuscita.

## Creare il Primo Script

1. **Crea una Nuova Cartella**: Apri il terminale e esegui il seguente comando per creare una nuova cartella e spostarti al suo interno:

   ```bash
   mkdir mioProgettoNode
   cd mioProgettoNode
   ```
2. **Crea un file JavaScript**: Crea un nuovo file chiamato `app.js` usando il tuo editor di testo preferito.
3. **Scrivi il Codice JavaScript**: Apri `app.js` e scrivi il seguente codice:

   ```javascript
   console.log('Ciao, mondo da Node.js!');
   ```
4. **Esegui il Script**: Torna al terminale e digita:

   ```bash
   node app.js
   ```

   Dovresti vedere il messaggio "Ciao, mondo da Node.js!" stampato nel terminale.

## Esercizio Finale

Ora che hai imparato le basi di Node.js, proviamo a creare un piccolo server HTTP:

1. **Crea un file `server.js`**: Nel tuo progetto, crea un nuovo file chiamato `server.js`.
2. **Aggiungi il seguente codice**:

   ```javascript
   const http = require('http');

   const server = http.createServer((req, res) => {
     res.statusCode = 200;
     res.setHeader('Content-Type', 'text/plain');
     res.end('Hello World\n');
   });

   const port = 3000;
   server.listen(port, () => {
     console.log(`Server running at http://localhost:${port}/`);
   });
   ```
3. **Esegui il Server**: Esegui il server con:

   ```bash
   node server.js
   ```

   Ora apri il tuo browser e visita `http://localhost:3000`. Dovresti vedere il messaggio "Hello World".

Complimenti! Hai creato il tuo primo server HTTP con Node.js.


# Parte 2: Integrazione con SQLite

Ecco una lezione completa su Node.js e l'integrazione con SQLite. Questa lezione copre una breve storia di SQLite, cosa è e come si può utilizzare con Node.js, seguita da un esercizio pratico.

Benvenuti a questa lezione su ZioMark's HUB, dove esploreremo come utilizzare Node.js in combinazione con SQLite per creare applicazioni web che interagiscono con un database.

### La storia di SQLite

SQLite è un motore di database relazionale leggero che, a differenza di altri sistemi di gestione di database come MySQL o PostgreSQL, non è basato su un'architettura client-server. SQLite è incorporato direttamente nei programmi. Il progetto è stato avviato nel 2000 da [D. Richard Hipp ](https://en.wikipedia.org/wiki/D._Richard_Hipp)e si è diffuso ampiamente per la sua affidabilità, semplicità e la natura open source, essendo un database ideale per dispositivi embedded, applicazioni per desktop e siti web che necessitano di un setup semplice senza l'onere di gestire un database server separato.

### Cos'è SQLite?

SQLite è un database SQL completo archiviato in un singolo file cross-platform. Supporta gran parte dello standard SQL e non richiede una configurazione separata del server, processo o sistema operativo. È molto usato per applicazioni leggere, soprattutto dove la semplicità e la minima configurazione sono essenziali.

### Integrare SQLite con Node.js

Per utilizzare SQLite con Node.js, possiamo utilizzare il modulo npm chiamato `sqlite3`, che fornisce un'interfaccia asincrona, non bloccante per interagire con il database SQLite.

#### Installazione

Prima di iniziare, assicurati di avere Node.js installato. Poi installa il pacchetto `sqlite3` usando npm:

```bash
npm install sqlite3
```

### Esercizio Pratico: Creare e Interrogare un Database

Per il nostro esercizio, creeremo un semplice database SQLite che gestisce dati degli utenti e scriviamo uno script Node.js per interagire con esso.

#### Passaggi dell'Esercizio

1. **Crea un file `database.js`**: Questo file conterrà il codice per configurare il database.
2. **Inizializza il Database**: Apri il tuo editor di testo e incolla il seguente codice in `database.js`:

```javascript
const sqlite3 = require('sqlite3').verbose();

// Connessione al database SQLite
let db = new sqlite3.Database('./users.db', sqlite3.OPEN_READWRITE | sqlite3.OPEN_CREATE, (err) => {
    if (err) {
        console.error(err.message);
    }
    console.log('Connessione al database riuscita.');
});

// Crea una tabella
db.run(`CREATE TABLE IF NOT EXISTS users (
    id INTEGER PRIMARY KEY AUTOINCREMENT,
    name TEXT NOT NULL,
    email TEXT NOT NULL UNIQUE
)`);

// Chiudi la connessione al database
db.close((err) => {
    if (err) {
        console.error(err.message);
    }
    console.log('Connessione al database chiusa.');
});
```

3. **Esegui lo Script**: Apri il terminale, naviga alla cartella contenente `database.js` e digita:

```bash
node database.js
```

Questo script creerà un database chiamato `users.db` con una tabella `users`. Se il database esiste già, lo script semplicemente si connetterà a esso.

{% hint style="info" %}
Consigliamo la lettura di <https://learn.ziomark.xyz/sql/parte-1-introduzione-a-sql> per conoscere meglio il funzionamento della sintassi SQL (che viene utilizzata anche da sqlite)
{% endhint %}

### Conclusione

Con questa lezione, hai appreso come integrare SQLite in un'applicazione Node.js, creando e gestendo un database direttamente dal tuo codice JavaScript. Queste competenze sono fondamentali per costruire applicazioni web che richiedono una persistenza dei dati efficiente e leggera.

Continua a sperimentare con SQLite e Node.js per esplorare ulteriori possibilità e perfezionare le tue abilità di sviluppo backend.


# EXPRESS.JS

Iscriviti al corso di Express.js su ZioMark's HUB per padroneggiare lo sviluppo di API e applicazioni web con uno dei framework più efficienti di Node.js.

## Corso di Express.js su ZioMark's HUB

**Scopri come costruire applicazioni web veloci e scalabili con il nostro corso di Express.js su ZioMark's HUB!** Express.js è uno dei framework più popolari per Node.js, noto per la sua velocità e minimalismo. Questo corso è progettato per insegnarti a utilizzare Express.js per costruire API RESTful robuste e applicazioni web server-side efficienti.

### **Cosa Imparerai?**

* **Introduzione a Express.js:** Fondamenti del framework e il suo ruolo nell'ecosistema Node.js.
* **Routing Avanzato:** Gestione delle route per organizzare il tuo codice e facilitare la manutenzione.
* **Middleware:** Impara a sfruttare il potere dei middleware per estendere e personalizzare le funzionalità delle tue applicazioni.
* **Gestione degli Errori:** Tecniche per gestire gli errori in modo efficace per mantenere le tue applicazioni stabili e affidabili.
* **Integrazione con Database:** Connessione con database come MongoDB per gestire i dati dell'applicazione.

### **Per Chi È Adatto Questo Corso?**

Il corso è perfetto per sviluppatori Node.js che vogliono approfondire le loro conoscenze e competenze nello sviluppo di applicazioni web. È anche ideale per sviluppatori full-stack e backend che cercano di migliorare la loro efficienza nello sviluppo di API.

### **Diventa un Esperto di Express.js!**

Con una combinazione di lezioni teoriche e progetti pratici, questo corso ti prepara a sfruttare pienamente Express.js per i tuoi progetti di sviluppo. Unisciti a noi e impara a costruire applicazioni più pulite, veloci e modulabili!


# Parte 1: Introduzione a Express.js

Benvenuto nella prima lezione su Express.js! Express è un framework web minimalista e flessibile per Node.js, progettato per rendere più semplice la costruzione di applicazioni web e API. È uno dei framework più popolari nel mondo Node.js per via della sua semplicità e della vasta gamma di plugin disponibili.

## Cosa è Express.js?

Express.js è un framework per applicazioni web per Node.js, rilasciato come software libero e open-source sotto la licenza MIT. È progettato per costruire applicazioni web e API in modo rapido ed efficiente. Express semplifica il routing delle richieste HTTP e la gestione delle risposte, oltre a offrire potenti funzionalità per l'integrazione con "middleware" che permettono di estendere ulteriormente le funzionalità delle tue applicazioni.

## Perché usare Express?

* **Semplicità**: Facilita la costruzione di server web con meno codice e meno complessità rispetto al modulo HTTP nativo di Node.js.
* **Middleware**: Utilizza funzioni middleware per rispondere a richieste HTTP, permettendo di modificare le richieste e le risposte, terminare il ciclo di richiesta/risposta, e chiamare la prossima funzione middleware.
* **Routing**: Gestisce facilmente le richieste a differenti URL e metodi HTTP con un sistema di routing semplice e intuitivo.

## Installazione di Express

Prima di iniziare, assicurati che Node.js sia installato sul tuo computer. Poi, inizia un nuovo progetto Node.js (se non lo hai già fatto durante la lezione di Node.js):

```bash
mkdir mioProgettoExpress
cd mioProgettoExpress
npm init -y
```

Ora installa Express con NPM:

```bash
npm install express
```

## Creare un Server Base con Express

1. **Crea un file `app.js`**: Nel tuo progetto, crea un nuovo file chiamato `app.js`.
2. **Scrivi il seguente codice**:

   ```javascript
   const express = require('express');
   const app = express();
   const port = 3000;

   app.get('/', (req, res) => {
     res.send('Benvenuto nel mondo di Express!');
   });

   app.listen(port, () => {
     console.log(`Server Express in ascolto su http://localhost:${port}`);
   });
   ```
3. **Esegui l'Applicazione**: Nel terminale, esegui l'applicazione con:

   ```bash
   node app.js
   ```

   Ora apri il tuo browser e visita `http://localhost:3000`. Dovresti vedere il messaggio "Benvenuto nel mondo di Express!".

## Esercizio Integrato con Node.js

Modifichiamo il server HTTP che hai costruito nella lezione precedente su Node.js per utilizzare Express. Segui i passaggi per convertire il tuo server HTTP in un server Express:

1. **Modifica `server.js`**: Apri il file `server.js` che hai creato nella lezione precedente.
2. **Aggiorna il Codice**: Sostituisci il contenuto di `server.js` con il seguente codice:

   ```javascript
   const express = require('express');
   const app = express();
   const port = 3000;

   app.get('/', (req, res) => {
     res.send('Hello World con Express!');
   });

   app.listen(port, () => {
     console.log(`Server Express in ascolto su http://localhost:${port}`);
   });
   ```
3. **Riesegui il Server**: Salva il file e riesegui il server:

   ```bash
   node server.js
   ```

   Visita `http://localhost:3000` nel tuo browser. Dovresti vedere il nuovo messaggio "Hello World con Express!".

Complimenti! Hai appena convertito il tuo server HTTP semplice in un server web potenziato con Express.js. Continua a esplorare le funzionalità di Express per costruire applicazioni web ancora più robuste.


# Parte 2: Introduzione ai Middleware

Benvenuti alla nostra lezione su middleware in Node.js utilizzando il framework Express.

I middleware sono funzioni che hanno accesso agli oggetti di richiesta (request), risposta (response), e alla prossima funzione middleware nel ciclo di richiesta-risposta dell'applicazione. Sono uno strumento essenziale per effettuare il preprocessing delle richieste, gestire le risposte, e organizzare il codice in maniera modulare.

## Cosa è un Middleware?

Un middleware è una funzione che viene eseguita tra la ricezione della richiesta e l'invio della risposta nel tuo application server. Questi possono eseguire le seguenti operazioni:

* Eseguire qualsiasi codice.
* Modificare gli oggetti di richiesta e risposta.
* Terminare il ciclo di richiesta-risposta.
* Chiamare il prossimo middleware nella pila.

Se il middleware non termina il ciclo di richiesta-risposta, deve chiamare `next()` per passare il controllo al prossimo middleware, altrimenti la richiesta rimarrà sospesa.

## Implementare Middleware Base in Express

Express è un framework che rende molto semplice implementare middleware. Qui vediamo come aggiungere un middleware semplice che registra la data e l'ora di ogni richiesta.

1. **Crea un file `app.js`**: Inizia creando un nuovo progetto Express se non l'hai già fatto:

   ```bash
   mkdir mioProgettoExpress
   cd mioProgettoExpress
   npm init -y
   npm install express
   touch app.js
   ```
2. **Aggiungi il Middleware per il Logging**: Nel file `app.js`, configura il tuo server Express e aggiungi un middleware che stampa la data e l'ora attuali:

   ```javascript
   const express = require('express');
   const app = express();
   const port = 3000;

   // Middleware che logga la data e l'ora delle richieste
   app.use((req, res, next) => {
     console.log('Time:', Date.now());
     next();
   });

   app.get('/', (req, res) => {
     res.send('Home Page');
   });

   app.get('/about', (req, res) => {
     res.send('About Page');
   });

   app.listen(port, () => {
     console.log(`Server running on http://localhost:${port}`);
   });
   ```

## Middleware per la Gestione degli Errori

I middleware non sono utili solo per loggare o modificare le richieste; possono anche gestire gli errori. Express ha una particolarità: i middleware che gestiscono gli errori hanno quattro argomenti invece di tre. L'argomento aggiuntivo è l'errore che viene passato.

```javascript
// Middleware per la gestione degli errori
app.use((err, req, res, next) => {
  console.error(err.stack);
  res.status(500).send('Something broke!');
});
```

## Esercizio: Creazione di Middleware Personalizzato

Prova a creare un middleware che controlla se una richiesta contiene un certo header, e se non è presente, invia una risposta con status 400 (Bad Request). Questo esercizio ti aiuterà a comprendere come i middleware possono essere usati per validare le richieste in ingresso.

```javascript
app.use((req, res, next) => {
  if (!req.headers['x-custom-header']) {
    res.status(400).send('Bad Request: Missing x-custom-header');
  } else {
    next();
  }
});
```

## Conclusione

Con questa lezione, hai imparato cos'è un middleware, come implementarlo in un'applicazione Express, e come può essere utilizzato per migliorare la gestione delle richieste e delle risposte. I middleware sono potenti strumenti per costruire applicazioni web robuste e sicure.

Continua a esplorare e a sperimentare con i middleware in Express per scoprire come possono migliorare ulteriormente le tue applicazioni!


# PHP

Unisciti al corso di PHP su ZioMark's HUB per imparare a sviluppare siti web dinamici e sicuri. Dal fondamentale accesso ai database alle best practices di sicurezza, diventa uno sviluppatore PHP

## Corso di PHP su ZioMark's HUB

**Esplora il potere del PHP con il nostro corso completo su ZioMark's HUB!** PHP è uno dei linguaggi di scripting lato server più diffusi e potenti, utilizzato per sviluppare siti web dinamici e applicazioni online. Questo corso è strutturato per guidarti attraverso le basi del linguaggio fino alle sue applicazioni più complesse, fornendo tutte le competenze necessarie per costruire e mantenere siti web robusti e sicuri.

### **Cosa Imparerai?**

* **Fondamenti di PHP:** Impara le basi della sintassi PHP, le variabili, i cicli e le condizioni.
* **Manipolazione dei dati:** Gestisci dati provenienti da form, stringhe, e sessioni per creare applicazioni web interattive.
* **Interazione con Database:** Utilizza PHP per connetterti e operare con database MySQL, fondamentale per applicazioni web moderne.
* **Sviluppo di Applicazioni Web Complete:** Costruisci applicazioni CRUD (Crea, Leggi, Aggiorna, Elimina) per comprendere il ciclo di vita completo dei dati.
* **Sicurezza e Best Practices:** Impara a proteggere le tue applicazioni da attacchi comuni come SQL injection e XSS.

### **Per Chi È Adatto Questo Corso?**

Ideale per aspiranti sviluppatori web e programmatori che desiderano ampliare le loro competenze nello sviluppo backend, questo corso fornisce una solida introduzione a PHP e prepara a sfide più avanzate.

### **Trasforma la Tua Carriera con le Competenze in PHP!**

Attraverso lezioni pratiche, progetti reali e il supporto continuo della nostra community, sarai pronto a lanciarti nel mondo del lavoro come sviluppatore PHP competente. Unisciti a noi e inizia a costruire applicazioni web che fanno la differenza!


# Parte 1: Introduzione a PHP

Ecco la prima lezione che introduce PHP, esplorando la sua definizione, l'importanza nello sviluppo web, e un po' della sua storia, seguita da un semplice esercizio pratico

Benvenuti alla prima lezione del nostro corso di PHP su ZioMark's HUB! In questa lezione, esploreremo cos'è PHP, la sua storia e perché è così importante nel mondo dello sviluppo web.

### Cosa è PHP?

PHP (Hypertext Preprocessor) è un popolare linguaggio di scripting lato server utilizzato per sviluppare siti web dinamici e applicazioni web. PHP è particolarmente noto per la sua integrazione con database MySQL, facilitando lo sviluppo di siti web che necessitano di funzionalità di database come forum online, negozi e-commerce, e sistemi di gestione dei contenuti.

### Breve Storia di PHP

PHP fu creato da [Rasmus Lerdorf](https://it.wikipedia.org/wiki/Rasmus_Lerdorf) nel 1994 originariamente come una raccolta di script CGI per tracciare chi visitava il suo curriculum vitae online. I primi script, denominati "Personal Home Page Tools" hanno presto evoluto in ciò che oggi conosciamo come PHP. Nel corso degli anni, PHP è cresciuto in popolarità e funzionalità, diventando uno strumento fondamentale per milioni di siti web in tutto il mondo, inclusi giganti come Facebook e Wikipedia.

### Perché Usare PHP?

1. **Facile da Imparare:** PHP ha una curva di apprendimento relativamente dolce rispetto ad altri linguaggi di programmazione lato server.
2. **Ampio Supporto:** Essendo così diffuso, esistono moltissime risorse, framework e librerie disponibili per facilitare lo sviluppo in PHP.
3. **Flessibile:** PHP è compatibile con la maggior parte dei server web e sistemi operativi.
4. **Integrazione con Database:** PHP si integra perfettamente con diversi tipi di database, il più comune dei quali è MySQL.

### Esercizio Pratico

Per questo esercizio, creeremo una semplice pagina PHP che stampa un messaggio di benvenuto.

#### Istruzioni:

1. Apri il tuo editor di testo preferito e crea un nuovo file chiamato `index.php`.
2. Incolla il seguente codice PHP:

```php
<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <title>La mia prima pagina PHP</title>
</head>
<body>
    <h1><?php echo 'Benvenuto nel mondo di PHP!'; ?></h1>
    <p><?php echo 'PHP è potente!'; ?></p>
</body>
</html>
```

3. Salva il file e caricalo su un server PHP (come [XAMPP](https://www.apachefriends.org/it/download.html), [WAMP](https://www.wampserver.com/en/), o un hosting web che supporta PHP).
4. Visita la pagina nel tuo browser per vedere il risultato.

### Conclusione

Hai appena creato la tua prima pagina web che utilizza PHP per generare contenuto dinamico! PHP è una scelta eccellente per chiunque desideri sviluppare applicazioni web dinamiche e interattive. Continua a seguire il corso per esplorare più a fondo PHP e le sue potenti funzionalità.


# Lezione Bonus: PHP

Lezione Bonus richiesta dagli utenti sul nostro canale discord il: 30/04/2024

Questa lezione copre la creazione del form HTML, il codice PHP per gestire i dati del form, il codice CSS per stylare la nostra pagina e le query SQL per creare il database e la tabella necessari.

#### Step 1: Creare il Database e la Tabella MySQL

Prima di tutto, dobbiamo creare un database e una tabella dove i dati del form verranno salvati. Ecco le query SQL che puoi eseguire tramite PHPMyAdmin o un altro strumento di gestione MySQL:

{% hint style="info" %}
Troverai alcuni degli strumenti consigliati sulla nostra pagina [Strumenti](/sql/strumenti-sql)
{% endhint %}

```sql
-- Creazione del database
CREATE DATABASE IF NOT EXISTS lezioneHtmlPhpSql;

-- Selezionare il database
USE lezioneHtmlPhpSql;

-- Creazione della tabella
CREATE TABLE IF NOT EXISTS utenti (
    id INT AUTO_INCREMENT PRIMARY KEY,
    nome VARCHAR(100) NOT NULL,
    email VARCHAR(100) NOT NULL,
    messaggio TEXT NOT NULL
);
```

#### Step 2: Creare un Form HTML

Creiamo un semplice form HTML che permetta agli utenti di inserire il loro nome, email e un messaggio. Il form utilizzerà il metodo POST per inviare i dati al server.

```html
<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <title>Form di Contatto</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Form di Contatto</h1>
    <form action="salva_dati.php" method="post">
        <label for="nome">Nome:</label>
        <input type="text" id="nome" name="nome" required><br><br>
        
        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required><br><br>
        
        <label for="messaggio">Messaggio:</label>
        <textarea id="messaggio" name="messaggio" required></textarea><br><br>
        
        <button type="submit">Invia</button>
    </form>
</body>
</html>
```

#### Step 3: Scrivere il codice PHP per gestire il form

Quando l'utente invia il form, i dati verranno gestiti dal file `salva_dati.php`. Questo script PHP si connette al database, valida i dati ricevuti e li inserisce nella tabella.

```php
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "lezioneHtmlPhpSql";
$port = 3309; // Porta del tuo server SQL

// Creiamo la connessione con il nostro database mysql
$conn = new mysqli($servername, $username, $password, $dbname, $port);

// Verifichiamo che la connessione sia stata effettuata con successo
if ($conn->connect_error) {
    die("Connessione fallita: " . $conn->connect_error);
}

// Ci prepariamo al bind dei dati voluti
$stmt = $conn->prepare("INSERT INTO utenti (nome, email, messaggio) VALUES (?, ?, ?)");
$stmt->bind_param("sss", $nome, $email, $messaggio);

// Impostiamo i parametri presi dal nostro form HTML e li inseriamo nel database mysql
$nome = $_POST['nome'];
$email = $_POST['email'];
$messaggio = $_POST['messaggio'];
$stmt->execute();

echo "Dati inviati con successo!";
$stmt->close();
$conn->close();
?>
```

Assicurati di sostituire `"username"` e `"password"` con il tuo username e password di MySQL.

Se il tuo database mysql non utilizza alcuna password, puoi lasciare vuoto

#### Step 4: Aggiungere lo stile CSS per migliorare il nostro form

Questo è un'esemplice esempio di come con il CSS possiamo andare a toccare diversi elementi presenti nel nostro codice HTML

```css
body {
    font-family: Arial, sans-serif; /* Usa un font chiaro e leggibile */
    background-color: #f4f4f9; /* Sfondo leggermente grigio */
    padding: 20px; /* Padding intorno al contenuto della pagina */
}
h1 {
    text-align: center;
}
form {
    background-color: white; /* Sfondo bianco per il form */
    padding: 20px; /* Spazio intorno agli elementi del form */
    border-radius: 8px; /* Angoli arrotondati del form */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Ombra leggera intorno al form */
    max-width: 500px; /* Larghezza massima del form */
    margin: auto; /* Centra il form orizzontalmente */
}
label {
    display: block; /* Fa sì che ogni etichetta abbia la sua linea */
    margin-bottom: 5px; /* Spazio sotto ogni etichetta */
    font-weight: bold; /* Rende il testo delle etichette grassetto */
}
input[type="text"],
input[type="email"],
textarea {
    width: 100%; /* Fa sì che gli input si estendano per l'intera larghezza del form */
    padding: 10px; /* Aggiunge spazio all'interno degli input */
    margin-bottom: 20px; /* Spazio sotto gli input */
    border: 1px solid #ccc; /* Bordi sottili per gli input */
    border-radius: 4px; /* Angoli leggermente arrotondati per gli input */
}
button {
    background-color: #0056b3; /* Colore di sfondo per il bottone */
    color: white; /* Colore del testo per il bottone */
    padding: 10px 20px; /* Padding intorno al testo del bottone */
    border: none; /* Nessun bordo per il bottone */
    border-radius: 4px; /* Angoli arrotondati per il bottone */
    cursor: pointer; /* Cursor a forma di puntatore quando si passa sopra il bottone */
    font-size: 16px; /* Dimensione del testo del bottone */
}
button:hover {
    background-color: #004494; /* Cambia colore quando il mouse passa sopra */
}
```

### Anteprima

<figure><img src="/files/2WSNRwYWgkNhOeXAoSHG" alt=""><figcaption></figcaption></figure>

#### Conclusione

Ora hai un form HTML che invia i dati a un server PHP, il quale li salva in un database MySQL. Questo esempio può essere esteso o modificato per adattarsi a molteplici situazioni, come la gestione di più campi o la validazione lato server più avanzata.


# SQL

Impara a gestire database con il corso di SQL su ZioMark's HUB: query, sicurezza, ottimizzazione e molto altro per padroneggiare il database management

## Corso di SQL su ZioMark's HUB

**Impara a gestire e manipolare i dati come un professionista con il nostro corso completo di SQL su ZioMark's HUB!** SQL, o Structured Query Language, è il linguaggio standard per la gestione di database relazionali. Questo corso ti guida attraverso le competenze fondamentali e avanzate necessarie per interrogare, aggiornare e gestire database in modo efficace.

### **Cosa Imparerai?**

* **Fondamenti di SQL:** Comprendi la sintassi di base, le query e le operazioni su tabelle.
* **Operazioni Avanzate:** Impara a utilizzare funzioni avanzate come join, transazioni e subquery per complessi processi di raccolta dati.
* **Ottimizzazione delle Query:** Tecniche per migliorare la performance delle tue query e gestire grandi volumi di dati.
* **Sicurezza del Database:** Principi di sicurezza essenziali per proteggere i dati sensibili.
* **Uso di SQL in Applicazioni Real-World:** Integrazione di SQL con altre tecnologie per costruire applicazioni data-driven.

### **Per Chi È Adatto Questo Corso?**

Questo corso è ideale per analisti di dati, sviluppatori software, e chiunque sia interessato a comprendere il funzionamento interno dei database. Non sono richieste conoscenze preliminari di programmazione, rendendo questo corso accessibile a tutti coloro che desiderano acquisire competenze fondamentali in database management.

### **Diventa un Esperto di Database con SQL!**

Attraverso lezioni dettagliate, esercizi pratici e progetti reali, sarai preparato a utilizzare SQL per qualsiasi sfida di gestione dei dati.


# Strumenti SQL

Lavorare con database MySQL può essere notevolmente facilitato e reso più efficiente attraverso l'uso di strumenti software appositi.

Questi strumenti offrono interfacce grafiche utente (GUI) e altre funzionalità utili che possono aiutare a gestire, manipolare e visualizzare i dati. Di seguito, troverai una lista di strumenti raccomandati per lavorare con MySQL.

## HeidiSQL

HeidiSQL è un potente strumento open source che consente la gestione di database MySQL, MariaDB, Microsoft SQL Server e PostgreSQL. È particolarmente apprezzato per la sua interfaccia leggera e la capacità di gestire facilmente grandi volumi di dati.

* **Sito Web**: [HeidiSQL](https://www.heidisql.com/)
* **Caratteristiche principali**:
  * Interfaccia utente intuitiva
  * Supporto per la creazione, la gestione e il design di database
  * Capacità di eseguire query SQL e batch di script
  * Importazione ed esportazione di dati

## phpMyAdmin

phpMyAdmin è uno strumento web-based molto popolare usato per amministrare MySQL e MariaDB. Essendo basato su web, può essere eseguito su qualsiasi server che supporti PHP.

* **Sito Web**: [phpMyAdmin](https://www.phpmyadmin.net/)
* **Caratteristiche principali**:
  * Interfaccia web accessibile
  * Supporto completo per le operazioni di MySQL
  * Possibilità di esportare e importare dati tramite interfacce grafiche
  * Amministrazione degli utenti e dei permessi

## DBeaver

DBeaver è un gestore di database universale che supporta MySQL, PostgreSQL, MariaDB, SQLite, Oracle, DB2, SQL Server, Sybase, MS Access, Teradata, Firebird, Derby e altri database tramite driver JDBC.

* **Sito Web**: [DBeaver](https://dbeaver.io/)
* **Caratteristiche principali**:
  * Supporto per database multipli
  * Interfaccia utente grafica estensiva
  * Editor SQL avanzato
  * Visualizzazione grafica delle relazioni tra tabelle

## Navicat

Navicat è uno strumento di gestione di database premium che supporta diversi database come MySQL, MariaDB, MongoDB, SQL Server, Oracle, e PostgreSQL. È noto per la sua interfaccia utente pulita e le potenti funzionalità.

* **Sito Web**: [Navicat](https://www.navicat.com/)
* **Caratteristiche principali**:
  * Sincronizzazione dei dati e struttura tra database
  * Backup e ripristino di database
  * Costruttore di query visivo
  * Programmazione di task e notifiche via email

## MySQL Workbench

MySQL Workbench è uno strumento ufficiale fornito da Oracle per il design visuale, la modellazione, lo sviluppo e l'amministrazione di database MySQL. Offre una suite completa di strumenti per ottimizzare la gestione del database.

* **Sito Web**: [MySQL Workbench](https://www.mysql.com/products/workbench/)
* **Caratteristiche principali**:
  * Modellazione dei dati
  * Sviluppo SQL
  * Amministrazione del server
  * Migrazione da database diversi

## Conclusione

Che tu preferisca un'applicazione desktop o un'interfaccia web-based, c'è una varietà di strumenti disponibili per aiutarti a gestire efficacemente i tuoi database MySQL. Scegli lo strumento che meglio si adatta alle tue esigenze per migliorare la tua produttività e gestire i tuoi database con maggiore efficacia.


# Parte 1: Introduzione a SQL

**Obiettivo:** Creare una tabella `Studenti` in un database SQL e inserire dati in essa. L'esercizio aiuterà a comprendere la sintassi per la creazione di tabelle e l'inserimento di righe.

**Istruzioni:**

1. **Accesso all'ambiente SQL:**
   * Utilizza un ambiente SQL online, come il Try-SQL Editor di W3Schools, SQLFiddle, o un sistema di gestione del database (DBMS) installato localmente, come MySQL, PostgreSQL o SQLite, per eseguire i comandi SQL.
2. **Crea la tabella `Studenti`:**
   * Usa il seguente comando SQL per creare una tabella denominata `Studenti`. La tabella dovrà avere quattro colonne: `ID`, `Nome`, `Cognome`, e `AnnoDiNascita`.

     ```sql
     CREATE TABLE Studenti (
         ID int,
         Nome varchar(255),
         Cognome varchar(255),
         AnnoDiNascita int
     );
     ```
3. **Inserisci dati nella tabella `Studenti`:**
   * Ora che hai creato la tua tabella, inserisci almeno tre record in essa. Usa il comando `INSERT INTO` per aggiungere dati.

     ```sql
     INSERT INTO Studenti (ID, Nome, Cognome, AnnoDiNascita) VALUES (1, 'Mario', 'Rossi', 2001);
     INSERT INTO Studenti (ID, Nome, Cognome, AnnoDiNascita) VALUES (2, 'Luca', 'Bianchi', 2002);
     INSERT INTO Studenti (ID, Nome, Cognome, AnnoDiNascita) VALUES (3, 'Giulia', 'Verdi', 2003);
     ```
4. **Verifica i dati inseriti:**
   * Dopo aver inserito i dati, esegui una query `SELECT` per assicurarti che tutti i dati siano stati inseriti correttamente.

     ```sql
     SELECT * FROM Studenti;
     ```
5. **Riflessione:**
   * Esamina i risultati della tua query. Ti vengono restituiti i dati di tutti gli studenti che hai inserito? Ci sono modifiche che potresti voler fare per migliorare la struttura della tua tabella o per correggere eventuali errori?

**Domande Bonus per Approfondire:**

* Come modificaresti la tabella per assicurarti che ogni studente abbia un ID unico?
* Come potresti aggiungere una colonna `Email` alla tua tabella `Studenti`?
* Puoi pensare a un modo per selezionare solo gli studenti nati dopo l'anno 2000?


# Parte 2: Query di Selezione

Ecco la seconda lezione del corso di SQL su ZioMark's HUB, completa di un esercizio pratico finale per la selezione avanzata.

Benvenuti alla seconda lezione del nostro corso di SQL su ZioMark's HUB! Dopo aver introdotto i fondamenti di SQL nella prima lezione, ora approfondiremo le query di selezione, esplorando come recuperare dati specifici da un database in modo più efficiente e potente.

### Filtrare i Risultati con `WHERE`

La clausola `WHERE` è fondamentale in SQL per filtrare i record in base a una condizione specifica. Questo permette di visualizzare solo i dati che rispondono a determinati criteri.

#### Sintassi

```sql
SELECT column1, column2, ...
FROM table_name
WHERE condition;
```

#### Esempio

Supponiamo di avere una tabella `Employees` con i seguenti dati:

| ID | Name    | Age | Department |
| -- | ------- | --- | ---------- |
| 1  | Alice   | 23  | HR         |
| 2  | Bob     | 30  | IT         |
| 3  | Charlie | 34  | IT         |
| 4  | David   | 29  | HR         |

Per selezionare solo gli impiegati del dipartimento IT, useremmo:

```sql
SELECT * FROM Employees
WHERE Department = 'IT';
```

### Ordinare i Risultati con `ORDER BY`

La clausola `ORDER BY` permette di ordinare i risultati di una query SQL. Puoi ordinare i dati in ordine ascendente (ASC) o discendente (DESC).

#### Sintassi

```sql
SELECT column1, column2, ...
FROM table_name
ORDER BY column1 [ASC|DESC], column2 [ASC|DESC], ...;
```

#### Esempio

Per ordinare gli impiegati per età in ordine crescente:

```sql
SELECT Name, Age FROM Employees
ORDER BY Age ASC;
```

### Utilizzo di Funzioni Aggregato

Le funzioni aggregato come `COUNT`, `MAX`, `MIN`, `SUM`, e `AVG` sono usate per eseguire calcoli sui valori di una colonna e restituire un singolo valore.

#### Esempio

Calcolare l'età media degli impiegati:

```sql
SELECT AVG(Age) AS AverageAge FROM Employees;
```

### Esercizio Pratico

Ora che hai appreso come filtrare e ordinare i dati, nonché utilizzare funzioni aggregato, applichiamo queste conoscenze in un esercizio pratico.

#### Scenario

Hai una tabella `Products` con le seguenti colonne: `ProductID`, `ProductName`, `Price`, e `Category`.

| ProductID | ProductName | Price | Category  |
| --------- | ----------- | ----- | --------- |
| 1         | Table       | 85    | Furniture |
| 2         | Chair       | 45    | Furniture |
| 3         | Lamp        | 22    | Lighting  |
| 4         | Desk        | 120   | Furniture |

#### Compito

1. Scrivi una query per trovare tutti i prodotti della categoria "Furniture".
2. Ordina questi prodotti per prezzo in ordine decrescente.
3. Calcola il prezzo medio dei prodotti nella categoria "Furniture".

#### Soluzioni

1. Selezionare prodotti della categoria Furniture:

   ```sql
   SELECT * FROM Products
   WHERE Category = 'Furniture';
   ```
2. Ordinarli per prezzo decrescente:

   ```sql
   SELECT * FROM Products
   WHERE Category = 'Furniture'
   ORDER BY Price DESC;
   ```
3. Calcolare il prezzo medio:

   ```sql
   SELECT AVG(Price) AS AveragePrice FROM Products
   WHERE Category = 'Furniture';
   ```

### Conclusione

Con queste competenze, sei ora in grado di eseguire query complesse e ottenere esattamente i dati di cui hai bisogno dal tuo database.

Nella prossima lezione, esploreremo come unire le tabelle per ottenere informazioni ancora più dettagliate. Continua a praticare con questi esempi per consolidare le tue abilità in SQL!


# Parte 3: Join in SQL

Ecco la terza lezione del corso di SQL su ZioMark's HUB, che approfondisce le tecniche di join per combinare dati da più tabelle, include un esercizio pratico per consolidare le nuove conoscenze.

Benvenuti alla terza lezione del nostro corso di SQL su ZioMark's HUB! Dopo aver esplorato le query di selezione e le funzioni aggregato, questa lezione si concentrerà sulle diverse tecniche di join in SQL, un aspetto fondamentale per lavorare con database relazionali e combinare dati da più tabelle.

### Che Cos'è un Join?

Un join SQL è un'operazione che combina le righe da due o più tabelle, basandosi su una colonna relazionata tra di loro. Ci sono diversi tipi di join che possono essere utilizzati a seconda delle esigenze specifiche della query.

### Tipi di Join

1. **INNER JOIN**: Restituisce le righe quando c'è almeno una corrispondenza in entrambe le tabelle.
2. **LEFT JOIN (o LEFT OUTER JOIN)**: Restituisce tutte le righe dalla tabella a sinistra, e le righe corrispondenti dalla tabella a destra. Se non c'è corrispondenza, il risultato è `NULL` sul lato destro.
3. **RIGHT JOIN (o RIGHT OUTER JOIN)**: Restituisce tutte le righe dalla tabella a destra, e le righe corrispondenti dalla tabella a sinistra. Se non c'è corrispondenza, il risultato è `NULL` sul lato sinistro.
4. **FULL JOIN (o FULL OUTER JOIN)**: Restituisce le righe quando c'è una corrispondenza in una delle tabelle.

### Sintassi di Base dei Join

```sql
SELECT column_name(s)
FROM table1
[TYPE OF JOIN] JOIN table2
ON table1.column_name = table2.column_name;
```

### Esempio Pratico

Immaginiamo di avere due tabelle, `Employees` e `Departments`, dove gli impiegati sono associati ai loro rispettivi dipartimenti attraverso un ID di dipartimento.

#### Tabella `Employees`

| EmployeeID | EmployeeName | DepartmentID |
| ---------- | ------------ | ------------ |
| 1          | Alice        | 1            |
| 2          | Bob          | 2            |
| 3          | Charlie      | 1            |

#### Tabella `Departments`

| DepartmentID | DepartmentName |
| ------------ | -------------- |
| 1            | HR             |
| 2            | IT             |

#### Query con INNER JOIN

```sql
SELECT Employees.EmployeeName, Departments.DepartmentName
FROM Employees
INNER JOIN Departments
ON Employees.DepartmentID = Departments.DepartmentID;
```

Questo restituirà:

| EmployeeName | DepartmentName |
| ------------ | -------------- |
| Alice        | HR             |
| Bob          | IT             |
| Charlie      | HR             |

### Esercizio Pratico

Con le tabelle `Employees` e `Departments` fornite, prova a:

1. Eseguire un LEFT JOIN per visualizzare tutti i dipendenti insieme ai nomi dei loro dipartimenti.
2. Eseguire un RIGHT JOIN per visualizzare tutti i dipartimenti, inclusi quelli senza dipendenti.

#### Soluzioni

1. **LEFT JOIN**:

```sql
SELECT Employees.EmployeeName, Departments.DepartmentName
FROM Employees
LEFT JOIN Departments
ON Employees.DepartmentID = Departments.DepartmentID;
```

2. **RIGHT JOIN**:

```sql
SELECT Employees.EmployeeName, Departments.DepartmentName
FROM Departments
LEFT JOIN Employees
ON Departments.DepartmentID = Employees.DepartmentID;
```

### Conclusione

Ora dovresti avere una solida comprensione di come i diversi tipi di join funzionino e come possono essere utilizzati per combinare dati in modi potenti e flessibili. Queste competenze ti saranno utili per analizzare e gestire efficacemente grandi quantità di dati relazionali.