I recently graduated from Flatiron Coding Bootcamp in New York and entered the job market., Als Frontend-Webentwickler, der nach einer Einstiegsposition sucht, halte ich es für wichtig, eine professionelle Portfolio-Website zu haben, auf der alle Ihre Projekte angezeigt werden, insbesondere wenn Sie keine vorherige Programmiererfahrung oder keinen formellen CS-Abschluss haben. Der Eintritt in den Arbeitsmarkt inmitten der Coronavirus-Pandemie ist gelinde gesagt entmutigend, also habe ich beschlossen, diese Zeit zu nutzen, um meine Fähigkeiten zu üben, neue zu lernen und hoffentlich coole Projekte auf dem Weg zu bauen. Dieser Blogbeitrag handelt von meinem allerersten Projekt, das ich während der Quarantäne erstellt habe und das live ging — meiner persönlichen Portfolio-Website.,
Vor dem Erstellen meiner Website habe ich einen Plan erstellt, wie ich mich dem nähern soll. Die Segmente, an denen ich arbeiten musste, sahen folgendermaßen aus:
Planung — Verstehen Sie den Zweck, skizzieren Sie die Ergebnisse
Design — Ideen skizzieren, an Farbschema und Typografie arbeiten
Entwicklung — Schreiben des Codes
Veröffentlichen — Hosting und Abrufen eines benutzerdefinierten Domänennamens
Planung
Um mit dem Erstellen von Dingen im Leben zu beginnen, ist es hilfreich, einen Plan oder eine Vorstellung davon zu haben, was Sie erstellen möchten und wie Sie schau., Es ist großartig, mit dem Zweck zu beginnen, oder wie Simon Sinek sagen würde — „Beginnen Sie mit warum“. In meinem Fall war es mein Ziel, eine persönliche Portfolio-Website zu erstellen, auf der alle meine Informationen, alle Projekte, die ich in der Vergangenheit erstellt habe, und meine persönliche Biografie gespeichert sind. Diese Website sollte ziemlich einfach, intuitiv, reaktionsschnell sein und mich als Einzelperson sowie als erfahrenen Webentwickler darstellen. Es muss ein sauberes und modernes Design haben und eine schöne Oberfläche haben. Es sollte einzigartig und kreativ sein. Puh, das war viel!, Aber je konkreter Sie alle Details verstehen, desto einfacher wird die Ausführung. Bei der Skizzierung der Ergebnisse habe ich User Stories wie folgt implementiert:
— Der Benutzer wird mit einer Homepage begrüßt (dies sollte etwas Kreatives und Einzigartiges sein, in meinem Fall habe ich drei verwendet.,pelling persönliche Geschichte sowie Informationen über Bildung, aktuelle Tech — Stack, vergangene Berufserfahrungen und Interessen/Hobbys— für eine persönliche Note)
— der Benutzer kann auf Projekte Seite navigieren (dies ist, wo die besten Projekte leben wird, mit Beschreibungen der verwendeten Technologien und Links zu Gitub und Live-Video-Demos)
– der Benutzer kann auf Kontakt Seite navigieren (diese Seite wird alle notwendigen Kontaktinformationen sowie Links zu allen sozialen Medien und Github haben)
Design
Nach dem Verständnis der Zweck und die Planung eines groben Umrisses es ist Zeit, über Design nachzudenken!, Ich bin eine sehr visuelle Person, das war definitiv einer meiner Lieblingsteile. Ich begann mit dem Skizzieren der Wireframes / Blueprints für meine Seiten. Ich habe einfach Stift und Papier verwendet, aber Sie können beliebige Werkzeuge verwenden, zum Beispiel mag ich auch Figma, ein digitales Design-und Prototyping-Tool. Sie können damit Websites, Apps oder kleinere Benutzeroberflächenkomponenten erstellen, die in andere Projekte integriert werden können., Die erste Skizze meiner Wireframes sah folgendermaßen aus:
Einfaches Wireframing von Hand
Genau wie der Entwurf eines Gebäudes beschreibt ein Drahtgitter Details klar und spezifisch, während er den Bauherren (Ihnen, anderen Designern, Entwicklern usw.)) ein Überblick über das Projekt. Nachdem die Blaupausen fertig waren, begann ich, das Farbschema für meine Website zu recherchieren., Ich bin kein Designer, aber ich hatte ein Verständnis, dass das Farbschema sehr modern und sauber sein sollte. Ich werde einige großartige Ressourcen auflisten, die ich am Ende dieses Blogs für die Farbforschung gefunden habe. Nach einer beträchtlichen Menge an Recherchen habe ich Schwarz als Hauptfarbe ausgewählt (hauptsächlich, weil meine Homepage eine 3D-Grafik zum Reisen durch den Weltraum hatte) und Neonrosa als sekundären Farbtupfer.
Typografie spielt eine wichtige Rolle bei der Einstellung von Ton, Thema und Botschaft einer Website. Für meine Website habe ich Orbitron ausgewählt — eine geometrische serifenlose Schrift, die für Anzeigezwecke bestimmt ist., Es hat perfekt mit meinem Weltraumthema funktioniert und erinnert an die Science-Fiction-Filme, die ich als Kind gesehen und geliebt habe. Die zweite Wahl für die Schriftart fiel auf Raleway — es war laut Google Fonts eine der beliebtesten Paarungen mit Orbitron. Dies ist meine Seite mit einem Foto von der graffiti-Wand, dass ich nahm an der Flatiron school in Manhattan, sagt, dass „Work hard, be nice, positive, stay hungry, und haben den glauben, dass alles klappen wird — Das Flatiron Schule“ — mein mantra, das bis zu diesem Tag!,
Entwicklung
Jetzt ist die Zeit für die aufregendste teil — Schreiben des Codes! Es gibt eine Menge Debatte online über eine benutzerdefinierte Website vs Verwendung einer Vorlage zu erstellen und es gibt sicherlich Vor-und Nachteile für diese beiden Optionen., Soweit ich weiß, ist es in Ordnung, eine Vorlage zu verwenden-sie ist schneller, einfacher und minimaler, und wenn Sie gerade am Anfang Ihrer Karriere als Webentwickler stehen, wird es definitiv einfacher für Sie. Versteh mich jedoch nicht falsch, du solltest es trotzdem anpassen und Funktionen und Funktionen hinzufügen, um deine Programmierkenntnisse zu präsentieren.
Ich persönlich habe mit einer Bootstrap-Vorlage begonnen, aber am Ende alle meine Seiten von Grund auf neu erstellt, weil ich sie auf diese Weise besser anpassen konnte. Es hat definitiv die Art und Weise länger aber es hat sich gelohnt, und ich bin sehr zufrieden mit der Art, wie es sich herausstellte., Das Hauptziel dieser Portfolio-Website ist es, die von Ihnen erstellten Projekte zu präsentieren, aber die Website selbst zählt natürlich auch als Projekt! Dies ist meine Projektseite mit den Projekten, die ich bei Flatiron erstellt habe:
Um Ihre brandneue Website zu veröffentlichen, müssen Sie sich für den Domainnamen und das Webhosting entscheiden., Domain Name ist die Adresse Ihrer Website, die Personen in die URL-Leiste des Browsers eingeben, um Ihre Website zu besuchen. Nach meinen Recherchen ist es wichtig, einen benutzerdefinierten Domainnamen zu haben, da er die Glaubwürdigkeit erhöht und Ihnen hilft, leichter online gefunden zu werden. Ich persönlich habe mich für den benutzerdefinierten Domainnamen entschieden, bei dem ich gekauft habe namecheap.com.
Webhosting ist der Ort, an dem sich alle Dateien Ihrer Website befinden. Es ist wie die Heimat Ihrer Website, wo es tatsächlich lebt., Eine gute Analogie wäre, wenn der Domainname die Adresse Ihres Hauses wäre, dann ist Webhosting das eigentliche Haus, auf das die Adresse verweist. Alle Websites im Internet benötigen Webhosting.
GitHub-Seiten sind öffentliche Webseiten, die kostenlos über GitHub gehostet werden, und es ist die Ressource, die ich zum Hosten meiner verwendet habe. GitHub-Benutzer können sowohl persönliche Websites (eine pro Benutzer zulässig) als auch Websites erstellen und hosten, die sich auf bestimmte GitHub-Projekte beziehen, solange sie den Quellcode in einem öffentlichen Repository auf GitHub haben., Nachdem meine Website veröffentlicht wurde, habe ich ein paar Änderungen vorgenommen und jedes Mal, wenn sie ohne Probleme bereitgestellt wurde. Diese Option hat für mich hervorragend funktioniert, da sie kostenlos und einfach einzurichten war.
Da ich meinen Domain-Namen von einem separaten Unternehmen gekauft und meine Website kostenlos mit GitHub Pages gehostet habe, war ein wenig Setup erforderlich. Nachdem ich meinen Domainnamen durch Bearbeiten der DNS-Einstellungen auf mein Webhosting-Unternehmen gerichtet und auf einen Tag gewartet habe, ging meine Website live!, If you’re interested you can find it here https://alenanikulina.nyc
