Design, Entwicklung und Veröffentlichung einer Webseite
A course by Javier Usobiaga FerrerWebdesigner
A course by Javier Usobiaga Ferrer, Webdesigner
Siehe den gesamten Vorgang der Schaffung und Veröffentlichung einer Webseite mit HTML, CSS und JavaScript
Im Webdesign versucht eine gute Benutzeroberfläche zu gefallen und darauf zu reagieren, wie sich das menschliche Gehirn verhält. Das bedeutet, dass wir in uns allen einen Designer haben, der manchmal bewusstlos oder schlafend ist und etwas sehen kann, das funktioniert, das harmonisch ist, auch wenn er nicht versteht, warum. Wenn Sie die Prinzipien des Webdesigns lernen und diesen Designer in Ihnen wecken möchten, sind Sie hier richtig.
In diesem Kurs lernen Sie die beiden Seiten des Erstellens einer Website kennen: Zum einen lernen Sie die grundlegenden Techniken zum Planen einer Website, zum Organisieren von Informationen in Drahtgittern und zum Erstellen einer visuellen Grammatik mit Typografie, Farbpaletten, Abstand, Komposition und Illustration. Anschließend werden Sie diese Seite mit HTML, CSS und JavaScript erstellen, bis Sie die Seite im Internet veröffentlichen.
Ihr Führer während dieses Prozesses ist Javier Usobiaga, Webdesigner, Gründer des Swwweet-Studios und Professor für andere Kurse bei Domestika wie z SVG-Vektorgrafiken: Mit Code veranschaulichen und animieren , Weblayout mit CSS Grid, Flexbox und andere moderne Techniken , Einführung in die Programmierung in JavaScript e [Einführung in die Responsive Web-Entwicklung mit HTML und CSS](Introducción al Desarrollo Web Responsive con HTML y CSS) , die als Ergänzung zu den Informationen in diesem Kurs dienen kann.
Was lernst du in diesem Onlinekurs?
27 Lektionen & 33 Downloads
Was machen wir im Kurs?
1 Minute, 12 Sekunden
Designziele, Rahmen und Referenzen
6 Minuten, 50 Sekunden
Inhaltsinventar
6 Minuten, 17 Sekunden
Informationsarchitektur
9 Minuten, 56 Sekunden
Prinzipien und Werkzeuge
4 Minuten, 9 Sekunden
Visuelle Untersuchung
6 Minuten, 32 Sekunden
Was ist in diesem Kurs enthalten?
Sie beginnen den Kurs mit einem Treffen mit Javier und einigen Designern und Entwicklern, die Artikel schreiben und verschiedene Experimente mit Webtechnologien durchführen, die es wert sind, im Auge behalten zu werden. Sie werden auch die Inhalte des Kurses entdecken.
Sie lernen die Prinzipien des visuellen Designs und die Elemente, aus denen es besteht, kennen und arbeiten hauptsächlich an den grundlegendsten Elementen wie Typografie, Farbe, Raster und Illustration.
Sie erhalten einen ersten Einblick in einen statischen HTML-Generator und sein Vorlagensystem sowie in das Organisieren von Dateien und das Erstellen von Masterseiten.
In der nächsten Einheit, beginnen Sie das Design - System , um den Code vorgeschlagen passieren Front-End : die Schriftart, die Farbe, das Gitter und andere Komponenten.
Sie werden dem Projekt über verschiedene Bibliotheken und JavaScript-Funktionen weitere Interaktionselemente hinzufügen.
Sie werden sehen, wie die Codeversionsmanager funktionieren, und schließlich werden Sie einen Veröffentlichungsdienst verwenden, um Ihre Website der Welt bekannt zu machen.
Recommended software & tools for this course
What is this course's project?
Sie erstellen, entwickeln und veröffentlichen eine Webseite mit Ihrem Arbeitsportfolio.
Projekte von Kursteilnehmenden
Who is this online course for?
An alle Personen, die sich für das Erlernen der Prinzipien des Webdesigns interessieren und ihre eigene Webseite veröffentlichen möchten.
Requirements and materials
Grundkenntnisse in HTML und CSS sind ratsam. Wenn Sie sie nicht haben, wird empfohlen, Javiers ersten Kurs bei Domestika zu absolvieren: Einführung in die [url=https://www.domestika.org/es/courses/74-introduccion-al-desarrollo-web-responsive-con-html-y-css]Webentwicklung mit HTML und CSS.
Sie benötigen einen Computer und einen Code-Editor (Javier schlägt einige kostenlose vor). Es kann auch interessant sein, ein visuelles Designprogramm wie Sketch, Figma oder Adobe XD zu haben, obwohl diese nicht unbedingt erforderlich sind.
Bewertungen
- vor 2 Monaten
I really enjoyed this course. I already had a website I needed to build and I was able to apply this to improve it so much. It’s comprehensive and well structured.
- vor 4 Monaten
Muy buen curso y muy buena explicación del profesor, como siempre. Perfecto para iniciarse en la creación de webs
- vor 6 Monaten
Excelente curso para tener las bases de animación con css
- vor 6 Monaten
Me gustó
- vor 7 Monaten
Excelente curso, viene muy ordenado y armado. Es un muy buen profesor
Inhalt
- E1
Einführung
- Präsentation
- Einflüsse
- Was machen wir im Kurs?
- E2
Idee einer Website
- Designziele, Rahmen und Referenzen
- Inhaltsinventar
- Informationsarchitektur
- E3
Visuelles Design
- Prinzipien und Werkzeuge
- Visuelle Untersuchung
- Satz
- Farbpalette in einer Oberfläche
- Fadenkreuz und vertikaler Rhythmus
- Illustration und Ikonographie
- E4
Vorlagensystem
- Vorbereiten der Umgebung und der Code-Editoren
- Dateistruktur und Betrieb
- Masterseiten und neue Seiten erstellen
- Bedingt und teilweise
- E5
Frontend-Entwicklung
- Organisation des Codes
- Satz und Farbe
- Fadenkreuzsystem
- Schnittstellenkomponenten
- Vervollständigung der Schnittstelle
- E6
Webinteraktion
- Interaktive und Dropdown-Menüs
- Eine Galerie implementieren
- Interaktion abschließen
- E7
Veröffentlichung einer Website
- Verwaltung der Codeversion
- Veröffentlichungsdienste
- Zusätzliche Ressourcen
- AP
Abschlussprojekt
- Design, Entwicklung und Veröffentlichung einer Webseite
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
The course is designed for people with basic HTML and CSS knowledge, but you don’t need to be an expert. It’s perfect for those wanting to deepen their skills in modern web design and front-end development techniques.
Basic knowledge of HTML and CSS is recommended. Advanced experience isn’t required, but it helps to understand basic webpage structure and code editing.
You’ll learn to build responsive layouts, CSS animations, accessible SVG graphics, information architecture, wireframing, prototyping, website publishing, and how to apply agile methodologies in digital projects.
You’ll need a code editor (like VS Code), Node.js, a terminal, an up-to-date web browser, and access to tools like Figma, Keynote, PowerPoint, or Notion for prototyping and organization.
You’ll learn how to use CSS variables to manage colors, fonts, and spacing, making it easier to keep a consistent look and quickly update your web projects globally.
Yes, you’ll practice using CSS Grid and other techniques to create adaptable web structures that look great on any device, enhancing the user experience.
Yes, you’ll be able to develop your own project, applying all the design, development, and publishing concepts to build a portfolio or client website.