Skip to content

my progress 🚴 during taking a self-study part of πŸ“š the frontend πŸŽ“ course from :octocat: the Kottans

Notifications You must be signed in to change notification settings

5Mountains/kottans-frontend

Repository files navigation

Front-End Course πŸŽ“ from Kottans

This repository πŸ“‚ displays my progress 🚴 in taking self-study part of πŸ“š frontend course from :octocat: "Kottans" development community.

Following ‡️ tasks should be completed βœ”οΈ in order to join main course πŸ±β€πŸ’».

πŸ“ŒGeneral:

πŸ“ŒFront-End Basics:

πŸ“ŒAdvanced Topics:

πŸ“Ž Some additional projects, extra tasks or optional content that I have covered running this course:


πŸ“ During the course "Version Control with Git" and "try.github.io" I learned several new commands that I didn't know before and also found new tips to help me in the future.

toggle Screenshot 🎬

git and gitHub intro

πŸ” Back to Top


πŸ“ Linux Survival - definitely pumped up my knowledge on the command line (ls, cs, mkdir, kill, ps, aux) to the next level (mv, pwd, cp, rm, rmdir, find, df, lpr, lpq, lprm, cat), but I certainly should practice it more πŸ”¨ !

πŸ“ HTTP articles - extended my knowledge (200, 400 & POST, GET) around status codes as well as verbs. I also discovered more about https and ssl certificates. But, there is no doubt, that I should extra study in order to understand HTTP caching and authentication.

toggle Screenshot 🎬

linux survival

πŸ” Back to Top


πŸ“ The "GitHub & Collaboration" course has certainly improved my understanding of working with forked repositories and , this knowledge will surely be useful in teamwork on the project! I also became more familiar with the CONTRIBUTING.md files.

toggle Screenshot 🎬

git collaboration

πŸ” Back to Top


πŸ“ The "Intro to HTML and CSS" course from "udacity" was too easy-peasy task, which I handled very rapidly.

toggle Screenshot 🎬

intro to html and css

πŸ“ The "Learn HTML" course from "codecademy" was another really easy-breezy task that I did very quickly, despite the fact that I bought "pro" account which allowed me to cover every topic.

toggle Screenshot 🎬

intro to html and css

πŸ“ The "Learn CSS" course from "codecademy" was one more pretty lightweight task that I did quite quickly. Frankly speaking, there was a theme that made me refresh my knowledge and remember everything I had learned before, it was - Grid. So I should do more research πŸ” and practice on this topic.

toggle Screenshot 🎬

intro to html and css

πŸ” Back to Top


πŸ“ The "Responsive Web Design Fundamentals" course from "udacity" showed me the result of interesting research πŸ’‘ , which I will certainly use in the future πŸ“Œ , in particular that the average number of characters per line should be about 65, so that people do not skimming text. But other than that, it just refreshed my knowledge about breakpoints and @media πŸ‘

toggle Screenshot 🎬

responsive web design fundamental

πŸ“ The "Flexbox Froggy" is "crash course" game which help me to practice CSS Flexbox, was easy task, which I managed pretty fast.

toggle Screenshot 🎬

flexbox froggy

πŸ“ The "Grid Garden" is another "crash course" game which help me to practice CSS Grid, was one more quite easy task, even though last lvls were challenging.

toggle Screenshot 🎬

grid garden

πŸ” Back to Top


πŸ“ Well, HTML & CSS Practice was really awesome task in order to complete which I had to make a pop-up menu using only pure HTML and CSS, without JS or any other libraries. It was a great practice that definitely made my brain get tense.

toggle Screenshot 🎬

popup

πŸ”— to code πŸ“‚ of app - pure html/css popup

πŸ”— to how the App πŸ” like - pure html/css popup

πŸ” Back to Top


πŸ“ The Intro to JavaScript course from "udacity" wasn't something new to me, but nevertheless it gave me the possibility to recall and repeat the fundamental knowledge of JS such as data types & variables, conditionals, loops, functions, arrays and objects as well.

toggle Screenshot 🎬

popup

πŸ“ Well, I will be frank, freecodecamp was not so simple for me as I first thought, its passage took me a couple of days. I had to look at the hint and google in order to come up with the idea of solving problems (especially in the algorithms challenges). There are also several new topics for me, such as recursion or currying, for which I really should do more research and practice in future!

toggle Screenshot 🎬

popup

❗❗ While passing one of the challenges, I even managed to find a bug πŸͺ² in the description of the test suites of the task. After that I successfully opened new issue in the project repository, and I believe that fixing this bug will improve understanding ☝️ of the task.

toggle Screenshot 🎬

test

πŸ” Back to Top


πŸ“ The JavaScript and the DOM course material from "udacity" was quite well-known to me, but I still highlighted a number of new JS features I didn't know, and took a deeper look at the call stack logic ! The new features I found were cssText; performance.now(); createDocumentFragment();

