Kreatives Webdesign: Planung und Programmierung
A course by DXR ZoneArt Direction und Creative Programming Agency
A course by DXR Zone, Art Direction und Creative Programming Agency
Lerne, wie man mit HTML, CSS und JavaScript spannende Webseiten erstellt
Heutzutage braucht fast jeder eine Website. Sei es, um Ihr Portfolio zu präsentieren oder um Ihre Kunden zu erreichen. Zu wissen, wie man codiert, ist insgesamt eine nützliche Fähigkeit. Rifke Sadleir und Dan Baragwanath, die Gründer der Kreativprogrammagentur DXR Zone, sind hier, um Ihnen die Grundlagen des Programmierens von Grund auf beizubringen und wie Sie eine visuell ansprechende Website erstellen.
In diesem Kurs erhalten Sie eine vollständige Anleitung zum Planen, Gestalten, Formatieren und Starten Ihrer eigenen Website. Erfahren Sie, wie Sie in HTML, CSS und JavaScript codieren und wie Sie die kostenlosen Programme verwenden, die das Codieren erleichtern.
Was lernst du in diesem Onlinekurs?
18 Lektionen & 17 Downloads
Was werden wir in diesem Kurs tun?
4 Minuten, 7 Sekunden
Aufbau des Konzepts
3 Minuten, 21 Sekunden
Sammeln von Referenzen
11 Minuten, 33 Sekunden
Erstellen eines Moodboards
6 Minuten, 53 Sekunden
Erstellen einer Sitemap
4 Minuten, 28 Sekunden
Mit Designvorschlägen kommen
17 Minuten, 20 Sekunden
Was ist in diesem Kurs enthalten?
Lernen Sie Rifke und Dan, die Grafikdesigner und Programmierer hinter DXR Zone, und Ihre Lehrer für diesen Kurs kennen. Sie teilen ihre unkonventionelle Reise, die sie dazu brachte, ihre Agentur für kreative Webentwicklung und Art Direction zu gründen. Sehen Sie sich einige ihrer jüngsten Arbeiten an und erfahren Sie mehr über die Künstler und Designer, die sie beeinflusst haben.
Entdecken Sie die Vorbereitungen, die beim Erstellen einer Website erforderlich sind, bevor Sie Code schreiben. Erfahren Sie, wie Sie ein Konzept erstellen, indem Sie den Zweck und die Zielgruppe Ihrer Website festlegen. Lassen Sie sich von Referenzen inspirieren, um ein Design zu visualisieren und ein Moodboard zu erstellen. Beginnen Sie dann mit der Planung der Reise des Benutzers durch Ihre Website, indem Sie eine Sitemap erstellen und einen Designvorschlag mit Figma erstellen.
Verschaffen Sie sich als Nächstes einen Überblick über die Verwendung von Atom, einer Software zum Codieren, bevor Sie Schritt für Schritt lernen, wie Sie codieren. Lernen Sie zunächst, wie Sie in HTML codieren, um die grundlegende Webseite zu erstellen. Sehen Sie sich dann an, wie Sie in CSS codieren, um Ihrer Website Stilelemente und Formatierungen hinzuzufügen. Verbinden Sie alles, indem Sie lernen, wie Sie in JavaScript codieren, um Ihrem Webdesign unterhaltsame und interaktive Komponenten hinzuzufügen.
Zeit, live zu gehen! Rifke und Dan bringen Ihnen bei, wie Sie Ihre Website live ins Internet stellen. Erfahren Sie, wie Sie Ihre Website auf Fehler oder andere häufige Probleme testen, und lernen Sie einige nützliche Lösungen zur Fehlerbehebung und Fehlerbehebung kennen. Sobald Ihre Website von Benutzern getestet und einsatzbereit ist, können Sie sie mit der Welt teilen!
What is this course's project?
Planen und programmieren Sie eine kreative Website von Grund auf mit HTML, CSS und JavaScript.
Projekte von Kursteilnehmenden
Who is this online course for?
Jeder, der daran interessiert ist, eine Website zu entwerfen und zu erstellen.
Requirements and materials
Es sind keine Vorkenntnisse erforderlich, obwohl Ihnen jede Programmiererfahrung einen Vorsprung verschafft!
Um an diesem Kurs teilzunehmen, benötigen Sie lediglich Zugriff auf Atom und Figma, die beide kostenlose Apps sind, und natürlich auf das Internet.
Bewertungen
- vor 5 Monaten
um cruso bom
- vor 6 Monaten
Quiero expresar que el curso de programación es excelente y cuenta con información muy valiosa. La calidad del contenido y la forma en que se presenta son muy útiles para el aprendizaje. Estoy muy satisfecha
- vor 8 Monaten
A very hands-on and useful course, even though it is from 2021 and I am writing this review in '25. The instructors guide you through all the steps, from collecting inspiration, over writing HTML, CSS and JavaScript, to actually publishing your website. Atom, the code editor used by the instructors, isn't around anymore, but that is not an issue at all, just use VS Code, it has awesome features anyway that weren't available back in '21. Browser console for debugging etc. all are still the same.
- vor 8 Monaten
muy buen curso !!!
- vor 10 Monaten
I have tried several web design courses, each with different aims and approaches, but with this course I found an approach that is not too deep into programming but it just gives you resources to get inspired as well as shape your ideas and implement your projects. For me this course is very valuable. Thank you.
DXR Zone bietet Dienstleistungen an, die von Art Direction, digitalem Design bis hin zu Full-Stack-Entwicklung reichen. Zu ihrer Kundenliste gehören Google, Selfridges, Burberry, The Face, Dazed, adidas, Universal Music, Nike, Somerset House, Converse, Hypebeast, The Magnet Agency, Anyways, Institute of Coding, Depop, Dropbox, University of the Arts London, ICA , The Future Laboratory, Warp Records und Beirut Re—Store.
Inhalt
- E1
Einführung
- Über uns
- Einflüsse
- Was werden wir in diesem Kurs tun?
- E2
Planung und Gestaltung
- Aufbau des Konzepts
- Sammeln von Referenzen
- Erstellen eines Moodboards
- Erstellen einer Sitemap
- Mit Designvorschlägen kommen
- E3
Bauen und Codieren
- Grundlagen schaffen
- Erstellen der Grundstruktur in HTML 1
- Erstellen der Grundstruktur in HTML 2
- Stilelemente in CSS 1
- Stilelemente in CSS 2
- Hinzufügen von Interaktionen in Javascript 1
- Hinzufügen von Interaktionen in Javascript 2
- E4
Live gehen
- Starten der Website
- Testen der Site mit Benutzern
- Änderungen basierend auf Benutzertests
- AP
Abschlussprojekt
- Kreatives Webdesign: Planung und Programmierung
Was erwartet dich in einem Domestika-Kurs?
Lerne in deinem Tempo
Lerne bequem von zuhause aus, in deinem eigenen Tempo und ohne festen Zeitplan. Du entscheidest, wann und wo.
Lerne mit den Profis
Lerne die nützlichsten Techniken und Methoden mit den Profis der Kreativbranche.
Tritt mit den erfahrendsten Experten in Kontakt
Jede Lehrperson übermittelt dir in jeder Lektion leidenschaftlich sein/ ihr Wissen mittels ausführlichen Erklärungen aus professioneller Sicht.
Certificates
PLUSIf you're a Plus member, get a personalisiertes und unterzeichnetes Zertifikat signed by your teacher for every course. Share it on your portfolio, social media, or wherever you like.
Sei ganz vorne mit dabei
Dank hochwertig produzierter und gestochen scharfer Videos entgeht dir kein einziges Detail. Du hast uneingeschränkten Zugriff auf deinen Kurs und kannst dir so alle Videolektionen so oft ansehen, wie du möchtest.
Teile Wissen und Ideen
Stelle deine Fragen, bitte um Meinungen und biete Lösungsansätze. Teile deine Lernerfahrung mit anderen Schüler*innen in der Community, die genauso kreativ sind wie du.
Sei Teil einer globalen kreativen Community
Die Community umfasst Millionen wissbegierige Menschen weltweit, die Freude an kreativem Ausdruck finden.
Arbeite mit von Profis produzierten Kursen
Um eine einzigartige Online-Lernerfahrung zu garantieren, zählt Domestika auf eine sorgfältige Auswahl der Lehrpersonen und produziert jeden Kurs intern.
FAQ
Yes, this course is designed for beginners and teaches foundational web development skills from scratch using HTML, CSS, and JavaScript. No prior coding experience is required.
You’ll need a code editor like Atom or VS Code, a web browser for testing, and optional design tools such as Figma or Arena for planning and mood boards. All recommended tools are free or have free versions.
You’ll learn website concept development, sitemaps, mood boards, HTML/CSS/JavaScript coding, responsive layouts, user testing, launching with Netlify, and creative techniques like experimental coding and nostalgic UI design.
No design background is required. The course covers key design concepts and provides step-by-step guidance for planning, prototyping, and building visually engaging websites.
You’ll learn to plan, design, and code your own portfolio website, including sitemap creation, mood board development, and implementing interactive features tailored to showcase your projects or creative work.
Yes, you’ll learn responsive design principles and how to adapt layouts for different screen sizes, ensuring your websites work well on both mobile and desktop devices.
A sitemap visually organizes your website’s structure and navigation, helping you plan content, user flow, and ensure all necessary pages are included before coding begins.