AntonKottans / kottans-frontend

Repository for Kottans course.

kottans-frontend

Stage 0. Self-Study

General

0. Git Basics
1. Linux CLI and Networking
2. GitHub and Collaboration

Front-End Basics

3. Intro to HTML & CSS
4. Responsive Web Design
5. HTML & CSS Practice
6. JavaScript Basics
7. Document Object Model - practice

Advanced Topics

8. Building a Tiny JS World (pre-OOP) - practice
9. Object oriented JS - practice
10. OOP exercise - practice
11. Offline Web Applications
12. Memory pair game — real project!
13. Website Performance Optimization
14. Friends App - real project!

---

Optional tasks

15. Tic-tac-toe - game!

---

Git Basics

I have already been introduced to git thanks to githowto.com, but learngitbranching.js.org helped a lot to understand it better.

Linux CLI, and HTTP

---

Linux CLI

Since i am a Debian GNU/Linux user, new commands for me were just "more" and "finger".

Linux CLI, and HTTP

Quiz 1

Quiz 2

Quiz 3

Quiz 4

HTTP

Articles are very interesting. A lot of information, looking for the practical use of all this.

---

Git Collaboration

Udacity GitHub & Collaboration lesson screenshoot

learngitbranching.js.org lesson screenshoots

---

That was a lot of new information. My favorite git fakeTeamwork. And that was fun!

---

Intro to HTML and CSS

udacity intro lessons screenshoots

codecademy HTML lessons screenshoots

codecademy CSS lessons screenshoots

Though there was nothing complicated, last exercise in lesson about fonts was like "What do you want from me???". After reset i wrote the same and it worked. Codecademy's editor was good until lessons about flex and grid becouse of long loading and loosing connection while typing.

---

Responsive Web Design

Udacity lessons screenshoot

Froggy game screenshot

Grid garden game screenshot

---

So that is debugging usb for! chrome://inspect + chrome canary = debugging on smartphone

keywords: hardware pixel, device independent pixel(dip), device pixel ratio(dpr), viewport, off canvas. Don't forget to set viewport!

Comfortable size of buttons for fat fingers - 48x48. Comfortable width of text for reading - 45-90 caracters.

---

wrap-reverse wrap-reverse wrap-reverse

---

HTML and CSS Practice

DEMO

Why i can't focus hidden checkbox? Cos i had to use appearance: none; instead of display: none;

---

JS Basics

Udacity lessons screenshoot

Free Code Camp

Something new: Object.freeze(Obj) - prohibits changes of object.

---

DOM

Free code camp exercises

Udacity dom course

Demo

Code

---

Building a tiny js world pre oop

Demo

Code

---

Object Oriented JS

Udacity oop theory

Codewars

Codewars screenshoot

Classic Frogger Game

demo

At first was totally unclear how to implement functions in frogger game. I'm not sure if i could done it without example.

---

OOP exercise

Demo

Code

Inheritance is a bit unclear, but simple enough. Still didn't get how to implement multiple inharinatce via classes.

---

Offline Web Applications

lie-fi) service-worker still needs time to master

---

Memory Pair Game

Demo

Code

biggest problem was animation

---

Friends App

Demo

Code

---

Tic tac toe

Demo

Code

AI logic took most of time