Erfahrene Web-Entwickler gesucht für Road-Map?

1 Antwort

Vom Fragesteller als hilfreich ausgezeichnet
BeamerBen
06.02.2024, 14:04

Die Themen sind sicher relevant und sinnvoll. Eventuell gibt es noch ein paar moderne Festures von JS oder css die nicht behandelt werden aber das kann ich dir nicht sagen ohne den Kurs zu kennen. Flex boxes, css grids und so was wie destructing assignments solltest du mal gesehen haben.

Ich denke es gibt zwei sinnvolle Ergänzungen.

Sobald du denkst dass du modernes JS ganz gut verstehst schau dir doch mal eine UI Library/Framework an die auf wiederverwendbaren Komponenten basiert und irgendeinen Virtual Dom/templating Ansatz mit State nutzt. Etwa Vue oder react.

Ansonsten fundamental ein Verständnis für objektorientierte Programmierung, REST APIs und ganz Basic irgendeine Möglichkeit ein simples backend zu machen, von mir aus auch über nodejs. Wenn du nicht Fullstack machen möchtest reicht es nur mal ansatzweise rein zu schauen aber ein Grundverständnis hilft dir auch da und Klassen gibts ja auch in JS.

Bei git solltest du dir irgendwann mal anschauen rebases und feature branches sind und nicht einfach nur alles auf einem branch machen oder nur simple merged nutzen.

Mit die einfachsten Projekte wären Todolists, Taschenrechner, simple Blogs oder einbinden von Diagrammen über eine fertige Library.
BeamerBen  06.02.2024, 14:09

Ps: denke du bist aber auf einem guten Weg, alles was ich dir geschrieben habe kannst du dir einfach später mal anschauen und auch schon mit reinem css, html, js simple Projekte machen. Ich denke es ist wichtig zu sehen wie macht man etwas in vanilla js und wie könnte es grundsätzlich in eben react oder vue aussehen und einfach den Vergleich zu haben.

0
JrDev 
Fragesteller
 06.02.2024, 14:15

Vielen dank für deine ausführliche Antwort und deine Zeit die du Investiert hast :-)
Flex Boxes und CSS Grid kam schon im CSS Teil vor aber da muss ich ehrlich sagen, das ich es noch paar mal üben muss bis sich das gefestigt hat :D

Destructing Assignments sagt mir jetzt nicht werde mich mal informieren vielen dank :)

Als Framework will ich später REACT nutzen, weil man auch später mit React Natiive auch apps erstellen könnte :)

REST APIs, BackEnd muss ich auch noch schauen

Oh man noch soviel zu tun :D

Eventuell sollte ich mich nach einem BootCamp mal umschauen

0
BeamerBen  07.02.2024, 12:14
@JrDev

Klar, gerne.

Hört sich für mich aber gut an, ist natürlich immer schwer zu sagen wie Umfangreich solche Kurse sind wenn man sie selber nicht kennt. Das waren jetzt auch Beispiele für Sachen die auch mal in einem Tutorial vor kommen können, aber du musst natürlich gar nicht alles perfekt wissen solange du einen groben Überblick hast was es in modernen JS gibt und dich notfalls da "on-demand" einlesen kannst und die Dokumentation auch verstehst.

Destructing Assignments sind auch kein Hexenwerk, dass ist nützlich wenn du aus einem Array oder Objekt bestimmte Werte "raus ziehen" aka. destructen möchtest und in variablen speichern. Und so was kann durchaus mal vorkommen in modernen JS und eben Tutorials für z.B. react https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#description

Ich habe, als ich react lernen wollte, den Video Kurs von Traversy Media gemacht. Das ist schon etwas her und ich weiß nicht ob der up to date ist. Ansonsten schau dir doch mal den react quick start guide an und überlege selber hey fühle ich mich mit meinen JS kenntnissen wohl und verstehe den Code, abgesehen davon, dass plötzlich HTML im JavaScript Code steht oder willst du erst mal mehr fundamentals lernen und später dahin zurück kommen https://react.dev/learn

Backend und APIs sind für dich als Frontend Entwickler erst mal auch nur in dem Rahmen wichtig, in dem du sie als in deinen Anwendungen nutzt. Also mach dir da keine Sorgen, musst du nicht wirklich können außer du möchtest FullStack machen. Ist aber gut eine grobe Idee zu haben, und wenn es auch nur ist was ist die Idee hinter RESTful APIs und wie mache ich ein ganz simples Backend in z.B. express / nodejs falls du doch mal so was brauchst.

0
JrDev 
Fragesteller
 07.02.2024, 13:57
@BeamerBen

Vielen Dank @BeamerBen erneut für eine so ausführliche Antwort, freut mich das ich nach 3 Jahren in der IT jemanden finde der sich nicht zu gut ist Neulingen die wirklich lernen wollen zu helfen :D

_____________________

