Ich baue eine komplette Website in 1 Stunde (mit Claude)

0:00 Wenn 2026 noch eine Website ohne KI baut, ja, da kann ich auch nicht helfen. Aber wenn ihr eine Website mit KI bauen wollt und wissen wollt, wie ihr in 60 Minuten vielleicht auch schneller eine Website komplett fertig baut von ich habe noch gar nichts bis hin, ich habe alles. Also ich habe Impressum, ich habe DJS, ich habe eine Startseite, ich habe vielleicht eine Aboutseite, ich habe die Texte, ich habe alles. dann seid ihr genau richtig, denn in diesem Video werden wirklich eine komplette Website From Scratch bauen und wir nutzen dafür mein neues Tool Spotlight. Deswegen ist dieses Video auch, ja, man könnte sagen, so eine Art Eigenwerbung, aber im Grunde genommen ist es eigentlich in erster Linie eine Tutorial, wie ihr super schnell eine Website bauen könnt. Und

0:45 zwar ist es hier ein komplett one take. Also, ich werde jetzt hier alles zeigen, was ich hier mache. Ich habe mir im Hintergrund hier auf die Kopfhörer ein bisschen Musik reingemacht, deswegen wundert euch nicht, wenn meine Stimme gleich ein bisschen ruhiger wird, denn diese Musik ist diese hier Distance. Slow meditative, ja, meditative, okay. Ambient space music for endless Atmosphere, also quasi super Entspannungsmusik. Mag ich total gerne, wenn ich irgendwie hier am Programmieren, am Arbeiten bin. Also, wundert euch da nicht. Ich kann euch diese ganzen Sachen total empfehlen. Das ist wirklich wirklich großartig. Hier von Astral Ambience. Toller Kanal kann ich an der Stelle sehr empfehlen. Ähm, ich würde ich würde sagen, wir starten noch direkt rein. Also, erstmal ähm wie

1:32 ist überhaupt oder was ist überhaupt eine gute Website? Es kommt ein bisschen drauf an, was ihr vorhabt. Also, ich würde mal sagen, wir schauen uns mal im Internet an, weil das solltet ihr natürlich auch machen für eure Websites. Ist sind die Webdesign Trends. Webdesign Trends 2026 und da sehen wir jetzt z.B. hier schon bei Vista Print. können wir mal reinschauen, was ist hier im Trend und dann haben wir hier ein Video. Da können wir das können wir uns anschauen. Ähm können wir eigentlich mal reingehen, aber muss jetzt auch nicht unbedingt. Wir sehen ja das hier auch in Form von Screenshots. Und zwar haben wir hier den, ich mache mal hier ganz kurz auf Pause. So. Wir machen haben hier z.B. den Brutalism. Brutalism ist ein Stil, den ich sehr gerne mag. Das ist ein Sneak Peak auf meiner aktuelle Website hier schön mit Animation. Und das könnt

2:19 ihr auch später erwarten, also, dass es in diese, nicht nur in diese Richtung natürlich, aber dass es eben auch so richtig cool animiert wird, dass wir coole Animationen reinbauen können, dass wir hier FAQs bauen können und falls ihr euch dafür interessiert, haben wir natürlich auch schon hier mit Nexus und down Slash Oh, jetzt muss ich mal ganz kurz schauen, wo ich die habe. Nexus, hier haben wir sie. Das ist z.B. die Startseite, die es voraussichtlich wird. Ich arbeite gerade dran und da haben wir dann z.B. solche coolen Sachen, dass man einfach hier Button Klick machen kann oder ein Quiz, was man hier durchesten kann. Also verschiedene Sachen um einfach Ich mach es mal ganz kurz hell, dann seht ihr auch ein bisschen mehr. Also Light Mode, Dark Mode könnt ihr

3:04 natürlich auch können wir auch später einbauen. Und hier kann man dann testen, ob Nexus was für mich ist. Und scheinbar ist Nexus echt richtig was für mich. Ähm, also sollte ich mir auf jeden Fall mal anschauen. Dann haben wir hier z.B. ein äh so eine so eine Art System, das hier links durchscrollt, rechts, aber dann nur das Bild ändert. Also auch das ist total praktisch. Nicht wundern, wenn ich ab und zu mal nach da schaue, weil da läuft mein Aufnahmeprogramm und ich habe beim meiner letzten Aufnahme und diese geht jetzt echt länger wahrscheinlich bei meiner letzten Aufnahme ist mir mein Bildschirm ja abgestürzt. Das war natürlich ziemlich beschissen, deswegen wundert euch nicht, falls ich ab und zu mal dort hinschaue. Dann haben wir hier natürlich eine Pricing Table undten hier so eine Art es Testimonial Durchklick Element. Wir haben hier einen Filter für die ganzen

3:50 Features und all das ist AI generiert. Wir haben hier auch eine Vergleichstabelle des Tools. Also all das ist drin. Wir haben hier unten noch ein Video auch mit solchen Hoverelementen. Das das können wir alles bauen. Das können wir da ist eurer Kreativität wirklich keine Grenzen gesetzt. Und ich zeige euch in diesem Video, wie ihr unter anderem solche Websites eben baut, aber auch ganz andere, z.B. die Website von Yalia Intermitz. Das ist eine Website, die ich jetzt kürzlich für ein paar Kundinnen ähm gebaut habe. Die machen einen modernen und ein ein SportBH für alle Größen, also für ganz große und ganz kleine Größen und die wollten eben ganz schnell eine Website und dann in der im Rahmen der Prototyping Week letzte Woche und dann habe ich die eben auch gebaut

4:36 und zwar mit Hilfe von KI. Das ging auch super super schnell. wie wir das gebaut haben, zeige ich gleich, denn das ist ein zweiter Ansatz, den ich euch zeigen möchte. Ähm, auf jeden Fall ist hier sogar dann ein äh ein Newsletter äh Plugin drin, also oder was heißt Plugin? Das ist einfach in die Seite implementiert. Und wie das geht, zeig ich euch auch später. Wenn ich jetzt hier auf anmelden klicke, dann wird das Ganze gesendet und zack äh bekomme ich hier ein verstanden, also eine eine Anmeldung und dann wird im Hintergrund bei Brevo äh ein Kontakt von mir angelegt. Double Op in Verfahren ist mit drin und auch die haben hier ein kleines Quiz, was man ausfüllen kann und am Ende kommt raus, ja, natürlich sollte ich mich für den Newsletter eintragen. Also ein paar kleine Spielereien, aber eben auch etwas, was total die Interaktion auf der Website fördert, was sie ein

5:22 bisschen interaktiver macht und mehr als eben einfach eine Standardseite, wie aktuell z.B. meine Scheurerag Seite, die halt wirklich total langweilig ist, muss ich ganz ehrlich sagen, wenn man hier einfach auf Projektanfragen klickt, kommt man zwar zum Projektanfragen, aber ganz ehrlich, das sieht ja nicht cool aus. Da sieht ja das hier tausend mal besser aus. Es ist mit Social Proof und allem drum und dran, was man so braucht. Das hier ist im Grunde eigentlich eher ein Platzhalter. Yalia Intermates ist nicht das einzige und auch Nexus ist nicht das einzige, was ich damit bauen kann, sondern auch Preventra K auch im Rahmen der Prototyping Week erstellt worden. Und das ist z.B. eine Seite, die finde ich richtig cool, denn die kann man komplett mit der Tastatur steuern und zwar einfach, indem man

6:08 Pfeil runter klickt, aber natürlich auch mit der Maus. Das geht natürlich auch und die Seite passt sich quasi sofort im Layout an. Also auch das kann man mit Hilfe von Spotlight, mit dem Tool, was ich euch vorstelle und natürlich auch mit Hilfe von KI erstellen. Und auch das war eine Arbeit von einer halben Stunde, also das war nicht aufwendig. Dann hat die Kundin bzw. Die die Janine hat mir quasi ein paar Informationen gegeben und zack hatte ich quasi alle Informationen, die ich für die Website brauchte und das Design haben wir dann gemeinsam erstellt und das war wie gesagt waren Kleinigkeit, ne? Aber hat ihr natürlich total krass geholfen für ihren Prototypen ganz schnell eine Website zu haben, wo sich dann Leute eben auch drüber anmelden konnten bzw. Kontakt

6:53 aufnehmen konnten. Das sind jetzt mal so drei Beispiele gewesen, was man mal alles machen kann. Und um jetzt eine coole Website zu bauen, das ist natürlich jetzt die nächste Herausforderung, muss man sich eben damit beschäftigen, ja, wofür stehe ich überhaupt? Was ist denn meine Brand? Und dafür brauchen wir nicht unbedingt KI, aber KI hilft in dem Fall einfach schon sehr. Und hier empfehle ich euch Cloud Code. Cloud. Cloud Code geht auch mit Opus 4.6. Also, das ist das stärkste Cloud Modell und meiner Meinung nach auch mit Abstand das Beste. Deswegen verwenden wir es hier auch in diesem Video und generell kann ich euch empfehlen, das zu verwenden. Und hier ist es jetzt ganz wichtig, dass ihr euch mal ein paar Grundgedanken über euer Unternehmen macht. Und wir nehmen jetzt mal eine ein fiktives Unternehmen und zwar schreibe ich deswegen, ich brauche

