Techover

Box model

Box model - Del 2

Box model - Del 3

Display: block

Display: inline

Display: inline-block

Display: none

Leka med display egenskapen

Positionering

Position: static

Position: relative

Position: fixed

Position: absolute

Position: sticky

🎁 Flexbox - Det mest värdefulla i CSS 🙏🏼

🎁 Problemet som Flexbox löser ❌ ✅

🎁 Flex-direction

🎁 Flex-Wrap

🎁 Justify content

🎁 Align items

🎁 Gap

🎁Lek runt med Flexbox

🔥 Utmaning - Bygg en navbar med flexbox

Lösning - Bygg en navbar med flexbox

🗳️ Flexbox items - Order

🗳️ Flexbox items - Grow

🗳️ Flexbox items - Basis

🎁 Nested Flexbox

Avancerad typography

Advanced CSS Quiz

Utmaning 🔥 Flexbox

Vad innebär det att en design är responsiv 🤨

Viewport

Media queries

Container

RWD Quiz

Din portfolio

Öppna portfolion

Navbar

Hero

Work chips

Projekt cards

Footer

Gör portfolion responsive

🏞️ Milstolpe - Deploya din portfolio

Bygg simpla Spotify kort

Hur ser layouten ut - Vilka element behövs

Container

Card

Play button - Animationer

Card text

Projekt 🌟 HTML / CSS - Beställningskort

Sista CSS Quizet🫡

Välkomna till er nya framtid! 🪄

Varför heter det Javascript?

Syntax - Hur skriver vi javascript

Hur vi skriver js - Del 2

Datatyper

Mac... Shut up and lets code! 😈

Variabler

Använd variabler

Namnge dina variabler

Variabler

Regler för namngivning 📏

CamelCase naming

Dont...

Slå ihop strängar till en sträng

Hur lång är en sträng

🔥 Utmaning - Character creator

Lösning - Character creator ✅

Klipp delar av en sträng

Klipp delar av en sträng - Del 2

Klipp delar av en sträng - Del 3

Fler array metoder

Gör matematik i Javascript

🔥 Utmaning - Konvertera fahrenheit till celsius 🌡️

Lösning - Konvertera fahrenheit till celsius 🌡️

🔥 Utmaning - Jämna tal & Udda tal

Lösning - Jämna tal & Udda tal

JS magi 🧙🏼‍♂️

Inkrementera och dekrementera

En kluring 🤨

Javascript aritmetik

Funktioner 101

Skapa en carbonara 🍝

Karel the robot 🤖

🔥 Utmaning - Cross the board ♛

🔥 Utmaning - Sväng höger

🔥 Utmaning - X marks the spot

Parametrar

Utmaning🐺 - Funktioner Input & Output

🔥 Utmaning - Dagar kvar till 100

Lösning - Dagar kvar till 100

Return värden

🔥 Utmaning - Hur mycket dricks 💸

Lösning - Hur mycket dricks

Quiz på funktioner

Javascript Quiz

Ditt första Quiz i Javascript 🥳

Vad och hur vi kommer lära oss

Hur kollar vi om något är lika?

Type checking

Boolean logik

Venn diagram - Visualisera boolean logik

Testa boolean logik med mig!

Ta beslut med kod

If else satser

Utmaning - Får du se denna film? 🌟

🔥 Utmaning - Character creator 2.0

Lösning - Character creator 2.0

🔥 Utmaning - Skottår

Skåttor - Flow chart

Lösning - Skottår

Arrayer - Skapa listor i javascript

Mer om arrayer

Latcha med arrayer 😉

🔥 Utmaning - Fizzbuzz

Lösning - Fizzbuzz

Måste vi upprepa oss så mycket 🤯

Loops - Upprepad logik

Infinite loop - Dont try this at home! ❌😲

🔥 Utmaning - Summan av en array

Lösning - Summan av en array

For loops

Summan av en array - Med en for loop

For vs while - Vilken ska jag ta? 🧐

⭐️ Best practice - Hur hittar du det sista värdet i en array?

😈🔥 Last boss utmaning - Fibonacci

😈🔥 Last boss utmaning - Fibonacci Del 2

😈🔥 Last boss utmaning - Flowchart

😈🔥 Last boss lösning - Fibonacci ✅

Edge cases

🏞️ Milstolpe - Edge case - Del 2

Välkommna till DOM

Varför DOM behövs

Lägga till klick event

