Code Monkey home page Code Monkey logo

kottans-frontend's Introduction

kottans-frontend progress

0. Git Basics

Я уже використовував git у власних проектах. Новими для мене стали команды diff і patch.

У майбутньому планую частіше користуватися гілками, наприклад, при створенні нових фіч.

Скриншоти

Основи: Introduction Sequence Віддалені репозиторії: Push & Pull


1. Linux CLI, and HTTP

Більшість команд, які було роглянуто, я вже знав. Новими для мене стали команди:

  • df - перегляд вільного місця на диску
  • ps - перегляд процесів (в т.ч. з опцією aux, яка дозволяе переглянути всі системні процеси)
  • grep - пошук слів у тексті

Здивувала простота викоритання команди grep, яку я зустрічав раніше, але погано розумів її призначення.

Скриншоти

Тест 1 Тест 2 Тест 3 Тест 4


2. Git Collaboration

Продовжуємо вивчати можливості git. Було цікаво дізнатися про можливості платформи github. Новими для мене стали особливості команд push, fetch і pull.

Раніше я ніколи не використовував команду rebase. І хоч після вивчення матеріалу команда merge мені подобається більше (тому що не перезаписує попередні комміти і історія змін буде виглядати такою, як це і відбувалося насправді, в тій же послідовності), але rebase також може бути корисною. Особливо, коли працюєш над окремою гілкою і за цей час в головній гілці не відбувається ніяких змін. Обов'язково буду користуватися цим у власних проектах.

Скриншоти

Тиждень 3 Тиждень 4 Практика 1 Практика 2


3. Intro to HTML & CSS

Я уже добре знаю цю тему, та все ж було корисно освіжити знання по деяким тонкощам. Наприклад, мені сподобалася формула, як порахувати приорітет стилів при їх конфлікті:

style="" => ID => class, pseudo-class, attribuyte => # of elements

Детальніше про пріорітет

Пріорітет css правил


Була наочно показана різниця між значеннями властивості box-sizing:

  • content-box (значення за замовченням) означає, що підсумковий размір блоку буде дорівнювати вказаному розміру ширини width + внутрішні відступи margin + межа border (те саме для висоти, якщо вона вказана)
  • border-box означає, що підсумкова ширина буде дорівнювати вказаній width, а контент буде мати ширина width - border - padding

Зовнішні відступи по ширині додаються, а по висоті - зливаються (підсумковий відступ буде дорівнювати більшому із двух).

Друге та третє завдання (на сайті codecademy) я не робив, оскільки вони занадно прості для мене. "Напишіть тег p після тегу h1" - мого терпіння вистачило лише на виконання першого розділу.

Скриншоти

Тиждень 1 Тиждень 2


4. Responsive Web Design

Було цікаво ознайомитися з сітками і застосувати нові знання в ігровій формі.

Скриншоти

flexbox grid


5. HTML & CSS Practice

Новим був метод роботи з чекбоксом, коли його можна сховати, а замість вікористовувати стилізований label

Code | Demo

6. JS Basics

Теорія для мене була скоріше повторенням, а от задачі - це те, чого мені не вистачало, а саме застосувати знання до практичних вправ. Особливо спободобалися завдання із останньої группи, довелося помізкувати, але впорався самостійно з усіма.

Скриншоти

coursera basic_javascript es6_challenges basic_data_structures basic_algorithm_scripting functional_programming intermediate_algorithm_scripting


7. DOM

Практично всі методи для роботи з dom були для мене новими. Було корисно з ними розібратися і застосувати до виконання практичного завдання.

Code | Demo

Скриншоти

coursera intermediate_algorithm_scripting


8. Building a Tiny JS World

Code | Demo

9. Object Oriented JS

Раніше вважав prototype дуже складною темою і обходив стороною. Але зараз, щоб застосувати на практиці у завданні, довелося з цим розібратися. Матеріали використовував інші, оскільки приведені пояснють лише початкові відомості про прототипи.

Програмувати гру спочатку було складно, нічого не зрозуміло, але потім "в'їхав" в приведений код і понеслося)

Code | Demo

Скриншоти

codewars


10. OOP exercise

Code | Demo

12. Memory pair game

Code | Demo

14. Friends App

Code | Demo

kottans-frontend's People

Contributors

kotlyar-andrey avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.