Skip to content

mai-space/course-web-dev

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

8 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

🔮 Web-Dev Crash Course

GitHub stars GitHub forks Excel

📝 Beschreibung

In diesem Crash Course werden wir uns mit den Grundlagen der Webentwicklung beschäftigen. Wir werden uns mit den Grundlagen der Rechnerarchitektur, Betriebssystemen, Netzwerken, Protokollen, Datenbanken, Programmiersprachen und Webservern beschäftigen. Wir werden uns mit den Grundlagen von HTML, CSS und JavaScript beschäftigen und diese dann eventuell mit einem Server verbinden. Am Ende des Kurses sollte jeder Teilnehmer in der Lage sein, die Zusammenhänge zwischen den einzelnen Komponenten zu verstehen und eine einfache Webseite aus HTML, CSS und JavaScript zu erstellen.

☑️ Voraussetzungen

💡 Was mache ich, wenn ich ein Problem habe

  1. Tief durchatmen
  2. Problem eingrenzen
  3. Googlen, Foren einträge lesen, versuchen zu verstehen
  4. Lösung anwenden
  5. Funktionierts immernoch nicht?
  6. Dann frag einen Kollegen

Legende

  • 💫 = optional

📚 Inhalt

🌅Tag 1 - Einführung in Computer und deren Kommunikation miteinander

🚀 Zur Präsentation

Einführung in die Rechnerarchitektur:

  • Unterschied zwischen Hardware und Software
  • HDD, SSD, RAM, CPU, GPU, Netzteil, Motherboard

Crash Course - Betriebssysteme, Programme, Prozesse

Betriebssystem:

  • Prozess-, Betriebsmittelverwaltung
  • Kernel
  • Speicherverwaltung
  • Filesystem
  • Geräte Manager und Treiber
  • Screen Daemon

💫 Unterschied zwischen einem Programm und einem Prozess:

  • Threads
  • Blick auf den Taskmanager

💫 Benutzer:

  • Root
  • Eigene

💫 OSI Schichtenmodell (Übertragung im Netz)

  • Bitübertragungsschicht
  • Sicherungsschicht
  • Vermittlungsschicht
  • Transportschicht
  • Sitzungsschicht
  • Datendarstellungsschicht
  • Anwendungsschicht

Routing (Subnetzmasken und Router vs Switch)

  • Blick auf ipconf /ifconfig /ipconfig
  • IP Adresse, Mac Adresse
  • Von einem lokalen LAN Netzwerk zum Router
  • Subnetzmasken und IPv4 und IPv6
  • Domains und DNS
🌅Tag 2 - Internet Protokolle und HTML

🚀 Zur Präsentation

Protokolle (HTTP, SSH, HTTPS, SSL)

  • SSH Verbindungen
  • FTP und SFTP
  • HTTP
  • HTTPS
  • REST (GET, POST, ...) und Status Codes (404)
  • HEADER und BODY in einem Request/Response
  • SSL

💫 Microservices vs Monolithische Systeme

HTML - Head (Meta Daten)

  • html tags ( lang dir und item-type)
  • meta tags
  • style / link to stylesheet
  • script
  • title

HTML - Body (Webseiten Markup)

  • body
  • h1 - hn
  • p
  • ul und li || ol
  • a href und id
  • img // source set
  • div und tables
  • form tags
  • and more (article, header, footer, aside)
  • semantic web
🌅Tag 3 - Alles hübscher machen mit CSS

🚀 Zur Präsentation

CSS

  • Tags, Classes, Ids, Attributes
  • font-size, font-weight, font-style, line-height
  • dvh, vh, vw, px, rem, em, %
  • min-height, max-height, height ( and width)
  • color, background-color, hex rgba
  • transitions
  • translate
  • key-frames
  • filter
  • CAN I USE

💫 PreCompiler SCSS

  • Verschachtelungen
  • Selektoren
  • Funktionen / Mixins
🌅Tag 4 - Funktionale Webseiten mit JavaScript

🚀 Zur Präsentation

JavaScript

  • Query Selector
  • OnClick Event
  • Funktionen
  • Alert, Prompt, Confirm
  • (Data Attribute)

💫 Crash Course - NPM: HTML, CSS, Javascript vereinigen

  • Wie amazing ist Webpack, Grunt und Gulp

💫 Crash Course - Git

  • Wie arbeiten Entwickler eigentlich organisiert und nachhaltig am selben Projekt

💫 APIs am Beispiel eines NodeJS Servers

  • Einfache anfragen per Request und Response
🌅Tag 5 - Let's get professional

🚀 Zur Präsentation

Datenbanken (SQL)

  • Relationale Datenbanksystem
  • Excel oder so :D

💫 Crash Course - Programmiersprachen

  • Hardwarenahe Programmiersprachen
  • Pointer
  • Kompilierbare Sprachen und Skript Sprachen

💫 Crash Course - PHP

  • if, for, while, switch case
  • variablen, datentypen
  • include / require
  • input output
  • OOP (Object oriented programming)
  • Classes, Objects, Interfaces, Inheritance, Abstract Classes,
  • References, Variables, Constants,
  • Properties, Attributes, Parameters, Methods, Functions

💫 Server - NGINX vs Apache

  • Was unterscheidet einen Server von normalen Computern
  • Welche Aufgaben hat ein Server?
  • Welche Server Strategien gibt es?
  • Worin besteht der Unterschied zwischen NGINX und Apache