Plocka element från DOM:en med querySelector()

Utmaning - Ändra färg på flera element

Första inblicken i objekt

Olika sätt att plocka element från DOM:en

Kombinera flera selektorer

CamelCase - DOM egenskaper ser annorlunda ut

Ändra attribut på element via DOM:en

🐺 Dark mode hemsida ⚫️ 🟣

Skapa boilerplaten för vårt projekt ⚫️ 🟣

Lägg till en bakgrund ⚫️ 🟣

Lägg till en container ⚫️ 🟣

Style:a switch knappen ⚫️ 🟣

Fungerar det på mobiler - Gör sidan responsive ⚫️ 🟣

Lägg till DOM manipulation ⚫️ 🟣

Lyssna på event ⚫️ 🟣

Hämta alla element som vi vill manipulera ⚫️ 🟣

Bravo six, going dark ⚫️ 🟣

En förklaring till varför det fungerar ⚫️ 🟣

Gå live - Deploy:a din hemsida ⚫️ 🟣

Objekt - Vad är det för något?

Syntax - Hur skapar man objekt

Utmaning - Skapa 3 objekt

Hur kommer vi åt egenskaper i ett objekt

Metoder är funktioner i objekt

This is what its all about

5 faktan om objekt

Konstruktor

🔥 Utmaning - Skapa bilar med en konstruktor

Events

⭐️ BONUS ⭐️

Higher order functions

🔥 Utmaning - Higher order calculator

Lösning - Higher order calculator

Scope

🔥 Utmaning - Vad kommer du se i konsolen?

Vad är en callback

Arrow funktioner

Arrow funktioner med objekt

Arrow funktioner - Undantag

Spread operator - arrayer!

Slå ihop arrayer med spread!

Spread operator - Objekt!

Skapa nya objekt smidigt!

Destructuring arrays

Destructuring objekt

Default parametrar

🔨 Array metoder - Det bästa som hänt JS! 🔥

🔨 Array metoder - MAP 🗺

🔨 Array metoder - FILTER

🔨 Array metoder - FIND

🔨 Array metoder - EVERY & SOME

🔨 Array metoder - forEACH

🔨 Array metoder - REDUCE

🔨 Array metoder - AVANCERAD REDUCE

String templates

Conditional (ternary) operator

🏞️ Milstolpe - Conditional (ternary) operator - Del 2

Projekt 🌟 Javascript / (Lösenords generator)

📌 Vad är en Backend egentligen?

📌 Intro till Node.js

Installera Node.js på Mac

Installera Node.js på Windows

👩‍💻👨‍💻 Skriv din första Node.js kod!

🧪 Testa Filsystemet i Node.js

📌 Intro till NPM

⚙️ Installera ditt första NPM paket!

📌 Intro till Express

👩‍💻👨‍💻 Installera Express och Skapa din första GET-Endpoint!

🚌 Bygg din egna endpoint för SL-kort

⚙️ Installera Nodemon

❓ Om du har problem med att installera Nodemon

🚂 Koda Express snabbare med ChatGPT

🤔 Vad är skillnaden mellan ett API och en Backend?

📤 📥 Installera Postman - Spara tid i din programmering!

🧠 Vad är JSON? - Gör dina API Requests smartare (Del 1)

🧠 Vad är JSON? - Gör dina API Requests smartare (Del 2)

✅ GET, POST, PUT och DELETE Request - förklarat på 5 minuter

🎊 Skapa din första POST-endpoint i Node.js

🔥 Utmaning: Skapa ditt E-handels API

👮‍♂️🔐 API nycklar och API autentisering (Del 1)

👮‍♂️🔐 API nycklar och API autentisering (Del 2)

☢️ Skydda ditt API från hackers med API autentisering

🤣 Testa Joke API i Postman

🤣 JokeAPI - Skapa ditt första API request i Node.js

🗿 Testa JSONPlaceholder API i Postman

🗿 JSONPlaceholder API - Skapa ditt andra API request i Node.js

🤓 Fördjupa dig i Async/Await

❓Vad är Promises och Varför finns dem?

👀 Skillnaden mellan .then() och Async/Await

🛠 Error Handling med Async/Await i Express

❓Vad är Status Koder och Varför finns dem?

🔥 Utmaning: Lägg till Error hantering i ditt Ehandels-API

🏛 Projekt Struktur i Express.js

🔥 Utmaning: Strukturera ditt Ehandels-API projekt

