So erstellen und implementieren Sie Ihre eigene persönliche Portfolio-Site

Hallo! Ich heiße Kevin Powell. Ich liebe es, Menschen beizubringen, wie man das Web aufbaut und wie man es gut aussehen lässt, während sie dabei sind.

Ich freue mich, Ihnen mitteilen zu können, dass ich gerade einen kostenlosen Kurs gestartet habe , in dem Sie lernen, Ihre eigene, vollständig reaktionsfähige Portfolio-Website zu erstellen .

Nachdem Sie diesen Kurs abgeschlossen haben, haben Sie eine gut aussehende Portfolio-Site, die Ihnen hilft, Vorstellungsgespräche und freiberufliche Auftritte zu bekommen. Es ist auch eine coole Sache, es deinen Freunden und deiner Familie zu zeigen.

Wir werden das Portfolio mithilfe der interaktiven Code-Lernplattform von Scrimba erstellen und es dann mithilfe der Cloud-Dienste von DigitalOcean bereitstellen.

Außerdem war DigitalOcean großzügig, um jedem, der sich anmeldet, ein kostenloses Guthaben zu gewähren , sodass es Sie nichts kostet, es in Betrieb zu nehmen.

Dieser Beitrag ist eine Aufschlüsselung des Kurses selbst und gibt Ihnen eine Vorstellung davon, was in allen Lektionen enthalten ist. Wenn dir gefällt, was du siehst, schau es dir auf Scrimba an!

Lektion 1: Einführung

In der ersten Lektion erhalten Sie einen Überblick über den Kurs, damit Sie wissen, was Sie erwartet, was Sie wissen sollten, bevor Sie daran teilnehmen, und was Sie am Ende haben, wenn Sie fertig sind. Ich gebe Ihnen auch eine kurze Einführung in mich.

Einige allgemeine Informationen zum Autor des Kurses

Lektion 2: Einrichten - HTML

In Teil zwei werde ich Sie in der Scrimba-Umgebung herumführen und wir werden auch das Projekt einrichten.

Alle Bilder werden mitgeliefert, sodass Sie sich noch keine Gedanken über die Suche nach dem perfekten Foto machen müssen. Wir können uns auf den Aufbau des Portfolios konzentrieren!

Vergessen Sie nicht, dass Sie auf unserer speziellen Design-Seite auf alles zugreifen können, was Sie benötigen, von Text und Farben bis hin zu Schriftarten und vielem mehr.

Lektion 3: Der Header-Bereich - HTML

Es ist endlich Zeit, mit dem Aufbau des Portfolios zu beginnen. In dieser Vorlesung erstellen wir den Header-Bereich. Wir werden die BEM-Methode zum Festlegen von Klassennamen in CSS auffrischen, und ich denke, Sie werden feststellen, dass die Navigation dadurch einfach und unkompliziert zu erstellen ist.

Lektion 4: Einführungsabschnitt

Als nächstes folgt der Intro-Bereich des Portfolios. Hier stellen wir uns vor und machen uns ein Bild von uns.

Am Ende fügen wir einen Abschnitt über die wichtigsten Fähigkeiten / Dienstleistungen hinzu, die wir leisten können. Im Moment können wir einfach alles mit dem Text „Lorem ipsum“ als Platzhalter ausfüllen, bis Sie bereit sind, ihn mit Ihrem eigenen Text auszufüllen.

Lektion 5: Über mich, Arbeit und Fußzeile - HTML

In diesem Kapitel beenden wir den Rest unseres HTML-Codes mit den letzten drei Abschnitten: Über mich, wo wir uns genauer vorstellen werden; Arbeiten Sie, wo wir einige unserer Portfolio-Beispiele und unsere Fußzeile hinzufügen werden.

Fußzeilen sind ideal zum Verknüpfen mit E-Mail-Adressen und ich werde Ihnen zeigen, wie Sie dies mit einem Tag tun können . Dort können wir auch unsere Social-Media-Links hinzufügen.

Im Moment sieht alles etwas roh aus und der ganze CSS-Spaß liegt vor uns.

Lektion 6: Einrichten der benutzerdefinierten Eigenschaften und allgemeinen Stile

Okay, Zeit, diese Seite fantastisch aussehen zu lassen!

In diesem Teil erfahren Sie, wie Sie benutzerdefinierte Eigenschaften hinzufügen.

