Eigene Website erstellen mit Astro und Tailwind CSS #1

  Рет қаралды 4,239

Programmieren mit Mario

Programmieren mit Mario

Күн бұрын

JETZT das Komplette Tutorial anschauen ↪︎ • Eigene Website erstell...
Eine eigene Website erstellen mit dem All-In-One Framework Astro und Tailwind CSS. Ich zeige dir in einzelnen Schritten wie du dir eine Website mit Blog Funktionalität erstellen kannst, welche Animationen enthält, sowie eine Page Transition für die Navigation. Diese Website ist von Entwickler, für Entwickler und kann auch als Portfolio Website genutzt werden. Dies ist Part 1. Happy Coding!
😺 Source Code + Links
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
↪︎ github.com/ProgrammierenM/eig...
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
↪︎ astro.build/
↪︎ tailwindcss.com/
⏩ Videoinhalt
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
00:00 Das Ziel
04:00 Welche Technologien
08:59 Basis Setup
⭐ Das könnte dich auch interessieren
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Eigene Website erstellen mit Astro und Tailwind CSS - Playlist:
↪︎ • Eigene Website erstell...
Eigene Website erstellen in [2022] - Playlist:
↪︎ • mitmario.dev
Git Tutorials:
↪︎ • Git und Github
📌 Über diesen Kanal und mich
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Webentwicklung effizient und einfach. Alles rundum Webentwicklung, Webdesign und angrenzende Themen. Mein Name ist Mario und ich bin bereits seit vielen Jahren beruflich als Web Entwickler tätig. Einige Tutorials auf diesem Kanal sind für absolute Anfänger ohne Vorkenntnisse geeignet, und andere für erfahrene Entwickler.
Starte Jetzt!
/ @programmierenmario
#Website2023 #Astro #ProgrammierenM

