kottans-frontend

Front-End Course from Kottans 2022

Progress checklist

General

• Git Basics
• Linux CLI and Networking
• VCS (hello gitty), GitHub and Collaboration

Front-End Basics

• Intro to HTML & CSS
• Responsive Web Design
• HTML & CSS Practice
• JavaScript Basics
• Document Object Model - practice

Advanced Topics

• Building a Tiny JS World (pre-OOP) - practice
• Object oriented JS - practice
• OOP exercise - practice
• Offline Web Applications - optional
• Memory pair game — real project!
• Website Performance Optimization - optional
• Friends App - real project!

Git Basics

See more

Thanks to the "Introduction to Git and GitHub" course, I refreshed my knowledge of Git and learned several useful and previously unknown commands.

The site learngitbranching surprised me with the fact that there is something similar for studying Git, it was interesting to go through the tasks, I consider it very useful for learning the material that there is an opportunity to visually work with quite abstract concepts, such as brunches, etc.

P.S. Previously, I already created a Git cheat sheet for myself, in which I described all the commands I know in my own words.

Linux CLI, and HTTP

See more

Linux Survival was an interesting journey, I know that Linus Torvalds created Linux and Git, so it was interesting to see the same decisions in the command names and in general to observe the behavior and logic of the system.

Articles about HTTP was interesting and useful. I found them some hard to understand some details at first because of a lot of theory, but at end of article I found that all this puzzle was made up correct in my head!

So definitely all this information will be useful in the future to understand some things.

Git Collaboration

See more

Speaking of "The Introduction to Git and GitHub" course, it was good, but a little superficial for me. I learned a few new commands and understood the Git workflow in teamwork, and it was really helpful, so a big thanks to the guys at Google and Kottans for this info :)

Learngitbranching was very nice, I had a lot of fun when I do exercises and I got pleasure when did it right.

U know, I was surprised from fact that exist two camps, first "Merge" and second "Rebase", in fact I'm more with "second" guys because I more like clean tree.

To summarize, it was really informative, but maybe too much for current me, I hope that all of this information will be more practical for future me.

Intro to HTML and CSS

See more

Speaking about "Intro to HTML & CSS" course, I already knew before a lot from first two parts course's material, but it was useful to repeat some things.

Was very and very useful to learn information about "box-model", in particular box-sizing: border-box.

So, codecademy courses about HTML & CSS, they very good for beginners (for dummies) because model of "information and immediate practice" give a chance to get a general view about what's going on.

But for me, it was a little annoying to pass them chasing information, which I already know and repeated at Chaikin's course, in short, "repetition is the mother of learning".

At all was nice to know about a few new things for me, that's opacity in HEX (#fff01, etc), hls (hlsa) and text-align: justify.

Responsive Web Design

See more

1. Just a good article.
2. I'm familiar with Flexbox Layout, it was nice to repeat my knowledge.
   
   
   
   
3. Good game, already played before.
   
   
   
   
4. It was a powerful experience, a very good course about Grid Layout, now I understand how I can use it, but in the future I need more self-practice.
   
   
   

It was quite funny to see that some problems are much easier to solve than in Flexbox, I should have known this before, but "it is what it is" :)

5. A good game, it was more difficult for me to pass it than Flexbox Froggy, but its usefulness in question, just confused me more.
   
   

HTML&CSS Practice: Hooli-style Popup

Demo | Code Base | Aproved PR

JS Basics

See more

So, it was a lot of new information for me, and it was much harder to pass tasks than I expected.
But at least now I know much more than I knew before about JS and wanna practice with my new knowledge on real tasks.

At this point, I didn't notice that I'm doing a module, that I don't need to do right now.
But learn something new about regular expressions was really interesting, because for me regexps always looked like abracadabra :D

It Was At This Moment freeCodeCamp Knew... He *ucked Up.

I suddenly noticed that I can't log in my account and I can't create new one, because dev guys from freeCodeCamp, how said one of our mentors: "they messed up earlier when doing their work" (it's a long story).
So I just passed all tasks without progress saves and that's a reason why I can't show my screenshots of progress, just believe on my words.

And you know what funnies thing, they restored my account just right at the moment that I was typing this text. But I don't want to pass all of these tasks again only for screenshots, just want to move on.

DOM

Demo | Code Base | Aproved PR

See more

Just a nice module about DOM with basics information.

It was interesting to solve exercises.

A Tiny JS World

Demo | Code Base | Aproved PR

Object-Oriented JavaScript (Frogger Game)

Demo | Code base | Aproved PR

Codewars Profile Link

JS OOP Exercise (Continued A Tiny JS World)

Demo | Code base | Aproved RP

Memory-Pair Game (inspired by Civilization 5)

Demo | Code base

Friends App

Demo | Code base