Der BESTE Weg, 2024 eine Website zu programmieren

Werbung: Ich bin total begeistert von Ionos! Wenn du blitzschnell deine Website veröffentlichen und zuverlässig betreiben möchtest, guck mal hier: www.ionos.de/?YT&u...
Fertige Website: niklas.so/
💠 Mein komplettes Produktivitätssystem: fokus.so
💌 Newsletter: go.niklassteenfatt.com/newsle...
🐦 Socials: go.niklassteenfatt.com/links
💡AUS DEM VIDEO:
Oliver (Designer): / oliver-wersin-1a53241a5
Github: github.com/
Git für Anfänger: www.ionos.com/digitalguide/we...
AstroJS: astro.build/
Ergebnis: niklas.so/
⌚️Timestamps:
00:00 Intro
00:49 1. Design
02:06 2. Repository
03:16 3. Implementierung
06:00 4. Deployment
Jetzt deine Ziele erreichen: fokus.so

[@NiklasSteenfatt]

Hier ist die erste Version der fertigen Website: niklas.so/ Ich bin gespannt auf euer Feedback! Ich werde weiter dran arbeiten! Tausend Dank an Oliver für das Design: www.linkedin.com/in/oliver-wersin-1a53241a5/ Und natürlich an Ionos fürs Hosting: www.ionos.de/?YT&Niklas&Infl&DE

[@KnisterMinister]

die Bilder laden ewig da sie riesig sind

[@NiklasSteenfatt]

@@KnisterMinister Guter Punkt, da war ich etwas faul. Hab gerade direkt mal einen neuen Commit mit kleineren Bildern gepusht - jetzt deutlich besser, oder?

[@benedikt326]

@@NiklasSteenfatt das erste was mein Designer Herz sieht: 2 unterschiedliche Grüntöne ('Niklas' und 'CTA') und die "Bekannt aus" leiste reset sich etwas unschön. Sonst aber ansprechende Seite :-)

[@PoseidonLP]

Dass du digitaler Nomade bist, wurde jetzt aber trotzdem nicht ergänzt in der Beschreibung 😅

[@laurimensinger]

Super Website, versuche mal dein Bild über die Kachel, statt in die Kachel zu setzen, also ohne abschneiden der Arme. Gibt eine gewisse Tiefe. :)

[@henno2800]

Welcher Praktikant stellt das Video um die Uhrzeit live?

[@michaelkeller8978]

Noch den Donnerstags CPM mitnehmen 😂

[@NiklasSteenfatt]

Wenn man sich vornimmt, das Video am Donnerstag zu posten 🤣

[@michaelkeller8978]

😂

[@philspam2087]

Einer, der seine Zielgruppe kennt ;)

[@Whisper3621]

xD Welcher Azubi schaut das Video um diese Uhrzeit? :p _es ist gerade __4:01_

[@5upern4tural]

Wer es schafft in einem so technischen Video einen passenden Ausschnitt aus Gothic reinzubringen ist einfach ein MACHER!!! 😆👍

[@peterkrahe9046]

Mega Bock auf mehr technische Videos!

[@alexanderfrenck8674]

Ich als desillusionierter Webentwickler feiere deine spitzen Kommentare in Richtung Studium uns Webentwicklung gerade so hart 😂

[@julian3400]

Sehr interessantes Video Niklas. Dank dir hab ich angefangen Informatik zu studieren, bin gerade im 1. Mastersemester Wirtschaftsinformatik (davor bwl Bachelor), und finde es total spannend zu sehen, wie viel mehr ich in deinen IT-spezifischen Videos mittlerweile verstehe (auch die ganzen Eastereggs/jokes). Wirklich großes Dankeschön für deinen Content. Und aus Marketingperspektive machst du auch seehr viel richtig, war davor lange im digitalen Marketing für diverse Content Creator und Coaches tätig (zb. auch Patrick Reiser aus deinem Podcast). Spannend zu sehen, was du dir aufbaust, viel Erfolg weiterhin🤌

[@MMHA-my1qf]