7:41 eine Website für einen Kunden. Übrigens Spotlight, also das CMS Tool, das kommt erst später. Also falls ihr euch dafür interessiert, einfach ein bisschen vorspulen. Ich habe es euch unten markiert in den Kapiteln, also dort einfach vorspulen. Jetzt erstellen wir erstmal die Website, also wie man tatsächlich eine Website from Scratch erstellt. Denn das, was man unbedingt für eine Website braucht, ist überhaupt erstmal seine eigene Designsprache zu finden. Und hier da hilft KI auf jeden Fall, aber auch nicht nur, sondern ihr solltet euch natürlich auch mal ein paar Websites anschauen, die äh die ja einfach einfach spannend sind und die ihr cool findet. Und da hilft die Seite SAS Po, also oder SAS Po, keine Ahnung, wie man es ausspricht. Das zeigt moderne, clean, coole Websites für

8:27 Software as a Service Businesses. Dort sind aber generell auch ganz andere Unternehmen drin. Also wir haben hier z.B. KI Websites. Hier können wir mal einfach reingehen. Und da sehen wir z.B. diese Website und die ist natürlich ultra clean. Die ist natürlich richtig schön. your models, every Apple device, the fastest inference engine or Apple Silicon Talk to us. Also, das ist im Grunde genommen die Website und die haben das natürlich richtig cool gemacht hier mit so einem Apple Design und dann da drin das gebaut. Wenn ihr so ein Screenshot von eurem Apple Rechner habt, dann könnt ihr das auch machen. Also auch so Module, so Elemente wären absolut machbar. Auch, dass man hier jetzt z.B. reinschreiben kann, ist Probleme machbar. Also ihr müsstet dann einfach nur der KI sagen,

9:13 was ihr wollt, dass man das jetzt abschicken kann und dass das wahrscheinlich dann auch funktioniert. Nein, okay, es funktioniert nicht, sondern es ist quasi einfach nur ähm ein quasi ein festgelegter Befehl, der dahinter steckt. Also, es wird keine AP getriggert oder sowas, keine Funktion, sondern es ist wirklich nur das Frontend. Aber auch das geht mit Hilfe von KI. Wer KI Websites schon mal gebaut hat, wird das kennen. Gleich ist auch hier solche Elemente kann man auch alle mit KI bauen. Auch man hier z.B. schreiben kann, kann die KI bauen. Also, ihr müsst euch einfach jetzt im Internet ein bisschen umschauen und schauen, welche Elemente, was passt zu eurem Business, was ist cool und dann ist es wichtig, dass ihr ein bisschen euch über euch selbst Gedanken macht und zwar über eure Werte, eure Vision, eure

9:58 Brandsprache und da würde ich jetzt einfach mal eine typische Agenturwebsite bauen, also eine Agenturwebsite für meine Firma Scheurer Technologies. Wichtig an der Stelle, SHer Technologies existiert nicht mehr. Also die Firma existiert noch, aber es wird jetzt alles laufen unter Start and Connect und eben auch dann unter dieser Website Start and Connect. Aber ich nehme jetzt SHer Technologies einfach ganz absichtlich einfach mal, um diese Trennung gut hinzubekommen, dass es nicht verwirrend ist. Start and Connect ist mein Business. Steuer Technologies ist die Firma hinter diesem Business und die hat auch keine Website, zumindest zukünftig mehr. Aktuell sieht die wie gezeigt so aus, das na ja ist äh so lala und die würde ich jetzt gerne mal fiktiv halber quasi neu bauen. So, ich würde sagen,

10:45 ich mache meine Musik wieder an, dann entspanne ich mich auch wieder und rede mal ein bisschen langsamer. So, wir starten rein. Wir wissen jetzt also, was man machen kann, um sich Inspiration zu suchen. SASPO ist z.B. möglich. Ihr wisst, was man am Ende rausbekommt. Hier sowas oder sowas oder eben so so coole Sachen, aber man kann eben alles mögliche aufbauen, wenn man denn weiß, was wie das geht und was man machen muss. Also fangen wir an. Ich brauche eine Website für einen Kundenscheurer Technologiesug. Das ist meine Firma. Ähm, jetzt das erste sind immer die Werte, die ich aufschreibe. Und Werte sind deswegen in der Designsprache wichtig, weil Werte sozusagen so ein bisschen mitgeben, wie das Design aufgebaut ist. Z.B. Wenn wenn

11:32 ich eher konkret rustikal stark äh direkt bin, dann ist vielleicht eher so ein brutales, das nennt man Brutalism, so ein Design besser. Wenn ich aber eher so eine Art, ich ich sag mal entspannt und ruhig und ähm ja, nicht so nicht so direkt, sondern quasi viel mit Beratung und professionell, dann brauche ich vielleicht ein ganz anderes Design und deswegen schreibe ich jetzt einfach mal meine Werte hier hin und das ist konkret. Konkretheit, sage ich jetzt einfach mal. Ähm, Proaktivität ist mir auch ganz wichtig. Ähm, was könnte man noch als Wert schreiben? Ähm, Produktivität.

12:17 Äh, was könnte noch? Ähm, da muss man sich einfach ein bisschen Gedanken machen, aber ich würde sagen, das reicht jetzt erstmal schon. Also, drei Werte sind gut. Hilfsbereitschaft ist vielleicht noch gut. Hilfsbereitschaft und ganz wichtig Aut Authentizität. Ich glaube, ich habe es komplett falsch geschrieben. Egal, er weiß schon, was ich meine. Er ist übrigens immer Cloud Code. Ich personifiziere meine KI ganz gerne. Ich wünschte, sie würde Jis heißen. Wir müssten eigentlich maline KI namens Jvis rausbringen. Wäre voll cool. Prost. Ich tring ein Schluck. Lecker. Cola am Morgen ist natürlich immer top. Bitte nicht in die Kommentare mit Ernährungstipps schreiben, ich weiß es selber. Also, weiter geht's. Wir haben die Werte aufgeschrieben. Jetzt müssen wir ein bisschen die Produkte beschreiben, weil der die KI muss ja

13:04 wissen, was sie überhaupt verkaufen soll. Die Produkte, das ist z.B. mein Software Studio. Da entwickel ich mit KI Software Entwicklung. Also, ich entwickle mit Hilfe von künstlicher Intelligenz Software. Der USP ist viel günstiger und schnellere er Ergebnisse. Zielgruppe sind Startups und Startups und KM MU bis ja keine Ahnung bis wie viel Umsatz, aber aber halt alle, die günstig Software wollen, alle

13:52 KMU, alle die günstig Software wollen. Preis startet ab 3k pro Monat. Prototyp ab 1,5k einmalig. Das sind übrigens die echten Preise. Also falls ihr zufällig Software bauen wollt und ein Startup seid und vielleicht eine Förderung bekommen habt oder ein KMU seid und eine eigene Software für euer Business wollt, dann ähm ja, könnt ihr in Zukunft, sobald die Website hier online ist, dort darüber euch informieren. Ansonsten abonniert gerne den Kanal, um den Lounge der Website nicht zu verpassen. Mache ich natürlich dann auch ein Video zu. Äh können wir aber auch jederzeit auf WhatsApp oder sonst wo schreiben, falls ihr hier irgendwie zu den Preisen hier äh eine Software bauen wollt. Äh diese

14:38 Soft mit diese 3K pro Monat ist auch nicht auf Stunden limitiert oder so, sondern das ist auf das ist quasi un unlimited. Also ihr können unlimitiert viele Anfragen stellen und ich arbeite die dann Schritt für Schritt einfach ab und je nachdem wie komplex die Software ist, desto mehr desto länger brauchen wir natürlich pro Monat, also Monate, aber das ist ja irgendwie auch logisch, ne? Also, wenn das ganze mitwachsen, wenn ich da mitwachsen soll, wenn es eine ein gemeinsames Projekt ist, was langfristig ist, dann s ist das der Preis, dann macht das Sinn. Ansonsten können wir natürlich auch einfach nach Stundensatz berechnen. Geht auch, ist für die meisten Startups aber nicht so kalkulierbar, deswegen ist das bessere Geschäftsmodell meines erchtens nach. So, fangen wir an oder machen wir weiter? Softwareestudio, dann websiteerstellung, das kostet bei mir ähm mit KI Website

