Con lo sviluppo di così tanti linguaggi di programmazione, stile e markup, l'apprendimento del web design sta diventando più complicato che mai. Fortunatamente, ci sono tonnellate di strumenti disponibili per aiutarti a iniziare. Cerca alcune risorse di base, come tutorial online o un libro aggiornato sul web design. Una volta che sei pronto per iniziare, inizia padroneggiando le basi di HTML e CSS. Quindi puoi iniziare a esplorare linguaggi di web design più avanzati, come JavaScript!
Passi
Metodo 1 di 4: trovare risorse per il web design
Passaggio 1. Controlla online per corsi e tutorial di web design
Internet è pieno di informazioni dettagliate sul web design e molte di esse sono disponibili gratuitamente. Potresti iniziare seguendo alcuni corsi online gratuiti su Udemy o CodeCademy o unendoti a una comunità di codifica come freeCodeCamp. Puoi anche trovare tutorial video di web design su YouTube.
- Se sai esattamente cosa stai cercando, prova a fare una ricerca utilizzando termini specifici (ad es. "selettori di classe nel tutorial CSS").
- Se sei un principiante senza esperienza di web design, inizia imparando le basi della codifica in HTML e CSS.
Passaggio 2. Cerca di seguire un corso in un college o università locale
Se stai frequentando un college o un'università, verifica con il dipartimento di informatica della tua scuola o consulta il catalogo dei corsi per scoprire se sono disponibili corsi di web design. Se non sei a scuola, controlla se qualche college o università vicino a te offre corsi di formazione continua in web design.
Alcune università offrono corsi di web design online aperti a chiunque desideri iscriversi. Controlla siti web come Coursera.org per trovare lezioni di web design gratuite o convenienti tenute da istruttori universitari
Passaggio 3. Prendi alcuni libri di web design dalla libreria o dalla biblioteca
Un buon libro sul web design può essere un riferimento prezioso mentre stai imparando e applicando il tuo mestiere. Cerca libri aggiornati sul web design generale o su formati di codifica e lingue specifici che vorresti imparare.
Leggere riviste e articoli di blog sul web design è anche un buon modo per imparare nuove tecniche, trarre ispirazione e stare al passo con le ultime tendenze
Passaggio 4. Scarica o acquista alcuni software di web design
Un buon software di web design può aiutarti a creare siti web in modo più efficiente ed efficace ed è anche ottimo per aiutarti a imparare i dettagli dell'applicazione di codice, scripting e altri elementi chiave di design. Potresti trarre vantaggio dall'utilizzo di strumenti come:
- Programmi di progettazione grafica, come Adobe Photoshop, GIMP o Sketch.
- Strumenti per la creazione di siti Web, come WordPress, Chrome DevTools o Adobe Dreamweaver.
- Software FTP per trasferire i file finiti sul tuo server.
Passaggio 5. Trova alcuni modelli di siti Web con cui giocare quando inizi
Non c'è niente di sbagliato nell'usare i modelli mentre impari le basi del web design. Fai una ricerca per i modelli di pagina web che ti piacciono e dai un'occhiata da vicino al codice per avere un'idea di come il designer ha messo insieme la pagina. Puoi anche provare a modificare il codice e ad aggiungere i tuoi elementi al modello.
Esegui una ricerca di modelli di siti Web gratuiti per iniziare o sperimenta i modelli forniti con il tuo software di web design
Metodo 2 di 4: Padroneggiare l'HTML
Passaggio 1. Familiarizza con i tag HTML di base
L'HTML è un semplice linguaggio di markup utilizzato per formattare gli elementi di base di un sito web. Puoi formattare diversi elementi del tuo sito web utilizzando i tag. I tag vengono visualizzati tra parentesi angolari prima e dopo ogni elemento e forniscono istruzioni su come funzionerà quell'elemento nella pagina. Per chiudere il tag, metti una / davanti al tag finale all'interno delle parentesi angolari.
- Ad esempio, se vuoi che parte del tuo testo sia grassetto, circonderai l'elemento con il tag, in questo modo: Questo testo è in grassetto.
- Alcuni tag comuni includono (paragrafo), (ancora, che definisce il testo collegato) e (carattere, che può aiutare a definire vari attributi del testo, come dimensione e colore).
- Altri tag definiscono le diverse parti del documento HTML stesso. Ad esempio, viene utilizzato per contenere informazioni sulla pagina che non saranno visibili allo spettatore, come parole chiave o una descrizione della pagina che apparirebbero nei risultati dei motori di ricerca.
Passaggio 2. Impara a utilizzare gli attributi dei tag
Alcuni tag necessitano di informazioni aggiuntive per specificare come dovrebbero funzionare. Queste informazioni aggiuntive vengono visualizzate all'interno del tag di apertura e sono chiamate "attributo". Il nome dell'attributo viene visualizzato immediatamente dopo il nome del tag, separato da uno spazio. Il valore dell'attributo è collegato al nome dell'attributo da un segno = e racchiuso tra virgolette.
- Ad esempio, se desideri rendere rosso parte del tuo testo, puoi farlo utilizzando il tag e un attributo di colore del carattere appropriato, in questo modo: Questo testo è rosso.
- Molti degli effetti che una volta venivano normalmente ottenuti con gli attributi dei tag HTML, come l'impostazione di diversi colori dei caratteri, ora vengono generalmente eseguiti con la codifica CSS.
Passaggio 3. Sperimenta con elementi nidificati
L'HTML consente inoltre di posizionare elementi all'interno di altri elementi per creare formattazioni più complesse. Ad esempio, se volessi definire un paragrafo e poi mettere in corsivo parte del testo all'interno del paragrafo, potresti farlo in questo modo:
Adoro la codifica!
Passaggio 4. Familiarizzare con gli elementi vuoti
Alcuni elementi in HTML non necessitano sia di tag di apertura che di chiusura. Ad esempio, se stai inserendo un'immagine, hai solo bisogno di un singolo tag "img" contenente il nome del tag e tutti gli altri attributi necessari (come il nome del file immagine e qualsiasi testo alternativo che desideri aggiungere per scopi di accessibilità). Per esempio:
Passaggio 5. Esplora il layout di base di un documento HTML
Affinché il tuo sito Web basato su HTML funzioni correttamente, devi sapere come formattare l'intera pagina. Ciò comporta la definizione di dove inizia e finisce il codice html, nonché l'utilizzo di tag per determinare quali parti del codice verranno visualizzate rispetto a quali sono presenti per fornire informazioni di base nascoste. Per esempio:
- Usa il tag per definire la tua pagina come documento HTML.
- Successivamente, inserisci l'intera pagina all'interno dei tag per definire dove inizia e dove finisce il tuo codice.
- Inserisci tutte le informazioni che non verranno mostrate allo spettatore, come il titolo della pagina, le parole chiave e la descrizione della pagina, all'interno dei tag.
- Definisci il corpo della tua pagina (ovvero, qualsiasi testo e immagine che vuoi che lo spettatore veda) con i tag.
Metodo 3 di 4: familiarizzare con i CSS
Passaggio 1. Usa i CSS per applicare gli stili ai tuoi documenti HTML
CSS è un linguaggio per fogli di stile che ti consente di applicare diversi stili e elementi di design alla tua pagina web. Ad esempio, se desideri applicare in modo selettivo un carattere o un colore del testo specifico ad alcuni degli elementi di testo della tua pagina, puoi creare un file CSS per farlo. Quindi, puoi inserire il file CSS nel tuo documento HTML dove preferisci.
-
Ad esempio, se desideri che un file CSS trasformi in verde tutti gli elementi del paragrafo nel documento HTML, puoi creare un file.css contenente le righe:
- P {
- colore: verde;
- }
- Dovresti quindi salvare il file con un nome come style.css.
- Per applicare il foglio di stile al tuo documento HTML, dovresti inserirlo come elemento di collegamento vuoto all'interno dei tag. Per esempio:
Passaggio 2. Acquisisci familiarità con gli elementi di un set di regole CSS
Un singolo pezzo di codice CSS è chiamato "insieme di regole". Il set di regole contiene i diversi elementi che definiscono cosa vuoi che faccia il tuo codice. Questi includono:
- Il selettore, che definisce l'elemento HTML a cui vuoi applicare lo stile. Ad esempio, se desideri che il tuo set di regole influisca sugli elementi del paragrafo, inizierai il tuo set di regole con la lettera "p".
- La dichiarazione, che definisce le proprietà a cui vuoi applicare lo stile (come il colore del carattere). La dichiarazione è contenuta tra parentesi graffe {}.
- La proprietà, che specifica quale proprietà dell'elemento HTML si desidera applicare allo stile. Ad esempio, all'interno del tag, è possibile specificare che si desidera applicare uno stile al colore del testo.
- Il valore della proprietà definisce in modo specifico come si desidera modificare la proprietà (ad esempio, se la proprietà è il colore del carattere, il valore della proprietà sarà "verde").
- È possibile modificare diverse proprietà all'interno di una singola dichiarazione.
Passaggio 3. Applicare CSS al testo per rendere piacevole la composizione
I CSS sono utili per applicare una varietà di effetti al testo senza dover codificare singolarmente ogni proprietà in HTML. Sperimenta con la modifica di diverse proprietà di composizione in CSS, tra cui:
- Colore del carattere
- Dimensione del font
- Famiglia di caratteri (ad esempio, l'intervallo di caratteri che desideri utilizzare nel testo)
- Allineamento del testo
- Altezza della linea
- Spaziatura del carattere
Passaggio 4. Sperimenta con scatole e altri strumenti di layout CSS
I CSS sono utili anche per aggiungere elementi visivi accattivanti alla tua pagina, come caselle di testo e tabelle. Inoltre, puoi usarlo per modificare il layout generale della tua pagina e definire dove sono posizionati i diversi elementi l'uno rispetto all'altro.
Ad esempio, puoi definire attributi come la larghezza e il colore di sfondo di un elemento, aggiungere un bordo o impostare margini che creeranno spazio tra i vari elementi sulla tua pagina
Metodo 4 di 4: Lavorare con altri linguaggi di progettazione
Passaggio 1. Impara JavaScript se desideri aggiungere elementi interattivi alle tue pagine
JavaScript è un ottimo linguaggio da imparare se sei interessato ad aggiungere funzionalità più avanzate ai tuoi siti web, come animazioni e popup. Segui un corso o cerca tutorial online su come codificare in JavaScript e incorporare quegli elementi codificati nelle tue pagine web |usando HTML.
Prima di prendere confidenza con JavaScript, dovrai conoscere le basi della creazione di pagine in HTML e CSS
Passaggio 2. Familiarizza con jQuery per semplificare la codifica JavaScript
jQuery è una libreria JavaScript che può semplificare la programmazione Java consentendo di accedere a una varietà di elementi JavaScript precodificati. jQuery è un ottimo strumento se hai già familiarità con le basi della codifica JavaScript.
Puoi accedere alla libreria jQuery e a molte altre preziose risorse tramite jQuery.org, il sito Web della jQuery Foundation
Passaggio 3. Studia le lingue lato server se sei interessato allo sviluppo back-end
Mentre HTML, CSS e JavaScript sono ideali per i web designer che si concentrano su ciò che l'utente vede e fa sul sito web, i linguaggi lato server sono utili se sei più interessato al lavoro dietro le quinte. Se vuoi conoscere lo sviluppo back-end, concentrati sull'apprendimento di linguaggi come Python, PHP e Ruby on Rails.
Questi linguaggi sono utili per gestire ed elaborare dati che l'utente non vede. Ad esempio, PHP può essere utilizzato per creare strumenti per la creazione di password sicure su siti Web che richiedono un accesso
File di aiuto
Foglio informativo HTML
Foglio informativo CSS