Okay verstehe mit Destructing Assignments kann man also aus einem Objekt nur benötigten Keys auslesen.
const person = {

name: 'Max',
age: 25,
city: 'Berlin',
job: 'Developer'

};

const { name, age, city } = person;

console.log(name, age, city); // Output: Max 25 Berlin

Wenn ich jetzt eine Zweite Person haben würde könnte ich einfach die selbe struktur auf diesen erneut anwenden oder mit Schleifen durchlaufen, verstehe sehr mächtig.

React ist ja noch was hin :D

Habe bis jetzt:

  • HTML
  • CSS
  • Grundlagen JS (Kennt man eine Sprache kennt man eigentlich für alle die Grundlagen fand ich jetzt durch C# Kenntnisse easy)
  • Kurz Responsiv Webdesign (Find ich noch kompliziert und muss ich vertiefen)
  • Aktuell bin ich bei JavaScript im Browser irgendwas mit DOM was sehr wichtig wohl ist )

Was mein Problem immer bei Tutorials ist, man baut das alles nach man versteht es was da vor getippt wird klingt auch logisch jedoch, wenn man dann selbst sich an die Arbeit macht ist alles weg :D

Als Beispiel hab ich mit einem YouTube Video ein HTML CSS Portfolio erstellt, während des Videos alles klar hab sogar manche Werte geändert, angepasst.

Wenn du mich jetzt dahin setzen würdest und sagen würdest komm hast das ja mal gemacht, mach jetzt alleine, joa dann würde ich blöd schauen :D

______________________________

Zukünftig will ich als FullStack Entwickler arbeiten aber fürs erste muss Frontend reichen.

Ich habe mit C# halt auch Datenbank Verbindungen aufgebaut und eine MySqlDatenbank erstellt gehabt und diese befüllt und Daten von dieser abgerufen, deswegen dachte ich am Anfang ich muss dann FULL-STACK Web-Entwickler werden um auf dem gleichen Level zu sein aber im vergleich zu einer Desktopanwendungen mit C# und WinForms und Backend MySql Datenbank ansprechen finde ich Web Entwicklung im Frontend Bereich schon um einiges komplexer, weshalb ich mich erstmal aufs Front-End konzentriere, wenn das sitz dann will ich aber mir noch das Backend aneignen um eigene Projekte auch eigenständig zu erstellen.

Verständnis Frage bezüglich Datenspeichern im Frontend:

Wenn ich mir eine Todo Liste bauen will dann kann ich Userinput Anzeige usw. alles mit HTML CSS und JS machen, jedoch verschwindet doch alles wenn man die Seite erneut lädt oder jemand anderes die Seite öffnet der wird ja meine Eingaben nicht sehen.

Muss ich dann nicht zwangsläufig Back-End mit lernen damit ich die Eingaben in selbst so kleinen Projekten abspeichern und abrufen kann?

0
BeamerBen  07.02.2024, 14:37
@JrDev

Ah, wenn du schon Erfahrung in C# hast sollte dir das ja echt nicht so schwer fallen. Wenn du dich da sicher fühlst, dann mach auch einfach ein bisschen auf was du Bock hast und lies auf MDN nach wenn dir mal etwas nicht so geläufig ist.

Wenn du von C# kommst ist die größte Umstellung vermutlich Duck Typing und Prototypen statt Klassen.

Bei C# eignet sich ja auch asp.net super für Backends und nimmt einem auch viel Arbeit ab. Außerdem kannst du einfach Entity Framework oder generell halt ein ORM nutzen statt selber DB Abfragen zu machen. Das ist so ein bisschen der moderne Weg, meistens einfacher und wird meinem Gefühl nach genau so oft in Stellenausschreibungen verlangt wie SQL Kenntnisse.

Es gibt zum speichern von Werten local Storage, ist die einfachste Variante. Lies dir auch mal das hier durch: https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Client-side_storage

Allerdings können Nutzer natürlich immer ihre Cookies löschen und dann wird auch so etwas wie local Storage gelöscht.

Und wenn das andere auch sehen müssen, dass wäre ein Backend wirklich nötig.

Es ist auch total normal, dass man sich erstmal irgendwas anschaut und dann noch mal viel nachschlagen muss, wenn man es anwendet. Ich persönlich lerne immer so, dass ich mir ein Cheat Sheet schreibe und dort alle für mich relevanten Punkte die ich noch nicht kenne oder irgendwie interessant sind als kurze Stichworte und minimal Code examples aufschreibe, das sind mehr Gedächtnisstützen die wirklich auf mich selber ausgelegt sind. Meistens ist das einfach eine Sammlung an Überschriften und Listen an Stichpunkten. Und dann gehe ich diese Liste durch falls ich etwas nicht im Kopf habe und schaue, ob das irgendwo steht oder ergänze das. Mit der Zeit hat man dann alles wichtige im Kopf und mir hilft das in eigenen Worten aufschreiben und ergänzen, vielleicht etwas verwirrendes korrigieren auch einfach die Sachen besser zu merken.

1