15:26 erstellen und dann mache ich hier USP auch viel günstiger und schneller, besseres Design und Interaktivität auf der Seite Automatisierbarkeit direkt. direkt in der Website. Das ist im Grunde genommen das, was wir gerade machen. Also diesen Prozess, den spiele ich auch mit meinen Kunden durch. Ich mache mir Gedanken über deren Werte, deren Produkte, also all das, was wir jetzt hier machen. Wie gesagt, falls euch das zu langweilig ist, falls ihr das schon wisst, skippt einfach in den nächsten Part. Aber all das mache ich eben mit meinen Kunden genauso, weil es einfach super wichtig ist, dass die KI diesen Kontext weiß. Dann haben wir die Zielgruppe auch da wieder Startups und KMU, also alle die günstig oder relativ

16:14 günstig eine Website wollen. Preispunkt ist hier 100 € für äh für Beratung, also quasi mach mal Beratungsgespräch oder 500 € für die ganze Website ähm mit beliebig vielen Korrekturen. Beliebig viel jetzt nicht, aber so ungefähr vielleicht noch 1000 € muss ich mir noch Gedanken machen. Da habe ich noch keinen fixen Preis. Nexus ist da schon deutlich ausgereifter und das Software Studio auch. Da habe ich mir schon ein paar mehr Gedanken zugemacht. So, wir nehmen jetzt das einfach mal als die Produkte. Das ist nämlich ein ganz gutes ganz gut für eine Agentur. Das müssen wir noch hier oben reinschreiben. Was ist SHer Technologies eigentlich? Das ist eine Agentur und zwar für Software

16:59 Entwicklung und Webdesign bzw. Webdesign ist falsch, sondern eher website Erstellung. Wir machen auch das Design, aber mehr auch eben nicht. So, dann haben wir die Werte. Jetzt kommen wir zur Designsprache. Designsprache. Was möchte ich für ein Design haben? Wie möchte ich die Gesite aus Seite ausgestaltet haben? Ich möchte oder ich muss gar nicht schreiben, ich möchte wir können einfach mal hier oben hingehen und die Farbe von hier unten nehmen. Das ist diese hier. Das ist übrigens ein cooles Tool, falls ihr Webdesigner seid oder falls ihr gerne eure Website erstellen wollt und zwar What font. Damit könnt ihr dann einfach auf irgendwas drauf klicken und bekommt sofort alle Informationen zu dieser Font, also zu dieser Schriftart. Machen wir weiter hier. Farbe.

17:47 So, das ist diese Farbe. Das ist so ein gelbliche sowas gelbliches. M dann Schrift ist Inter. Inter. Dann Stil. Und jetzt ist es wichtig, dass ihr die ganzen Designstile vom Anfang, dass ihr euch da informiert habt, denn jetzt müsst ihr einen Stil angeben. Und wir schauen einfach mal rein, was es für Stile gibt. Webdesign Stile Trends 2026. Was haben wir denn hier Schönes? Wir haben hier ganz viele YouTube Videos. Schaut sie euch gerne an. Und wir haben auch hier wieder von Visterprint auch wieder, das hatten wir vorhin schon. Wir haben z.B. hier den niedlich süß putzig, aber vor allem den Brutalism, also quasi ganz groß und mächtig ist auch

18:33 gleichzeitig herausfordernd, weil man natürlich genau diese Grafiken dann auch entsprechend braucht. Also kann herausfordernd sein. Dann haben wir auch hier sowas mit so Cards, auch interessant, auch spannend. Ähm und dann haben wir hier so ein sehr mobilentierten Design. Wir haben auch hier so ein ganz so ein Komfy Design, also quasi so sehr süß, auch mit Cards, übersichtlich viel Whitespace. White Space heißt, dass es äh viel auch leer auf der Seite ist. Es ist auch fein. Das wäre z.B. ja, wie hier wieder eher so ein brutaler oder Brutalism Design, das auch in die Richtung. Dann haben wir ähm nostalgisch, also das quasi so ein bisschen äh wie früher, also mit Code äh Elementen und so weiter. Das natürlich wäre natürlich praktisch für unsere Firma, dass wir quasi Technologies so ein bisschen Technologieaffin machen.

19:20 Wir schreiben mal das rein. Stil Technologie Affin. Das finde ich ist ein cooler Trend. den sollten wir auf jeden Fall aufgreifen. Äh, das ist natürlich hier Katastrophe, denn Seite muss immer noch gut optimiert sein und man sollte darauf gut alle Informationen finden. Aber man, was man jetzt nicht unbedingt äh muss, ist hier sowas komplett verrücktes machen. So dieses komplett retro, das macht natürlich keinen Sinn. Dann haben wir hier minimalistisch und klar. Minimalistisch ist mir auch wichtig, das ist quasi technologieaffin und gleichzeitig aber auch minimalistisch und clean ist. Also ähm maximal wenig Elemente, das ist mir ganz wichtig. Ähm weil ich mag es einfach nicht, wenn eine Website überladen ist. Es sollte ein

20:07 Text und nicht noch eine Beschreibung und das sehen wir auch hier, wenn wir mal hier reingehen. Ja, hier ist natürlich auch viel Text und die Seite sieht z.B. relativ normal aus. Wenn wir aber dann z.B. mal auf die Inde Index ist natürlich jetzt falsch. Was haben wir denn hier auf die V7? Nee, das ist auch falsch. Ich muss mal kurz die richtige Seite finden. Ist es das? Ja, das ist es. Und zwar haben wir hier minimal Text. Wir haben hier dein Business, deine Regeln. Das ist unser Motto. Also, wir sind davon überzeugt, dass dein Business deine Regeln haben sollte und nicht die deiner Software. Also, dass du dich nicht deiner Software anpassen sollst. Das noch kurz hier erklärt und dann hier einfach, was brauchst du? Ich will digitale Produkte verkaufen, dann könnte Nexus das richtige Produkt sein. Ich will eine Software Idee entwickeln, also ist

20:52 Software Studio wahrscheinlich das Passende oder mein Business möchte ich automatisieren, dann hilft dir wahrscheinlich eher die Automations oder ich möchte ein Tool Hosting hosten, dann Oneclick Hosting und so bauen wir das Ganze auf hier unten noch mit ein paar Informationen, aber clean, simpel, elegant könnte man auch sagen. Elegant ist vielleicht falsch. Das solltet ihr vielleicht nicht schreiben, wenn ihr möglichst clean sein wollt, weil dann kommt eher so eine Art Zeitungsstil. Dieser Stil, der reicht glaube ich auch schon. Wir können aber uns trotzdem der Vollständigkeit halber noch ein paar andere Sachen anschauen hier. Singularität, das ist natürlich super coole, gefällt mir sehr. Dann haben wir hier auch sowas, das ist ehrlicherweise nicht so wirklich clean, sondern das ist eher so eine Art Interface Design. Auch sehr spannend, ne? auch ziemlich

21:37 ziemlich cool. Gefällt mir auch. Prost an der Stelle. Dann haben wir hier mattiert licht durchlässig dieses glassy Design. Gefällt mir auch sehr. Können wir uns auch mal anschauen. Wobei das ist glaube ich das falsche. Ja, ich glaube das der die Seiten führen nicht irgendwohin. Egal. Jedenfalls ähm das ist natürlich auch richtig cool. Wir machen das mal ein bisschen größer, dann sehen wir es auch besser. Bild im neuen Tab öffnen. Da sehen wir dieses total moderne Design, was Apple jetzt auch auf den ganzen Geräten rausbringt. Lustigerweise, wenn wir da bei Apple mal kurz reingehen, haben die selber das Design auf der Website nicht. Also, das ist auch interessant. Apple selber hat von einem, ich sag mal super modernen und jedes iPhone kriegt so eine super

22:24 krasse Landing Page, ist sie zurückgegangen zu einer simplen, ja, modern aussehenden Shopseite. Scheinbar scheint das für Apple besser zu funktionieren als diese total hochwertigen und total sineastisch aussehenden Websites. Irgendwie scheint Apple da in dem Fall ja besser dran zu sein und mehr zu verkaufen. Die werden es getestet haben. Auf jeden Fall ist das das neue Apple Design und wenn Apple das schon macht, dann kann es ja vielleicht sogar sinnvoll sein, das auch zu machen. Und von einem, ich sag mal super modernen, von so einem Design, wo man sich jetzt nicht so richtig zurecht findet, zu so einem simplen Design zu gehen und dann eher über die Bilder, über die Produkte, über die Preise, über die Texte seine Produkte zu verkaufen. Denn am Ende, und

23:11 das ist noch mal ganz wichtig, muss die Website verkaufen. Sie muss nicht geil aussehen, sie muss am Ende einfach verkaufen. Und da kommen wir jetzt zum nächsten Ziel. Das Ziel der Website ist Erstgespräch und zwar kostenlos. Das ist das Ziel der Seite. Und da ist es jetzt ganz wichtig, dass man dass wir uns über den Aufbau der Website Gedanken machen. Aufbau und zwar bauen brauchen wir eine Startseite oder nennen wir es nicht Aufbau, sondern eher Sidemap. Wir brauchen eine Startseite, wir brauchen logischerweise eine Aboutseite, wir brauchen ein Impressum und wir brauchen Datenschutz. Datenschutz ist deswegen wichtig, weil sonst illegal ist. Impressum genauso. Aboutseite ist cool. Was wir aber eigentlich uns auch sparen

