Sviluppare pagine web lato Front End ( Per disegnatori web) 84.99 €

1) Quello che devi sapere prima di iniziare

Benvenuto/a!Video introduttivo.Iscriviti al mio canale Youtube per seguire gli Esperimenti con il Codice.Accedi al canale e segui Video o Playlist

2) SUPER SCONTO SUL CORSO ILLUSTRATOR

Se la Promozione è scaduta e il corso di interessa, scrivimi e ti genero un coupon personale.Nelle risorse troverai il link.

3) Scaricare una prova gratuita di Illustrator o Photoshop o alternative

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 rita ...

4) Quanto può guadagnare uno sviluppatore Front End

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.

5) Dove trovare risorse gratuite come Icone,Tipografie, Disegni, Pattern

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, ...

6) Di quali strumenti hai bisogno?

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 t ...

7) CRAP

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 n ...

8) C: Contrasto

9) R:Ripetizione

10) Allineamento

11) P: Prossimità

12) Cos'è il terminale?

Come aprire il terminale:MAC = Applicazioni / Utility / TerminaleWIN = Cambia in base alla versione di Windows che hai installato, cerca su google "prompt comandi windows"RicordaSeguimi sul canale You ...

13) Scaricare i file del corso

14) Creare il primo file.

Creare un progetto nuovoUsare il terminale per creare un file index.htmlUsare Atom pre creare un file index.html

15) Aprire il file nel Browser e muoversi SUPER veloci tra le applicazioni.

16) Scrivere i primi TAG dentro la pagina Html.

Cosa sono i tagI tag Il tag Il tag Il tag Il tag

17) Ispeziona elemento, il tuo nuovo migliore amico.

Come si legge l'ispeziona elementoSelezionare i TagModificare lo stile di un tag attraverso l'ispeziona elemento

18) La struttura della pagina web

Indentazione (Migliorare la lettura del codice )Aggiungere i tag corretti alla pagina webDoctypeHtmlHeadBodyTitleh1

19) Configurare Atom

Modificare le preferenze di Atom

20) Panoramica generale tag html

Dove documentarsi sul htmlCommentare nel codice html

21) Liste, elenchi puntati e numerati

Elenchi puntati

22) Aggiungere immagini

Il tag Aggiungere la larghezza Aggiungere l'attributo alt

23) Tabelle

Il tag Il tag Il tag

24) Moduli / Form / input

Il tag Il tag

25) Collegamenti ipertestuali

Il tag Creare una pagina contatti.htmlCreare un collegamento ipertestuali

26) Elementi Block e Inline

Gli Elementi Block Gli Elementi Inline

27) Div generici

Il tag Assegnare un nome al div che può essere Class o Id

28) Collaborazione, la chiave per continuare.

Questa non è una lezione di informatica. Leggi il testo che ho inserito.

29) Cosa sono i css? Assegnamo degli stili Interni

Cosa sono gli stiliScrivere le proprietà Css nella stessa paginaAggiungere la proprietà border

30) Aggiungere la tipografia e capire la eredità delle proprietà

Collegare i font di Google alla paginaAssegnare Il font alla pagina

31) Cosa sono le Classi e gli ID

Quando usare una Class o un IDAssegnare uno stile ad un divAssegnare uno stile ad un div con IDAssegnare uno stile ad un div con una Class

32) Ereditarietà degli stili, stili Inline

Aggiungere proprietà css su un tagCos'è l' !important

33) Applicare stili esterni

Creare un nuovo foglio di stile CSS esternoCollegare il foglio di stile alla pagina Html

34) Semplice struttura di un sito web

Creare la struttura per una pagina webCreare cartelle per immagini e cssModificare i percorsi delle immagini e stili

35) Come funzionano i Margini

Analizzare il tag I margini Top / Left / Bottom / RightRimuovere i margini della paginaRimuovere i margini dai tagScrivere le proprietà dei margini Top / Left / Bottom / Right in una sola linea

36) Come funziona il padding?

Il padding Top / Left / Bottom / RightDifferenza tra Margin e Padding

37) Box-sizing

Cos'è il Box-sizing

38) Posizionare il contenuto con la proprietà Float

Proprietà FloatProprietà ClearCreare un semplice Layout

39) Tipi di posizionamenti absolute, fixed, sticky, relative

Proprietà AbsoluteProprietà FixedProprietà RelativeProprietà Sticky

40) Zindex

Assegnare la profondità agli elementiAssegnare profondità negativa

41) Pseudo classi e prima interazione con il tag

Attivare le pseudo classi da ispeziona elementoPseudo Classe HoverPseudo Classe  Active

42) Pseudo Elementi

Selezionare la prima Lettera di una parola con first-letterSelezionare una linea con first-linePseudo classi :beforePseudo classi :after

43) Unità di misura in percentuale

Unità di misura Relative e AssoluteUnità pxUnità percentuale

44) Unità di misura per i font

Unità di misura Relative e AssoluteUnità di misura "em"

45) Selezionare gli elementi con le classi e concatenamento classi

Selezionare i tag chirurgicamentetext-transformtext-capita

46) Selezionare elementi all'interno di un elemento

47) Selezionare un ID con anche la classe

48) Altri modi per selezionare un elemento

49) Assegnare una immagine di sfondo tramite css

Assegnare un'immagine tramite CssAssegnare le proprietà di background-imageUsare un percorso "parent" per assegnare l'immagine

50) Tipi di colore

Come sono costruiti i colori esadecimali Rgbrgba

51) Creare delle sfumature

Sfumature LineariSfumatura Radiale

52) Aggiungere delle ombre

