brauche hilfe bei ner website source (html,js,php)

[bobyboy]

Hey,
ich habe vor ein paar Wochen angefangen mich mit Websites und dem erstellen von diesen / oder dem Prozess dahinter zu beschäftigen.
Seit Jahren hatte ich vom Design her einen absoluten Favoriten, welchen ich unbedingt mal nachstellen oder mir genauer angucken wollte.
Dabei handelt es sich um den alten CS Paste fanta.club (die Login-page als auch das Dashboard nach erfolgreichem Login)
Mit meinem geringen Wissen habe ich angefangen nach Empfehlung eines Freundes mir Videos zu den Themen die mich interessieren (html, js, php, oder alles was irgendwie mit Websites zutun haben könnte) angeschaut.
Leider bin ich nicht schlauer geworden, abgesehen von den ''Basics'' die ich nun drauf habe (in jedem Video von jedem ''Tutor'' wird literally das selbe erklärt, die Seiten sind auch absolut nicht ästhethisch und haben rein gar nichts mit dem zutun, was ich gerne machen möchte.

Mein eigentliches Problem :
ich habe mir nach Recherche einen älteren Source Leak von der Seite heruntergeladen, welcher leider unvollständig ist, da dieser Scripts aus deren Seite selbst bezogen hatte (siehe Bild)
alle anderen ''leaks'' sind nicht mehr verfügbar und die DL Links sind abgelaufen - bezweifle allerdings auch, dass irgend jemand diese files überhaupt hat oder haben kann.

Falls jemand sich noch an die Seite erinnern sollte, wäre es nett, wenn ihr mir irgend einen Anhaltspunkt geben könntet, wo ich langsam lernen kann, wie man so etwas erstellt.
Skillshare habe ich bereits - aber heutzutage kann jedes skid irgendwelche semi-coolen Seiten erstellen (und die haben sehr wahrscheinlich nicht skillshare als lernportal used lol)

Übrigens will ich jetzt auch kein fullstack dev werden - oder das zu meinem Job machen.
ich interessiere mich einfach dafür, und würde gerne sowas machen können & in meiner Freizeit üben und lernen (für nichts kommerzielles oder ähnliches, eventuell einfach für mich und meine freunde, oder nur so )


Danke fürs lesen

 

[basti]

Jquery, bootstrap, pace kannst du doch bei x-beliebigen cdns referenzieren.
Google fonts kannst du ja ebenfalls auch einfach nutzen
partisjs sagt mir leider nichts.

Animate.css/side.css sind wohl „eigenkreationen“, aber das ist ja super zum lernen/nachbauen, sofern du screenshots oder sonstiges hast

 

[Ragou]

Die Seite besteht scheinbar aus:

PACE — Automatic page load progress bars

https://jquery.com/ (wer nutzt das noch lol)

Paris.JS - Event-driven community about JavaScript

Le meetup mensuel autour du JavaScript

parisjs.org

Bootstrap

Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life with powerful JavaScript plugins.

getbootstrap.com

Google Fonts
& CSS (ggf. SASS?)

Mit VueJS, ein bisschen CSS/SCSS und ner Component Library wie (https://www.primefaces.org/primevue/) oder vergleichbares kriegst du ganz schnell viel schönere Seiten hin.

Wenn du dich da schlau machen willst, dann ist bspw. der Udemy Kurs von Maximilian Schwarzmüller absolut empfehlenswert.

Edit: Solltest du dich wirklich ernsthaft weitergehend mit Vue auseinander setzen wollen, dann check auf jeden Fall: https://www.vuemastery.com/ aus, aber du meinste ja, dass du da poberflächlich etwas rumdingeln willst.

 

[basti]

Die Seite besteht scheinbar aus:

PACE — Automatic page load progress bars

https://jquery.com/ (wer nutzt das noch lol)

Paris.JS - Event-driven community about JavaScript

Le meetup mensuel autour du JavaScript

parisjs.org

Bootstrap

Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life with powerful JavaScript plugins.

getbootstrap.com

Google Fonts
& CSS (ggf. SASS?)

Mit VueJS, ein bisschen CSS/SCSS und ner Component Library wie (https://www.primefaces.org/primevue/) oder vergleichbares kriegst du ganz schnell viel schönere Seiten hin.

Wenn du dich da schlau machen willst, dann ist bspw. der Udemy Kurs von Maximilian Schwarzmüller absolut empfehlenswert.

Wenn man der englischen Sprache mächtig ist, sind die Bootcamps von Colt Steele oder Angela Yu gut.

Die beiden könnte ich eventuell auch noch als Download haben, jedoch rund ~6 Monate alt.

 

[.silver]

Kann dir sämtliche Udemy Kurse von Jannis Seemann empfehlen.

Mach nur nicht den Fehlern und starte mit einem Javascript Framework wie React oder Vue ohne das du vorher vernünftiges Javascript(ES6) gelernt hast und genau weißt was du da machst.

 

[AURUM]

Kann dir sämtliche Udemy Kurse von Jannis Seemann empfehlen.

Mach nur nicht den Fehlern und starte mit einem Javascript Framework wie React oder Vue ohne das du vorher vernünftiges Javascript(ES6) gelernt hast und genau weißt was du da machst.

Kann ich absolut NICHT unterschreiben. Der Typ klingt wie ein Spasst, nach 30 Minuten Kopfschmerzen und auch wie er Sachen erklaert ist husohaft.

Wenn man der englischen Sprache mächtig ist, sind die Bootcamps von Colt Steele oder Angela Yu gut.

Die beiden könnte ich eventuell auch noch als Download haben, jedoch rund ~6 Monate alt.

Angela Yu 11/10

 

[.silver]

Kann ich absolut NICHT unterschreiben. Der Typ klingt wie ein Spasst, nach 30 Minuten Kopfschmerzen und auch wie er Sachen erklaert ist husohaft.




Angela Yu 11/10

Mag sein das er wie ein "Spasst" klingt und sachen husohaft erklärt.
Aber die JS Masteryclass ist mit den Aufgaben rein fachlich echt gut.

 

[aequabit]

Ich kann wie 2012 schon w3schools.com empfehlen. Einfach mal bei den Kursen zu HTML und CSS durchklicken und wenn du damit dann gut klarkommst noch JavaScript. Bei spezifischen Fragen schreib mir gerne eine PN.

 

[bobyboy]

Erstmal vielen dank an alle die hier so zahlreich kommentiert haben, hab ich echt nicht erwartet!
ich werde mir alle vorschläge mal gründlich angucken, persönlich schaue ich lieber kurse auf englisch - werde mir aber ebenfalls die deutschen mal genauer ansehen.

Jquery, bootstrap, pace kannst du doch bei x-beliebigen cdns referenzieren.
Google fonts kannst du ja ebenfalls auch einfach nutzen
partisjs sagt mir leider nichts.

Animate.css/side.css sind wohl „eigenkreationen“, aber das ist ja super zum lernen/nachbauen, sofern du screenshots oder sonstiges hast

von vielem was mir hier erklärt wurde, habe ich ehrlich gesagt noch nicht so wirklich ahnung wie man alles implementiert - da bin ich noch nicht so weit für, aber werde ich mir merken sobald ich so weit bin

Die Seite besteht scheinbar aus:

PACE — Automatic page load progress bars

https://jquery.com/ (wer nutzt das noch lol)

Paris.JS - Event-driven community about JavaScript

Le meetup mensuel autour du JavaScript

parisjs.org

Bootstrap

Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life with powerful JavaScript plugins.

getbootstrap.com

Google Fonts
& CSS (ggf. SASS?)

Mit VueJS, ein bisschen CSS/SCSS und ner Component Library wie (https://www.primefaces.org/primevue/) oder vergleichbares kriegst du ganz schnell viel schönere Seiten hin.

Wenn du dich da schlau machen willst, dann ist bspw. der Udemy Kurs von Maximilian Schwarzmüller absolut empfehlenswert.

Edit: Solltest du dich wirklich ernsthaft weitergehend mit Vue auseinander setzen wollen, dann check auf jeden Fall: https://www.vuemastery.com/ aus, aber du meinste ja, dass du da poberflächlich etwas rumdingeln willst.

so sah damals der login der seite aus, den konnte ich mir sogar fast 1 zu 1 noch ziehen (habe das frontend auch schon bearbeitet und für meine needs angepasst, was ja selbst ich easy hinbekomme)
jedoch fehlt bei dem dashboard, nach dem login, welcher ebenfalls nicht abgeschlossen werden kann logischerweise, jegliches zeugs... weils eben von irgendwo bezogen wurde und ne eigenkreation vom designer war.
leider waren die nirgends mehr zu finden, weiß ehrlich gesagt auch nicht wie ich das nach zu bauen habe, oder wo ich anzufangen hätte...
Hier mal ein bild aus meinem gedächtnis, da ich kein bild mehr vom originalen dashboard finde.. für meine außerordentlich guten zeichen-künste müsst ihr mich allerdings nicht loben, bin mir diesen sehr wohl bewusst

links ist eine userliste mit denen die online sind mit deren UID daneben.
unten kann man den loader downloaden, darüber stehen zahlungsmittel (welche ich nicht brauche, weil ichs nicht verkaufe) und deine hwid + IP und sub time
darüber eine minimalistisch gehaltene shoutbox.
das alles im selben/ähnlichen design wie der login screen.
Habe ebenfalls versucht, den alten designer (boxy) ausfindig zu machen - turns out, der ist vor nicht mal allzu langer zeit mit $3000 in der tasche von fanta abgehauen und seitdem verschollen haha
spielt mir leider gottes echt alles nicht so ganz in die karten, aber was will man tun.

Wir haben auch schon von github ein php admin panel gefunden, was allen unseren ansprüchen entsprach - jedoch sieht's halt absolut ranzig aus im vergleich zu dem, was ich eigentlich will.
irgendwann werd ichs schon schaffen - und wenn ichs geschafft habe, zeig ichs euch hier im thread!
könnte allerdings ne weile dauern haha
der code sieht auch absolut unübersichtlich und scheiße aus.
ich kann euch, wenns euch interessiert und das sofern möglich ist hier (regelkonform) - gerne den ''leak'' den ich benutze, zur verfügung stellen.
falls ihr auch ein wenig herumbasteln oder es euch einfach nur so angucken wollt - lassts mich gerne wissen.


die restlichen antworten quote ich mal nicht mehr, da meine antwort jetzt schon viel zu lang ist - ich habe aber alles gelesen, und mir alle tipps abgespeichert, echt vielen dank.
wenn jemand noch einen vorschlag, oder etwas zu sagen hat, werde ich's mir natürlich in zukunft ebenfalls durchlesen.
habt vielen dank leute!

 

[Ragou]

Also ich sag's mal so du wirst kräftig in Vorleistung treten müssen, wenn du all das selbst machen willst. Da kommt noch weitaus mehr dazu, wenn du schon nen simplen login haben willst.

Sprich: Du brauchst ein Backend (bietet sich natürlich Express an, wenn man sich sowieso schon mit JS beschäftigt), dann eine Datenbank die die ganzen Nutzerdaten und Session IDs, wenn du mit Sessions/Cookies arbeitest. Usw usw.

Du bewegst dich also etwas weiter weg von "ich schau mir das mal eben an"

 

[bobyboy]

Also ich sag's mal so du wirst kräftig in Vorleistung treten müssen, wenn du all das selbst machen willst. Da kommt noch weitaus mehr dazu, wenn du schon nen simplen login haben willst.

Sprich: Du brauchst ein Backend (bietet sich natürlich Express an, wenn man sich sowieso schon mit JS beschäftigt), dann eine Datenbank die die ganzen Nutzerdaten und Session IDs, wenn du mit Sessions/Cookies arbeitest. Usw usw.

Du bewegst dich also etwas weiter weg von "ich schau mir das mal eben an"

ich mein, wäre jetzt auch nicht allzu abgeneigt, dass daraus mehr wird als ''kurz anschauen'' - ich wills eben nur nicht beruflich machen oder an einer uni studieren o.ä
zumahl der dev der alten seite, soweit ich weiß, ebenfalls selftaught ist - wie auch die meisten kids heutzutage.
ich brauche nur nen anhaltspunkt, wo genau ich anfangen sollte, will nämlich nicht meine zeit noch mehr verschwenden, als ich es schon ohnehin auf skillshare getan habe lol
nen login haben wir ja, ne datenbank ebenfalls - sieht halt nur absolut hässlich aus.
ich kenne auch leute, die sich mit dem thema weitaus mehr auskennen als ich, jedoch möchte ich denen nicht immer am hals hängen, sondern auch sachen alleine lernen, ums halt eben umsetzen zu können.
meinetwegen kann das ganze auch ne weile länger dauern, ist gar kein thema

 

[f0nzane]

Um den Login zu realisieren brauchst du einen Server/ eine Serverapplikation, mit der der Browser des Users sprechen kann. Diese Applikation muss dann wiederum mit einer Datenbank kommunizieren, wo die Nutzerdaten gespeichert werden. Als Framework für Backend-Serverapplikationen kann ich NestJS sehr empfehlen. Die Docs sind sehr gut und ausfürhlich und bieten sich sowohl als Lernquelle als auch als Leitfaden um z.B. Authentifizierung umzusetzen (wenn man sich mit der Thematik etwas auskennt).

LG

 

[aequabit]

Erstmal vielen dank an alle die hier so zahlreich kommentiert haben, hab ich echt nicht erwartet!
ich werde mir alle vorschläge mal gründlich angucken, persönlich schaue ich lieber kurse auf englisch - werde mir aber ebenfalls die deutschen mal genauer ansehen.


von vielem was mir hier erklärt wurde, habe ich ehrlich gesagt noch nicht so wirklich ahnung wie man alles implementiert - da bin ich noch nicht so weit für, aber werde ich mir merken sobald ich so weit bin


so sah damals der login der seite aus, den konnte ich mir sogar fast 1 zu 1 noch ziehen (habe das frontend auch schon bearbeitet und für meine needs angepasst, was ja selbst ich easy hinbekomme)
jedoch fehlt bei dem dashboard, nach dem login, welcher ebenfalls nicht abgeschlossen werden kann logischerweise, jegliches zeugs... weils eben von irgendwo bezogen wurde und ne eigenkreation vom designer war.
leider waren die nirgends mehr zu finden, weiß ehrlich gesagt auch nicht wie ich das nach zu bauen habe, oder wo ich anzufangen hätte...
Hier mal ein bild aus meinem gedächtnis, da ich kein bild mehr vom originalen dashboard finde.. für meine außerordentlich guten zeichen-künste müsst ihr mich allerdings nicht loben, bin mir diesen sehr wohl bewusst

links ist eine userliste mit denen die online sind mit deren UID daneben.
unten kann man den loader downloaden, darüber stehen zahlungsmittel (welche ich nicht brauche, weil ichs nicht verkaufe) und deine hwid + IP und sub time
darüber eine minimalistisch gehaltene shoutbox.
das alles im selben/ähnlichen design wie der login screen.
Habe ebenfalls versucht, den alten designer (boxy) ausfindig zu machen - turns out, der ist vor nicht mal allzu langer zeit mit $3000 in der tasche von fanta abgehauen und seitdem verschollen haha
spielt mir leider gottes echt alles nicht so ganz in die karten, aber was will man tun.

Wir haben auch schon von github ein php admin panel gefunden, was allen unseren ansprüchen entsprach - jedoch sieht's halt absolut ranzig aus im vergleich zu dem, was ich eigentlich will.
irgendwann werd ichs schon schaffen - und wenn ichs geschafft habe, zeig ichs euch hier im thread!
könnte allerdings ne weile dauern haha
der code sieht auch absolut unübersichtlich und scheiße aus.
ich kann euch, wenns euch interessiert und das sofern möglich ist hier (regelkonform) - gerne den ''leak'' den ich benutze, zur verfügung stellen.
falls ihr auch ein wenig herumbasteln oder es euch einfach nur so angucken wollt - lassts mich gerne wissen.


die restlichen antworten quote ich mal nicht mehr, da meine antwort jetzt schon viel zu lang ist - ich habe aber alles gelesen, und mir alle tipps abgespeichert, echt vielen dank.
wenn jemand noch einen vorschlag, oder etwas zu sagen hat, werde ich's mir natürlich in zukunft ebenfalls durchlesen.
habt vielen dank leute!

Schreib mir doch einfach mal per PN, habe hier noch massenweise alte Projekte und Sources rumliegen die teilweise auch ganz gut dokumentiert sind. Wenn es um Loader und die dazugehörigen APIs geht bin ich immer zu haben, habe deswegen damals mit PHP und VB.NET angefangen.

 

[beNw0w]

ich hab n leak, aber komm nicht auf dein Profil