KOTTANS-FRONTEDN
COURSE

	Kottans. IT community for cats/students/developers

remote phase	topic	conspect (mindes about learning, short thesis)	sphere	screenshots
TASK 0	Git and GitHub	Good tool for tracking changes in computer files and coordinating work with people. First of all introduce yourself to Git $ git config --global user.name Create your repository $ git init and manage your files $ git add file.txt Look after your files $ git status/log/diff/show Also be familiar with .git file Record your changes with $ git commit Mistakes happen, keep calm and $ git reset/rm/revert Separate your workflow with $ git branch and $ git rebase The relation of branches can be shown by $ git log --oneline --decorate --graph --all. If you get lost, you can always be found with $ git checkout master	version control system	📷
TASK 1	Linux, Command Line, HTTP Tools	Linux is case-sensitive! Useful commands to list the contents of your current directory $ li create a directory $ mkdir remove an empty directory $ rmdir rename file/to move a file $ mv change directories $ cd show where you are in the directory structure $ pwd display the contents of a file $ more copy file $ cp remove the file $ rm change mode of file (rwx) $ chmod see a disk usage listing $ df list all processes $ps aux kill the process $ kill ID-process NOTE! HTTP: The Protocol Every Web Developer Must Know - Part 1 HTTP: The Protocol Every Web Developer Must Know - Part 2	operation system	📷
TASK 2	Git for Team Collaboration	Important thing - to collaborate with others developers using Github. And the remote repository is the solution! So in collaborating you need to create a new branch that has a descriptive name that describes what changes it contains. To manage your remote repo use commands $ git remote, to send changes us $ git push and to to retrieve $ git fetch/pull ----->The git push command takes : the shortname of the remote repository you want to send commits to the name of the branch that has the commits you want to send ----->When git pull is run, the following things happen : the commit(s) on the remote branch are copied to the local repository the local tracking branch (origin/master) is moved to point to the most recent commit the local tracking branch (origin/master) is merged into the local branch (master) -----> When git fetch is run, the following things happen : he commit(s) on the remote branch are copied to the local repository the local tracking branch (e.g. origin/master) is moved to point to the most recent commit	web hosting service	📷
TASK 3	Intro to HTML and CSS	Hypertext Markup Language (HTML) is the standard markup language for documents designed to be displayed in a web browser. HTML describes the structure of a web page semantically with HTML tags <tag></tag>, brick by brick. ---> I can always refer to MDN references to get unstuck (as needed) HTML5 – HTML5 and it’s new elements make for the most beautiful HTML yet. DOCTYPE – HTML5 has the best DOCTYPE ever Indentation – Code is indented to show parent/child relationships and emphasize hierarchy. Charset – Declared as first thing in the head, before any content. Title – Title of the site is simple and clean. Purpose of page is first, a separator is used, and ends with title of the site. Body – ID applied to body to allow for unique page styling without any additional markup. File Paths – Site resources use relative file paths for efficiency. Content file paths are absolute, assuming content is syndicated. Image Attributes – Images include alternate text, mostly for visually impaired uses but also for validation. Height and width applied for rendering efficiency. Main Content First – The main content of the page comes after basic identity and navigation but before any ancillary content like sidebar material. Appropriate Descriptive Block-Level Elements – Header, Nav, Section, Article, Aside… all appropriately describe the content they contain better than the divs of old. Hierarchy – Title tags are reserved for real content, and follow a clear hierarchy. Appropriate Descriptive Tags – Lists are marked up as lists, depending on the needs of the list: unordered, ordered, and the underused definition list. Common Content Included – Things common across multiple pages are inserted via server side includes (via whatever method, language, or CMS that works for you) Semantic Classes – Beyond appropriate element names, classes and IDs are semantic: they describe without specifying. (e.g. “col” is much better than “left”) Classes – Are used any time similar styling needs to be applied to multiple elements. IDs – Are used any time an element appears only once on the page and cannot be targeted reasonably any other way. Dynamic Elements – Things that need to be dynamic, are dynamic. Characters Encoded – If it’s a special character, it’s encoded. Free From Styling – Nothing on the page applies styling or even implies what the styling might be. Everything on the page is either a required site resource, content, or describing content. Comments – Comments are included for things that may not be immediately obvious upon reviewing the code. Valid – The code should adhere to W3C guidelines. Tags are closed, required attributes used, nothing deprecated, etc. Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document written in HTML or XML. CSS describes how elements should be rendered on screen, on paper, in speech, or on other media. selector { property : value; } ---> For any info about CSS Mozilla Developer Network - CSS Reference	markdown	📷
TASK 4	Responsive Web Design	Responsive sites and adaptive sites are the same in that they both change appearance based on the browser environment they are being viewed on (the most common thing: the browser’s width). Responsive design is smooth because the layout fluidly adjusts regardless of what device it is viewed on. There are values in CSS that are for sizing things in relation to the viewport (the size of the browser window). They are called viewport units, and there are a number of them that do slightly different (all useful) things. One unit is 1% of one of the axes of the viewport. These can be useful for responsive design, that is, designing websites that look good across different screen sizes, taking advantage of the space available to them. A Complete Guide to Flexbox	adaptive design	📷
TASK 5	HTML & CSS practice: Hooli-style Popup	DEMO	PRACTICE	📷
TASK 6	JavaScript Basics	JS is a wonderful and powerful instrument for modern web. We wouldn’t have the dynamic content and usability without JavaScript! In this task I learned JS fundamentals. Working with JS in proposed tasks I able to: understand what Javascript is and explain its use in web development explain and use JavaScript primitive data types and variables explain and use JavaScript functions as properties and methods on primitive data types explain global object in JavaScript and be able to use the Math object explain basic control flow and if/else statements and more basic knowledges	programming language	📷
TASK 7	Document Object Model	Working with the DOM is one of the most common tasks of client-side JavaScript. ---> For more info MDN DOM We must strive to minimize the operations of accessing the DOM tree : avoid to calls DOM elements inside loops to assign references to DOM elements to local variables and work with these variables use selector interface where possible the value of the length property should be stored in a local variable when iterating through HTML collections DEMO	dom / PRACTICE	📷
TASK 8	Building a Tiny JS World	This is a tiny task for those who are not familiar with Object-Oriented Programing concepts yet. And with JavaScript OOP in particular.	pre-oop / PRACTICE	📷
TASK 9	Object-Oriented JavaScript	JavaScript gives us a built-in mechanism to share data across objects, called the prototype chain. When we access a property on an object, it can fulfill that request by delegating to some other object. We can use that and change our factory function so that each object it creates contains only the data unique to that particular object, and delegate all other property requests to a single, shared object. ALWAYS define methods on the prototype. To define methods use YourClass.prototype.yourMethod DEMO	oop / PRACTICE	📷
TASK 10	OOP exercise	To create a class, create a constructor function with a Name and assign it to a variable of the same Name . In this constructor only define properties using this.prop notation. To create a subclass use extand. In a child class, you use super() to call its parent's constructor.	oop / PRACTICE	📷
TASK 12	Memory – Pair Game	DEMO CODE	PRACTICE	📷
TASK 13	Community App(Friends App)	DEMO CODE	PRACTICE	📷