Das Einrichten von CSS-Variablen kann einige Zeit in Anspruch nehmen, zahlt sich jedoch beim Zusammenführen der Site aus. Sie eignen sich auch perfekt, um die Farben und Schriftarten der Site in nur wenigen Sekunden anzupassen. Ich schaue mir an, wie das geht, wenn wir die Site fertig stellen.

Lektion 7: Stylen der Titel und Untertitel

Nachdem Sie alle erforderlichen Typografien festgelegt haben, werde ich Sie durch die Untertitel zum Entwerfen und Gestalten der Titel und Untertitel in unseren Abschnitten führen.

Lektion 8: Einrichten des Intro-Abschnitts

In den nächsten Kapiteln wird es ziemlich praktisch sein, also keine Sorge, wenn Sie die Screencasts ein paar Mal erneut ansehen möchten.

Wir sorgen dafür, dass alles reagiert, verwenden CSS Grid und tauchen ein wenig in die Verwendung von emEinheiten ein.

Dies ist das perfekte Beispiel , in die CSS Grid durchscheint , und wir werden lernen , wie man Eigenschaften verwenden , wie grid-column-gap, grid-template-areasund grid-template-columns.

Intro-Bereich der Website

Lektion 9: Gestalten des Servicebereichs

Um ein wenig Interesse zu wecken, schaue ich mir an, wie wir background-imagediesem Abschnitt der Website ein hinzufügen können . Es ist eine gute Möglichkeit, die zweite zu unterbrechen und zu vermeiden, dass überall nur einfarbige Hintergründe vorhanden sind. Außerdem sehe ich mir an, wie Sie background-blend-modedie Farbe des Bildes ändern können, um das Erscheinungsbild Ihrer Website konsistent zu halten.

Als Bonus lernen wir auch, wie Sie Schaltflächen stylen, wenn Sie den Mauszeiger darüber halten oder sie auswählen, wenn Sie durch die Seite blättern.

Der Service-Bereich der Website

Lektion 10: Der Abschnitt Über mich

Großer Fortschritt! Das ist also der alles entscheidende Abschnitt über mich. Dieser ist dem Intro ziemlich ähnlich, da wir CSS Grid verwenden werden, aber das Bild nach rechts verschieben und ein nützliches Beispiel für die CSS- frEinheit finden.

Der Abschnitt Über mich auf der Website

Lektion 11: Das Portfolio

Der Portfolio-Bereich

In diesem Screencast werde ich zeigen, wie wir unseren Portfolio-Bereich aufbauen, um einige unserer großartigen Arbeiten zu zeigen. Und wir werden sogar lernen, wie man cubic-bezier()mit etwas Schwebestyling einen großartigen und beeindruckenden Effekt erzielt!

Portfolio-Bereich mit hervorgehobenem Element

Lektion 12: Hinzufügen der sozialen Symbole mit Font Awesome

Diese Besetzung wird süß und kurz sein, so dass Sie sich ein wenig ausruhen und einige schnelle Tipps und Tricks lernen können.

Das Hinzufügen von Social Media-Links zu Font Awesome-Symbolen ist ein Kinderspiel. Wir können dies mit einem Tag tun und dann einen Klassennamen eines Symbols hinzufügen, das Sie hinzufügen möchten.

Im Folgenden erfahren Sie, wie Sie ein Symbol für GitHub hinzufügen, sobald Sie Font Awesome in Ihrem Markup verknüpft haben.

Lektion 13: Stylen der Fußzeile

Die Fußzeile

Während die Symbole vorhanden sind, müssen wir hier mehr Stil hinzufügen, damit sie so eingerichtet werden, wie wir sie benötigen.

Mit ein wenig Flexbox und dem Entfernen des Stylings von der Liste ist list-style: nonees relativ einfach.

Lektion 14: Einrichten der Navigationsstile

Wir haben die Navigation bis zum letzten Mal verlassen, da es sehr oft eines dieser einfachen Dinge ist, deren Einrichtung und korrekte Ausführung am längsten dauern kann.

Sobald der Vorgang abgeschlossen ist, wird die Navigation außerhalb des Bildschirms angezeigt. Wenn ein Benutzer auf das Hamburger-Symbol klickt, wird er jedoch eingeblendet. Der erste Schritt ist jedoch, es so zu gestalten, wie wir es möchten. Dann können wir uns Sorgen machen, dass es tatsächlich funktioniert!

gestyltes Navigationsmenü