Wie kommst du im Master zurecht? Oder ist der Informatikanteil so gering und auf hoher Flugebene, dass selbst fachfremde (BWL) mitkommen können?

[@julian3400]

​@@MMHA-my1qf Danke für deine Frage. Also dieses Studium können BWLer, Wirtschaftsinformatiker und Informatiker studieren. Ich konnte im Bachelor ab dem 3. Semester den Schwerpunkt Wirtschaftsinformatik wählen, jedoch ging es v.a. um Digitalisierung und Prozessmanagement und gar nicht ums programmieren, daher bringt das mir nur bedingt etwas. Jetzt im 1. Semester hab ich es langsam angegangen, d.h. nur die verpflichtende Informatik Introduction (2 Fächer, einmal 10ECTS Introduction to CS (ist der Harvard CS50 Kurs, mit 2 extra Vorlesungen der Uni über Algorithmen& Datenstrukturen und Graph & Trees) und und 5 ECTS Konzeptioneller Modellierung (also Datenbanken, Entity-Relationship, SQL, XML, UML, etc.). Grundsätzlich sind darüber hinaus alle Fächer frei wählbar, jedoch muss man in bestimmten Fächergruppen eine Mindestanzahl an ECTS haben (also Informatikmodule, Wirtschaftsinfomodule, etc.). Ab nächsten Semester wähle ich dann auch Fächer an der Informatikfakultät, die sicherlich einiges an Basiswissen voraussetzen. Daher lerne ich in den Semesterferien noch wahrscheinlich Python und C#/C++ oder Java. Ansonsten habe ich nur noch Spanisch und ein Wirtschaftsinformatik Fach, bei dem ich 4 Hausarbeiten, 2 Discussions und 2 Präsentationen machen musste. TL;DR: - 15 ECTS Informatik (Sehr anspruchsvoll, nimmt so 25 Stunden die Woche ein) - 5 ECTS Spanisch (haben verpflichtendes Auslandssemester, gehe nach Buenos Aires, daher lerne ich so 10 Stunden die Woche) - 5 ECTS Wirtschaftsinformatik Fach (so 4-6 Stunden die Woche) Das Semester war bisher schon anspruchsvoll, ging jedoch, da ich noch nicht gearbeitet habe. Seit 2 Wochen bin ich 2 Tage die Woche als Werkstudent tätig, jetzt ist es schon super stressig, d.h. ich bin eig jeden Tag von Früh bis Abends irgendetwas am machen. Aber es ist super spannend, lerne super viel, daher fällt es mir auch einfach, dranzubleiben. Aber es ist schon sehr viel Eigenverantwortung nötig, damit man auch mit den ganzen Informatikmodulen hinterherkommt. Falls du mehr über den Studiengang erfahren möchtest, schaue mal nach International Information Systems an der Friedrich-Alexander Universität Erlangen-Nürnberg :) Und bei Fragen, hit me up

[@medical-informatics]

@@julian3400 Wirtschaftsinformatik Master bin auch ich durch und du wirst es später lieben und hassen, dass du was von Prozessmodellen usw. verstehst! Hassen wirst du es dann, wenn du ein Geldgeber vor dir hast, der eine IT Lösung von dir möchte aber nichts von all dem versteht.

[@ThePointer1000]

Wie subtil und gleichzeitig präsent du Werbung rüber bringen kannst, sieht man selten. Gutes Video !

[@katzuy5093]

Mega! Wie kann man die Seite vor Attacken sichern?

[@movienino]

Kann man ein Astro Repository auch über ein WebFTP deployen?

[@bullvbullv8228]

Je öfter der Sponsor genannt wird desto größer ist die Vergütung, oder wie läuft das? Nicht förderlich für die Glaubwürdigkeit. Zu mindest für mein Empfinden.

[@Fatih9837]

"Meine Existenz als Informatiker hinterfragend", noch nie hat ein Satz meine Gefühle so gut wiederspiegelt 😂. Seit dem es ChatGPT gibt und dann auch noch den direkten API Zugang über den Code Editor, stelle ich mir diese Frage regelmäßig.

[@lukasr.3925]

Cool dass mehr technische Videos erscheinen

[@mrpriesident8452]

Ich lasse hier mal einen Kommentar da, um das Video zu recht zu pushen. Bin überhaupt kein Informatiker, aber wie du hier über den Workflow und den Sinn verschiedener Programme und Anwendungen sprichst ist sehr interessant.

[@felixkoenigproductions7644]

Finde es toll, dass es wieder mehr Programmier-Videos gibt.

[@ThomasBrandenburger]

lol "programmier" videos... hat definitiv nichts damit zu tun.

[@mathemitnullplan]

responsive stark verbesserbar, interessant wäre gewesen, wie du dinge nachträglich änderst - etwa old school im code oder nimmst du da ein cms?

[@GuitarOlli193]

Womit denn?

[@Scanjob]

Du schaffst es wirklich, sogar gesponsorte Videos mit nützlichem Content zu füllen und unterhaltsam zu gestalten

[@satistile]

Ich finde solche technischeren Videos echt super! Es währe echt cool, wenn du mehr davon bringst

[@jatixx6848]

Der Gothic 2 einspieler 10/10

[@medical-informatics]

Django war meine Wahl vorletzes Jahr und ich bin sehr zufrieden. Wir nutzen Datenmodellierung, SQL, JavaScript, Python natürlich usw =D mega framework.

[@simonnmorgan]

Sehr cooles Tutorial und sehr sinnvolles Tool. Werd das mal ausprobieren denn es würde mir viel Zeit und Arbeit sparen.

[@baby-sheesh]

Das Video ist nicht nur richtig wertvoll, sondern ausnahmsweise mal lustig geworden!

[@NiklasSteenfatt]

Ausnahmsweise 😭

[@manuskanuservice]

"Diese Tools helfen mir täglich dabei, mehre berufliche Projekte zu jonglieren und dabei trotzdem genug Zeit für Freunde, Familie und private Interessen zu haben." Du hast es geschafft, dass ich hinterfragt habe ob "mehrere" tatsächlich so geschrieben werden kann :D

[@MIKAMIKA-fv8om]

Hallo, ich habe eine Frage, bezüglich des Hostings mit Deploy Now. Kann ich meine Astor Website auch hosten, wenn es keine Single Page ist? Verstehe ich die Website falsch, oder geht das nur mit den 'großen' Frameworks? Außerdem würde ich gerne wissen, welchen Paket ich kaufen müsste, vorausgesetzt es geht überhaupt. Des gibt ja das PHP Project Paket und das Static Project Paket. Ich nutzte auf meiner Website keine Datenbank, weil sie nur dazu da ist Inforamationen über einen Betrieb zu erlangen. Ich würde mich über eine Antwort sehr freuen. Super Video und danke :)

