Techover Self Made

Lär dig webbutveckling med Mac och Matt som har sammanlagt över 20 års erfarenhet. I kursen kommer du att skapa dina egna appar med JS, React, Node och API:er. Du kan lära dig programmera på 100 h men många väntar flera år för att ta första steget.

Intresserad av den här kursen? Skicka e-post till oss på [email protected]

Kursinnehåll

1. 😎🔥 Vad du kommer uppleva i Self Made 🔥😎
2. Ladda ner läroplanen! ⬇️
3. Pathfinder 🗺️
4. Hur du kan få hjälp! 💁🏽‍♂️
1. Installera Google Chrome
2. Installera din code editor - Där all magi kommer ske! 🦄
3. 💻 Lär dig använda terminalen
4. 💻🍏 [Mac] Lär dig använda terminalen
5. 💻 Hoppa mellan mappar - Change directory
6. 💻 Se filer med List kommandot
7. 💻 Skapa nya mappar - Make directory
8. 💻 Öppna program från terminalen
9. 💻🍏[Mac] Öppna program från terminalen - Om du får problem
1. Välkommen till HTML
2. Använd terminalen
3. Bygg din första sida 😃
4. Vad är HTML?
5. Syntax - Hur skriver man HTML
6. Vad är boilerplate
7. Hierarki i HTML
8. Indentering
9. Kommentera ut kod
10. Vanligaste HTML taggarna
11. Paragraf taggen
12. Anchor tag
13. Bilder i HTML
14. Span taggen
15. HTML knappar
16. Listor
17. HTML attribut
18. HTML dokumentation
19. HTML Quiz
20. Sammanfattning
1. Vad vi ska lära oss
2. Semantiska HTML element
3. ⭐️ Bonus för Windows ⭐️
4. Nav och Header taggarna
5. Main taggen
6. HTML formulär
7. Ta emot info från användaren - Input fält
8. En kort berättelse om UX
9. Skapa en Login sida
10. Skapa en Login sida - Del 2
11. Skicka formuläret 📧
12. Bygg din första portfolio 🦾 💻
13. Skapa projektet 🦾 💻
14. Bygg navbaren 🦾 💻
15. Skapa din header 🦾 💻
16. Använd section taggen för Work segmentet 🦾 💻
17. Article taggen - Knyt ihop påsen 🦾 💻
18. HTML Quiz
1. DevTools - Inspektera webben 🧐
2. Inspektera element 🔍
3. Editera css på hemsidor - LIVE! 🤯
4. Få desktop skärmar att bete sig som mobiler!
5. Bra inställningar att ha 🙏🏼
6. Dev tools Quiz
1. 🦄 Den magiska världen av design 🧙🏼‍♂️
2. Styr användarbeteende med UX 🛣️
3. Inline css
4. Internal css
5. External css
6. Syntax - Hur skriver man css
7. CSS Selektorer
8. CSS units
9. Färger i css
10. Absoluta värden
11. Relativa värden
12. Vanligaste css värden
13. Typography - Text
14. Width & height - Ändra Dimensioner
15. Margin
16. Padding
17. Shorthand syntax för Padding & Margin
18. Border
19. Skapa cirklar och gör saker runda 🟣
20. Specificity - Vilken CSS gäller? 🤔
21. CSS Quiz
22. Utmaning 🔥 Utforska Box Modellen
1. Box model
2. Box model - Del 2
3. Display: block
4. Display: inline
5. Display: inline-block
6. Display: none
7. Leka med display egenskapen
8. Positionering
9. Position: static
10. Position: relative
11. Position: fixed
12. Position: absolute
13. Position: sticky
14. 🎁 Flexbox - Det mest värdefulla i CSS 🙏🏼
15. 🎁 Problemet som Flexbox löser ❌ ✅
16. 🎁 Flex-direction
17. 🎁 Flex-Wrap
18. 🎁 Justify content
19. 🎁 Align items
20. 🎁 Gap
21. 🎁Lek runt med Flexbox
22. 🔥 Utmaning - Bygg en navbar med flexbox
23. Lösning - Bygg en navbar med flexbox
24. 🗳️ Flexbox items - Order
25. 🗳️ Flexbox items - Grow
26. 🗳️ Flexbox items - Basis
27. 🎁 Nested Flexbox
28. Avancerad typography
29. Advanced CSS Quiz
30. Utmaning 🔥 Flexbox
1. Vad innebär det att en design är responsiv 🤨
2. Viewport
3. Media queries
4. Container
5. RWD Quiz
1. Bygg simpla Spotify kort
2. Skapa projektet
3. Hur ser layouten ut - Vilka element behövs
4. Container
5. Card
6. Play button - Animationer
7. Card text
8. Bygg ut alla 3 korten
1. Din portfolio
2. Öppna portfolion
3. Navbar
4. Hero
5. Work chips
6. Projekt cards
7. Footer
8. Gör portfolion responsive
9. 🏞️ Milstolpe - Deploya ditt portfolio
1. Projekt 🌟 HTML / CSS - Beställningskort
2. Mall - Visa ditt arbete för rekryterare
3. Sista CSS Quizet🫡
1. Välkommna till er nya framtid! 🪄
2. Varför heter det Javascript?
3. Syntax - Hur skriver vi javascript
4. Hur vi skriver js - Del 2
5. Datatyper
6. Mac... Shut up and lets code! 😈
7. Variabler
8. Använd variabler
9. Namnge dina variabler
10. Variabler
11. Regler för namngivning 📏
12. CamelCase naming
13. Dont...
14. Slå ihop strängar till en sträng
15. Hur lång är en sträng
16. 🔥 Utmaning - Character creator
17. Lösning - Character creator ✅
18. Klipp delar av en sträng
19. Klipp delar av en sträng - Del 2
20. Klipp delar av en sträng - Del 3
21. Fler array metoder
22. Gör matematik i Javascript
23. 🔥 Utmaning - Konvertera fahrenheit till celsius 🌡️
24. Lösning - Konvertera fahrenheit till celsius 🌡️
25. 🔥 Utmaning - Jämna tal & Udda tal
26. Lösning - Jämna tal & Udda tal
27. JS magi 🧙🏼‍♂️
28. Inkrementera och dekrementera
29. En kluring 🤨
30. Javascript aritmetik
31. Funktioner 101
32. Skapa en carbonara 🍝
33. Karel the robot 🤖
34. 🔥 Utmaning - Cross the board ♛
35. 🔥 Utmaning - Sväng höger
36. 🔥 Utmaning - X marks the spot
37. Parametrar
38. 🔥 Utmaning - Dagar kvar till 100
39. Lösning - Dagar kvar till 100
40. Return värden
41. Utmaning🐺 - Funktioner Input & Output
42. 🔥 Utmaning - Hur mycket dricks 💸
43. Lösning - Hur mycket dricks
44. Quiz på funktioner
45. Javascript Quiz
46. ⚔️ Techover Battleground 🐺
47. Ditt första Quiz i Javascript 🥳
1. Vad och hur vi kommer lära oss
2. Hur kollar vi om något är lika?
3. Type checking
4. Boolean logik
5. Venn diagram - Visualisera boolean logik
6. Testa boolean logik med mig!
7. Ta beslut med kod
8. If else satser
9. Utmaning - Får du se denna film? 🌟
10. 🔥 Utmaning - Character creater 2.0
11. Lösning - Character creator 2.0
12. 🔥 Utmaning - Skottår
13. Skåttor - Flow chart
14. Lösning - Skottår
15. Arrayer - Skapa listor i javascript
16. Mer om arrayer
17. Latcha med arrayer 😉
18. 🔥 Utmaning - Fizzbuzz
19. Lösning - Fizzbuzz
20. Måste vi upprepa oss så mycket 🤯
21. Loops - Upprepad logik
22. Infinite loop - Dont try this at home! ❌😲
23. 🔥 Utmaning - Summan av en array
24. Lösning - Summan av en array
25. For loops
26. Summan av en array - Med en for loop
27. For vs while - Vilken ska jag ta? 🧐
28. ⭐️ Best practice - Hittar det sista värdet i en array?
29. 😈🔥 Last boss utmaning - Fibonacci
30. 😈🔥 Last boss utmaning - Fibonacci Del 2
31. 😈🔥 Last boss utmaning - Flowchart
32. 😈🔥 Last boss lösning - Fibonacci ✅
33. Edge cases
34. ⚔️ Techover Battleground 🐺
35. 🏞️ Milstolpe - Edge case - Del 2
1. Välkommna till DOM
2. Varför DOM behövs
3. Lägga till klick event
4. Plocka element från DOM:en med querySelector()
5. Utmaning - Ändra färg på flera element
6. Första inblicken i objekt
7. Olika sätt att plocka element från DOM:en
8. Kombinera flera selektorer
9. CamelCase - DOM egenskaper ser annorlunda ut
10. Ändra attribut på element via DOM:en
11. 🐺 Dark mode hemsida ⚫️ 🟣
12. Skapa boilerplaten för vårt projekt ⚫️ 🟣
13. Lägg till en bakgrund ⚫️ 🟣
14. Lägg till en container ⚫️ 🟣
15. Style:a switch knappen ⚫️ 🟣
16. Fungerar det på mobiler - Gör sidan responsive ⚫️ 🟣
17. Lägg till DOM manipulation ⚫️ 🟣
18. Lyssna på event ⚫️ 🟣
19. Hämta alla element som vi vill manipulera ⚫️ 🟣
20. Bravo six, going dark ⚫️ 🟣
21. En förklaring till varför det fungerar ⚫️ 🟣
22. Gå live - Deploy:a din hemsida ⚫️ 🟣
1. Objekt - Vad är det för något?
2. Syntax - Hur skapar man objekt
3. Utmaning - Skapa 3 objekt
4. Hur kommer vi åt egenskaper i ett objekt
5. Metoder är funktioner i objekt
6. This is what its all about
7. 5 faktan om objekt
8. Konstruktor
9. 🔥 Utmaning - Skapa bilar med en konstruktor
10. Events
11. ⭐️ BONUS ⭐️
12. Higher order functions
13. 🔥 Utmaning - Higher order calculator
14. Lösning - Higher order calculator
15. Scope
16. 🔥 Utmaning - Vad kommer du se i konsolen?
17. Vad är en callback
1. Arrow funktioner
2. Arrow funktioner med objekt
3. Arrow funktioner - Undantag
4. Spread operator - arrayer!
5. Slå ihop arrayer med spread!
6. Spread operator - Objekt!
7. Skapa nya objekt smidigt!
8. Destructuring arrays
9. Destructuring objekt
10. Default parametrar
11. 🔨 Array metoder - Det bästa som hänt JS! 🔥
12. 🔨 Array metoder - MAP 🗺
13. 🔨 Array metoder - FILTER
14. ⚔️ Techover Battleground 🐺
15. 🔨 Array metoder - FIND
16. 🔨 Array metoder - EVERY & SOME
17. 🔨 Array metoder - forEACH
18. 🔨 Array metoder - REDUCE
19. 🔨 Array metoder - AVANCERAD REDUCE
20. String templates
21. Conditional (ternary) operator
22. 🏞️ Milstolpe - Conditional (ternary) operator - Del 2
1. Projekt 🌟 Javascript / (Lösenords generator)
2. Lösenordsgenerator - Visa ditt arbete för rekryterare
1. 📌 Vad är en Backend egentligen?
1. 📌 Intro till Node.js
2. Installera Node.js på Mac
3. Installera Node.js på Windows
4. 👩‍💻👨‍💻 Skriv din första Node.js kod!
5. 🧪 Testa Filsystemet i Node.js
6. 📌 Intro till NPM
7. ⚙️ Installera ditt första NPM paket!
1. 📌 Intro till Express
2. 👩‍💻👨‍💻 Installera Express och Skapa din första GET-Endpoint!
3. 🚌 Bygg din egna endpoint för SL-kort
4. ⚙️ Installera Nodemon
5. ❓ Om du har problem med att installera Nodemon
6. 🚂 Koda Express snabbare med ChatGPT
1. 🤔 Vad är skillnaden mellan ett API och en Backend?
2. 📤 📥 Installera Postman - Spara tid i din programmering!
3. 🧠 Vad är JSON? - Gör dina API Requests smartare (Del 1)
4. 🧠 Vad är JSON? - Gör dina API Requests smartare (Del 2)
5. ✅ GET, POST, PUT och DELETE Request - förklarat på 5 minuter
6. 🎊 Skapa din första POST-endpoint i Node.js
7. 🔥 Utmaning: Skapa ditt E-handels API
8. 👮‍♂️🔐 API nycklar och API autentisering (Del 1)
9. 👮‍♂️🔐 API nycklar och API autentisering (Del 2)
10. ☢️ Skydda ditt API från hackers med API autentisering
11. 🤣 Testa Joke API i Postman
12. 🤣 JokeAPI - Skapa ditt första API request i Node.js
13. 🗿 Testa JSONPlaceholder API i Postman
14. 🗿 JSONPlaceholder API - Skapa ditt andra API request i Node.js
1. 🤓 Fördjupa dig i Async/Await
2. ❓Vad är Promises och Varför finns dem?
3. 👀 Skillnaden mellan .then() och Async/Await
4. 🛠 Error Handling med Async/Await i Express
5. ❓Vad är Status Koder och Varför finns dem?
6. 🔥 Utmaning: Lägg till Error hantering i ditt Ehandels-API
7. 🏛 Projekt Struktur i Express.js
8. 🔥 Utmaning: Strukturera ditt Ehandels-API projekt
9. ✅ Kort Summering: Allt du lärt dig om API
1. Projekt🌟 Javascript & API (Motivations generator)
2. Motivationsgenerator - Visa ditt arbete för rekryterare
1. 🌿 En introduktion till Databaser & MongoDB
2. ⚙️ Sätt upp din första MongoDB
3. 🛠 Vad är Models och Schemas?
4. ✅ Lär dig skapa produkter via ditt API
5. ⏬ Lär dig hämta produkter via ditt API
6. ⏫Lär dig uppdatera produkter via ditt API
7. ❎ Lär dig radera produkter via ditt API
8. 🧠 Lär dig Databasstruktur på 10 minuter
9. 🔥 MongoDB - Utmaningar 1 och 2
10. 🏞️ Milstolpe - Milstolpe Backend
1. Viktig info om Klarna Checkout i kursen
1. Likable on Linkedin
2. Skapa ditt Linkedin konto
3. Varför ska du använda Linkedin?
4. Det krävs två saker för att jobba med Tech
5. Få 7x så många rekryterare till din profil
6. Profilbild tips 1
7. Profilbild tips 2
8. Inför nästa lektion - Bakgrund
9. Bakgrund
10. Headline
11. Din nisch
12. Om sig - summary
13. Högst upp på ett par, inte längst ner på alla
14. CV
15. CV - Hur får jag mitt?
16. Kompetenser
17. Projekt & Erfarenheter
18. Rekommendationer
19. Network
20. Hur du skapar värdefulla kontakter
21. Linkedin inlägg - Visa ditt arbete för rekryterare
22. Intro - Hur du söker jobb
23. 3 steg för att söka jobb
24. Linkedin - Hur söker man jobb
25. Facebook - Hur söker man jobb
26. Indeed - Hur söker man jobb
27. Hitta rätt jobbannonser
28. Sökbara titlar
29. Hur snabbt kan du avgöra om detta jobb är relevant?
30. Ctrl + F - tekniken
31. Sökbara krav & nyckelord
32. Krav du kan ignorera - SÖK ÄNDÅ
33. Trainee & Internship
34. Hur det går till att söka jobb
35. Använd AI för att söka jobb
36. Följ upp för dubbel effekt
1. Git & Github
2. Vad ska vi lära oss?
3. Versionshantering - Vad är det?
4. Verktyg - Hammare, spik & såg 🛠
5. Git add
6. Git add - Lägg till ändringar
7. Git commit
8. Git commit - spara en ny version
9. Installera git på din dator
10. Installera på windows
11. Installera på IOS
12. Skapa ditt Github konto
13. Skriv ditt första git kommando
14. Initiera ditt första git repo
15. Be om en rapport från git
16. Skapa version 2 av fågeln
17. Skapa version 3 av fågeln
18. Grattis du är halvvägs
19. Git checkout
20. Hoppa mellan olika versioner
21. Git head
22. Vad är branches? 🌳
23. Skapa en egen branch
24. Merge - Slå ihop ändringar från olika branches
25. Target branch & source branch
26. Slå ihop more-birds med master branchen
27. Merge conflics
28. Skapa en merge conflict och lös den tillsammans
29. Remote repo
30. Git clone
31. Git push & git pull
32. 🏞️ Miltolpe - Pusha dina ändringar
1. Vad är React?
2. Skapa ditt första React projekt
3. Snurra igång motorn
4. Scaffolding
5. JSX = HTML + JS
6. Babel - En JS compiler
7. Template literals - Skriv JS i HTML
8. Expressions
9. Lägg till klasser i JSX med className
10. Inline styling med JSX
11. React komponenter
12. Städa upp koden 🧼
13. Designen vi ska bygga
14. Navbar - Del 1
15. Navbar - Del 2
16. Navbar - Del 3
17. Utmaning - Footer
18. Footer - Del 1
19. Komponent teori
20. 🔥 Utmaning - Komponenter
21. Props - Egenskaper till komponenter
22. Skicka props till en komponent
23. Skicka flera props
24. ES6 Destructuring
25. ⭐️ Best practice - Destructuring props
26. Städa upp koden 🧼
27. Skicka en array som props
28. ES6 Spread operator
29. Spread props - When in doubt spread it out
30. ⭐️ Best practice - Rendera ut flera komponenter från en lista
31. Mer om map tekniken
32. 🔥 Utmaning - LushCard
33. React composition - Skicka komponenter som props
34. 🔥 Utmaning - komponenter som props
35. Komponent kommunikation - Emit:a events
36. State
37. Array destructuring
38. Array destructuring - Del 2
39. Hur vi använder state - UseState()
40. UseState - Del 2
41. Skicka state som props
42. Städa upp koden 🧼
43. 🔥 Utmaning - Color picker
44. Lösning till Color picker
45. Conditional rendering
46. Conditional rendering - Del 2
47. ⭐️ Best practice - State arrayer
48. Lägg till element i en state array
1. ✅ Todo app - Bygg ett React projekt ✅
2. Skapa vår Todo app med Vite
3. Städa upp koden 🧼
4. Hur kommer appen att fungera?
5. App komponenten
6. Input fältet
7. Buggar i input fältet
8. Listan av todos
9. En todo = ett Item
10. Appen är klar - Nu ska vi göra den snygg
11. Style:a input fältet
12. Style:a listan av todos
13. ✅ Style:a Item - Klar med Todo appen ✅
1. Välkommen till Avancerad React! ⭐️
2. Gyllene regeln i React 🥇
3. Livscykel 1: Mounting 🏇🏻
4. Livscykel 2: Updating ♻️
5. Livscykel 3: Unmounting 🔻
6. useEffect - Hook:en som kommer åt livscykeln
7. Syntax för useEffekt
8. Hur du använder useEffect i olika livscykler
9. Klarhet kring Clean up
10. Vi testar useEffect tillsammans! 😊
11. Unmounting in action! 🏁
12. Livscykel sammanfattning
13. 🔥Utmaning - Stoppa intervallet med en clean up!
14. ✅ Lösning - Stoppa intervallet med en clean up!
15. Smarta vs Dumma komponenter
16. När ska vi göra API anrop?
17. Hur man inte ska göra api anrop! 😱
18. Hur gör man api anropet? 🤔
19. Loading state - Visa att något laddar
20. Hur man bygger ett loading state
21. Design patterns - Loading state 🔨
22. Bygga ut Todo app med ett API ⭐️
23. ⛓️ Chain:a ihop array methods 😎
24. ⚔️ Techover Battleground 🐺
25. Todo app - Loading state
26. Todo app - Loading state 2
27. Async await i en useEffect
28. 🚏 React router
29. 🚏 React router - Låt oss testa projektet vi ska bygga!
30. 🚏 React router - Ladda ner starter koden!
31. 🚏React router - Github commits
32. 🚏React router - Installera React router
33. 🚏React router - Ladda ner loggan
34. 🚏React router - Konfigurerar routes
35. 🚏React router - Layout & RouterProvider
36. 🚏React router - Lägg till css
37. 🚏React router - Hjälp routen
38. 🚏React router - stylea Hjälp sidan
39. 🚏React router - 404 not found
40. 🚏React router - En sida för Profiler
41. 🚏React router - API anrop på nya routes
42. 🚏React router - Skapa kort för varje profil
43. 🚏React router - Route params
44. 🚏React router - Loaders för Profile details
45. 🚏React router - Fixa en bugg
46. 🚏React router - Error elements
1. Projekt🌟 Världens Länder (Bra Projekt för Portfolio)
2. Flaggappen - Visa ditt arbete för rekryterare
1. Innan vi börjar - Documentation 🧠
2. Innan vi börjar - Material UI (MUI)
3. Du behöver kunna...
4. Klona ner boilerplaten
5. Tour around the project
6. Spotify dashboard & .env filen
7. Vart ligger facit för projektet? 🤔
8. Auth med Spotify
9. 2025 Auth uppdatering - #1
10. MUI theming
11. Vite envirment variables
12. En wrapper för Spotifys api
13. Login sidan
14. 2025 Auth uppdatering - #2
15. Style:a login sidan
16. Hemma skärmen
17. Routes för projektet
18. 2025 Auth uppdatering - #3
19. Centrera Dashboarden
20. Access token
21. Session storage
22. Kolla om en token finns
23. Sidenav
24. Sidenav style
25. Hämta spellistor från din profil
26. NavItem
27. Extra: Style NavItems
28. Playlist items
29. Rendera ut playlists
30. Playlist
31. Playlist #2
32. Hämta data till Playlist
33. Hämta data till Playlist #2
34. Context
35. Formatera låtar
36. UseCallback
37. Loading state
38. SongTable
39. SongTable #2
40. SongRow
41. SongRow #2
42. SongRow #3
43. SongRows i SongTables
44. Formatera tid
45. Spela en låt
46. Error meddelanden som är bra att veta om
47. Player komponenten
48. Player style
49. Spotify web SDK
50. Spela musik via Playern
51. State variabler för Playern
52. Safeguards
53. App demo
54. Transfer playback
55. PlayerControls
56. IconButton
57. Slider
58. Playback backup
59. Progress i låtar
60. Slider progress
61. Volym
62. API anrop för volym
63. Bottom nav / Mobil nav
64. Player overlay
65. Player overlay # 2
66. Player overlay #3
67. Player overlay # 4
68. Player overlay fail safe
69. Library
70. PlaylistItem
71. Spotify clone - Visa ditt arbete för rekryterare
72. 🏞️ Miltolpe - Frontend ramverk

Om kursen

578 lektioner
58 timmar videoinnehåll

Techover Self Made

Kursinnehåll

Om kursen 🐺

😇 Innan du börjar med kursen

🌜Intro till HTML

🌛Avancerad HTML

Dev tools ⚙️🔩

🌗 Intro till CSS

🌓 Intermediate CSS

Responsive web design

🟩 Spotify cards 🃏

Din första portfolio

Kan du CSS tillräckligt för att gå vidare in i Javascripten?👀🔥

🟨 Intro till Javascript (JS)

😎 Intermediate JS

🍾 DOM

👨🏽‍💻 Avancerad JS

ES6 🧨

🔥 Eget Projekt

🛠 Intro till Backend

🦸‍♂️ Intro till Node.js & NPM

🚀 Intro till Express.js

💻 - 1️⃣: Intro till API

💻 - 2️⃣: Avancerad API

🔥 Eget Projekt

🌿 Databaser och MongoDB

💸 🦄 Bygg din egna Klarna Checkout

🤩 Likeable on Linkedin

🧵 Git & Github

🔵 React Intro 🧪

🔵 React Todo App ✅

🔵 Avancerad React

🔥 Egna Projekt

🟢 Spotify App 🎵

Om kursen