COME

Come fare per casa

Menù

Barra delle icone Icona del menu Fisarmonica Schede Schede verticali Intestazioni delle schede Schede a pagina intera Schede al passaggio del mouse Navigazione superiore Navigazione superiore reattiva Navbar con icone Menu di ricerca Barra di ricerca Barra laterale fissa Navigazione della pagina Barra laterale reattiva Navigazione a schermo intero Menu fuori tela Passare i pulsanti di navigazione laterale Barra laterale con icone Menu a scorrimento orizzontale Menù verticale Navigazione in basso Navigazione in basso reattiva Collegamenti di navigazione del bordo inferiore Collegamenti del menu allineati a destra Collegamento al menu centrato Collegamenti menu di uguale larghezza Menù fisso Scorri la barra verso il basso durante lo scorrimento Nascondi barra di navigazione su scorrimento Riduci la barra di navigazione a scorrimento Barra di navigazione appiccicosa Navbar sull'immagine Passa il mouse a discesa Fare clic su Menu a discesa Discesa a cascata Menu a discesa in Topnav Menu a discesa in Sidenav Resp Navbar a discesa Menu di sottonavigazione Ritiro Menù Mega Menù mobile Menù a tendina Barra laterale compressa Pannello laterale crollato Impaginazione Briciole di pane Gruppo di pulsanti Gruppo di pulsanti verticali Barra sociale appiccicosa Navigazione pillola Intestazione reattiva

immagini

Presentazione Galleria di diapositive Immagini modali Lightbox Griglia immagine reattiva Griglia di immagini Galleria di schede Dissolvenza sovrapposizione immagine Sovrapposizione immagine diapositiva Zoom immagine sovrapposta Titolo sovrapposizione immagine Icona Sovrapposizione immagine Effetti immagine Immagine in bianco e nero Testo immagine Blocchi di testo immagine Testo immagine trasparente Immagine a pagina intera Modulo su immagine Immagine dell'eroe Immagine di sfondo sfocata Cambia Bg su Scroll Immagini affiancate Immagini arrotondate Immagini avatar Immagini reattive Immagini centrali Miniature Bordo intorno all'immagine Incontrare la squadra Immagine appiccicosa Capovolgi un'immagine Scuoti un'immagine Galleria Portfolio Portafoglio con filtro Zoom immagine Lente d'ingrandimento per immagini Dispositivo di scorrimento per il confronto delle immagini Favicon

Bottoni

Pulsanti di avviso Bottoni Contorno Bottoni divisi Pulsanti animati Pulsanti in dissolvenza Pulsante sull'immagine Pulsanti dei social media Leggi di più Leggi di meno Caricamento pulsanti Scarica pulsanti Pulsanti pillola Pulsante di notifica Pulsanti icona Pulsanti Avanti/Prec Pulsante Altro in Nav Pulsanti di blocco Pulsanti di testo Bottoni rotondi Pulsante Scorri verso l'alto

Forme

Modulo di accesso Modulo di iscrizione Modulo di pagamento Modulo di Contatto Modulo di accesso sociale Modulo di registrazione Modulo con icone Notiziario Modulo impilato Modulo reattivo Modulo popup Modulo in linea Cancella campo di immissione Nascondi le frecce numeriche Copia il testo negli appunti Ricerca animata Pulsante Cerca Ricerca a schermo intero Campo di immissione nella barra di navigazione Modulo di accesso in Navbar Casella di controllo/radio personalizzata Selezione personalizzata Interruttore a levetta Seleziona la casella di controllo Rileva blocco maiuscole Pulsante di attivazione su Invio Convalida della password Attiva/disattiva la visibilità della password Modulo a più passaggi Completamento automatico Disattiva il completamento automatico Disattiva il controllo ortografico Pulsante di caricamento file Convalida input vuota

Filtri

Elenco filtri Tabella dei filtri Elementi filtranti Filtro a discesa Ordina elenco Tabella degli incantesimi

Tabelle