✅ Kort Summering: Allt du lärt dig om API

Projekt🌟 Javascript & API (Motivations generator)

🌿 En introduktion till Databaser & MongoDB

⚙️ Sätt upp din första MongoDB

🛠 Vad är Models och Schemas?

✅ Lär dig skapa produkter via ditt API

⏬ Lär dig hämta produkter via ditt API

⏫Lär dig uppdatera produkter via ditt API

❎ Lär dig radera produkter via ditt API

🧠 Lär dig Databasstruktur på 10 minuter

🔥 MongoDB - Utmaningar 1 och 2

🏞️ Milstolpe - Milstolpe Backend

Klarna Checkout

Vad är värdefullt?

Hur tar du emot pengar online?

Låt oss räkna på det 💸

Vad är en checkout?

Vilka problem löser klarna?

Vad gör vi utvecklare med Klarna?

Merchants & Utvecklare

Förstå lösningen - Diagram 1

Förstå lösningen - Diagram 2

Testa Klarna Checkout själv

Förstå lösningen - Diagram 3

Förstå lösningen - Diagram 4

Endpoints

3 steg för att bygga en Klarna Checkout

Förstå lösningen - Diagram 5

Skapa ett konto hos Klarna - Del 1

Skapa ett konto hos Klarna - Del 2

Klarnas Youtube tutorial

Starter code

API credentials och .env filen

Jämför din kod mot min

Payment Gatway endpoints

Fakestore api anrop

Hämta produkter från api:et

Visa en produkt på vår checkout sida

Klarna Auth

Create order - Del 1

Create order - Del 2

Krånglar det när du ska få fram kvitto?

Create order - Del 3

Demo av vår Checkout

Visa kvittot - Del 1

Visa kvittot - Del 2

Förbered för att deploya ditt projekt

Likable on Linkedin

Skapa ditt Linkedin konto

Varför ska du använda Linkedin?

Det krävs två saker för att jobba med Tech

Få 7x så många rekryterare till din profil

Profilbild tips 1

Profilbild tips 2

Inför nästa lektion - Bakgrund

Bakgrund

Headline

Din nisch

Om sig - summary

Högst upp på ett par, inte längst ner på alla

CV

Kompetenser

Projekt & Erfarenheter

Rekommendationer

Network

Hur du skapar värdefulla kontakter

Intro - Hur du söker jobb

3 steg för att söka jobb

Linkedin - Hur söker man jobb

Facebook - Hur söker man jobb

Indeed - Hur söker man jobb

Hitta rätt jobbannonser

Sökbara titlar

Hur snabbt kan du avgöra om detta jobb är relevant?

Ctrl + F - tekniken

Sökbara krav & nyckelord

Krav du kan ignorera - SÖK ÄNDÅ

Trainee & Internship

Hur det går till att söka jobb

Använd AI för att söka jobb

Följ upp för dubbel effekt

Git & Github

Vad ska vi lära oss?

Versionshantering - Vad är det?

Verktyg - Hammare, spik & såg 🛠

Git add

Git add - Lägg till ändringar

Git commit

Git commit - spara en ny version

Installera git på din dator

Installera på windows

Installera på IOS

Skapa ditt Github konto

Skriv ditt första git kommando

Initiera ditt första git repo

Be om en rapport från git

Skapa version 2 av fågeln

Skapa version 3 av fågeln

Grattis du är halvvägs

Git checkout

Hoppa mellan olika versioner

Git head

Vad är branches? 🌳

Skapa en egen branch

Merge - Slå ihop ändringar från olika branches

Target branch & source branch

Slå ihop more-birds med master branchen

Merge conflics

Skapa en merge conflict och lös den tillsammans

Remote repo

Git clone

Git push & git pull

🏞️ Miltolpe - Pusha dina ändringar

Skapa ditt första React projekt

Snurra igång motorn

Scaffolding

JSX = HTML + JS

Babel - En JS compiler

Template literals - Skriv JS i HTML

Expressions

Lägg till klasser i JSX med className

Inline styling med JSX

React komponenter

Städa upp koden 🧼

Designen vi ska bygga

Navbar - Del 1

Navbar - Del 2

Navbar - Del 3

Utmaning - Footer

Footer - Del 1

Komponent teori

🔥 Utmaning - Komponenter

Props - Egenskaper till komponenter

Skicka props till en komponent

Skicka flera props

ES6 Destructuring

⭐️ Best practice - Destructuring props