[@MrStrenggeheim2000]

Wolltest du zuerst Astro verwenden und hast dann gesehen, dass es unterstützt wird oder wolltest du erst Ionos verwenden und hast dann eine Möglichkeit gesucht, ein krasses feature zu zeigen xD

[@NiklasSteenfatt]

Hatte tatsächlich schon vorher geplant, das mit Astro umzusetzen! War positiv überrascht, dass sie das tatsächlich komplett unterstützen.

[@Z0yxx]

Wieder ein Video perfekt auf ein Placement hin zugeschnitten 😊

[@Lukazzer]

Technische Videos plus deine legendären Witze = ❤

[@Isidee]

Hallo Niklas, herzlichen Glückwunsch zur neuen Webseite, die übrigens gelungen ist m.M.n. Ich vermisse nur eine Fußzeile oder einen Menü-Button, aber ansonsten top 👍

[@lucafpv3]

Wie sieht es bei deiner Webseite mit SEO aus? Das würde mich bei deiner Frameworkauswahl interessieren ob da vorab schon ein Tool dabei ist. 😄

[@easypy]

Bin schon gespannt auf die ganzen technischen (vorallem Programmiervideos)

[@berkaycankiran]

Will ehrlich nicht wie ein spießer klingen bro aber hast impressum und datenschutzerklärung vergessen. pass auf wegen abmahnungen! Nices Video :)