Assegnare le ombre agli elementiUsare la stessa proprietà per creare un effetto di bagliore

53) Effetto sui testi

Mandare a capo una parola lungaTroncare il testo Troncare il testo con punti di sospensione

54) Costruire un ToolTips

55) Rendere i bordi curvi

Creare un cerchioArrotondare ogni singolo angolo del quadrato

56) Aggiungere un Video

Aggiungere un videoAggiungere i controlli play/pausa/fullscreenFare ripartire il video quando terminal "loop"Formati video

57) Aggiungere un file Audio

Aggiungere un mp3 audioCercare con Ispeziona elemento

58) Inserire video da youtube o simili utilizzando un Iframe

Inserire video da Youtube / Vimeo o altri

59) Creazione struttura 2 colonne

- Creazione struttura html- Creazione Menu laterale - Creazione Contenuto- Inserimento stile

60) Assegnazione stili al Sidemenu

Trick: Estensione per campionare i coloriAssegnare stili al sidemenu

61) Inserire Avatar nel Sidemenu

- Aggiungere immagine avatar- Prendere immagine da un generatore di avatar- Inserire avatar nel menu laterale

62) Aggiungere stile al titolo del contenuto

- Aggiungere stile al titolo del contenuto- Proprietà letter-spacing- Inserire collegamento per inviare email

63) Creare la testata del contenuto

- Modificare la testata del contenuto- Mettere una linea con il tag html

64) Modificare la struttura del contenuto

- Modificare la struttura con i css per modificare l'estetica del contenuto.

65) 7 parte - Inserire icone Font Awesome

- Inserimento delle icone con FontAwesome- Scaricare i file delle icone- Collegare il file al documento html- Aggiungere le icone all'interno del link

66) Dividere il contenuto su due colonne

- Dividere il contenuto su due colonne

67) 9 parte - Posizionamento della sezione

- Posizionare la sezione corrente al click dei pulsanti.

68) 10 parte - Aggiungere dettagli + Scroll

- Aggiungere dettagli con gli stili per migliorare la grafica.- Aggiungere un' effetto di scroll con html

69) Accenno al Javascript e Responsive

Analisi dei problemi da risolvere nella paginaAccenno a javascriptAccenno al responsive

70) Introduzione al responsive

- Cambiare la disposizione al Ispeziona elemento- Utilizzare varie tipologie di device all'interno del browser- Inserimento meta tag appropriato per il responsive

71) Media Query

- Assegnare proprietà css meda query- I breakpoint

72) 72-aggiornata - stili responsive

- Aggiungere dettagli css-  Aggiungere nuova proprietà Flex

73) Pulsante menu in versione responsive

- Aggiungere icona

74) Introduzione Javascript

- Scrivere in Javascript

75) Javascript - Creare una funzione

- Creare una funzione

76) Javascript - Funzioni in file esterno / variabili

- Spostare le funzioni in un file esterno

77) Javascript - Inserire libreria Jquery

Installare Jquery tramite cdnConvertire il codice Javascript in JqueryIncludere Jquery nel progettoConvertire il Javascript in Jquery

78) Jquery : Menu assegnare pulsante attivo

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

79) Jquery : Scrivere correttamente la funzione

Spostare l'evento onclick dalla pagina HTML dentro al file Javascript.Caricare il Jquery quando la pagina e prontaAl click del elemento prendere informazioni sul divRidurre le linee di codice in ...

80) Jquery : Toggle Menu / Aprire e chiudere il Menu in responsive

Aprire e chiudere il menu quando è in modalità responsive.

81) Layout a griglia usando il Float

Creare classi righeCreare classi colonne

82) Introduzione Flexbox

Creare progetto FlexProprietà FlexProprietà flex-wrapProprietà flex-directionProprietà flex-flowProprietà align-itemsProprietà align-content

83) Struttura Flex con nuovi tag html5

Aggiungere tags html5Tag headerTag navTag sectionTag articleTag footerRinominare i fileCreare classi che fanno da colonne e righeStrutturare gli elementi nel Header

84) Struttura Contenti

Creare struttura per contenuti e barre lateraliGenerare Lorem Ipsum

85) Resettare i Css + aggiungere un banner

Aggiungere un css resetAggiungere un Banner

86) Effetto sovrapposizione + Allineamento navbar

Aggiungere un titolo sull'immagineCreare un effetto di sovrapposizione  tra l'immagine e il titoloPosizionare i pulsanti nel navbar

87) Dare ossigeno alla pagina + Aggiungere Form contatti

88) Assegnare stili al select dentro il Form

Modificare un selectCreare un triangolo con i css

89) Navigazione Sidebar

Modificare vari stili della paginaCreare un menu "ricette" con sotto menuAprire il menu via Jquery

90) Integrare mappa Google map

Ottimizzare la funzione per aprire i sottomenuIncludere una mappa di google

91) Creare un menu Tab

Creare la strutturaAssegnare gli stiliComandarlo via Jquery

92) Responsive

93) Introduzione Tailwind

- Creazione pagina- Inserimento libreria CDN

94) Creazione struttura

- Usare le classi di Tailwind per creare la struttura della pagina

95) Creare l’ Header

- Aggiungere i colori- Aggiungere menu di navigazione

96) Aggiungere un banner di sfondo

- Usare le classi corrette per creare un banner con una immagine di sfondo

97) Modulo contatti

- Creare un modulo contatti

98) Colonne centrali e footer

99) Responsive design

- Come lavorare con le classi media query

100) Installazione NPM + Unminify

- Che cos'è il Minify / Unminify- Che cos'è NPM e come installarlo