Creare un Sito Html/CSS Modulare con BEM #1 – Intro & Menu

By Andrea Marchetti
@marchetti_design

In questa nuova serie andiamo a vedere come creare un sito modulare con la convenzione BEM.
Grazie a questa convenzione possiamo creare strutture HTML/CSS suddivise in moduli che possiamo estrapolare dalla pagina e riutilizzare in altre parti del nostro sito.

Nella prossima lezione realizzeremo la cover: https://www.marchettidesign.net/2016/09/creare-un-sito-htmlcss-modulare-2-cover/

Scarica il codice della struttura realizzata qui: http://bit.ly/marchetti-design-community

Questo approccio alla creazione di Siti Web rende più chiaro e facile capire come sia strutturato il codice.

Struttura base di partenza

Come base di partenza del nostro sito non useremo nessun framework HTML/CSS, faremo tutto con normale codice HTML/CSS scritto con la convenzione BEM.
Le uniche risorse che dobbiamo includere al nostro progetto sono il file di reset CSS Normalize.css (che serve per ottimizzare l’interpretazione dei CSS da parte dei vari Browser) e Jquery (che utilizzeremo per animare il menu).

Modulo Header

Una volta inseriti Normalize e Jquery possiamo partire a scrivere il codice della nostra struttura. Suddivideremo la pagina in moduli. Oggi realizziamo il modulo Header che conterrà il Logo e il Menu Responsive del nostro sito web modulare.

Video introduttivo su BEM: https://www.marchettidesign.net/2016/06/bem-scrivere-css-facili-da-comprendere-mantenibili-e-scalabili/

Video su Emmet: https://www.marchettidesign.net/2016/04/emmet-il-tool-essenziale-per-i-web-developers/

Video su Clearfix & Float: https://www.marchettidesign.net/2016/06/capire-la-proprieta-css-float-per-creare-layout-responsive-perfetti-1-elementi-e-testo/

Se ti è piaciuto il video iscriviti al nuovo canale YouTube 😉
https://www.youtube.com/channel/UCWT3E1a00seSxCo3amg16AQ

Stay Tuned!

Commenti

  1. Avatar Marco ha detto:

    ciao, volevo farti i complimenti per i video tutorial sull’Html/CSS, molto chiari, semplici e si seguono in modo piacevole.
    Volevo farti anche una domanda, tra gli elementi del menu ITEM rimane dello spazio, si tratta di circa 5px tra i primi 2 elementi e ultimi 2 e di circa 3 px tra gli elementi centrali.
    Volevo far combaciare gli elementi in modo che non ci fosse spazio tra loro ed ho provato ad usare margin-right: margin-left: impostando un valore negativo -x ma il risultato non è stato molto soddisfacente sopratutto perchè la distanza tra gli elementi non è costante.
    Avresti qualche consiglio?
    grazie!

  2. Avatar Vito ha detto:

    Non riesco a scaricare il codice della struttura. Forse non ho capito il sistema di download ma a me sembra troppo faraginoso.
    Inoltre, non riesco a entrare nella quinta parte del corso di JS.
    Il link mi porta ai Commenti per Marchetti Design.
    Hai abbandonato il progetto, oppure è ancora in itinere?

    Grazie, comunque, per tutto il bellissimo lavoro che hai fatto e che hai messo a disposizione di tutti noi.

  3. Avatar Elvis Milani ha detto:

    Ciao Andrea.
    Complimenti davvero per i tuoi video. Sono registrato alla newsletter ma cmq ogni volta che cerco di scaricare gli esempi mi rimanda al link di registrazione. Quando inserisco l’email mi dice che sono già iscritto alla newsletter. Sto sbagliando qualcosa? Grazie

    • afmarchetti ha detto:

      Ciao Elvis,
      scusami per l’inconveniente ho da poco cambiato il metodo di registrazione per renderlo più semplice,
      prova a disiscriverti e reiscriverti dovresti accedere alla pagina con tutte le risorse senza problemi..

  4. Avatar rino ha detto:

    ciao, io non ho ricevuto alcun link nella mail di registrazione…
    Dove scarico il codice sorgente della lezione?

    • afmarchetti ha detto:

      Ciao,
      per accedere alle risorse devi confermare l’iscrizione alla mailing list cliccando nella prima mail ricevuta:

      “Sì, confermo la mia iscrizione alla mailing list”

      A seguire riceverai le credenziali per accedere.

Rispondi a Marco Annulla risposta

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Share