
Benvenuto/a!
Video introduttivo.
Iscriviti al mio canale Youtube per seguire gli Esperimenti con il Codice.
Accedi al canale e segui Video o Playlist
Se la Promozione è scaduta e il corso di interessa, scrivimi e ti genero un coupon personale.
Nelle risorse troverai il link.
In questa lezione, ti mostro come scaricare una prova gratuita di 30 giorni dell'ultima versione di Illustrator o Photoshop.
Ti mostrerò anche alcuni software gratuiti che potrai usare per ritagliare immagini o manipolare le immagini senza dover acquistare nessun software a pagamento.
In questa lezioni ti mostro quanti soldi puoi guadagnare facendo questa carriera. Tutto questo va in base solo ed esclusivamente alle tue capacità, non deve essere un parametro univoco per tutti.
Uno sviluppatore Web oltre saper scrivere il codice deve essere in grado di apportare modifiche velocemente sopratutto quando ci viene inviato un layout grafico da una persona che non sa nulla di Web, e che quindi crede di aver disegnato una pagina Web perfetta, per poi scoprire che misure, colori, tipografie sono errati.
Capita spesso e non possiamo certo arrabbiarci ogni volta, o sminuire il lavoro altrui, la cosa più intelligente è riparare il problema in corso d'opera nel modo più veloce e flessibile possibile.
Fino ad ora non ti ho parlato di nessuna linea di codice, questo perché ancor prima di scrivere una linea di codice dobbiamo sapere dove scriverle e quali strumenti sono necessari.
In questa lezioni ti mostro cosa scaricare dal web "gratis" e quali sono i passaggi successivi una volta che hai tutti gli strumenti a portata di mano.
Atom
Installare qualche browser, Chrome, Opera, Safari, Firefox
Github Desktop
In questo corso devi saper che non troverai tutte le proprietà per la creazione di una pagina web, infatti uno strumento di cui dovrai abituarti sia tu che stai iniziando che anche i più esperti sono le documentazioni, senza di queste saremmo tutti spacciati, proprio perché imparare tutto a memoria non ha alcun senso.
Ma sapere dove andare a cercare è la cosa migliore da fare.
Anche se questo non è un corso per disegnatori grafici, o di visual design, è importante conoscere quanto meno le fondamenta di cosa e come è formato anche un semplice rettangolo.
Durante il corso non accenneremo MAI a se un disegno è bello o brutto, in quanto è abbastanza soggettivo e dipende anche dal nostro pubblico, e sopratutto creare disegni efficaci spesso richiede molto tempo e non tutti i clienti hanno il budget per realizzarlo.
Il web può essere incredibilmente complesso, ma andremo a "s-granulare" i pezzetti del puzzle e ridurre al minimo il design senza dover entrare nel dettaglio.
Tutto ciò lo possiamo ridurre a 7 elementi di base:
Linee
Forme
Trame
Strutture
Tipografie
Colori / sfumature
Moduli
Oltre questo elementi base, vedremo cose è necessario a una struttura per rendere il "tutto" più leggibile.
In una pagina web è necessario tenere presente i concetti di grafica "anche se non sei un grafico" e sono i seguenti:
Equilibrio dei contenuti
Proporzione delle immagini e del testo
Spazio tra gli elementi
Dominanza
Gerarchia degli elementi
Unità di misura
Tutto questo lo si può ridurre in qualcosa che viene chiamato C.R.A.P
Come aprire il terminale:
MAC = Applicazioni / Utility / Terminale
WIN = Cambia in base alla versione di Windows che hai installato, cerca su google "prompt comandi windows"
Ricorda
Seguimi sul canale Youtube per vedere gli esperimenti con il codice.
Creare un progetto nuovo
Usare il terminale per creare un file index.html
Usare Atom pre creare un file index.html
Cosa sono i tag
I tag <h1>
Il tag <p>
Il tag <br>
Il tag <small>
Il tag <strong>
Come si legge l'ispeziona elemento
Selezionare i Tag
Modificare lo stile di un tag attraverso l'ispeziona elemento
Indentazione (Migliorare la lettura del codice )
Aggiungere i tag corretti alla pagina web
Doctype
Html
Head
Body
Title
h1
Modificare le preferenze di Atom
Dove documentarsi sul html
Commentare nel codice html
Elenchi puntati
<ul>
<ol>
<li>
Il tag <img>
Aggiungere la larghezza
Aggiungere l'attributo alt
Il tag <table>
Il tag <tr>
Il tag <td>
Il tag <input>
Il tag<form>
Il tag <a>
Creare una pagina contatti.html
Creare un collegamento ipertestuali
Gli Elementi Block
Gli Elementi Inline
Il tag <div>
Assegnare un nome al div che può essere Class o Id
Questa non è una lezione di informatica. Leggi il testo che ho inserito.
Cosa sono gli stili
Scrivere le proprietà Css nella stessa pagina
Aggiungere la proprietà border
Collegare i font di Google alla pagina
Assegnare Il font alla pagina
Quando usare una Class o un ID
Assegnare uno stile ad un div
Assegnare uno stile ad un div con ID
Assegnare uno stile ad un div con una Class
Aggiungere proprietà css su un tag
Cos'è l' !important
Creare un nuovo foglio di stile CSS esterno
Collegare il foglio di stile alla pagina Html
Creare la struttura per una pagina web
Creare cartelle per immagini e css
Modificare i percorsi delle immagini e stili
Analizzare il tag <body>
I margini Top / Left / Bottom / Right
Rimuovere i margini della pagina
Rimuovere i margini dai tag
Scrivere le proprietà dei margini Top / Left / Bottom / Right in una sola linea
Il padding Top / Left / Bottom / Right
Differenza tra Margin e Padding
Cos'è il Box-sizing
Proprietà Float
Proprietà Clear
Creare un semplice Layout
Proprietà Absolute
Proprietà Fixed
Proprietà Relative
Proprietà Sticky
Assegnare la profondità agli elementi
Assegnare profondità negativa
Attivare le pseudo classi da ispeziona elemento
Pseudo Classe Hover
Pseudo Classe Active
Selezionare la prima Lettera di una parola con first-letter
Selezionare una linea con first-line
Pseudo classi :before
Pseudo classi :after
Unità di misura Relative e Assolute
Unità px
Unità percentuale
Unità di misura Relative e Assolute
Unità di misura "em"
Selezionare i tag chirurgicamente
text-transform
text-capitalize
Assegnare un'immagine tramite Css
Assegnare le proprietà di background-image
Usare un percorso "parent" per assegnare l'immagine
Come sono costruiti i colori esadecimali
Rgb
rgba
Sfumature Lineari
Sfumatura Radiale
Assegnare le ombre agli elementi
Usare la stessa proprietà per creare un effetto di bagliore
Mandare a capo una parola lunga
Troncare il testo
Troncare il testo con punti di sospensione
Creare un cerchio
Arrotondare ogni singolo angolo del quadrato
Aggiungere un video
Aggiungere i controlli play/pausa/fullscreen
Fare ripartire il video quando terminal "loop"
Formati video
Aggiungere un mp3 audio
Cercare con Ispeziona elemento
Inserire video da Youtube / Vimeo o altri
- Creazione struttura html
- Creazione Menu laterale
- Creazione Contenuto
- Inserimento stile
Trick: Estensione per campionare i colori
Assegnare stili al sidemenu
- Aggiungere immagine avatar
- Prendere immagine da un generatore di avatar
- Inserire avatar nel menu laterale
- Aggiungere stile al titolo del contenuto
- Proprietà letter-spacing
- Inserire collegamento per inviare email
- Modificare la testata del contenuto
- Mettere una linea con il tag html
- Modificare la struttura con i css per modificare l'estetica del contenuto.
- Inserimento delle icone con FontAwesome
- Scaricare i file delle icone
- Collegare il file al documento html
- Aggiungere le icone all'interno del link
- Dividere il contenuto su due colonne
- Posizionare la sezione corrente al click dei pulsanti.
- Aggiungere dettagli con gli stili per migliorare la grafica.
- Aggiungere un' effetto di scroll con html
Analisi dei problemi da risolvere nella pagina
Accenno a javascript
Accenno al responsive
- Cambiare la disposizione al Ispeziona elemento
- Utilizzare varie tipologie di device all'interno del browser
- Inserimento meta tag appropriato per il responsive
- Assegnare proprietà css meda query
- I breakpoint
- Aggiungere dettagli css
- Aggiungere nuova proprietà Flex
- Aggiungere icona
- Scrivere in Javascript
- Creare una funzione
- Spostare le funzioni in un file esterno
Installare Jquery tramite cdn
Convertire il codice Javascript in Jquery
Includere Jquery nel progetto
Convertire il Javascript in Jquery
Cos'è il console.log e come ci aiuta ad analizzare la pagina web.
Aggiungere e rimuovere la classe "Active"
Non avere conflitti con gli ID
Spostare l'evento onclick dalla pagina HTML dentro al file Javascript.
Caricare il Jquery quando la pagina e pronta
Al click del elemento prendere informazioni sul div
Ridurre le linee di codice in una sola funzione.
Aprire e chiudere il menu quando è in modalità responsive.
Creare classi righe
Creare classi colonne
Creare progetto Flex
Proprietà Flex
Proprietà flex-wrap
Proprietà flex-direction
Proprietà flex-flow
Proprietà align-items
Proprietà align-content
Aggiungere tags html5
Tag header
Tag nav
Tag section
Tag article
Tag footer
Rinominare i file
Creare classi che fanno da colonne e righe
Strutturare gli elementi nel Header
Creare struttura per contenuti e barre laterali
Generare Lorem Ipsum
Aggiungere un css reset
Aggiungere un Banner
Aggiungere un titolo sull'immagine
Creare un effetto di sovrapposizione tra l'immagine e il titolo
Posizionare i pulsanti nel navbar
Modificare un select
Creare un triangolo con i css
Modificare vari stili della pagina
Creare un menu "ricette" con sotto menu
Aprire il menu via Jquery
Ottimizzare la funzione per aprire i sottomenu
Includere una mappa di google
Creare la struttura
Assegnare gli stili
Comandarlo via Jquery
- Creazione pagina
- Inserimento libreria CDN
- Usare le classi di Tailwind per creare la struttura della pagina
- Aggiungere i colori
- Aggiungere menu di navigazione
- Usare le classi corrette per creare un banner con una immagine di sfondo
- Creare un modulo contatti
- Come lavorare con le classi media query
- Che cos'è il Minify / Unminify
- Che cos'è NPM e come installarlo
- Installare la configurazione di Tailwind nel progetto
Modificare il file di configurazione
A chi non è rivolto questo corso?
1. Pigri: questo corso non è per te se hai poca voglia di apprendere, e vuoi la tua pagina web con 3 click.
2. Procrastinatori: Se rimandi sempre quello che devi imparare oggi, lascia stare, fare il front end è un mestiere che richiede dedizione e tanta voglia di apprendere.
3. Frettolosi: Se pensi che alla fine di questo corso sarai in grado di inviare il curriculum alla Silicon Valley, non iscriverti nemmeno.
4. Anti-intraprendenti: Se sei una persona che non ha la minima voglia di cercare di risolvere anche piccoli problemi legati alla informatica, ti sconsiglio di iniziare anche solo questa carriera, per fare questo mestiere devi essere minimamente dinamico, laborioso, ingegnoso, questo mestiere richiede costanti studi ed energie.
E tutto troppo complicato?
Non svalutarti, forse queste cose che ho scritto qui sopra potrebbero sembrarti robe da Marins, ma non è così, tutte queste abilità si imparano con il tempo e non con un solo corso, e sopratutto tutto questo lo faccio per spronarti a migliorarti ed entrare nel terreno dei veri FrontEnd.
Chi sono e cosa faccio:
Mi chiamo Alessandro Cuoghi e questo è il mio secondo corso sulla piattaforma Udemy, il primo tratta il famoso software di grafica Adobe Illustrator. Software che uso attualmente per disegnare flussi per siti web e Applicazioni Mobile, nonostante esistano software dedicati come Adobe XD.
Da 20 anni lavoro nel campo del disegno e sviluppo web, durante gli ultimi mi sono dedicato anche alla realizzazione di applicazioni Mobile con Ionic.
In passato sono stato titolare di una web agency in Italia, mentre ad oggi sono co-fondatore di un team di sviluppo per Start up in Ruby on Rails, occupandomi specificatamente del Front End con base a Palma de Mallorca "Spagna". Oltre aver aiutato Startup a lanciare i loro progetti abbiamo anche creato una nostra applicazione "prodotto", e partecipato alla Hackathon aiutando Madrid nella creazione di un portale di trasparenza per i cittadini.
Perché scegliere me tra i tanti corsi che puoi trovare.
1. Ho 20 anni di esperienza in ambito digitale.
2. Questo è il mio secondo corso su questa Piattaforma.
3. Ho lavorato con Startup, avuto una agenzia di comunicazione in Italia, ed ora lavoro da dove voglio con il mio team di sviluppo che si trova in Spagna.
4. Perché sono specializzato lato Front End, disegno Layout tenendo in considerazione la UI/UX e so integrarmi con programmatori Backend.
Quando vengono creati siti web o applicazioni, gli sviluppatori si dividono di base in tue categorie i Front End e i Back End.
I primi sono quelli che si dedicano a convertire un layout grafico "che non fa nulla, proprio perché è una immagine" in qualcosa di interattivo, scrivendo il codice apposito usato per il Front End, ovvero Html, Scss, Jquery, ma se vuoi creare applicazioni dovrai sapere anche Angular, React etc..che non tratteremo in questo corso.
I secondi di occupano di Database e funzionalità per fare determinati calcoli, e in questo corso non ne parleremo, proprio perché già essere un buon sviluppatore lato Front End richiede parecchio tempo e dedizione.
Se quello che ti piace e dare gusto e rendere applicazioni piacevoli per gli utenti è creare interattività allora fai parte dei Front End, e questo è il corso adatto a te.
Per lavorare nel campo web, la cosa migliore da fare è specializzarsi solo in una cosa, proprio perché le informazioni sono tantissime, e saperle tutte servono tanti anni di esperienza, e poi c'è da dire che essere FullStack, ovvero sapere tutto non è una cosa che si impara in qualche mese e forse nemmeno in tanti anni.
Le aziende di una certa portata solitamente cercano figure che siano specializzate in una cosa sola.
Cosa impari in questo corso?
Devi sapere che esistono vari ambienti di sviluppo, come ad esempio Php, Asp, Ruby on Rails, Laravel, Wordpress, Joomla etc, ma quello che importa è capire quali linguaggi servono per sviluppare il lato Front di un sito web o di una applicazione.
Una volta apprese le basi del Html, Css, Jquery potrai entrare in qualsiasi ambiente di sviluppo proprio perché i linguaggi li conosci e dovrai solo adattarti alle metodologie della azienda o dello stesso ambiente di lavoro.
Quindi in questo corso dopo aver appreso le basi dei linguaggi base, ti farò usare uno dei framework più utilizzati al mondo "Bootstrap", ma ti parlerò anche di Foundation e TailWind e di come creare animazioni web.
Devi sapere l'inglese?
Non è necessario che tu sia a conoscenza della lingua inglese in modo approfondito, ma dovrai iniziare ad imparare qualche parola proprio perché la maggior parte delle risorse che puoi trovare online parlano questa lingua, e in fin dei conti ti servirà per il tuo futuro.
Alla fine del corso sarò in grado di creare la mia pagina web?
Si, al termine di questo corso avrai creato la tua pagina web che si adatta alla stragrande maggioranza di dispositivi Desktop, Laptop, Tablet, Smartphone e la potrai pubblicare su internet.