Skip to content

OlexiyDobroskok/kottans-frontend

Repository files navigation

kottans-frontend

Stage 0

0. Git and GitHub

Working with Git was new to me. VSC provides many opportunities for project control. Allows you to follow the project step by step. If necessary - undo changes and many more.

Screenshots

Git1 Git2 learngitbranching1 learngitbranching2

1. Linux, Command Line, HTTP Tools

In this task I learned the basic Linux commands and learned information about HTTP protocol. Most of the command I learned when I worked with Git. Learn about the updated HTTP protocol HTTP/1.1. From its new mines there are parallels and permanent connections. They increase client server service speed. HTTP - a protocol that every web developer should know!=)))

Screenshots

Screen1 Screen2 Screen3 Screen4

2. GitHub and Collaboration

GitHub provides many tools to work together on a project. Working with remote repositories was new to me and at the same time exciting.

Screenshots

GitWeek3 GitWeek4 learngitbranching1 learngitbranching2

Front-End Basics

3. Intro to HTML & CSS

In this task I reviewed the basic elements of HTML and CSS. I was familiar with the basic rules, but some became new to me. Learned how the box-sizing works. Learned how margin collapse happens. This knowledge will be useful when working with CSS-styles.

Screenshots

Codecademy Coursera_HTML_W1 Coursera_HTML_W2

4. Responsive Web Design

Got acquainted with the tools for creating adaptive design sites. In the past, these games were held, so it was not new. Grid and Flex offer a lot of opportunities to host content.

Screenshots

Flexbox_Froggy GridGarden

5. HTML & CSS Practice

My DEMO | CodeBase

In this assignment, I learned how to apply my knowledge of HTML and CSS to create pop-up menu. New to me was the use of checkboxes to hide menu items. Learned the rules of alt attributes. The reviewer helped to pay attention to some details, which helped make the code valid,thank you.

6. JavaScript Basics

The topic is very big. Some of the basics I recently reviewed, so the first few topics didn't cause any difficulty. The last topic, Algorithm Scripting Challenges, did not. Going through it, I realized that I'm only a few steps away from the start, but the basic resource for moving forward is already there.

New for me were such methods as:

- Array.filter();
- Array.map();
- Array.reduce();
- Array.slice();
- Array.splice();
- Object.hasOwnProperty();
- String.split();
- String.replace();

Many of these methods will be very useful in the future.

Screenshots

coursera_JS_Basic FreeCodeCamp_JS-Basic FreeCodeCamp_Basik-Data FreeCodeCamp_Basik-Scripting FreeCodeCamp_ES6 FreeCodeCamp_Functional-Programming FreeCodeCamp_Intermediate_Algorithm

7. Document Object Model

My DEMO | CodeBase

In the practical task, I learned how to create elements in the DOM-tree , learned about event delegation. The main difficulty was the optimization of the code, I got confused with the destructuring of the array, but the reviewer helped me cope with this.

I really liked the lectures on coursera. The event listener adds so many possibilities for interesting ideas on the site. Let's do it! =))

Algorithm Scripting Challenges still a difficult task, some I completed by myself, but in some, I had to look at the prompts, as experience is still not enough. But I remembered the school curriculum. For the future, take the lens method Array.prototype.every()

Screenshots

Coursera_DOM FreeCode_EAS_taskDOM

8. Building a Tiny JS World (pre-OOP)

My DEMO CodeBase

Not very difficult task. The first steps of OOP, practiced with the methods of arrays. Got good recommendations for writing the method of array.

9. Object Oriented JS

My DEMO | CodeBase | CODEWARS

It was interesting to feel like a game developer. That was my first time with the OOP. Learned how to inherit prototypes and create templates.

Screenshots

codewars

10. OOP exercise

My DEMO | CodeBase

Good task. Learned to create and inherit classes.Learned about the presence of static methods and properties of the class. Learned the difficulty in creating hybrids, hello cat woman! = )Learned that you can’t create the world using the static methods of the residents themselves, the world must be a collection of residents or a class with a large population. Took a shot at the ternary operators. With them the code looks cleaner.

11. Memory pair game

My DEMO | CodeBase

12. Friends App

My DEMO | CodeBase

Stage 1

Homework

1. HTML FORM

TASK | DEMO | CodeBase

HTML / CSS

Lections

1. Специфікація та стандарт HTML

2. Основи CSS

3. Розбір завдання по розмітці форми 2022

Сompendium

1. Конспект специфікації HTML

2. Основи CSS — конспект

3. Базові рекомендації по доступності

4. Деякі підходи до компонування

How browser works. DOM

1. Interface. Browser. Web API

2. Browser rendering

About

Frontend online course

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published