[@NiklasZiermann]

Astro ist echt ein super framework. Die Colocation von Astro oder z.b. React Server Components ist echt nice!

[@Zalmakiz]

neu und hip = weniger javascript im client? dann vllt mal wasm mit blazor probieren? :>

[@zilvestro1]

Ionos ist also eine echte vervel alternative wenns nur ums deployen geht oder

[@MrPetrepan]

Vielen Dank, werde das so machen.

[@danieltran7637]

Danke für des Video! Hab heute echt nen scheiß Tag bzw. aktuell echt ne scheiß Phase, weil mir der Berufseinstieg irgendwie bissl schwer fällt, da ich irgendwie nicht die passende Firma finde und bei den beiden letzten leider nicht so viel Glück hatte und da irgendwie nicht so gepasst hat. Und sich irgendwie die Rechnungen häufen und alles irgendwie bergab rennt. Aber dein Video und deine Art Weise, hat mich echt zum Lachen gebracht. Btw.: Fühle mich auch immer wie der krasseste Hacker, wenn ich meine Git Repos ink. SSH Keys anlege auf zsh. :D

[@danieltran7637]

Zu viele Klischees die hier bedient werden. Stop ich hör gar nicht mehr auf zu Lachen/Grinsen. 🤣🤣

[@steff420]

das Bild für die Discord Gruppe LOL

[@frederikdiekmann]

Schönes Video!

[@saschaundsebastian]

Niklas - hättest du Lust auf ein Interview mit uns ? Alles rund um dein Creator-DaSein , deine Community, dein Content und deine Tipps für andere Creator. Würden uns mega freuen !

[@owl3379]

Hey Niklas, ich liebe deinen Content, aber der Vergleich zwischen Next und Astro liegt aber auch ein Unterschied und kann man schwer miteinander vergleichen! Aber ansonsten, top Content und ich freu mich auf mehr.

[@tonan8606]

Der Oberlippenbart ist ja mal so am Start

[@NiklasSteenfatt]

In LA ist man damit am unauffälligsten

[@eliasx8237]

Alter, ich hab in meinem Leben schon mehr als 100 Webseiten gebaut, meine Kunden (deutsche Mittelständler) haben darüber mindestens 50 Millionen Euro an Aufträgen erhalten, aber nach den HTML Basics steig ich persönlich komplett aus. Wieso sollte ich eine Webseite mit Code programmieren, wenn es mittlerweile wirklich verrückt gute Baukästen gibt, die schon derart optimiert sind?

[@herkules1663]

was benutzt du?

[@eliasx8237]

Habe alles mitgemacht. Wordpress und danach eigentlich jetzt zu Webflow umgestiegen. Da kann man auch gute Funnel Projekte machen.@@herkules1663

[@antibot3429]

@@herkules1663wahrscheinlich Wordpress etc

[@nicklympus]

Wirklich cooles Video, aber gibt es einen Grund nicht einfach Github Pages zu verwenden?

[@tillk1751]

Daran würde Niklas nichts verdienen 😢

[@freylini_7004]

Hätte es cool gefunden wenn es etwas detaillierter gezeigt worden wäre, wie ein Tutorial…

[@NiklasSteenfatt]

Vielleicht mache ich ein OnlyFans mit technischen Tutorials

[@antoniob.5918]

Interessant Astro js, cool gemacht. Vielleicht könnte ich das auch mit python backend nehmen. Weiter solche Themen ❤

[@tijonse]

Niklas, ich mag dich, daher die Bitte, es ist Zeit: hol dir eine ordentliche Uhr ... bitte. Sehe bei dir eine JLR Reverso o.ä. Jokes in diesem Video geben ich 10/10

[@lordkacke6220]

Verrückt wie dein Hintergrund einfach wie so ein Standard Green-Screen Hintergrund aussieht :D

[@traderdaniel4749]

Das erste Design von Oliver war wesentlich besser. Warum seid ihr nicht dabei geblieben?

[@NiklasSteenfatt]

Weil wir das zweite beide viel besser finden!