23:56 könnten, weil wir wollen alles auf der Startseite haben als One Pager. Ganz simpel. One Pager soll soll alle notwendigen und äh Informationen enthalten. Informationen enthalten. Impressum genauso. Darst auch so. Äh da können wir das werden wir auch später gemeinsam generieren. Also da müsst ihr euch jetzt keine Gedanken dazu machen. Das machen wir gleich später zusammen. Also Startseite soll ein One Pager sein. Dort soll dann Impressum Datenschutz haben wir auch. Und jetzt ist es wichtig, wie soll denn die Startseite aufgebaut sein? Startseite Aufbau. Wichtig ist immer oben direkt zu sagen, was angeboten wird. Also, ihr könnt euch da 1000 Videos ansehen. Wir

24:43 können mal bei YouTube reingucken. Mir wurden da ganz ganz tolle YouTube Videos angezeigt. Mal gucken, ob das immer noch der Fall ist. Äh, Webdesign. Ähm, genau. Ihr könnt hier ihr könnt hier 1000 Sachen schauen. Was haben wir denn hier für Webdesign? Ich suche mal hier gerade ganz kurz ähm Webdesign. So, website Design Boring to Brilliant. Der ist z.B. ein richtig cooler cooler Typ, kann ich sehr empfehlen. Die erklären halt, wie Design funktioniert. Das ist sehr sehr wichtig. Der ist auch sehr cool. Der erklärt unfassbar gut, wie UX Design, wie Farben miteinander kombiniert werden. Und hier gut, dass er noch auf ist. Er hier hat ein unglaublich gutes Video zum Thema Aufbau

25:29 von Websites gemacht. Das was wir jetzt einfach machen können ist wir cheaten jetzt ein bisschen und zwar kopieren nehmen wir jetzt einfach den Link und suchen YouTube Trancript Extractor und nehmen hier einfach mal das Video, klicken auf extract Transkript, kopieren das ganze Transkript und packen es hier rein. Bitte optimiere den Aufbau gemäß des angehängten YouTube Transkripts. So und jetzt kopieren wir es rein und dann fügt Cloud in diesem Fall das hier hinten hinzu. Das ist natürlich jetzt noch ein bisschen schlechtes Transkript, weil es so total vermischt ist. Eigentlich hätte ich das gerne mit diesen Nullen und also mit diesen mit diesem Teitstempel.

26:16 Das gucken wir mal, ob wir das nicht rausfinden können. Und zwar müssen wir die Zeit noch hier hinten rausnehmen und dann free transcript. Wenn es euch zu schnell ist oder so, sagt Bescheid. Schreibt mir das gerne in die Kommentare, dann mache ich es im nächsten Video ein bisschen langsamer. Ansonsten könnt ihr auch das ganze ähm Ah, perfekt. So, mit Zeitstempel. So wollen wir das. Könnt ihr das nächste Mal dann ein bisschen langsamer machen. So, das nehmen wir wieder raus. Das nehmen wir wieder rein. Und jetzt ist das Ganze doch viel übersichtlicher. Wunderbar. Ähm, jetzt haben wir, sehen wir, das Ganze ist minutengerecht aufgebaut, aber irgendwie sieht das noch total falsch aus, als wäre da die Hälfte weg. Ich nehme mal die Zeitstempel raus und kopiere das noch mal hier rein und dann

27:02 gucken wir mal, ob es tatsächlich ähnlich aussieht. Vielleicht. Ah ja, jetzt das sieht doch besser aus. Ich glaube, das können wir nehmen. Der die KI wird schon was cooles draus machen. So, und jetzt ganz wichtig, erstelle mir erstmal eine MD Datei mit Texten und Aufbau der Startseite. Das ist deswegen wichtig, MDateien, weil die KI mit MDien, die kann sie gut erstellen und auch gut lesen. Wir schauen jetzt mal, was daraus passiert. So. Und jetzt generiert Cloud mit Hilfe von Opus 4.6, also dem Cloud Modell, eine MDEI. Das dauert jetzt ein bisschen ein kleinen Moment und dann wird jetzt extrahiert er

27:49 die wichtigen Informationen aus dem Transkript und erstellt jetzt hier diese coole simple MDEI und dann können wir gucken, passt der Aufbau, gefällt er uns? Also äh im Grunde genommen äh eine schriftliche Ausarbeitung der Website. Und was man dann noch machen kann, das machen wir im nächsten Schritt, ist ein sogenanntes Scribbel erstellen. Gribbles sind Scribble IO nicht, sondern Scribbles sind hier so schnelle Zeichnungen, aber Scribble im Bereich Website sind schnelle Zeichnungen von so einer Website und die KI kann das eben auch richtig gut erstellen und zwar in mit Hilfe dieser MDien und das hilft uns dann schon zu entscheiden, wollen wir das genauso aufbauen oder nicht. Füge

28:34 oder erstelle hier sind jetzt erstmal die Texte, gehen wir gleich durch. äh während er das nächste erstellt, erstelle nun ein Scribble ähm von der Startseite in einer MD Datei. Die KI weiß, was das äh was das bedeutet. So, fangen wir mit der Startseite an. Software und Websites, schneller, günstiger mit KI. Das ist die Headline. Das ist natürlich super simpel, super klar. Wir entwickeln deine Software oder in Wochen statt Monaten zu einem Bruchteil der üblichen Kosten, damit du dich auf dein Geschäft konzentrieren kannst. Was ihr jetzt machen könnt, ihr könnt jetzt das hier herunterladen und dann könnt ihr das öffnen. Mal gucken und dann wird das in einem Programm, wahrscheinlich bei euch in

29:19 irgendeinem Textverarbeitungsprogramm geöffnet. Bei mir wird's jetzt hier in so einem Codingprogramm geöffnet. Dann machen wir das hier mal ein bisschen größer. Und jetzt kann ich hier in diesem Codingprogramm jeden Text anpassen. Also, ich kann alles anpassen und dann speichern und der KI wieder hochladen und dann hat die KI eure überarbeiteten Texte, weil das einfach individuelle Arbeit für euch ist und weil ich jetzt keine Lust habe, hier jeden Text durchzugehen. Ich bin nicht so der Textmensch. Also, falls da draußen Copywritter sind, die gerne meine Website mal checken wollen, gerne. Ich äh also challenged mich gerne. Da ist übrigens das nächste dann direkt auch schon fertig. Ähm, genau. Hier ist auf jeden Fall noch viel zu tun. Und äh das sind die Texte, die könnt ihr anpassen, neu hochladen, dann weiß die KI, welche Text ihr wollt. Jetzt zum Thema Scribble. Scribble, wie gesagt,

30:06 ist so aufgebaut. Wir haben hier, das ist jetzt z.B. hier nicht so gut, weil das normalerweise hier angezeigt werden soll, aber wir haben hier im Grunde genommen die Überschrift. Rechts davon ist dann das hier. Ähm, dann haben wir hier Angebot und Nutzen, Software, Webseiterstellung, blablabla. So sieht auf jeden Fall cool aus und ähm ich gehe jetzt einfach mal davon aus, dass das cool ist. In der Regel mache ich das mit diesem Scribble nicht, sondern das mache ich jetzt einfach nur, um es zu euch einfach mal gezeigt zu haben, denn damit kann man halt schneller Anpassung äh erstellen, wenn er jetzt z.B. etwas gemacht hätte, was wir überhaupt total kacke finden, z.B. das mittig anzeigen oder irgendwie sowas, dann können man hier halt deutlich schneller interagieren, als wenn er direkt die komplette Website erstellt. Das soll er aber jetzt tun. Und zwar äh erstelle

30:53 fünf Design Designs. Ähm oder sagen wir mal erstmal drei, weil fünf kann schnell zu einer zu langen Antwort führen. D müsst ihr bei Cloud ein bisschen aufpassen. Äh der erstellt dann manchmal ja dauert die Antwort manchmal ein bisschen länger. Erstelle drei Designs und diese drei Designs ähm sollen nur vom Head Bereich sein. nur vom Head Bereich in F in drei verschiedenen Stilen. Also nur von Sektion 1, das ist vielleicht besser, weil Sektion 1 weiß er genau, was er was ich meine. nur von Sektion 1 in drei verschiedenen Stilen, die aber alle als Grundlage

