Hello! My name is Anton. I'm 32 years old and I'm learning how to become a frontend developer.
This repository is created for study kottans-frontend. Here I will mark my progress and report on the progress of my training.
On this moment i have next skills:
- HTML5, CSS3, SCSS, SASS, LESS, BEM, Flex-box, Grid, Bootstrap, Responsive layout, Git
- Figma, Adobe Photoshop, Avocode, Adobe XD
- English - Upper-Intermediate
I also have several certifications:
- Responsive Web Design of FreeCodeCamp
The certificate of FreeCodeCamp
- IT Fundamentals EPAM/UpSkill me
The certificate of EPAM
- Git Basics
- Linux CLI and Networking
- VCS (hello gitty), GitHub and Collaboration
- Intro to HTML & CSS
- Responsive Web Design
- HTML & CSS Practice
- JavaScript Basics
- Document Object Model - practice
- 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!
- lisened Introduction to Git and GitHub
All the material is well and simply presented. Even a person who does not understand anything about it can understand it.
Week 1
Result
Week 2
Result
- passed game learngitbranching.js.org
A very useful simulator for understanding the basics of Git. Made you think for quite a long time on some of the tasks. I liked it very much.
Introduction Sequence
Result
Push & Pull -- remote repositories in Git!
Result
- Take a course Linux Survival (4 modules)
I really liked this course. Simple and accessible presentation of information. I finally learned how to work with Linux without the graphical shell!
My results:
Quiz #1 Result
Quiz #2 Result
Quiz #3 Result
Quiz #4 Result
- Read articles:
The information given in the articles is quite confusing, I think this is solely due to the translation. The original articles are well written and the information is presented much better than in the translated version, which makes it easier to understand. For me personally, these articles didn't bring anything new to me, but they helped me remember some HTTP peculiarities and querying methods.
- Listen to the 3 and 4 week of the course Introduction to Git and GitHub
My results:
Week #3 Result
Week #4 Result
In this course, I learned how to use git more confidently, solve marge conflicts, use fetch and rebase, and use remote repository correctly. I also understand how to build a collaborative workflow with others.
- Complete the following levels learngitbranching.js.org:
- Main: Moving Work Around
- Remote: To Origin And Beyond -- Advanced Git Remotes!
My results:
Result #1
Result #2
This course also introduced an understanding of the development workflow. Such as Cherry Pick and remote repository tracking.
- Listen to Weeks 1 and 2 (to Introduction to Responsive Design) of the course Intro to HTML & CSS
My results:
Week #1 Result
Week #2 Result
Pretty good basic HTML course. I just discovered a new online resource caniuse.com. The course does a good job of describing a basic understanding of html and css. Reminded myself of some properties and tags that will never be redundant. The only pity - the course does not contain practical work, but you can make it up your own.
My results:
HTML Result
I haven't gotten around to this particular course in a long time. The presentation of information is pretty primitive, most of the interesting things are only on a subscription basis, which makes no sense at all. Why pay for the subscription when you can get the same information for free on freecodecamp and it is much more interesting? Moreover, there is an updated section of web design and they translate their courses into Ukrainian. In general I did not like this course from Codecademy.
My results:
CSS Result
Still convinced that freecodecamp is better in this respect.
Content of the article
A very good article about adaptive web design. Easily explains the basic principles and capabilities of adaptive design. I first learned about Multicol and was pleasantly surprised since I am used to Flexbox and Grid. The article also explains the basic complexities that can arise when designing an adaptive web page.
Playlist
A good playlist that gives a basic understanding of working with Flexbox and a short task/tutorial. What I liked most about this tutorial is that the author shows how to work with such properties as
flex:order:flex-basis:and others while even the paid courses from top companies often give you nothing butjustify-content:andalign-items:.
- Flexbox Froggy - Game
Result
Very cool game. Passed in the same breath for 15 minutes and the last level even made me think for a while. The new thing I came across is the
flex-flow:property, which combines the propertiesflex-direction:andflex-wrap:. The game was surprisingly useful :)
Playlist
Such a clear presentation of information on Grid layout I have not yet seen in any course. So I'll just leave this cheat sheet here: CSS Grid Layout
- Grid Garden - Game
Result
Like the Flexbox froggy - Grid garden is fascinating. The whole game passed in the same breath and with great pleasure. The last levels made me think hard. Enjoyed honing my skills in Grid layout in this interesting way.
I'm so used to checkbox styling that I had to remember pretty much everything from scratch. Awesome practice, the big challenge is just the design development.
It's hard for me to say anything about this course, since I'm already familiar with JS. In any case, for people who are new to JS, this is good information for beginners.
Result
- FreeCodeCamp exercises
Result
I went through this part quite a long time ago. It was a great pleasure to rerun it all over again.
- ES6 Challenges - JS ES6 features. Perform 17 exercises
Result
I was already somewhat familiar with ES6 syntax, but this part of the tasks I found something new. I learned about Destructuring Assignment, Rest Parameter, Spread Operator. I learned how and where to apply them and for what purpose. I will keep some cheat sheets for the future.
Prevent Object Mutation
let obj = {
name:"FreeCodeCamp",
review:"Awesome"
};
Object.freeze(obj);
obj.review = "bad";
obj.newProp = "Test";
console.log(obj);Object.freeze(); - to prevent data mutation.
Arrow function syntax
const myFunc = () => {
const myVar = "value";
return myVar;
}When there is no function body, and only a return value, arrow function syntax allows you to omit the keyword return as well as the brackets surrounding the code.
const myFunc = () => "value";It is possible to pass more than one argument into an arrow function.
const multiplier = (item, multi) => item * multi;
multiplier(4, 2);Set Default Parameters for Functions
const greeting = (name = "Anonymous") => "Hello " + name;
console.log(greeting("John"));
console.log(greeting());Use the Rest Parameter
With the rest parameter, you can create functions that take a variable number of arguments. These arguments are stored in an array that can be accessed later from inside the function.
function howMany(...args) {
return "You have passed " + args.length + " arguments.";
}
console.log(howMany(0, 1, 2));
console.log(howMany("string", null, [1, 2, 3], { }));Use the Spread Operator to Evaluate Arrays In-Place
const arr = [6, 89, 3, 45];
const maximus = Math.max(...arr);Spread and Rest - allow to simply combine several arrays into one or pass values of individual array elements as function arguments. Interestingly, both of these operators look exactly the same in appearance - a ternary (...), but are used in different cases, not only for arrays, but also for objects.
Destructuring Assignment
- Extract Values from Objects
const HIGH_TEMPERATURES = {
yesterday: 75,
today: 77,
tomorrow: 80
};
const {today, tomorrow} = HIGH_TEMPERATURES;- Assign Variables from Objects
const HIGH_TEMPERATURES = {
yesterday: 75,
today: 77,
tomorrow: 80
};
const { today : highToday, tomorrow : highTomorrow } = HIGH_TEMPERATURES;- Assign Variables from Nested Objects
const LOCAL_FORECAST = {
yesterday: { low: 61, high: 75 },
today: { low: 64, high: 77 },
tomorrow: { low: 68, high: 80 }
};
const { today : {low : lowToday, high : highToday}} = LOCAL_FORECAST;- Assign Variables from Arrays
Destructuring an array lets us do exactly that:
const [a, b] = [1, 2, 3, 4, 5, 6];
console.log(a, b);The console will display the values of a and b as 1, 2.
The variable a is assigned the first value of the array, and b is assigned the second value of the array. We can also access the value at any index in an array with destructuring by using commas to reach the desired index:
const [a, b,,, c] = [1, 2, 3, 4, 5, 6];
console.log(a, b, c);The console will display the values of a, b, and c as 1, 2, 5.
- Reassign Array Elements with the Rest Parameter
const [a, b, ...arr] = [1, 2, 3, 4, 5, 7];
console.log(a, b);
console.log(arr);The console would display the values 1, 2 and [3, 4, 5, 7].
Variables a and b take the first and second values from the array. After that, because of the rest parameter's presence, arr gets the rest of the values in the form of an array.
- Pass an Object as a Function's Parameters
In some cases, you can destructure the object in a function argument itself.
const stats = {
max: 56.78,
standard_deviation: 4.34,
median: 34.54,
mode: 23.87,
min: -0.75,
average: 35.85
};
const half = ({max, min}) => (max + min) / 2.0; Create Strings using Template Literals
const person = {
name: "Zodiac Hasbro",
age: 56
};
const greeting = `Hello, my name is ${person.name}! I am ${person.age} years old.`;
console.log(greeting);- Object Literal Declarations Using Object Property Shorthand
const getMousePosition = (x, y) => ({ x, y });- Concise Declarative Functions
With ES6, we can remove the function keyword and colon altogether when defining functions in objects. Here's an example of this syntax:
const person = {
name: "Taylor",
sayHello() {
return `Hello! My name is ${this.name}.`;
}
};Result
In this Basic Data Structures course, I learned more about the differences between arrays and objects and which ones to use in different situations. I also learned how to use useful JS methods like splice() and Object.keys() to access and manipulate data. I'll also leave a little cheat sheet here.
.push() - adds elements to the end of an array.
.pop() - removes an element from the end of an array.
.unshift() - adds elements to the beginning of an array.
.shift() - removes an element from the beginning of an array.
.splice() - remove or add any number of consecutive elements from anywhere in an array.
.slice() - copies or extracts a given number of elements to a new array, leaving the array it is called upon untouched.
.indexOf() - allows us to quickly and easily check for the presence of an element on an array.
Result
Very interesting and simple tasks to understand the structures of algorithms. Of course, some tasks took some time to think about, but in general all the tasks were solved pretty quickly.
Result
In this task, I learned the core concepts of Functional Programming including pure functions, how to avoid mutations, and how to write cleaner code with methods like
.map()and.filter(). At first the tasks were quite difficult at first glance. But after parsing and understanding the principles of their work the solution to most of the problems was about 1-2 lines of code.
Result
Great tasks for understanding working with arrays and objects. There are both easy and quite tricky problems that make you work the creative part of the brain. I liked it in general, I can not understand why the course did not give information on regular expressions, as they are built on quite a lot of tasks.