[@NeverCodeAlone]

Sehr schön, ich mache auch live Coding auf YT, aber mein Techstack ist nicht so cool.

[@TheBeansChopper]

Also aus rechtlichen Gründen empfehle ich dir dringend die Werbevideos demnächst entsprechend zu kennzeichnen

[@thesneakymen4707]

Fehlt da nicht ein Impressum und eine Datenschutzerklärung? Gerade weil auch Google Fonts genutzt werden.

[@Philszen]

Womit denn? 🤣 Gothic 2 einfach bestes Spiel ever!

[@epicmen111]

Der Satz einfach haha

[@maxmustermann9858]

Impressum und Datenschutzerklärung nicht vergessen wenn auch das ganze um eine Deutsch Seite handelt oder an Deutsches Publikum richtet.

[@MrFilmed4u]

Kein Impressum oder Datenschutzerlärung?

[@knecht3000]

Hab vor kurzem auch eine Webseite mit react erstellt mit zusätzlicher flask API weil ich eigentlich ein cmdline python programm, dass ich mal gecoded hab als Webseite bereitstellen wollte. Hab fürs deployment heroku benutzt, das funktioniert genau gleich. Hab mich ganz am Ende ums deployment gekümmert und das hat mir wirklich Kopfschmerzen bereitet 😅 Hatte ein github repo mit subfolder frontend und api-xyx. Do ein mono repo das mehrere apps enthält ist echt nicht gut unterstützt und ich habe jetzt temporär 3 repos 😅 mein mono repo und 2 für die subfolder weil heroku das so will bzw. irgendwie davon ausgeht, dass die App im top level des git repos liegt und nicht in einem subfolder. Kann man bestimmt schöner lösen hatte bisher keine Zeit 😅

[@Martin-uo9mp]

Hey Niklas, du hast das wichtigste vergessen.. Wo ist der Link zum Fokus Framework auf deiner Website😢

[@Dquin944]

Sehr cooles Video ! Kannte Astro bisher noch nicht, hört sich aber echt gut an. Vllt. bau ich mir demnächst mal wieder eine Website dieses mal mit dem modernen sh*t :D

[@harveyspecter7491]

bro einerseits erklärst du was github ist und andererseits codest du im Terminal mit SSH Keys herum. Entscheide dich doch mal welche Zielgruppe du ansprechen möchtest haha. So wie ich das einschätze besteht deine Fan Base größtenteils aus Informatik Leuten also mach ruhig auch einfach mal ein komplett technisches Video, fände ich fresh. Wolltest du z.B. nicht mal ein Video zur Graphentheorie machen?

[@SezginRuhi]

Danke

[@negativerfan]

Finde es immer so befremdlich wie Niklas über Programmieren redet. Ich kann mir irgendwie nicht vorstellen, dass er bei Facebook gearbeitet hat hahhah.

[@negativerfan]

PS: So ist Web Entwicklung nicht. Wenn man tatsächlich in dem Feld tätig ist kennt man sich aus und der Alltag besteht nur mehr zu 10% aus googeln.

[@NiklasSteenfatt]

r/woosh

[@negativerfan]

​@@NiklasSteenfatt Wir sind hier nicht auf Reddit Freundchen :).

[@negativerfan]

@@NiklasSteenfatt Hab eigentlich noch 3 andere Kommentare geschrieben. Hast du die gelöscht, oder KZbin?

[@NiklasSteenfatt]

@@negativerfan Ich lösche nichts

[@janerik6267]

80er vibes

[@arnebeuel6362]

😊👍🏽

[@Thomas_Meier93]

Habe früher auch mal Webseiten nur in HTML und CSS programmiert. Aber als nicht selbständiger ist die Frage warum man überhaupt eine Webseite designen sollte

[@BurkhartFirgau]

Apfelkuchen !

[@TheTurner567]