Пікірлер: 53
@herzbertrattensack3933
@herzbertrattensack3933 Жыл бұрын
Excellent 🙏. Gruß und schönes Wochenende nach Sachsistanien 🙋‍♂.
@ProgrammierenMario
@ProgrammierenMario Жыл бұрын
Grüße und ein schönes Wochenende 🙂
@peterkecks5521
@peterkecks5521 Жыл бұрын
Supermario, danke, ich freue mich schon drauf. 💪🏻
@shade4040
@shade4040 Жыл бұрын
Hallo Mario, zum Anfang möchte ich dir für deine lehrreichen Videos bedanke. Ich freue mich schon auf die nächsten Lern stunden. Grüsse aus der Schweiz 😉
@ProgrammierenMario
@ProgrammierenMario Жыл бұрын
Vielen Dank ... Grüße 🙂
@astariel_windlied9855
@astariel_windlied9855 Жыл бұрын
Hallo Mario. Vielen lieben Dank für das Projekt. Ich werde gleich Parallel mit starten. Danke für deine Zeit und deine ruhige Art, die Dinge zu erklären. Es macht mir immer wieder Spaß und Freude, deine Videos anzuschauen. LG Daniel
@ProgrammierenMario
@ProgrammierenMario Жыл бұрын
Sehr gerne, freut mich sehr das du gleich mitmachst ✌️🙂
Жыл бұрын
Danke! Für die Videos und die Erklärung, was eine Bemme, eine Schnitte und eine Stulle ist.😀
@ProgrammierenMario
@ProgrammierenMario Жыл бұрын
Vielen lieben Dank 😊
@selinofant
@selinofant Жыл бұрын
Hoffe du hattest eine schöne Osterpause 😊 Ich freu mich mega über das neue Thema! Wird super das alles in einem Projekt drin zu haben. Danke für deine Mühe und das tolle Video 😊
@ProgrammierenMario
@ProgrammierenMario Жыл бұрын
Ostern war der Knaller ... soweit ich mich erinnere 😁
@gerselent
@gerselent Жыл бұрын
Was soll ich gross schreiben, das Video wie immer top und für mich kommt diese Serie genau zum richtigen Zeitpunkt. Astro wäre wohl nicht meine erste Wahl, aber so wie du das ganze erklärt, werde ich mti meinen 50+ wohl auch folgen können. Jedenfalls ein dickes Daumen hoch und wünsch dir ein sonniges Wochenende ;D
@ProgrammierenMario
@ProgrammierenMario Жыл бұрын
Vielen Dank! Dir ebenfalls ein schönes Wochenende 🙂
@andreask.291
@andreask.291 Жыл бұрын
Einfach klasse! 👍 Das Projekt kommt wie gerufen. Astro, Tailwind, Git, NodeJS, Components ... alles Gelernte jetzt nochmal komplett abrufen. Vielen, vielen Dank für Deine hervorragende Arbeit, die den Einstieg ins Programmieren leichter machen. 🚀 Möge Dir der Kaffee nie ausgehen! ☕️😊
@ProgrammierenMario
@ProgrammierenMario Жыл бұрын
Vielen herzlichen Dank ✌️
@gamehubler
@gamehubler Жыл бұрын
Wird ne spannende Serie werden, freue mich schon drauf. Interessant auch der Aspekt on Astro mit dem Connect a CMS gegen Ende deiner Allgemein Serie. Danke fürs Produzieren und fürn Erklärbär Mario.
@ProgrammierenMario
@ProgrammierenMario Жыл бұрын
Gern geschehen ✌️
@LeoMerkel
@LeoMerkel 5 ай бұрын
Hi Mario. Bin bei meiner Recherche auf Deinen Kanal gestossen, weil ich etwas zu Astro suchte. Ich kenne Astro zwar schon einigermaßen, bin aber trotzdem noch Anfänger. Ich komme in all den langen Jahren vom manuellen HTML/CSS über Jekyll, Hugo und 11ty jetzt zu Astro. Dein Stil gefällt mir sehr gut und ich finde, Du erklärst die Zusammenhänge auch sehr gut. Sehr kreativ hast Du meiner Meinung nach die Navigation umgesetzt - das kannte ich so noch nicht. Also: Großartig und bitte weitermachen!
@ProgrammierenMario
@ProgrammierenMario 4 ай бұрын
Freut mich sehr! Vielen Dank 🙂
@johnengert5768
@johnengert5768 Жыл бұрын
Ich habe mir dein Video schon mal gemerkt, wenn ich aus dem Urlaub zurück bin 🙂
@ProgrammierenMario
@ProgrammierenMario Жыл бұрын
Sehr gut 👍
@hansgluck5228
@hansgluck5228 Жыл бұрын
GEIL!!
@calle90
@calle90 Жыл бұрын
Die Playlist wird super 👍 Freu mich schon auf die Reihe. Schönes Wochenende lieber Mario 🙋‍♂️
@ProgrammierenMario
@ProgrammierenMario Жыл бұрын
Wünsche dir ebenfalls ein schönes Wochenende ✌️
@yt7042
@yt7042 Жыл бұрын
Mario ist aus dem Oster-Urlaub zurück und mit neuem Video Ende Text. :-)
@ProgrammierenMario
@ProgrammierenMario Жыл бұрын
Schönes Wochenende ✌️
@yt7042
@yt7042 Жыл бұрын
@@ProgrammierenMario Sorry, hatte ich ganz vergessen. Ich wünsche dir natürlich auch ein schönes WE!
@manuelganter1930
@manuelganter1930 Жыл бұрын
Danke dafür
@dagobertduck-gl8wj
@dagobertduck-gl8wj Жыл бұрын
Geiles Project . Ich bin hyped 😊
@ProgrammierenMario
@ProgrammierenMario Жыл бұрын
🙌
@LeoMerkel
@LeoMerkel 5 ай бұрын
👍Danke!
@ProgrammierenMario
@ProgrammierenMario 4 ай бұрын
Danke dir vielmals 👍
@MyOliver64
@MyOliver64 Жыл бұрын
Zitat: "...ja nich aufmachen, sonst explodiert der Rechner"! 😂😂😂 Wieder tolles Vi... 🎆! ... ... ... Oh, mist mein Rechner ist gerade explodiert, zum Glück hatte ich noch einen zweiten bei der Hand. 🤔😉😂😂😂
@ProgrammierenMario
@ProgrammierenMario Жыл бұрын
😂😂😂
@CoderboyPB
@CoderboyPB Жыл бұрын
Du verdienst eindeutig mehr Aufrufe. Super Erklärungen, einfach Top. Schade, dass der große Teil vom Kuchen hier leider an irgendwelche Gamer und Prankster geht, und die wirklichen Quality Content Creators unterm Radar fliegen 😞
@ProgrammierenMario
@ProgrammierenMario Жыл бұрын
Vielen Dank für deine Nachricht 👍
@danielpaulplanzer8611
@danielpaulplanzer8611 Жыл бұрын
Juhuii wieder viel lernen bei Mario🙏
@ProgrammierenMario
@ProgrammierenMario Жыл бұрын
Freut mich ✌️🙂
@dab767
@dab767 Жыл бұрын
Das wird cool. Ich werde das dann mal parallel mit Svelte bzw. SvelteKit nachbauen.
@ProgrammierenMario
@ProgrammierenMario Жыл бұрын
Sehr gute Idee 👍
@andreaskonarski
@andreaskonarski Жыл бұрын
Die installation hat ganz gut geklappt, auch wenn ich es etwas anderes gemacht habe, weil ich es unter Linux Mint nutze, ich habe die Paketquelle für die 18er Node Version eingerichtet und Node von da installiert. Ich habe auch schon hinbekommen das die Seite zweisprachig ist (umschaltbar) und zwischen Tag Nacht Modus umschalten kann. Wo dran ich mir jetzt aber einen vollkommen abbreche ist, Foto Galerien einzurichten. Da habe ich bisher keinen blassen wie das hier gehen könnte, meine beiden Ideen sind entweder eine Funktion von Astro zu verwenden falls es sowas gibt, oder irgendein Java Script Framework dafür (wobei das Framework was ich versucht habe einzubinden absolut nicht in public auftauchen wollte).
@ProgrammierenMario
@ProgrammierenMario Жыл бұрын
Was genau ist denn dein Ziel? Geht es nur um die Anzeige der Fotos?
@andreaskonarski
@andreaskonarski Жыл бұрын
@@ProgrammierenMario Ich möchte eine Seite mit Thumbnails haben, und beim Klick auf die Thumbnails soll das Bild geöffnet werden. Ich habe es jetzt über fslightbox hinbekommen. Damit ist das dann auch relative einfach gewesen.
@Defcon1702
@Defcon1702 Жыл бұрын
Astro ist mega! Freu mich auf den Content! :) Ich weiss das viele Tailwind lieben, es wäre allerdings auch spannend mal sowas wie "wie baue ich mein eigenes kleines SCSS Framework auf" Themen kommen würden. Subjektive Meinung: Ich mag Tailwind einfach nicht. Abstraktionslayer auf CSS, Spagetticode im HTML etc.
@ProgrammierenMario
@ProgrammierenMario Жыл бұрын
Vielen Dank! Ja Tailwind gefällt nicht jedem. Vollkommen ok! Aber vllt. magst du dennoch reinschauen. Möchte gerne zeigen wie das aufblähen des HTML's minimiert werden kann. Ich hatte mal ein Video gemacht wie du mit SCSS deine eigenen Utility Klassen generieren kannst --> kzfaq.info/get/bejne/ZsWYga2Bss2qcZs.html Meinst du sowas?
@Defcon1702
@Defcon1702 Жыл бұрын
@@ProgrammierenMario Du bei Astro find ichs eh "ok" weil man da ja wenigstens komponentenbasiert arbeiten kann. :) Bin sehr gespannt und werde die Videos auf jeden Fall schauen! Ah, das Video ist scheinbar durchgerutscht! Da schau ich gleich mal durch, vielen Dank!
@raigeki2k605
@raigeki2k605 Жыл бұрын
Hey! Ich finde du hast eine super Art Sachen verständlich rüber zu bringen und zu erklären. Besteht da auch die Chance von dir in Zukunft Videos über react zusehen?
@ProgrammierenMario
@ProgrammierenMario Жыл бұрын
Vielen Dank! Aktuell ist zu React nichts geplant. Jedoch besteht natürlich die Chance das ich dazu auch mal etwas mache ✌️
@andreask.291
@andreask.291 Жыл бұрын
Hi, auf meinem Mac funktioniert das mit der Endung .dev für das Verzeichnis nicht. Habe den Ordner ohne die Endung angelegt. Läuft. 👍
@ProgrammierenMario
@ProgrammierenMario Жыл бұрын
Na dann passt das ja. Nochmal Glück gehabt^^
@renehippo9287
@renehippo9287 Жыл бұрын
Ich bekomme bei dem "nmp run dev" Befehl immer folgende Fehlermeldungen: Error: Failed to scan for dependencies from entries: D:/####/Projekte/####/Website-Projekte/####/src/env.d.ts D:/####/Projekte/####/Website-Projekte/####/src/components/Card.astro D:/####/Projekte/####/Website-Projekte/####/src/layouts/Layout.astro D:/####/Projekte/####/Website-Projekte/####/src/pages/index.astro [ERROR] No loader is configured for ".astro" files: src/components/Card.astro [ERROR] No loader is configured for ".astro" files: src/layouts/Layout.astro [ERROR] No loader is configured for ".astro" files: src/pages/index.astro Kann mir da jemand weiterhelfen, bitte?
@renehippo9287
@renehippo9287 Жыл бұрын
Hat sich erledigt, habe es auf einer anderen Festplatte installiert und da klappt alles ^^
@ProgrammierenMario
@ProgrammierenMario Жыл бұрын
Alles klar! Freut mich das es bei dir geklappt hat 👍
Navigation für eine Website erstellen - Astro Website #2
1:00:25
Programmieren mit Mario
Рет қаралды 2,4 М.
Wie DU deine CSS Technik SOFORT verbesserst
10:22
Programmieren mit Mario
Рет қаралды 4,6 М.
Получилось у Вики?😂 #хабибка
00:14
ХАБИБ
Рет қаралды 6 МЛН
Heartwarming: Stranger Saves Puppy from Hot Car #shorts
00:22
Fabiosa Best Lifehacks
Рет қаралды 15 МЛН
Василиса наняла личного массажиста 😂 #shorts
00:22
Денис Кукояка
Рет қаралды 10 МЛН
The Right way to Optimize Next.js to Score 100 in lighthouse
23:23
VSCode Extensions die ICH nie wieder lösche!
24:33
Programmieren mit Mario
Рет қаралды 3,9 М.
Wie weit sollte BÜROKRATIE gehen?
18:07
Nordwolle
Рет қаралды 368 М.
Working with Images in Astro
15:13
Coding in Public
Рет қаралды 5 М.
Website veröffentlichen und mit Github verbinden - Astro Website #9
31:09
Programmieren mit Mario
Рет қаралды 1 М.
Browser DEV Tools: Die Grundlagen
18:01
Programmieren mit Mario
Рет қаралды 1,2 М.
Größte Fehler der Softwareentwicklung den viele machen!
19:29
David Tielke
Рет қаралды 117 М.
Получилось у Вики?😂 #хабибка
00:14
ХАБИБ
Рет қаралды 6 МЛН