Städa upp koden 🧼

Skicka en array som props

ES6 Spread operator

Spread props - When in doubt spread it out

⭐️ Best practice - Rendera ut flera komponenter från en lista

Mer om map tekniken

🔥 Utmaning - LushCard

React composition - Skicka komponenter som props

🔥 Utmaning - komponenter som props

Komponent kommunikation - Emit:a events

State

Array destructuring

Array destructuring - Del 2

Hur vi använder state - UseState()

UseState - Del 2

Skicka state som props

Städa upp koden 🧼

🔥 Utmaning - Color picker

Lösning till Color picker

Conditional rendering

Conditional rendering - Del 2

⭐️ Best practice - State arrayer

Lägg till element i en state array

✅ Todo app - Bygg ett React projekt ✅

Skapa vår Todo app med Vite

Städa upp koden 🧼

Hur kommer appen att fungera?

App komponenten

Input fältet

Buggar i input fältet

Listan av todos

En todo = ett Item

Appen är klar - Nu ska vi göra den snygg

Style:a input fältet

Style:a listan av todos

✅ Style:a Item - Klar med Todo appen ✅

Välkommen till Avancerad React! ⭐️

Gyllene regeln i React 🥇

Livscykel 1: Mounting 🏇🏻

Livscykel 2: Updating ♻️

Livscykel 3: Unmounting 🔻

useEffect - Hook:en som kommer åt livscykeln

Syntax för useEffekt

Hur du använder useEffect i olika livscykler

Klarhet kring Clean up

Vi testar useEffect tillsammans! 😊

Unmounting in action! 🏁

Livscykel sammanfattning

🔥Utmaning - Stoppa intervallet med en clean up!

✅ Lösning - Stoppa intervallet med en clean up!

Smarta vs Dumma komponenter

När ska vi göra API anrop?

Hur man inte ska göra api anrop! 😱

Hur gör man api anropet? 🤔

Loading state - Visa att något laddar

Hur man bygger ett loading state

Design patterns - Loading state 🔨

Bygga ut Todo app med ett API ⭐️

⛓️ Chain:a ihop array methods 😎

Todo app - Loading state

Todo app - Loading state 2

Async await i en useEffect

🚏 React router

🚏 React router - Låt oss testa projektet vi ska bygga!

🚏 React router - Ladda ner starter koden!

🚏React router - Github commits

🚏React router - Installera React router

🚏React router - Ladda ner loggan

🚏React router - Konfigurerar routes

🚏React router - Layout & RouterProvider

🚏React router - Lägg till css

🚏React router - Hjälp routen

🚏React router - stylea Hjälp sidan

🚏React router - 404 not found

🚏React router - En sida för Profiler

🚏React router - API anrop på nya routes

🚏React router - Skapa kort för varje profil

🚏React router - Route params

🚏React router - Loaders för Profile details

🚏React router - Fixa en bugg

🚏React router - Error elements

Projekt🌟 Världens Länder (Bra Projekt för Portfolio)

Innan vi börjar - Documentation 🧠

Innan vi börjar - Material UI (MUI)

Du behöver kunna...

Klona ner boilerplaten

Tour around the project

Spotify dashboard & .env filen

Vart ligger facit för projektet? 🤔

Auth med Spotify

MUI theming

Vite envirment variables

En wrapper för Spotifys api

Login sidan

Style:a login sidan

Hemma skärmen

Routes för projektet

Centrera Dashboarden

Access token

Session storage

Kolla om en token finns

Sidenav

Sidenav style

Hämta spellistor från din profil

NavItem

Extra: Style NavItems

Playlist items

Rendera ut playlists

Playlist

Playlist #2

Hämta data till Playlist

Hämta data till Playlist #2

Context

Formatera låtar

UseCallback

Loading state

SongTable

SongTable #2

SongRow

SongRow #2

SongRow #3

SongRows i SongTables

Formatera tid

Spela en låt

Error meddelanden som är bra att veta om

Player komponenten

Player style

Spotify web SDK

Spela musik via Playern

State variabler för Playern

Safeguards

App demo

Transfer playback

PlayerControls

IconButton

Slider

Playback backup

Progress i låtar

Slider progress

Volym

API anrop för volym

Bottom nav / Mobil nav

Player overlay

Player overlay # 2

Player overlay #3

Player overlay # 4

Player overlay fail safe

Library

PlaylistItem

🏞️ Miltolpe - Frontend ramverk