Also das Video zeigt nur die absoluten Basics. Der eigentliche schwierige Part und zwar der Programmier/Designteil wurde nahezu nicht gezeigt bzw. komplett ausgelagert. Dazu kommt noch, dass das Endresultat meiner Meinung nach nicht besonders gut gelungen ist. Ein paar einfache Boxen mit Text, Bildern und Links. Da hätte ich mehr erwartet. Für das Ergebnis wäre es wahrscheinlich sogar noch am besten gewesen gar kein Framework zu benutzen anstatt irgendein hippes modernes Reactive Framework. Auf der Website ist nichtmal das Favicon ausgetauscht worden und es ist immer noch das Standard astro favicon drinne. Bisschen sehr enttäuschend, naja

[@ThomasBrandenburger]

Verfolge dich doch schon länger.... schade dass dein content nur noch mainstream ist und je länger je weniger Tiefgang hat.

[@kikierikiii183]

How bout Impressum? 😄

[@thisisrainp1181]

Wird dein Praktikant eigentlich nach Anteilen bezahlt oder ist es ein typisch deutsches unbezahltes Praktikum 😂

[@Moinfredus]

braucht man dafür kein Impressum oder so? :D Kenne mich da noch nicht so aus . Ich bin nur ein 0815 Umschüler :D

[@bubbles4525]

Nicer Schnorres

[@Tony474]

Wilde Uploadzeiten. Hab das jetzt nur gesehen, weil ich hier für meine Coding Übung procrastiniere

[@bas5984]

Er kann nicht noch sympathischer werden. Niklas: gothic Einspieler.

[@snnonymsimon8527]

Hostinger gefällt das Video

[@samuelklassen7]

HTML ist eine Programmiersprache!

[@21Maxim]

Vercel und nextjs auf die 1

[@MagicJonathan]

bessere kamera quali wäre nice. sony zv1 passt in jeden koffer und hosentasche

[@NiklasSteenfatt]

Experimentiere gerade mit dem Setup - versuche so viel wie möglich aus dem Koffer zu verbannen. ZV1 könnte eine Option sein :) Für die Performance macht es aber kaum einen Unterschied

[@CommentAndRateTV]

Verstehe seit 6:27 nichts, aber habe das Gefühl ich kann danach programmieren... zeugt von Qualität.

[@raho500]

Lebst du in einem tiny house?

[@guardguilty5234]

Ich kann JS und deren unendlichen Frameworks nicht mehr sehen. Eine coole Videoidee wäre doch mal folgendes: „Ich baue eine Website in der Programmiersprache XYZ und vergleichst sie miteinander bzgl. einfachheit, sicherheit und spassfaktor“. Dann könntest du Websites mit PHP in Laravel oder mit Java in Springboot usw…

[@fabian2973]

Olivers whaaaaat?

[@negativerfan]

Die Performance der Website ist durchschnittlich, für das das nicht viel Content zu sehen ist eigentlich sogar unterdurchschnittlich. 56 Punkte Mobile und 81 Punkte für Desktop. (Lighthouse Test). Sry das kommt ein wenig gemein rüber. Hat mich nur interessiert, weil du meintest Astro währe so gut. Astro ist nur für große Websites gut und sinnvoll (Blogs und so, Websites mit viel Text Content). Wenn du einen Onepager machst merkst du von Astro nicht mehr viel.

[@R4NK4Z]

Hä? Was hat counter strike source mit webseitendesign zu tun?

[@Robin-ym1jy]

DEN besten Weg. :))))))))))))

[@Fantaztig]

Ohje IONOS, in meinem Kopf sind die immer noch in der Sparte "deutsche Cringefirmen". Hat sich da in den letzten 10 Jahren was geändert?

[@michaelschone3406]

War wohl eine scheiss IDEE dein komischer "Ich gebe mein Luxusleben-post"? ... o lol

[@guesswho2967]

Werbekanal?😂😢

[@hiiamatoxic1426]

Was ist denn ein nicht „professioneller“ Softwareentwickler?

[@danielbautz3945]

dieser Kommentar pusht den Algorithmus ;)

[@devhub97]

Deine Webseite ist down :)

[@NiklasSteenfatt]

Eigentlich nicht

[@devhub97]

tatsächlich nicht mehr, gestern zu der Zeit bei mir zumindest