31:40 die Stilvorgaben von Scheurer Technologies von oben haben. So, das macht er jetzt. Erstellt jetzt eine HTML-Datei mit CSS und JavaScript, also mit allem, was dazu gehört und liest sich vorher diesen Design Skill hier durch. Claud hat in seine KI Design Skills implementiert und diese Design Skills sorgen dafür, dass er immer ja nicht unbedingt die gleichen, aber immer quasi moderne Websites baut und hier Front Frontendesthetics Guidelines hier Typography color theme motion hier spatial das ist spatial glaube ich ne spatial composition unexpected Layout asymmetri overlap

32:27 diagonal flow also im Grunde genommen verschiedene Designaspekte, die er jetzt hier umsetzen kann und das, was er baut ist jetzt Dark Brutalist Tag, also quasi ein sehr brutaler. Genau. Also wahrscheinlich sowas in diesem Stil hier. Ich bin gespannt. Wahrscheinlich in diesem Dark Stil. Wir werden es sehen, denn das coole bei Cloud ist, er zeigt uns diesen Stil hier einfach rechts. So, also da ist unsere erste Website und das ist natürlich jetzt nur der Headbereich, aber ich finde, das sieht schon richtig cool aus. Also, das sieht schon richtig modern aus. Klar, ist noch nicht perfekt hier, das ist vielleicht noch ein bisschen zu äh zu sehr untereinander, aber ich muss schon sagen, wenn wir das hier vergleichen mit äh Wo haben wir es? Wo

33:13 haben wir es? Wo haben wir's? Das hier. Also, ich würde lieber hier kaufen, bin ich ganz ehrlich. Und auch hier, das könnte man natürlich weiter ausbauen. Also, man könnte z.B. hier eine Konsole reinmachen, die so ein paar kleine Easters beinhaltet. Z.B., dass man darüber irgendwie versucht, den Couponcode rauszufinden und dann ist da quasi einfach eine Funktion hinter, dass wenn man das Richtige eingibt, in die Konsole mit einem Konsolenbefehl irgendwie ein Coupon rauskommt mit mit Slash Coupon oder irgendwie sowas. Also, man kann damit total viel machen und wir machen das gleich einfach mal damit ihr seht, was man alles cooles mit damit machen kann. Also, ich muss ehrlich sagen, wenn ich das so sehe, habe ich direkt wieder Lust, die Website doch umzusetzen. Ich zeige euch später, wie man das machen kann. Jetzt ähm aber zur Variante 2. Das ist die geometrische

34:00 auch schick. Also ganz anderer Stil, aber auch super super gefällt mir extrem gut. Und jetzt haben wir hier schon Variante 3 fertig. Also das jetzt Variante 1, aber wir gucken uns erstmal Variante 2 an. Also ist ein ganz anderer Stil, modern auch Agentur, Software und Webagentur aus Kiel. Das aus Kiel würde ich jetzt streichen. Software und Websites günstiger und schneller mit KI. Wir entwickeln Software. Habe ich direkt Lust das Ganze umzusetzen? Wirklich, habe ich total Bock drauf. Und ich glaube hier Variante 1. Das werde ich höchstwahrscheinlich auch so ähnlich in meiner ähm in meiner anderen Website bauen. Die ist aber vom Stil etwas anders. Also hier seht ihr z.B. Die hat hier dieses rote als äh als ähm Kernfarbe. Das ist auch ein bisschen dezenter alles. Aber ich muss wirklich sagen, das gefällt mir richtig gut auch

34:46 mit dem Gelb. Das sieht so profi, das sieht richtig gut aus. Ich bin ich bin ein riesen Fan. Ähm genau. Dann haben wir hier dieses geometrische. Das gefällt mir auch. Sieht aber schon sehr so nach äh nach ähm ja, Kindergarten. Und wir haben hier ein paar Würfel zusammengeworfen. Ganz cool ist, dass sie sich bewegen. Das ist interaktiv, das ist modern. Gefällt mir gut. Also ist okay. Und jetzt gucken wir uns Variante 3 an. Das ist Gradient norm keine Ahnung, was das ist. Okay, da ist hier oben so ein leichtes Gradient. Das kann man hier nicht so gut sehen. Ich doch auf äh auf dem rechten Bildschirm kann man es besser sehen. Auf meinem Bildschirm nicht so, aber ich hoffe, ihr seht alles. Ähm, dann haben wir hier die wieder die KI gestützte Agentur aus Kiel und dann deine Software, deine Website, ein Bruchteil der Kosten ist natürlich ein guter Pitch. haben wir hier mit

35:33 Gradient, also quasi hier verschiedene Elemente auch mit so einem Strich. Muss ich sagen, gefällt mir so ist okay. Also ist halt relativ standard. Wir haben hier die ganzen Emojis. Mir gefällt hier diese Variante 1 deutlich besser, aber das ist jetzt Geschmackssache und da kommt es jetzt sehr auf euch an. Also ihr müsst jetzt entscheiden, was gefällt denn euch am besten? Wo habt ihr denn äh am Ende die ja was welche Website gefällt euch am besten und was ist natürlich auch für eure Kunden am besten? Ich habe z.B. ich richte mich an Startups, die sind sowieso ein bisschen tacky, suchen aber einen, der das ganze übernimmt, da könnte das hier besser sein. Wenn ich mich aber eher an z.B. selbständige vielleicht sogar im Coachingbereich oder so, also in so einem sehr soften Bereich richte, dann

36:18 ist dieses Design wahrscheinlich besser. Also dann kommt es nicht auf mich an, sondern der Köder muss dem Fisch schmecken. Also im Grunde der Köder, das ist die Website muss eurer Zielgruppe, also dem Fisch sozusagen schmecken. Und diese Website hier, die würde um ehrlich zu sein, zu allen so ein bisschen passen. Es ist halt ein schöner Kompromiss, aber Kompromisse verkaufen in der Regel nicht. Also, wenn ihr euch an alle richtet, richtet ihr euch an keinen. Deswegen da müsst ihr immer ein bisschen differenzieren. Also, wir starten mit Variante 1. Da könnt ihr jetzt selber sagen, was ihr, ob ihr das toll findet oder nicht, aber wir nehmen das jetzt einfach mal, um zu zeigen, was damit alles möglich ist. Mir gefällt's einfach am besten. Lebt damit. So. Punkt. Ähm, was ihr machen könnt, um das Ganze mal in im Web zu testen, ist hier oben Artefakt veröffentlichen. Übrigens könnt

37:03 ihr das Ganze schon mit der Cloud 15 € Variante machen. Also, ihr braucht dafür nicht die 200 oder 99 Variante, dass die 5 € 15 € Variante reicht dafür total aus. Und jetzt können wir das Ganze mal hier im Web testen. Ist natürlich noch nicht optimal geeignet, weil hier oben noch mit Cloud und so steht. Also äh das ist natürlich nicht, um das Ganze live zu bringen. Live bring machen wir später. Ähm, wir haben jetzt hier die Startseite grob fertig und wir sind ja jetzt auch schon bei knapp 40 Minuten, wenn ich mich nicht irre. Äh, das müssen wir jetzt ähm also da müssen wir jetzt mal gucken. Ich sehe gerade, ich habe noch genug verfügbaren Speicherplatz, also alles gut. Wir haben noch ein bisschen Aufnahmezeit. Wir gehen rein und erstellen nun ähm erstelle nun ähm die komplette Website im Stil V1. Ich

37:50 weiß jetzt, die KI weiß jetzt den Stil, sie kennt die Texte, sie kennt das Skribbel und jetzt muss sie am Ende nur noch den Stil von V1 auf die gesamte Website kopieren. Warum haben wir nicht direkt die gesamte Webseite im Stil gemacht? Na ja, das kostet natürlich auch alles Tokens, also kein Geld direkt, aber ihr habt bei Cloud ein Limit, das seht ihr unter Einstellungen und dann Unterzung hier Unterzung und hier seht ihr dann z.B. Beispiel, dass gerade alle Modelle, dass ich gerade 22% verwendet habe. Bei euch wird da mehr stehen, einfach weil ihr nicht den teuersten Plan habt. Ich zahl 200 € im Monat dafür. Das äh ja ist echt teuer. Und bei mir wird das z.B. zurückgesetzt in einer Stunde. Hab davon habe ich 12 % verwendet. Wenn ich in an

38:37 an Tagen, wo ich viel programmiere, habe ich das schon mal auf 99% hochgeballert bekommen. Also das ist schon wirklich verrückt, was damit alles möglich ist. Und jetzt erstellt eben Cloud unsere komplette Website und zwar From Scratch. Also quasi alles von oben bis unten und gleich werden wir hingehen und ein paar Sachen in die Website einbauen und das ist auch das Besondere an Cloud, weswegen ich es auch sehr empfehle und ans Herz lege. Clud geil, weil ihr Änderungen in eurer Website, weil dabei nicht der gesamte Code noch mal generiert wird, sondern Cloud arbeitet mit Artefakten. Er speichert quasi die Dateien, die ihr erstellt, weil nichts anderes als eine HTML Datei ist das hier. speichert der in seinem in seiner Infrastruktur. Er speichert da die Datei und kann dann hingehen und bestimmte