toggle Screenshot 🎬

popup

πŸ“ So, one more part of the algorithms from freecodecamp was successfully completed. Again, I had to look at the hint and Google πŸ”. To be honest, building the logic of an app is not about creating pop-ups or so :)

toggle Screenshot 🎬

popup

πŸ“ Well, I wouldn't say that DOM API was a difficult task until I started optimizing πŸ”€ and improving πŸ”‚ the code following mentors' recommendations. I think it really gave me a proper understanding of the approach to write ⌨️ eligible code, gratitude a lot! 🀝

toggle Screenshot 🎬

popup

πŸ”— to code πŸ“‚ of app - DOM API task

πŸ”— to how the App πŸ” like - DOM API task

πŸ” Back to Top


πŸ“ When I was performing this task, I have faced up with several approaches that I could use to handle this project. For instance:

const a = {a:a, b:b}, 
      b = {a:a, b:b}, 
      c = {a:a, b:b};
const arr = [a, b, c];
for(let el of arr) {
    let smth = `bla ${el.a}, bla ${el.b} bla, ${el.c} bla`;
    print(smth, 'div');
} 
cosnt arr = [a, b, c];
const someFunc = () => {
    let smth = '';
        for(let el of arr) {
            smth += `bla ${el.a}, bla ${el.b} bla, ${el.c} bla`;
        } 
    return smth;
};
const anotherFunc = () => {
    print(someFunc(), 'div'));
}
anotherFunc();
cosnt arr = new Array(a, b, c);
const someFunc = (el) => {
    return `bla ${el.a}, bla ${el.b} bla, ${el.c} bla`;
};
arr.forEach(el => print(someFunc(el), 'div'));
const someFunc = (el) => {
    return bla ${el.a}, bla ${el.b} bla, ${el.c} bla`;
};
Array.from([a, b, c], el => print(someFunc(el), 'div'));
cosnt arr = [a, b, c];
const someFunc = (el) => {
    return `bla ${el.a}, bla ${el.b} bla, ${el.c} bla`;
};
arr.map(el => print(someFunc(el), 'div'));

πŸ“ Sure, there are also other tools to perform this assignment, which are faster, shorter, and so on, but my final solving was the last one on this list ‴️. I enjoy programming cause it's a sort of artistic creativity 🎨, and I like that there is no only ❗ONE solution, so you can be really flexible and versatile, unless, of course, there are strict documentation or some specific company approaches!

p.s. the main idea of this project`s solutions is that you aren't familiar with OPP approaches...

toggle Screenshot 🎬

popup

πŸ”— to πŸ“‚ with index.js - a Tiny JS World

πŸ” Back to Top


πŸ“ Well, the materials of the Object-Oriented JavaScript course (old version) from "udacity", I have to say, were a bit complicated for me πŸ˜•. In my opinion, the examples were quite poor, and and I really didn't catch the point of all the stuff. IMHO - If you really came to this course without previous OOP familiarity, knowledge obtained in this course to complete the last task (frogger arcade game) - won't be enough πŸ˜‘.

toggle Screenshot 🎬

popup

πŸ“ I discovered πŸ”¦ a similar and I would even say updated version of this course ‴️, so I decided to go through it also! The materials of this Object-Oriented JavaScript course (new version) from "udacity", were much easier to follow, compared to the old version! From my perspective, the explanations were much better and clearer, which made it possible for me to understand more ☝️!

toggle Screenshot 🎬

popup

Anyway, through these courses, I have renewed my knowledge about scope, private scope, closures and so on. I also studied the various methods, such as Object.create(), .call(), .bind(), .hasOwnProperty(), .isPrototypesOf(), .getPrototypesOf(), .Object.assign() and the most curiosity became for me - IIFE (function(){statements})();

‡️ My version of the frogger arcade game!

toggle Screenshot 🎬

popup

πŸ”— to πŸ“‚ with index.js - Frogger game

πŸ”— to how output πŸ” like - Frogger game

πŸ“One more part of tasks related to algorithms and logic ‡️, I believe that knowledge gained in their solution will be very useful in the future!

toggle Screenshot 🎬

popup

πŸ” Back to Top


πŸ“ During accomplishing this task, I was able to put into practice the gained knowledge about object-oriented JavaScript.

toggle Screenshot 🎬

popup

πŸ”— to πŸ“‚ with index.js - a Tiny JS World

πŸ”— to how output πŸ” like - a Tiny JS World

πŸ” Back to Top


❗ The task completion of this section is ongoing...

πŸ” Back to Top


❗ The task completion of this section is ongoing...

πŸ” Back to Top

About

my progress 🚴 during taking a self-study part of πŸ“š the frontend πŸŽ“ course from :octocat: the Kottans

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published