Tavolo a strisce zebrate Tavoli centrali Tavolo a tutta larghezza Tavoli affiancati Tabelle reattive Tavola di comparazione

Di più

Video a schermo intero Scatole modali Elimina modale Sequenza temporale Indicatore di scorrimento Barre di avanzamento Barra delle abilità Cursori di intervallo Suggerimenti Visualizza elemento al passaggio del mouse Popup Collassabile Calendario HTML include Lista di cose da fare Caricatori Stelle Voto dell'utente Effetto di sovrapposizione Chip di contatto Carte Capovolgere la carta Scheda Profilo Scheda Prodotto Avvisi Chiamare Appunti Etichette Cerchi Stile risorse umane Buono Gruppo di elenchi Elenco senza punti elenco Testo reattivo Testo ritagliato Testo luminoso Piè di pagina fisso Elemento appiccicoso Uguale altezza Clearfix Galleggianti reattivi Snack bar Finestra a schermo intero Scorri il disegno Scorrimento fluido Scorrimento Gradiente Bg Intestazione appiccicosa Riduci intestazione su scorrimento Tabella dei prezzi Parallasse Proporzioni Iframe reattivi Attiva/disattiva Mi piace/Non mi piace Attiva/disattiva Nascondi/Mostra Attiva/disattiva la modalità oscura Attiva/disattiva testo Attiva/Disattiva classe Aggiungi classe Rimuovi classe Classe attiva Visualizzazione ad albero Rimuovi proprietà Rilevamento offline Trova l'elemento nascosto Reindirizzare la pagina web Zoom al passaggio del mouse Flip Box Centrare verticalmente Pulsante centrale in DIV Transizione al passaggio del mouse Frecce Forme Link per scaricare Elemento a tutta altezza Finestra del browser Barra di scorrimento personalizzata Nascondi barra di scorrimento Mostra/Forza barra di scorrimento Aspetto dispositivo Confine contentabile Colore segnaposto Colore selezione testo Colore proiettile Linea verticale Divisori Icone animate Conto alla rovescia Macchina da scrivere Prossimamente Pagina Messaggi di chat Finestra di chat popup Schermo diviso Testimonianze Contatore di sezione Presentazione di citazioni Voci di elenco chiudibili Tipici punti di interruzione del dispositivo Elemento HTML trascinabile Query sui media JS Evidenziatore di sintassi Animazioni JS Lunghezza della stringa JS Esponenziazione JS Parametri predefiniti JS Ottieni URL corrente Ottieni la dimensione dello schermo corrente Ottieni elementi Iframe

Sito web

Crea un sito web gratuito Crea un sito web Crea un sito web statico Crea un sito web (W3.CSS) Crea un sito web (BS3) Crea un sito web (BS4) Crea un sito web (BS5) Crea e visualizza un sito web Crea un sito Web con albero di collegamento Crea un portafoglio Crea un curriculum Crea un sito web per ristoranti Crea un sito web aziendale Crea un WebBook Sito web del centro Sezione Contatti Informazioni sulla pagina Grande intestazione Esempio di sito web

Griglia

Disposizione a 2 colonne Disposizione a 3 colonne Disposizione a 4 colonne Griglia in espansione Visualizzazione a griglia elenco Layout a colonne miste Carte Colonna Layout a zig zag Layout del blog

Google

Grafici di Google Google Font Abbinamenti di caratteri Google Google Imposta Analytics

Convertitori

Converti peso Converti temperatura Converti lunghezza Converti velocità

Blog

Ottieni un lavoro da sviluppatore Diventa uno sviluppatore front-end.

Come creare un portafoglio

Il portfolio è fondamentale per farsi notare.

Creare un portfolio è un buon modo per far crescere la tua presenza online.

Il portfolio viene utilizzato per mostrare le tue capacità e i tuoi progetti.

Può aiutarti a trovare un lavoro, un lavoro da libero professionista o uno stage.

Crea il mio portfolio gratuitamente »

Che cos'è un portafoglio