39:22 Aspekte, bestimmte Wörter, bestimmte Elemente in dieser Datei anpassen. Er erstellt also nicht immer die ganze Website neu. Damit er das aber garantiert nicht macht, zeige ich euch gleich einen kleinen Trick. Den solltet ihr auf jeden Fall machen und zwar die Website runterladen, aber das zeige ich euch gleich, wie das geht. Wir warten jetzt erstmal, während der hier noch das ganze durchgeht. ähm kann ich euch vielleicht schon mal ein paar in Kleinigkeiten für äh zu Spotlight zeigen. Dann warten wir hab nutzen wir das Ganze hier produktiv und zwar Spotlight ist das Tool, womit wir ähm womit wir das Ganze machen, also womit wir das Ganze installieren. Wenn ihr Spotlight buchen wollt, könnt ihr das demnächst auf meiner Website machen. Abonniert gerne den Kanal, um das nicht zu verpassen. Ich packe euch den Link zu Spotlight, sobald es online ist, auch

40:09 noch mal in die Kommentare. kostet zum Release 12 € wird dann wahrscheinlich einen Monat später auf 17 € angehoben bzw. ihr bekommt ein Code, es ist schon bei 17 €. Ihr bekommt aber oben einen Code angepint, mit dem es auf 12 € im Monat lebenslang reduzieren könnt. Also, es ist sehr günstig. Ihr braucht kein Hoster. Ihr braucht das einzige, was ihr braucht, ist eine Domain. Wenn ihr keine Domain habt, habt ihr eben so eine Domain hier. dem Demo- spotlight.s2.ac.run ist unschön, mag keiner. Deswegen hier die klare Empfehlung. Ähm, holt euch hier eine eigene Domain. Macht auf jeden Fall am meisten Sinn. Wo kriegt ihr eine Domain? Am besten bei Cloudfare. Cloudfare bietet da mit Abstand die günstigsten Domains an, denn die machen das zum Selbstkostenpreis. Wo könnt ihr Domains checken? Unter Checkdomains.

40:56 Das ist immer sehr gut. Da könnt ihr dann einfach so.com könnt ihr einfach checken und da sehen wir z.B. asdasd.com ist leider schon vergeben. Mal gucken, was da drauf liegt. würde mich mal interessieren. Ähm, finde ich crazy. Okay, da liegt nichts. Gut, liegt eine Weiterleitungs Seite. Ist ist maybe for sale. Das natürlich schade, aber egal. Na ja, wurscht. Gehen wir zurück zu Spotlight. Wir loggen uns hier einmal ein. Das könnt ihr auch gerne sehen. Das ist jetzt nichts geheimes. Hier Passwort registrieren. Die die Sache wird sowieso am Ende wieder gelöscht. Und jetzt sehen wir hier, wie Spotlight aufgebaut ist. Grundsätzlich habt ihr immer sofort vorinstalliert die Startseite, das Impressum und die Datenschutzerklärung.

41:43 Warum? Weil ihr alles das braucht. Ihr braucht eine Startseite, logisch. Ihr braucht ein Impressum und ihr braucht eine Datenschutzerklärung. Und dann habt ihr hier Medien. Hier könnt ihr Bilder, PDFs, alles mögliche bis maximal 60 MB hochladen. 60 MB ist das Limit. Das äh liegt einfach daran, dass ihr ähm dass mein Speicherplatz einfach nicht überladen wird und dass ihr das hier nicht als irgendwie Storage für Onlinekurse oder so verwendet. Das ist nicht dafür gedacht. Wer sich für Onlinekursse interessiert, sehr gerne mal bei Nexus hier reinschauen. Dort könnt ihr nämlich dann Onlinekurse auch veröffentlichen, aber dazu in einem anderen Video mehr. Ihr könnt Benutzer anlegen. Das heißt, ihr könnt jetzt hier auch eine beliebige E-Mail einladen. Ähm, also eine beliebige Person, den könnt ihr als

42:29 Redakteur oder auch als Admin markieren. Ich würde einfach Admin machen. Ist reicht auf jeden Fall. Dann könnt ihr Zugangsdaten hinterlegen, das wird später noch wichtig. Dann könnt ihr Integration machen. Ihr könnt Google Analytics hinterlegen. Ihr könnt Facebook Pixel hinterlegen. Ihr könnt den eigenen eigenen Code hinterlegen und ihr könnt auch einen CookieBner machen. Und dieser CookieBNER, den könnt ihr hier mit Text angeben, oder könnt ihr dann einstellen, ob man ein Opt in machen soll oder Opt out. Wichtig ist, in Deutschland gilt die Opt in Regel, also man muss akzeptieren, dass man getrackt wird. Ich möchte aber eben den Leuten, die bereit sind, das Risiko einzugehen, auch die Optout Option anbieten. Und deswegen haben wir hier eben auch die OP Variante. Das bedeutet, dass getrackt wird, obwohl er noch nicht

43:16 zugestimmt hat. Sobald er akzeptiert, ändert sich nichts. Wenn er ablehnt, werden die Cookies rückwirkend gelöscht. Also quasi dann werden die Daten über den Kunden auch gelöscht. Ich mache z.B. äh meistens opt out ähm einfach weil mir das Risiko da bewusst ist ähm und weil es eben auch einfach eine Grauzone ist. Ähm man kann aber eben auch Opt in machen. Also ich bin d bei meiner Website einfach auch mir noch nicht so 100% sicher, was ich da gerne machen würde. Also ihr seht schon, es ist super simpel aufgebaut, das ist nicht kompliziert. Dann haben wir die Einstellungen. Hier könnt ihr dann eine eigene Website hinterlegen. Z.B. könnt ihr sagen äh mein mein Punkt meine sag mal meine Website and connect

44:03 und dann müsst ihr diesen Came Record anlegen. A Record geht auch, aber bei Subdomains, also meine Website startinconnect.com, da braucht ihr einen Came. Wenn ihr jetzt nur startenconnect.com machen wollt, dann bräuchtet ihr einen ACord. Das funktioniert mit Cname nicht. Das ist hier noch kein richtiger Bug, aber es ist auf jeden Fall äh muss eigentlich das noch ausgeblendet werden. Ihr könnt das Theme komplett anpassen. Könnt z.B. sagen, ich hätte gerne das Sonnenuntergangsth und wenn ihr das dann speichert und einmal neu ladet, dann sieht das Ganze auch in einer ganz anderen Farbe aus. Man kann auch ein minimalistisches Theme nehmen, dann sieht das Ganze eben ja dann ein bisschen cleaner aus. Ich mag ja mein Theme bzw. Also meine Farben, deswegen nehme ich meine Farben. So, dann könnt

44:49 ihr hier Header und Footer angeben. Header HTML, Footer HTML. Das ist hilfreich, wenn ihr mehr als eine Seite habt, dass der Header, also quasi, wenn wir uns die Website anschauen, die übrigens jetzt gerade fertig ist, also das hier oben, das könnt ihr einzeln als HTML exportieren und dann könnt ihr das entsprechend bei Spotlight einfügen, genauso auch mit dem Footer. Ihr könnt SEO Einstellung machen, ihr könnt das Fuff Icon, also was hier oben angezeigt wird, z.B. zu einem Blitz machen, wenn ihr das gerne wollt. Und wenn man dann neu lädt, dann wird wahrscheinlich gleich irgendwann hier oben auch der Blitz angezeigt, wenn der Cash sich neu lädt. Und wichtig, ihr könnt hier oben die eigene SMTP Daten hinterlegen. SMTP Daten sind E-Mailaten, die braucht ihr, wenn ihr jemanden zu eurem Team einladen wollt. Also, wenn ihr ihm eine E-Mailin

45:35 hier oben schicken wollt, dann müsst ihr hier einmal die SMTP Daten hinterlegen. Wenn ihr eine Test, wenn ihr das testen wollt, könnt ihr das hier machen. Abmelden geht hier unten und das war's auch schon. Ein super simples CMS Syystem. Und jetzt, da die Website fertig ist, holen wir auch direkt mal die Website hier rein. Wir kopieren den ganzen Code, kopieren den hier rein, klicken auf speichern und schauen uns das Ganze an. Wichtig hier einmal Vorschau, neu laden, noch mal speichern. Das wäre jetzt richtig Fail, wenn das nicht geht. So. So, wir müssen also der Cash manchmal muss man das so machen. Komm schon, komm schon. Das wäre schon gut, wenn es jetzt funktionieren würde. Okay, es

