BOOTSTRAP: Realizzare il codice di una Pagina Web da un Design Photoshop (1 di 2)

By Andrea Marchetti - 21 Mar , 2016

Nel video tutorial di oggi andiamo a vedere come creare il codice di una Landing Page con Bootstrap, partendo da un Design realizzato in Photoshop.

Scarica la struttura completa:
http://www.marchettidesign.net/moduli/one-page-scroll.html

Bootstrap Starter Kit: http://marchettidesign.net/demo/bootstrap-starter-kit.zip

Video Precedente su come creare una Pagina Web con Photoshop dagli un occhiata:
https://www.youtube.com/watch?v=GKorr9pWBoM

Video Successivo su come aggiungere le funzionalità jquery:
http://www.marchettidesign.net/2016/04/bootstrap-aggiungere-funzionalita-jquery-a-una-landing-page-1-di-2/

Se ti è piaciuto il video iscriviti al nuovo canale YouTube 😉

https://www.youtube.com/channel/UCWT3E1a00seSxCo3amg16AQ

Stay Tuned!


Html + Css Landing Bootstrap

Vuoi il codice HTML e il PSD della landing realizzata? scaricalo dal link qui di seguito.

Scarica la landing

Commenti Facebook

6 Commenti

  1. Pasquale Ricciardi ha detto:

    Davvero interessante, anche se io preferisco lavorare con photoshop e notepad++ 🙂

    Ho notato che stanno uscendo molte cose interessanti con Indesign.

  2. dario ha detto:

    Vorrei far notare una cosa, spero non succeda solo a me. Nel menu quando si clicca su una voce qulalsiasi e diventa “active” e si sposta poi il mouse, questa sparisce. Ho trovato la soluzione in giro aggiungendo .navbar-inverse .navbar-nav > li > a:focus . Grazie per il tutorial molto utile spero di vederne altri prossimamente.

  3. Max ha detto:

    Ciao, sono un web designer alle prime armi e scrivo per capire un po’ il mondo del framework front-end. Premettendo che conosco bene le basi di HTML e CSS, ero intenzionato a provare uno di questi nuovi strumenti per velocizzare alcune parti del coding…ma:
    1) i framework sono veramente troppi e non saprei da quale iniziare: ad esempio, meglio Bootstrap o Foundation per qualcosa di meno “omologato”?;
    2) ho solamente provato Bootstrap e se per la parte html và tutto bene, per la parsonalizzazione dei CSS è un gran caos…non capisco quali regole sovrascrivere per ottenere l’effetto voluto.
    Ho provato modificando le regole a mano ma c’è da impazzire…
    Come si può velocizzare anche questa parte? Grazie

  4. Salvatore Esposito ha detto:

    Giusto una curiosità: vedo che Scrivi a mano il CSS; non sarebbe più opportuno usare Sass per rendere il codice un pò più pulito?

    • afmarchetti ha detto:

      Ciao Salvatore, sass è molto comodo, per fini didattici preferisco scrivere css pulito “a mano” 😉

Commenti chiusi.