Kottans-frontend course

December 22, 2020 ยท View on GitHub

Well, here's my progress:

Git intro

done, screenshots are here udacity screenshot learngitbranching screenshot

I've been using GIT before, but over 90% of this using was "git commit" and "git push" :) Some git commands I used for the first time in this course.

It's funny: in some GIT course, that I've learned before, I've been told that "rebase" and "cherry-pick" are only extreme case commands and using them is a sign that there's something wrong in team's GIT FLOW. Still, I hope that I will not need to use them in real life.

Linux CLI, and HTTP

done, screenshots are here quiz 1 screenshot quiz 2 screenshot quiz 3 screenshot quiz 4 screenshot

I've been a system administrator for more than 10 year, I worked with Linux on servers and on my own computer, so I already knew much of what was in the lessons. But there was one exception: I never used any printer command on Linux :) I really think that Linux is quite ready for "home using" and there are many useful tools for common people to solve their computer problems and needs in Linux without command line interface.

There are many commands in Linux, so you can use "cat", "more" or "less" depending on your habit in some cases, or you can use different keys for "ps", for example I prefer "ps -e" to see processes from all users of the computer.

Git Collaboration

done, screenshots are here udacity screenshot2 learngitbranching screenshot2

I've changed my mind about git rebase :) I think I will use it in my work.

Besides, I realized that there are a lot of interesting points in cooperative working with GitHub.

Intro to HTML and CSS

done, screenshots are here udacity screenshot3 codecademy screenshot

I already knew much of what was in these tutorials, but it was helpful to read it again, especially about rarely used tags like thead and tfoot. Anyway, I am pleasantly surprised of how many free and quality training courses there are.

Responsive Web Design

done, screenshots are here udacity screenshot4 flexbox froggy screenshot

It was new for me how to use your own Android phone to debug sites on mobile device. I think it could be very useful. I used a webserver on my home NAS for testing from different devices via WIFI, but "developer mode" on Android could give more possibilities.

And what about Flexbox: sometimes I muss with it's properties, thank god there is Emmet, it can prompt some needful. Once it prompted me "align-content", I added "justify-items" and then for 10 minutes I was trying to find out why my site is not working properly :)

HTML-CSS-Popup

done, links are here

Demo

Code base

JS Basics

done, screenshots are here udacity screenshot5 freecodecamp screenshot

Most of the ES6 features was new for me, it is time to learn them better and to use. Another interesting area is array methods, like .sort(), .reduce(), .filter(), .map() and so on. They are incredibly powerful and useful.

DOM

theory is done, screenshots are here udacity screenshot6 freecodecamp screenshot2
practice is done, links are here

Demo

Code base

What was new for me is createDocumentFragment(). I usually used some additional HTML element to fill it in JS loops and put many new elements to DOM by only one operation.

Tiny JS World pre-OOP

done, links are here

Demo

Code base

Object Oriented JS

theory is done, screenshots are here udacity screenshot7 codewars screenshot
practice is done, links are here

Demo

Code base

Pseudoclassical patterns of OOP was new for me, I only used prototypal classes and new ES6 classes syntax. Still this new syntax (with "class", "constructor", "extends" etc.) is more clear and logical for me. Maybe it's because I studied Java before JavaScript.

Codewars showed that although higher order functions for arrays are my favorite, I still need to learn them better, they are too useful :)

OOP exercise

done, links are here

Demo

Code base

Offline Web Applications

done, screenshots are here udacity screenshot8

It was very interesting - Service workers, working with browser cash and Indexed DB. Previously I worked only with LocalStorage. As always, Udacity courses are wonderful, but this one was just like a comedy television series. I will definitely watch it again :) And I will remake my Memory Game App to Offline First mode, probably for the New Year.

Memory - Pair Game

done, links are here

Demo

Code base

Friends App

done, links are here

Demo

Code base