Le variabili in CSS

html-css

Lo sviluppo web sta diventando sempre più complesso ed articolato, così come i fogli di stile, i CSS che nascevano con poche specifiche per poche esigenze mentre oggi ricoprono un ruolo fondamentale per la realizzazione di software front-end dalle complesse interfacce UI/UX sia per browser che app, persino nelle più comparsate GUI desktop come JavaFX … Leggi tutto

Uso del Flexbox

html-css

Uno dei problemi più ostici per uno sviluppatore web alle prime armi è realizzare un front-end, una interfaccia, con oggetti, foto, contenitori allineati. Esistono diverse tecniche per ottenere il risultato voluto, ma nessuna è semplice ed efficace come il flexbox. Vediamo come usarlo.

Leggi tutto

Pagine HTML con CSS Responsive

In questo articolo vediamo alcune tecniche per rendere le nostre pagine web “responsive”, ovvero capaci di adattarsi allo schermo/dispositivo su cui vengono visualizzate per consentire una fruizione più comoda, mantenendo inalterata l’esperienza utente, che si usi ad esempio un pc con schermo grande, un tablet con uno schermo medio o uno smartphone con schermo piccolo. Vediamo come.

Leggi tutto

Cheatsheet CSS, le proprietà più usate

html-css

Non è facile fare un riassunto delle centinaia di proprietà CSS 3usate nei fogli di stile. Certo è che ce ne sono alcune decisamente più usate e che è quasi irrinunciabile non conoscerle. Lo studente spaesato, con esercizi ripetuti, potrà certamente memorizzarle in modo semplice. Vediamo un prontuario simil cheat sheet suggerito per le esercitazioni a scuola.

Leggi tutto

Form HTML/CSS (intermedio) – Esempio 01

html-css

Una lista di esercizi con form HTML5 e CSS3. Gli esercizi contengono CSS esterni e l’uso dei tag DIV per una formattazione più complessa ma una resa grafica più piacevole ed in linea con la realtà che troviamo sul web. Qui una forma di login con input senza bordi e un bordo blu quando si fa focus/clicca dentro la casella stessa.

Leggi tutto

Esercizio 03 – pagina HTML/CSS

esempio-pagina-dvd

Un esempio cumulativo di tutte le caratteristiche HTML5/CSS3 viste nei precedenti esempi. Un esempio anche visivamente un po’ più carino e realistico di sito web, rispetto ai precedenti ma senza troppe aspettative! Cerchiamo di analizzare le sue singole parti. Come sempre, trovate il codice cumulativo in allegato.

Leggi tutto

Esercizio 00 – pagina HTML/CSS

html-css

Per ogni esempio sono forniti uno schema stilizzato della richiesta, una cartella compressa con la struttura esemplificativa ma realistica del nostro sito con la/le pagine web nel livello più basso, una cartella css per i fogli di stile, una js per gli script javascript ed una img per contenere le immagini. I link all’interno del codice delle pagine devono tener conto di tali percorsi. Quindi il codice è estratto e pubblicato. Le soluzioni proposte non necessariamente sono le uniche valide, possono esistere diversi modi di realizzare una specifica con selettori e fogli di stile differenti. Le soluzioni proposte sono testate su W3C Validator

Leggi tutto