46:22 funktioniert nicht. Wunderbar. Äh, jetzt muss ich herausfinden, warum es nicht funktioniert. Äh, speichern müsste eigentlich geklappt haben. Okay, da ist scheinbar ein Bug. Das ist natürlich jetzt ein bisschen fail. Wir machen mal einfach hier Test rein. Ja, jetzt geht's. Keine Ahnung, warum es jetzt auf der Startseite nicht ging. Wahrscheinlich einfach, weil ja, gut, sorry, man muss einfach ein bisschen warten, bisschen Geduld haben. Das seht ihr also auch. Also manchmal muss man ein bisschen Geduld haben, aber so stellt eure Website online und zwar komplett. Hier unten scheint noch irgendwas nicht zu funktionieren. Warum scheint Warum funktioniert das hier unten nicht? Das schauen wir uns in

47:08 Cloud mal. an. Ah ja, weil die äh JavaScript wahrscheinlich nicht richtig geladen wird. Also äh das soll sich eigentlich hier einblenden, aber das blendet sich hier noch nicht ein. Das ist natürlich nicht optimal. Was man hier machen kann mit Spotlight ist dann einmal hier unten die Dokumentation zu kopieren und dann äh hier oben zu sagen Cloud ähm die Elemente unter dem Header, die eingeblendet werden, blenden sich in meinem Tool nicht ein. Hier sind die Docs dazu. Einfach reinkopieren und dann wird Cloud

47:56 mit Hilfe der Docs versuchen. Ah ja, das Problem ist, dass Intersection Observer, die Reveal Elemente starten mit Opacity Null und werden erst sichtbar, wenn der Observer sie triggert. In deinem CMS Kontext wird der Observer möglicherweise nicht korrekt ausgelöst, weil z.B. weil das Layout anders lädt oder der Viewport anders berechnet wird. Ich baue die Website um. Die Hero Section bekommt CSS only Animation und der Scroll Reveal bekommt einen Fallback. Also er baut jetzt quasi die HTML Seite um und der jetzt da er schaut sich jetzt die ganzen Dateien an. Ich sehe jetzt zwei Probleme. Der Reveal startet mit Opacity Null. Wenn der JSM Server CMS nicht triggert, bleibt alles unsichtbar. Außerdem äh da dein CMS schon Header Footer liefert, brauche ich den HTML

48:41 Head Narf und Footer rausnehmen, um und nur ich könnt ja selber lesen, warum les lese ich das alles vor? Jetzt erstellt er die gesamte Website neu, weil eben so viel geändert werden muss. Das glaube ich zumindest, dass er das macht oder er macht es auch nicht. Vielleicht ah, vielleicht auch nicht. Ah, doch, er erstellt die Seite neu und zwar diesmal ohne Docype HTML. Das liegt daran, dass hier unser CMS das äh schon quasi von Haus aus mitliefert. Ihr könnt aber eben auch eine solche Seite reinwerfen. Ich werde noch da dafür sorgen, dass z.B. solche Animationen hier. Moment, hier, hier, hier. Dass solche Animationen eben auch geladen werden, dass das hier unten

49:26 nicht ausgeblendet wird. ähm, dass ihr einfach eins zu eins die Seite hier reinkopieren könnt. Das wird auf jeden Fall noch kommen. Und sobald ihr das Video hier gesehen habt, ist es quasi erled, also sobald das Video rauskommt, ist dieses dieser Fehler auf jeden Fall erledigt, aber ihr habt gesehen, so einfach kann man hier Websites reinkopieren und jetzt müsste man natürlich die Website bearbeiten und ich merke, wir sind jetzt bei 50 Minuten und wir müssen uns ein bisschen ranhalten, denn die Website die ist zwar so grob fertig, aber natürlich perfekt fertig ist sie noch nicht. Also, wir müssen natürlich dann noch Texte anpassen. Das ist euer Job. Und ich muss noch äh die ganzen die ganzen Sachen hier unten anpassen. Und dafür gehe ich jetzt einfach mal hier rein, kopiere mir

50:13 das hier in die Dokumente und sage dann hier Test Website. Kopier mir das hier rein und jetzt gehe ich in Cloud Code. Da habe ich das habe ich schon vorbereitet. Suche mir hier einen neuen Ordner aus und gehe dann Dokumente Test Webseite öffnen. Und jetzt sage ich ähm ich möchte diese Website hier erstmal öffnen. Also so soll die Website aussehen. Ich finde, die sieht schon unfassbar gut aus. Also ich finde persönlich, die sieht ja, die ist eigentlich fertig, ne? Also, die ist eigentlich richtig richtig gut. Wir haben einen guten Job gemacht. Aber hier ganz wichtig, noch nicht bereit. Kein Problem. Holt ihr uns an unsere kostenlose Checkliste, 10 Punkte blabla. Das ist natürlich, das funktioniert noch nicht. Wir, wenn wir jetzt hier herunterladen klicken, passiert noch gar

50:59 nichts. Das heißt, dieser Bereich, der muss rausgenommen werden. Das machen wir. Äh, der Download muss raus aus der Website. Dann was noch raus muss, ist äh die Animation, das alles eingeblendet wird mit JS. Ähm, klappt noch nicht, deswegen auch raus. Wie gesagt, das wird demnächst das wird demnächst klappen. Äh und dann hätte ich gerne noch ein interaktives Element. interaktives Element Quiz erstellen, äh was den

51:44 Kunden dazu bewegt, er zu kaufen und natürlich noch und Light Mode, Light Mode und Dark Mode Switcher einbauen links neben Button im Menü. Warum mache ich das jetzt hier mit Cloud Code und nicht mit Cloud im Web? Das liegt daran, dass Cloud Code extrem gut darin ist, Code anzupassen und diese Website, die wir hier gebaut haben, die jetzt hier unter meiner meiner in meinen Dateien liegt, ist nichts anderes als Code. Das ist einfach nur HTML Code, der quasi über den Browser ausgeführt wird. Und das, was Cloud Code jetzt kann, er durchsucht die Website Cloud im

52:31 Internet, das ist der Nachteil am Cloud im Internet. Deswegen Website erstellen, Design validieren, also einmal Design checken. Guck, jetzt ist es quasi hier einfach ganz normal. Jetzt ist ohne dieses Einblenden. Das Einblenden ist safe cool. Und wird auch noch kommen, aber das hier wird jetzt sehr sehr viel einfacher ähm hier reingebaut werden können. Speichern. Da müsst ihr wie gesagt noch mal warten. Wir nehmen das Test auch mal wieder raus. So, speichern. Und jetzt sehen wir hier noch wird's eingeblendet. Und wie gesagt, ich verspreche euch, dass es mit dem Einblenden auch klappt, aber noch äh eben nicht. Und der Cash lehrt sich eben auch immer äh nur alle, ich glaube 5 Minuten. Das heißt, man muss immer mal kurz ein bisschen warten, bis der Cash sich neu lädt. Also einfach immer mal wieder neu laden und dann

53:17 gucken, ob schon alles fertig ist. Während das läuft, schauen wir uns wieder in Cloud Code rein. M hat er schon gesehen. Now let me read the Footer Lead Magnet CSS. Also er liest sich jetzt die ganze Sache hier alles durch. Er guckt sich den Code an und so weiter und ihr seht schon hier, ich arbeite echt viel mit Cloud Code. Z.B. arbeite ich gerade an einem Analytics Tool oder einem Analytics Feature für Nexus. Und jetzt haben wir hier die To-Do Liste aktualisiert. Äh gratis Download entfernen. Das macht er jetzt als allererstes. Und jetzt muss ich hier sagen, Lauf für for Sessions. Ich kann aber auch sagen, Berechtigung umgehen und dann hat er automatisch alle Berechtigungen, die man äh die man braucht. Und das hilft einfach, wenn ihr jetzt machen lassen wollt, ein Kaffee

54:03 trinken gehen wollt. Wir machen ja jetzt quasi parallel immer alles. Das heißt, wir wollen wirklich diese Website bei 60 Minuten online kriegen. Ich meine, online ist sie schon. Äh, das ist ganz cool, aber äh sie soll eben auch äh funktionieren. Wichtig ist, er muss gleich auch noch eine Datenschutzerklärung erstellen, ganz schnell. Und er muss dann auch noch mal eben ein Pressum erstellen, ganz schnell. Das alles in unter 5 Minuten. Das heißt, jetzt wird's noch mal, jetzt ist die Crunchtime angesagt, jetzt geht's ab und äh jetzt ja, jetzt ist Action angesagt. Das ist ganz wichtig, äh dass er jetzt hier schnell ist und er ist natürlich 1usend mal schneller als jeder Mensch. Äh und das will ich euch einfach hiermit ein bisschen zeigen. Natürlich ist die Website nicht 100% perfekt und ja, man kann auch an den Text noch feilen und diese typischen Striche muss man noch wegmachen, aber das ist ja nur ein kleiner Teil, ne?