Il portfolio può avere lo stesso scopo di un CV. La maggior parte dei CV sono scritti con il testo, mentre il portfolio è per la presentazione, quindi è visivo con immagini e spesso più dettagliato del CV.

È un luogo in cui puoi mostrare la tua esperienza lavorativa e mostrare i progetti di cui sei più orgoglioso.

Il tuo portafoglio online può essere condiviso con il suo link ad aziende, responsabili delle assunzioni e reclutatori, in modo che possano notarti.

Si tratta di mostrare e dare agli altri una comprensione di chi sei come professionista.


Perché creare un portfolio

È un ottimo modo per far crescere la tua presenza online e farti notare.

Può essere utilizzato per ottenere un lavoro o per attirare clienti verso i tuoi servizi.

Averlo online come sito web. Consente alle persone di tutto il mondo di trovarti.

Il design del portfolio darà al lettore un'idea di chi sei. Assicurati che appaia in un modo buono e presentabile!


Per chi è un portfolio

La creazione di un portfolio può essere importante per la tua carriera.

Può essere utile quando cerchi un lavoro, un lavoro da freelance o mostri le tue abilità a un nuovo cliente.

I ruoli tipici che utilizzano i portafogli sono professionisti quali, a titolo esemplificativo ma non esaustivo:

  • Sviluppatori di software
  • UX designer
  • Grafici
  • Fotografi
  • Professionisti del marketing
  • Architetti
  • Scrittori

Mai sentito parlare di W3Schools Spaces ? Qui puoi creare il tuo portfolio da zero o utilizzare un modello e ospitarlo gratuitamente.

Inizia gratuitamente ❯

* nessuna carta di credito richiesta


Quali sono le sezioni più importanti in un portfolio

Ci sono molti modi diversi per creare un portfolio.

Come crearlo dipende dal tipo di professionista che sei, per chi lo stai costruendo e perché lo stai creando.

Devi testare, fallire e imparare a scoprire quale tipo di portafoglio è giusto per te!

Ci sono alcune sezioni che sono essenziali per tutti i tipi di portafogli, riassunte di seguito:

1. Sezione Eroe.

La sezione degli eroi è la prima cosa che le persone vedono quando entrano nel tuo portfolio.

Viene visualizzato sotto il tuo logo e menu.

La sezione dell'eroe aiuta il lettore a capire cosa offri, perché qualcuno dovrebbe lavorare con te e il valore che offri con i tuoi servizi.

Spesso contiene un pulsante di invito all'azione come "contattami", "prenota una riunione" o simili.

sezione eroi

2. Sezione Chi sono.

Fornisci al lettore un breve riassunto su di te.

Includi argomenti come la tua istruzione, esperienza lavorativa, progetti e interessi.

Aiuta il lettore a capire ciò che ti appassiona e i tuoi superpoteri (le cose in cui sei veramente bravo).

Ricorda di mantenerlo breve e semplice.

sulla sezione

3. Sezione Progetti.

Elenca i progetti su cui hai lavorato. Il modo più utilizzato è ordinare l'elenco per data, ma in alcuni casi può avere senso ordinarlo in un altro modo logico.

Aggiungi dettagli a ogni progetto, che include il tuo ruolo, cosa hai fatto e come è andato a finire il progetto.

L'aggiunta di immagini per mostrare ciò che hai costruito è un vantaggio! Metti in mostra le cose di cui sei orgoglioso.

sezione esperienze lavorative

4. Sezione contattami.

Fai sapere al lettore come e dove può mettersi in contatto con te.

Aggiungi i tuoi dettagli di contatto e altri canali di contatto come il tuo profilo GitHub, LinkedIn, Youtube e così via.

sezione contattami

Esempi di portafoglio

Dai un'occhiata ad alcuni esempi di portfolio.

Puoi caricare i modelli di portfolio in W3Schools Spaces . Inizia a pubblicare il tuo portfolio in pochi clic.

Pubblica il mio portfolio gratuitamente ❯

* nessuna carta di credito richiesta

Modello di portafoglio in bianco e nero

