appunti Web

Strumenti

1a

VSCode

Conviene prendere la versione zip

1b

Firefox

Useremo gli strumenti per sviluppatori di Firefox, anche gli altri browser hanno strumenti analoghi ma chi ne usa un altro deve saperlo usare da solo.

1c

Markup Validation Service@W3C

Controllo sintattico di una pagina HTML

1d

Can I use

Per verificare come/se i diversi browser supportano una caratteristica.

HTML

2a

HTML Tutorial@w3schools.com

Materiale interattivo da seguire: headings, paragraphs, formatting, links, images, tables ( general, colspan & rowspan ), lists, block & inline, entities, comments

2b

Cominciare conl'HTML@MDN

Concetti di base per l'HTML sul sito per sviluppatori di moz://a

2c

Introduzione all'HTML @khanacademy.org

video introduzione molto ben fatta all'html

2d

Corso di Introduzione HTML5@weschool

Qui ci sono diversi corsi in italiano e gratuiti… alcuni hanno troppa roba tutta insieme.

2e

HTML Semantic Elements@w3schools.com

Tag semantici di HTML5

2p

  1. struttura dei tag, annidamento, spazi, entità
  2. html, head, body, meta (soltanto con attributo charset)
  3. h1...h6, p, pre, br, strong, em sub, sup, a
  4. img, table
  5. ul ol li
  6. div, span

CSS

3a

CSS Tutorial@w3schools.com

Materiale interattivo da seguire: introduction, syntax, inclusione, selectors, colors, backgrounds, units, borders, margins, padding height/width, box model, outline, text, fonts, display, inline-block, float, combinators, pseudoclassi

3b

Introduction to CSS Grid Layout@mozilladevelopers

Guida all'uso del layout a griglia

3c

Specificity

In base a quale priorità viene scelta una regola oppure un'altra?

3d

CSS Media Queries@MDN

Gestire il rendering della pagina in base al client

3e

introduzione ai CSS@Come fare a...

Articolo che spiega passo passo come funzionano i css.

3g

CSS Grid Layout Module@w3schools.com

3h

A Complete Guide to Grid@CSS-TRICKS

Ancora griglie, guida approfondita.

3i

[...]transitions and animations@prototypr.io

Guida molto approfondita per transizioni e animazioni.

3p

selettori base [*, tag, discendente, figlio, vicino], colori, box, display, griglia, font, position, transizioni, @media

Javascript

4a

da Java a Javascript

Introduzione molto sintetica per chi passa da Java a JavaScript

4b

JS Tutorial @w3schools.com

Introduzione al linguaggio Javascript, da guardare tutti in fila e in particolare: introduction, output, syntax, variables, data types

4c

JavaScript HTML DOM @3wschools.com

Guida alla selezione di parti della pagina web (DOM)

4d

DOM

Indicazioni sintetiche per utilizzare il Document Object Module

4e

HTML Event Attributes@w3school.com

Gestione degli eventi

4f

Node@MDN

Riferimento agli elementi (nodi) che compongono la pagina

4g

creare elementi nel DOM con JavaScript@coding creativo

Come creare e inserire nuovi elementi nella pagina

4h

Tutorial sul linguaggio JavaScript@coding creativo

Una lunga serie di esercizi con soluzioni

4p

sintassi base di JS, manipolare la pagina, timers