54:48 Also das ist ja, es ist ja nicht viel. Wir gucken mal ganz kurz, ob es schon lädt. Ja, okay, jetzt lädt aber jetzt gefällt mir das nicht mehr. Das ist jetzt einfach hier alles viel zu eng. Das liegt daran, wenn man äh eben in ähm nicht mit Docttype HTML arbeitet, dann begrenzt er das Ganze hier auf eine feste Breite. Das ist nicht optimal, das wollen wir nicht. Deswegen bin ich ganz happy, dass wir das direkt mit Cloud Code hier angepasst haben. Also wichtig ist hier, wenn ihr eine schöne breite Seite wollt, die so aussieht wie bei Cloud, immer hier oben mit Docype HTML arbeiten. Also immer so arbeiten, wie diese erst dieser erste Entwurf hier aussieht. Also das hier, das muss hier eingerichtet werden und dann sieht das hier oben so aus. Docttype HTML HTML

55:34 Head, also der Headbereich und dann da drunter dann der Style und erst da drunter der Body, also alles quasi erst dann und das ist das ist super wichtig, dass ihr so arbeitet. Er kann auch das andere, aber das andere ist eben nicht optimal. Auch das werde ich noch in der Dokumentation updaten. Ihr seht schon, meine Batterien sind nur noch bei 5 %. Wir müssen Gas geben. Let's go. Wir schauen uns den Stand von Cloud an. Jetzt erstellt er das Quiz am Ende der Datei. Wunderbar. Das ist natürlich wunderschön. Ähm, er hat auf jeden Fall die Datei schon mal bearbeitet und die Quiz äh Sachen eingebaut. Also inhaltlich ist es drin. Und jetzt noch das Quiz JavaScript. Das ist cool. Äh ich während er das macht, kann ich schon mal die nächste Anforderung formulieren und zwar jetzt erstelle

56:22 oben äh im Head Bereich den das Codeelement. Mach das zu einem Termin Terminal mit ein paar Easter EG Befehlen, die tatsächlich eine Rückgabe haben. Das ist der nächste die nächste der nächste Task und den kann ich auch direkt schon abschicken, damit er überhaupt nicht mehr stoppt. Er soll direkt weitermachen und er verarbeitet diesen Befehl quasi, sobald er den Rest der Befehle fertig hat. Und dann, also das äh habe ich mir einfach vorhin so überlegt. Das wäre eigentlich ganz cool, wenn wir das hinbekommen könnten. Und ähm das ja, das ist halt einfach, damit dieses Element

57:07 hier äh ersetzt wird und damit wir hier ein schönes großes Element haben, was das gefällt mir auf jeden Fall sehr gut. Das, wie gesagt, ist mir alles ein bisschen zu eng und natürlich, was man aber auch dazu sagen muss, die Seite ist hier mobil optimiert. Ähm, also die wird hier entsprechend angezeigt. Auch da wichtig, die wird nur 60% angezeigt. Das ist noch, das ist noch ein Bug, den muss ich noch beheben. Aber hier die Seite, die wir quasi vorhin hatten, die ist komplett mobil optimiert, außer dass das hier unten nicht geladen wird, aber sonst ist sie komplett mobil optimiert. Also, das ist auf jeden Fall schon mal richtig cool. Und während er noch arbeitet, können wir jetzt hier Gut, das hier unten ist noch nicht CSS fertig, aber er arbeitet ja auch noch. Äh, wir können mal gucken. Jetzt entferne ich al Terminal Body. So, laden wir mal neu.

57:55 Jetzt zack, ist es auch schon fertig. Und jetzt help. Kann man das? Okay, man kann es noch nicht absenden. Tipp: Gib help ein. Aber das wäre natürlich mega cool, wenn das gehen würde. Jetzt Terminal. Ah, okay. Das Terminal Script hat ist noch nicht fertig, aber jetzt haben wir hier oben schon mal das drin. Und wenn man das jetzt mobil anzeigt, dann ist es quasi auch alles mobil optimiert. Und wie gesagt, es sieht ultra cool aus. Es sieht ultra ultra gut aus. Und ich glaube, tada, wir haben auch natürlich schon den Light Mode drin und natürlich auch alles in passender Farbe. Klar, man muss jetzt noch das Bild hinzufügen. Wie man das macht, ist auch relativ einfach. Wir können ähm wir können eigentlich schon mal den HTML Code kopieren. Das machen

58:42 wir, indem wir das hier z.B. in Curser oder in einem anderen Tool öffnen. Das ist eigentlich egal, welches Tool das ist. Und dann kopieren wir einfach wieder alles, laden das hier oben rein, zack, speichern wir. Und jetzt wichtig, jetzt müssen wir hier oben ein Bild hochladen in die Medien. Dann nehmen wir einfach mal von meinem Desktop mein Profilbild, das laden wir hoch. kopieren die URL und sagen jetzt unserer KI so, bitte Bild von mir äh zu dem hier machen. Ähm und jetzt kopiert er diesen Code, also diese URL kopiert er jetzt in das Bild rein. Er sucht natürlich erstmal den Punkt ersetze Placeholder

59:28 durch dein Bild. Wunderbar. So soll das sein. Und jetzt kopieren wir den neuen Code. Das muss weg. Und das müssen wir neu öffnen in Curser kopieren wir einmal komplett in die Seite rein. Das nicht Startseite. Oh, wir sind bei 60 Minuten, zumindest in der in der Aufnahme. Ich muss mich beeilen. Ich muss mich beeilen. Wirklich, ich beeil mich schon. Aber ihr seht ja, wir sind im Grunde genommen online. Jetzt noch das Impressum. Äh, jetzt erstelle noch ein Beispiel. Impressum im gleichen Stil als neue Seite und dann noch eine Beispieldatenschutzerklärung

1:00:15 im gleichen Stil Punkt. So und jetzt erstellt er noch mal eben eine Datenschutzerklärung und ein Impressum. Das läuft. Währenddessen kann ich euch hier noch mal ein paar SEO Einstellungen zeigen. Der Metatitel sollte natürlich nicht Startseite, sondern Scheurer Tag Knowledgies und dann ähm irgendwie Software und website mit KIR Scheurer Technologies. So, das wäre doch sinnvoll. Software ist unser Focus Keyword. Dann beschreiben wir noch, machen wir noch eine Metabeschreibung. Das ist das, was bei Google hier unten angezeigt wird. Ähm z.B. erstelle Software und Websites

1:01:02 mit KI. Einfach irgendwas, ne? Und dann speichern wir das Ganze und dann wird quasi das so entsprechend bei Google angezeigt. Hier müssen ein bisschen mehr rein, dann ist der auch happy. Können das mal nur so machen. Zack. Und dann Keyword nicht im URL. Logisch, ne? Wir wollen hier oben ja nicht Software stehen haben. Speichern äh wir jetzt das Ganze. Dann öffnen wir das Ganze und jetzt ist hier auch alles drin. Tada. Und auch direkt mit dem entsprechenden Bild. Also super cool. Und jetzt haben wir hier auch ein kleines Quiz drin und am Ende kostenloses Erstgespräch buchen. Kostenloses Erstgespräch. Da muss natürlich jetzt der Kentlyly Link hinterlegt werden. Jetzt geben wir hier oben mal help ein. Oh mein Gott, das ist ja cool. Okay. About Scha. Okay, das ist

1:01:50 Matrix. Okay, das ist das ist das ist ja mega cool. Okay, wir machen mal clear noch mal help und dann stack frontend. Also das ist ja wirklich ultra cool. Date. Okay, da gibt das Datum aus. Who am I? Okay, das gibt's nicht. Aber das steht doch hier. Who habe ich falsch geschrieben? Who am I? Du bist ein potenzieller Kunde und wir bauen gerne für dich. Okay, geil. Preis wir sparen dir 80% mit KI. Ja, safe. Also das ist auch so. Also ja, ich bin

1:02:37 ich bin komplett begeistert. Ich liebe dieses Terminal. Das ist halt so ein kleines Eastergck für Nerds, aber ich glaube, das zeigt genau das, was eben auch Steurer Technologies ausmacht, dass wir einfach coole Sachen machen. Das muss natürlich jetzt noch ein bisschen größer und dann muss hier der Text vielleicht noch ein bisschen gelb und alles hier ein bisschen fullwidth, also volle Breite, aber hier unten, also das sieht alles schon so gut aus und das kostenlose Erstgespräch muss nur mit dem Calendly Link hinterlegt werden. Auch das können wir dann einfach machen. Können mal bei Kently kurz reingehen, mich einloggen. Ähm, muss mal kurz gucken, ob das gerade geht. So einfach. Ich hoffe, ah, nee, das geht jetzt nicht. Egal. Also, ihr könnt einfach der KI den Link geben und sagen, bau den Link ein. Also, das ist wirklich super simpel. Von daher kann ich das einfach

1:03:23 sehr machen. Kommt jetzt. Impressum scheint schon fertig zu sein, glaube ich. Da haben wir es. Das öffnen wir wieder in Curser. Ihr könnt es wie gesagt in jedem anderen Code Tool auch öffnen. Wenn ihr keins habt, einfach im Texteditor öffnen. Hauptsache, ihr könnt es, er öffnet es

…