Lektion 14: Den Hamburger erstellen

Aufnahme vom oberen Rand der Seite mit einem Pfeil, der das Hambuerger-Symbol hervorhebt

In diesem Screencast erfahren Sie, wie Sie ein Hamburger-Menü hinzufügen, um zur Navigationsansicht zu wechseln. Es ist kein Icon oder SVG, sondern reines CSS.

Wir werden eine zufällige Übung ::beforeund ::afterPseudo-Selektoren haben, Übergang, und da es sich nicht um einen Link handelt, sondern um einen button, müssen wir auch den verschiedenen Cursor definieren, wenn wir mit der Maus über das Hamburger-Symbol fahren, um anzuzeigen, dass darauf geklickt werden kann cursor: pointer.

Lektion 15: Hinzufügen des JS

Mit ein wenig JavaScript werde ich Sie durch die Implementierung eines wirklich schönen und reibungslosen Übergangs von unserem Hauptbildschirm zum Navigationsfenster führen, indem Sie auf das Hamburger-Menü klicken.

Menü Animation öffnen / schließen

Ich schaue mir auch an, wie wir das reibungslose Scrollen mit CSS nur mithilfe von hinzufügen können scroll-behavior: smooth. Ja, so einfach ist das wirklich! Es ist auch ein großartiger Tweet für Today I Learned (TIL). Fühlen Sie sich frei, Ihnen TILs an @scrimba zu senden, und ich bin sicher, dass sie sich wirklich freuen werden, sie zu retweeten!

Lektion 16: Erstellen der Portfolio-Elementseite

Wenn die Homepage fertig ist, ist es Zeit, an einer Vorlagen-Portfolio-Seite zu arbeiten, auf der Sie weitere Details zu jedem der Projekte angeben können, die Sie in Ihr Portfolio aufnehmen.

Wir werden auch lernen, wie man es nahtlos mit unserer Hauptseite verknüpft, um eine angenehme Benutzererfahrung zu erzielen.

Portfolio-Artikelseite

Lektion 17: Anpassen Ihrer Seite

Hier kommt die Magie der benutzerdefinierten CSS-Eigenschaften ins Spiel!

In diesem Video sehe ich, wie wir die benutzerdefinierten Eigenschaften anpassen können, die wir eingerichtet haben, um das Farbschema Ihrer Site innerhalb von Sekunden zu ändern, und wie wir die Schriftarten schnell und einfach aktualisieren können, um die Site zu Ihrer eigenen zu machen!

Lektion 18: DigitalOcean-Tröpfchen - Was sie sind und wie man sie einrichtet

In diesem Screencast werden wir DigitalOcean-Tröpfchen untersuchen. Es handelt sich um Linux-basierte virtuelle Maschinen, und jedes Droplet ist ein neuer Server, den Sie verwenden können.

Es mag entmutigend wirken, aber sie sind super einfach einzurichten, sehr anpassbar und verfügen über viele nützliche Funktionen, wie z. B. eine automatische Firewall.

DigitalOcean-Dashboard

Ich werde Sie durch jeden einzelnen Schritt des Weges führen, damit Sie genau wissen, wie man ein Tröpfchen aufbaut.

Lektion 19: DigitalOcean Droplets - Hochladen von Dateien über FTP

Um den gesamten Prozess abzuschließen, möchte ich Ihnen zeigen, wie wir unser Portfolio in das Tröpfchen hochladen können, das wir im vorherigen Kapitel erstellt haben. Jetzt ist es online, damit andere es sehen können!

Lektion 20: Abschluss

Und das ist es! Ihr nächster Schritt kann darin bestehen, diese Seite ganz über Sie zu erstellen, alle relevanten Beispiele hinzuzufügen, uns von Ihnen zu erzählen und sie in einem DigitalOcean-Tröpfchen live zu bringen.

Sobald Sie Ihr Portfolio zusammengestellt und online gestellt haben, teilen Sie es mir und dem Team von Scrimba mit! Sie finden uns unter @KevinJPowell und @scrimba auf Twitter, und wir würden uns sehr freuen, Ihnen mitteilen zu können, was Sie vorhaben!

Schauen Sie sich den vollständigen Kurs an

Denken Sie daran, dieser Kurs ist völlig kostenlos. Gehen Sie jetzt zu Scrimba und Sie können ihm folgen und eine fantastisch aussehende Seite aufbauen!

Original text