Dark Portfolio Template

People Portfolio

My Portfolio Template


What do I need to know to create my own portfolio?

HTML, CSS and JavaScript are the foundational languages to create a website.

You can come a long way just using these three!

  1. Create the structure with HTML. The first thing you have to learn, is HTML, which is the standard markup language for creating web pages.
  2. Learn HTML ❯
  3. Style with CSS. The next step is to learn CSS, to set the layout of your web page with beautiful colors, fonts, and much more.
  4. Learn CSS ❯
  5. Make it interactive with JavaScript. After studying HTML and CSS, you should learn JavaScript to create dynamic and interactive web pages for your users.
  6. Learn JavaScript ❯

How to create a portfolio step-by-step

Follow the steps to create your portfolio from the ground up.


Preparations

Decide which code editor to use and set up your environment.

W3Schools has created an easy to use code editor called W3Schools Spaces. Sign up and get started in a few clicks.

Start for free ❯

Create your index.html file. So that you are ready to enter the code.

All set up. Lets go!


Step One: Add HTML Skeleton

Type an HTML skeleton code, which is the starting point for your website. It is the structure which holds the code and ensures that it is properly displayed on the internet.

Read here for how to create a basic HTML Skeleton: How to create a HTML Skeleton


Step Two: Add Navigation Bar

The navigation bar is a short representation of the content on the website.

It is one of the first things that a visitor will see.

It helps the visitors to find and navigate through the content on website. It is important to create well-structured navigation. So that your visitors can find what they are looking for.

Here is an example of how to create a top navigation bar: How to create a Top Navigation Bar


Step Three: Add Hero section

The Hero section, together with the navigation bar, is the first section of your portfolio that people will see.

It should contain short information about several things such as:

  • Who are you?
  • What do you offer?
  • What is your profession?
  • Why should people work with you?
  • Which actions should you take?

Write in first-person and keep it short and simple.

Additional things preferred in the hero section are:

  • Eye-catching graphics, either as a background or side-by-side with the text.
  • An action button that leads to content on your portfolio or to the content of another website.

Here is an example on how to create a Hero section: How to create a Hero image


Step Four: Add About Me section

In this section, you can get creative. This can help you to to stand out.

Here you can personalize the content and write about yourself more in-depth.

The content you can include in this section is:

  • Your introduction
  • Who are you as a professional
  • Your education
  • Your skills
  • Your work experience (present and/or past)
  • Your hobbies
  • Your goals and ambitions

In a way, you can consider the "About me" section as a short summary of your CV.

Feel free to write about yourself in first person.

Personalization and making people understand you as a person might bring you more attention.

Here is an example on how to create an about me section: How to create an About Me section


Step Five: Add Work Experience section

The work experience section highlights the experience, knowledge, and competence that you have made along your way.

Here you can add:

  • Links to your projects with the project name and/or short description of what the project is about.
  • Links to blog posts that you have written with title and/or short description about what it is about.
  • Your professional awards or achievements.
  • Highlighting your work and your accomplishments is a way to create opportunities for yourself.
  • Visual representations such as images or graphics.

Step Six: Add Contact section

The contact section is the section that lets your visitor get in touch with you.

You should always include a way for visitors to contact you, either through a contact form or by writing down your contact information such as:

  • Address
  • Email
  • Phone number
  • E.g. Github profile, LinkedIn profile, Youtube profile and so on.

Here is an example on how to create a basic contact section: How to create a Contact section


Step Seven: Add Footer section

The footer can be experienced as a minor section, but it is an important one of every website.

It is about showing critical information based on your website goals and the needs of your visitors.

Often it contains technical information about copyright, but it can hold other information, such as:

  • Link to "Privacy policy" page
  • Link to "Terms of use" page
  • Contact information
  • Website navigation links
  • Links to social networks
  • Link to your shop

Here is an example on how to build a footer section: How to create a Footer section


W3Schools Spaces

Spazi W3Schools

Build and publish your own Portfolio with W3Schools Spaces.

Get Started for Free