Ich lege Wert auf Clean Code und lerne ständig.
AUF ANFRAGE
IN NEUEN PROJEKTEN
IMMER
Minimalistischer Code
W3C konformer HTML
Semantischer HTML
Übersichtlicher Code
Grid & Flexbox
BEM Namenskonvention
Responsives Layout
Mobile-first
Kompatibel mit altem IE
Fortgeschrittenes CSS
SVG Animationen
Grafische Bearbeitung
zeige:
Gesamter Weg
Frontend
Grafik
Lernen
Ich habe ein vielseitiges Skillset und brauchte eine Plattform, um es darzustellen.
Primäres Ziel dieser Webseite: Zu zeigen, wie ich Webentwicklung betreibe.
Hier können Sie meine relevanten Fähigkeiten und Erfahrung sehen sowie die Entwicklung meiner Code-Qualität beobachten.
Sekundäres Ziel: Meine grafischen Arbeiten zu demonstrieren.
Traditionelle Formate für Grafikportfolios haben ihre Einschränkungen, aber hier habe ich die Details meiner Arbeit sichtbar gemacht.
Dies ist mein erstes Projekt, bei dem ich ChatGPT benutzt habe. Vor allem um JavaScript zu schreiben und zur Übersetzung, aber auch für so manche Kleinigkeiten.
Zuvor schrieb ich einfaches JavaScript oder passte vorgefertigte Skripte an. Jetzt kann ich benutzerdefinierte, komplexe Features von Grund auf entwickeln.
Zum Beispiel habe ich einen benutzerdefinierten Vorher/Nachher-Bildbetrachter erstellt (sichtbar wenn man Bilder öffnet). Mein JavaScript-Code mag möglicherweise nicht so elegant und raffiniert wie mein HTML oder CSS sein, aber ich strebe an, ihn gut strukturiert und effizient zu halten.
Hinsichtlich SEO, einige Grundlagen wurden gesetzt, da sie ein unvermeidlicher Bestandteil guten Codes und Inhalts sind. Mein Hauptfokus liegt jedoch derzeit darauf, meine Fähigkeiten zu präsentieren.
Diese Seite wurde durch Powermapper analysiert, um sicherzustellen, dass sie den aktuellen Richtlinien entspricht.
Ich werde diese Seite weiterhin aktualisieren und verbessern, um ein noch besseres Benutzererlebnis zu bieten, wie auch konstruktiveren Inhalt für die Seiten "Visuelles" und "About".
Diese Webseite existierte in zwei Versionen: erste, zweite.
In ihrer ersten Version war die Seite online für ein Jahr , bis das Unternehmen größere Veränderungen durchlief.
Das Hauptziel des Kunden war, eine hohe Sichtbarkeit in Google-Suche zu erreichen. Dieses Ziel habe ich erreicht: Die Webseite rangierte je nach verwendeten Keywords kontinuierlich unter den Top-Ergebnissen.
Zum Beispiel hat die Suche nach „weld -dieses Landkreis-“ die Webseite als oberstes Ergebnis gezeigt, während breitere Suchanfragen im Land sie in den vorderen 3-5 Positionen platziert hat. Dieses hohe Ranking ist auf clean Code, effektives UX und Semantik, gut integrierte relevante Keywords und eine robuste Struktur interner und externer Links zurückzuführen. Es gibt verschiedene Tools zur Verbesserung der SEO, aber hochwertiger Code und präziser Inhalt bleiben die wirkungsvollsten Faktoren.
Obwohl ich keine Screenshots der Ergebnisse habe, können Sie das Ergebnis durch Überprüfung des Codes verifizieren.
Eine der größten Herausforderungen war die Gestaltung des UX mit der begrenzten Information, die der Kunde bereitgestellt hat. Ich habe das UI-Design mit Figma erstellt und die Unternehmensinformationen in Google Maps hinzugefügt.
Aus Datenschutzgründen wurde die Information auf der genannten Seite durch fiktive Angaben ersetzt, einschließlich Bilder.
Für diese Aufgabe habe ich die Basis mit SVG erstellt, das Styling mit CSS hinzugefügt und die Interaktivität mit CSS und JavaScript umgesetzt.
Zu diesem Zeitpunkt hatte ich ein grundlegendes Verständnis von SVG und dessen beeindruckenden Möglichkeiten, aber wenig Erfahrung mit fortgeschritteneren Anwendungen.
Dies war mein Einstieg in die Erstellung komplexer SVG-Grafiken.
Zu den größten Herausforderungen gehörten die Implementierung der dynamischen blauen Füllung und die Berechnung genauer Rotationswerte, insbesondere da der Text entlang einer kreisförmigen Achse bewegt werden musste.
Sobald ich die Lösung für die Füllung gefunden hatte, stellte sich heraus, dass sie relativ einfach umzusetzen war.
Der Kurs umfasste 120 akademische Stunden und beinhaltete umfangreiche Hausaufgaben.
Er hat mir fortgeschrittene, professionelle Fähigkeiten in Adobe Photoshop und Adobe Illustrator vermittelt und mich in InDesign eingeführt.
Es wurden auch wesentliche Designprinzipien wie der Goldene Schnitt und Spannungspunkte behandelt.
Zudem erhielt ich Kenntnisse über kommerziellen Druck.
Die Ergebnisse können Sie in meinem Ergebnisportfolio sehen.
Hier ist das Zertifikat.
App-Zweck: Menschen helfen, sich zu vernetzen, zu sehen, was in ihrer Umgebung passiert, und sich zu treffen, sei es für organisierte Events, Kurse oder auch um einfach so einander zu sehen.
Ich habe das Design in Figma erstellt.
Dies ist ein Projekt, das eine Freundin begann. Sie hat das erste Wireframe erstellt. Viele UX- und UI-Entscheidungen wurden gemeinsam getroffen.
Vorher hatte ich große Schwierigkeiten, Designs für meine Webseiten zu erstellen, und ich wusste, dass ich lernen muss.
Dieser Kurs ist außergewöhnlich kompakt, gut strukturiert und vermittelt das Material so effizient, dass es bei traditionellen Kursen 10 Mal länger dauern könnte, den gleichen Inhalt zu vermitteln. Nach Abschluss des Kurses habe ich substanzielle Kenntnisse erworben und endlich Webdesign verstanden.
Der Playlist, den ich 2021 durchging, bestand aus den Episoden 1-19.
Kurz davor habe ich auch einige grundlegende Designprinzipien in diesem Video gelernt. Alle Informationen dort scheinen jetzt völlig offensichtlich, aber damals war es wichtig, sie zu hören.
Hier bestand der Kunde auf pixel-perfect Genauigkeit mit minimalen Media-Queries und Transitions, obwohl es ein Maßstabsproblem gab. Daher habe ich zwei Versionen erstellt.
Die erste Version entspricht den Anforderungen des Kunden. Vergleichen Sie sie mit dem Design-PDF.
Die zweite Version hat angepasste Größen für bessere Lesbarkeit.
Da Tablet- und Mobil-Layouts nicht bereitgestellt wurden, habe ich sie selbst entworfen und implementiert.
Aus Datenschutzgründen wurde die Information auf der genannten Seite durch fiktive Angaben ersetzt.
In diesem Projekt gab es keine Herausforderungen.
Da Tablet- und Mobil-Layouts nicht bereitgestellt wurden, habe ich sie selbst entworfen und implementiert.
Aus Datenschutzgründen wurde die Information auf der genannten Seite durch fiktive Angaben ersetzt, einschließlich Bilder.
Der Zweck der Website besteht darin, Patienten, ihren Ärzten und den Mitarbeitern des Gesundheitssystems einen einfachen Zugang zu Röntgenbildern zu ermöglichen, die für sie relevant sind.
Die größte Herausforderung bestand darin, den Inhalt und die UX zu definieren, da mir fast nur die kurze Aufgabe gegeben wurde, die ich hier beschrieben habe.
Es war geplant, dass ich die Webseite zusammen mit einem Backend-Entwickler erstelle, aber später wurde das Projekt eingestellt.
Daher blieben einige Funktionen unzugänglich. Zum Beispiel wird jetzt die Seite, die der Benutzer auswählt, nicht hervorgehoben, obwohl es geplant war, dass sie es tut.
Aufgabendetails: UX, SEO, UI, Frontend, Informationen auf Google Maps platzieren, Fotos machen.
Kein Hosting & PHP.
CMS war geplant, und ich habe fast CouchCMS angewendet, aber später wurde das gestrichen.
Eine One-Pager-Seite mit einer zusätzlichen Seite mit Form.
Die Seite war viele Jahre online, bis das Unternehmen aufgelöst wurde.
Dies war meine erste Webseite, ich habe dabei gelernt. Daher musste ich viele Fehler korrigieren, aber ich habe viel daraus gelernt. Besonders fortgeschrittenes CSS (es gab 2 Versionen, die erste war überdekoriert), Soft Skills, saubere Code-Praktiken und HTML-Semantik sowie Plattformvielfalt.
Aus Datenschutzgründen wurde die Information auf der genannten Seite durch fiktive Angaben ersetzt.
Ich begann, Webentwicklung zu lernen, indem ich eine Webseite erstellte. Am Anfang benutzte ich Selbstlernkursen von htmlbook.ru, Zvirec und Learn CSS Layout und absolvierte dann mehrere Kleinkurse auf HTML Academy (kleinere Version auf Englisch hier), die HTML- und CSS-Grundlagen, semantisches HTML5, Layout-Optionen (Responsive und Static), dekorative CSS3-Effekte, Animationen und Forms behandelten.
Ich vertiefte meine CSS-Kenntisse durch Experimentieren und Lesen von CSS-Tricks, Simurai Lab und verschiedenen Foren wie
htmlforum.ru,
Stack Overflow,
CodingForums.com,
CSS Creator.
Ich lernte auch Webseiten-Fundamente wie Schriftarten, Modifizieren von JavaScript- und PHP-Snippets und Grundlagen in SEO, Web-Bilder, Web-Hosting, UX/UI, . Unter den CMS-Systemen, die ich ausprobiert habe, bevorzuge CouchCMS wegen seines Developer-friendly Ansatzes.
Mein Lernen setzte sich fort mit Flexbox, Grid, HTML-Semantik, BEM und anderen Klassennamenskonventionen, Code-Lesbarkeit (Struktur, Legacy-Code), SVG, SVG-Animationen, SEO sowie JavaScript, SASS, SMACSS, Git und GitHub.
Heutzutage sind meine wichtigsten Lernressourcen HTML Academy, W3Schools, CSS-Tricks und Stack Overflow.
Vor kurzem habe ich KI in meine Arbeit integriert und benutze Bildbearbeitungstools und ChatGPT für Code-Erklärungen, Vorschläge und Skripte, hauptsächlich in JavaScript, aber auch darüber hinaus. Dies hat meine Fähigkeiten stark erweitert und es mir ermöglicht, komplexen Code zu erstellen und zu verstehen. Zum Beispiel habe ich ChatGPT verwendet, um ein Python-Skript zu schreiben, der zum Batch-Umbenennen von Dateien auf meiner Festplatte gedient hat. Siehe ein weiteres Beispiel.
Ich aktualisiere regelmäßig meine Webseite, was mich dazu bringt, Neues zu lernen und über neue Features auf dem Laufenden zu bleiben. Ich bleibe auch durch Newsletter von Хабр, Хекслет und anderen Quellen informiert.
