Quale procedura devo seguire per implementare (codificare) un sito Web in HTML5 / CSS?

Vorrei iniziare con i contenuti che ti servono ed essere abbastanza generoso nell'usare le proprietà id.

Se guardi il link puoi vedere molti esempi di come cambiare drasticamente l'aspetto usando css.

Uso anche il link per decidere quali elementi HTML5 utilizzare in base ai browser a cui tengo, o quali devo aggiungere in javascript a fallire con grazia.

Dovresti usare anche un discreto javascript, link , per mantenere la pagina web pulita e fallire con garbo.

Quindi, inizia con il contenuto, poi guarda il degrado aggraziato con javascript, quindi rendilo carino. Questo sarà iterativo, quindi potrebbe essere necessario rimbalzare tra questi spesso.

Do I need to have an idea of what the site is ultimately going to look like before I start the HTML? Can I just write the HTML to describe the content and worry about the look of the site afterward, or do I have to write the HTML knowing what I want the site to look like as I write it?

Sì, inizia sicuramente con una descrizione di ciò che il sito sta per fare prima di iniziare. Ti renderà la vita molto più facile. Di solito inizio con un blocco note e tracciamo solo una traccia approssimativa di dove questo elemento sta andando, di ciò che voglio che venga indirizzato all'utente, e così via.

If I want a horizontal nav bar at the top, do the links have to be side by side in the HTML code? Yes. The simplest semantic way to do something like this is probably:

<header>
   <nav>
      <ul>
         <li><a href='LINK1'>Link name 1</li>
         <li><a href='LINK2'>Link name 2</li>
         <li><a href='LINK1'>Link name 3</li>
      </ul>
   </nav>
</header>

con alcuni css come:

nav ul li{
   display:inline-block;
}

ti darebbe un buon punto di partenza.

Do I need to have an idea of what the site is ultimately going to look like before I start the HTML? Can I just write the HTML to describe the content and worry about the look of the site afterward, or do I have to write the HTML knowing what I want the site to look like as I write it?

Sì, inizia sicuramente con una descrizione di ciò che il sito sta per fare prima di iniziare. Ti renderà la vita molto più facile. Di solito inizio con un blocco note e tracciamo solo una traccia approssimativa di dove questo elemento sta andando, di ciò che voglio che venga indirizzato all'utente, e così via.

If I want a horizontal nav bar at the top, do the links have to be side by side in the HTML code?

Ma sinceramente, se fossi nella tua situazione, inizierei con un framework CSS come Bootstrap , o Foundation per capire veramente come una buona percentuale di sviluppatori web sta sviluppando il proprio codice.

Se decidi di non iniziare con un framework, almeno segui alcuni standard di codifica di frontend, come l'uso di un sistema di grid ( Simple Grid è uno che mi piace, ma ci sono miliardi qui fuori), o che seguono CSS orientato agli oggetti .

Se sai come funziona HTML / CSS, sono certo che sei consapevole che il concetto di CSS è quello di spostare la presentazione dal contenuto del sito. Quindi per rispondere alla tua domanda potresti scrivere semplicemente i tuoi contenuti e cercare di modellarli in un secondo momento. In realtà, tuttavia, molte persone creeranno un modello HTML / CSS da alcuni wireframe e quindi lavoreranno per renderlo dinamico.

In termini di stile di codice professionale, perché non visualizzare la fonte delle pagine che rispetti e vedere come si presentano. Google ha una guida di stile che potresti voler controllare anche per questo link

Un buon inizio per la creazione di una pagina web dinamica sarebbe guardare in una lingua come PHP. Ci sono molti tutorial su come generare una pagina HTML in questo modo e una volta che hai le basi giù puoi rimuovere parte dello standard associato allo sviluppo web usando un Framework come Zend Framework o Code Igniter (PHP) poiché questo è spesso come vengono sviluppati i servizi web professionali.

Un altro strumento che può semplificarti la vita se desideri affidarti ad altri sviluppatori sarebbe utilizzare un framework UI come il bootstrap per facilitare l'implementazione di HTML / CSS / JS. link

Il mio consiglio è di decidere se si è più concentrati sulla generazione dinamica di pagine Web o semplicemente sulla pubblicazione di file HTML / CSS / JS statici e concentrarsi sulle tecniche necessarie per farlo. Spero che alcune di queste risorse siano utili.

-edit -

Per chiarire il mio consiglio sarebbe di disegnare alcuni wireframe: link prima e poi creare l'HTML / CSS per abbinare questo anche se non devi farlo se non vuoi. Se scegli di scrivere solo il contenuto, il mio consiglio sarebbe di assicurarti di usare tag HTML5 appropriati come article , header , footer ecc. Questo ti renderà la vita più facile quando arrivi a modellarlo.