Quellcode zum gemeinschaftlichen programmieren von Kursinhalten.

Notizen dazu

Wenn ihr das Projekt Video nicht abspielen könnt, installiert den VLC Player über den Ubuntu Store und löschen die Standard "Video"-App, dann werden alle Videos immer mit dem VLC Player geöffnet

1. Starte immer mit dem HTML & CSS und versuche gedanklich dein HTML so zu strukturieren, dass du schon weißt, welche Elemente du später mit JavaScript manipulieren willst.

2. Mach deine App / Website responsiv, sodass sie auf allen Geräten funktioniert und gut aussieht.

3. Implementiere JavaScript und beginne mit den Dingen, die du am einfachsten findest. So hast du schnelle Erfolgserlebnisse.

4. Kopiere niemals Code von ChatGPT o.Ä. wenn du nicht 100% sicher bist, dasss du den generierten Code verstanden hast.

• Erstelle ein GitHub Repo
• Erstelle einen Netlify Account
• Connecte GitHub Repo mit Netlify https://github.com/onlineCodes/ibex-spielwiese https://relaxed-otter-9ccf40.netlify.app
• Connecte GitHub Repo mit Netlify https://github.com/itbsStefan/solid-netlify
• [1] Nutze Vite für deine App
• [*] Commite deine Entwicklungsschritte
• Deploy deine App auf Netlify Referenzcode
• Deploy deine App auf Netlify main Branch
• Commite deine Entwicklungsschritte benutze git commit -m "funktioniert ;-)"
  • Erstelle das Webdesign
  • Mache das Webdesign responsiv
  • Implementiere die JavaScript Funktionalität
  • Nutze JS Modules
  • Implementiere den Color-Mode Switcher (Html-Tag Data Attribute)
  • Implementiere einen Loading Spinner Indicator
  • Verbinde Such- & Filter-Funktion
  • Implementiere eine "Load More" & "Load Less" Funktion
  • Implementiere eine Country-Detail Seite
  • Lagere deine Funktionen aus (z.B. Objects)
• Lagere ein Object oder Functions aus
• BONUS: Implementiere eine Zeitzonen Live-Uhr

• Vite App Command: "npm create vite@latest"
• Vite App Server Start: "npm run dev"
• Vite App Build erstellen: "npm run build"

• Nutze die Vite mitgelieferte style.css in erster Interation

• Nutze Grid für die Country-Items

• Ihr müsst nicht pixel-perfect arbeiten, aber folgendes berücksichtigen:

• Scrollbar Selectoren: ::-webkit-scrollbar, ::-webkit-scrollbar-thumb, ::-webkit-scrollbar-track

• scrollbar-thumb border-radius: 10px;

• scrollbar-track background-color: #242424

• document background-color: #242424;

• document font-color: rgba(255, 255, 255, 0.87);

• input & select font-color: rgb(169, 167, 167);

• input & select border-radius: 10px;

• input padding-inline: 2rem;

• country-item background-color: #213547;

• grid-template-columns für Desktop: 5

• https://cssloaders.github.io/
• https://developers.google.com/maps/documentation/javascript?hl=de
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl?retiredLocale=de
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/UTC
• https://restcountries.com/
• https://www.w3schools.com/howto/howto_css_switch.asp
• https://de.vitejs.dev/
• https://www.netlify.com/
• https://icon-sets.iconify.design/clarity/search-line/