Привіт! Я Віталій Кобилка і це мій репозиторій для курсу від Kottans.
- 3. Intro to HTML & CSS
- 4. Responsive Web Design
- 5. HTML & CSS Practice
- 6. JavaScript Basics
- 7. Document Object Model
- 8. Building a Tiny JS World
- 9. Object oriented JS
- 10. OOP exercise
- 11. Offline Web Applications
- 12. Memory pair game
- 13. Website Performance Optimization
- 14. Friends APP
Раніше я мав поверхневі знання роботи з Git, проте завдяки окремим онлайн-тренінгам та інформації з програми цього курсу (а особливо завдячуючи тренажеру learngitbranching.js.org) я суттєво підвищив свої навики та розуміння роботи з Git.
Виконав завдання:
-
Прослухав 1 і 2 тиждень курсу Introduction to Git and GitHub
-
Пройшов рівні на learngitbranching.js.org
-
Створив репозиторій kottans-frontend.
-
Надіслав pull-request на Kottans/mock-repo.
Screenshots
Work in progress...
Work in progress...
Вивчив основи HTML та CSS, було цікаво зрозуміти та використовувати те, що раніше лише іноді переглядав у коді. Все нове, все цікаве, фактично все буде у майбутньому використовуватися (оскільки це базисні поняття), почав перелічувати ці речі конкретно, але перелік вийде занадто довгим.
Виконав завдання:
- Прослухав 1 і 2 тижні курсу Intro to HTML & CSS та виконав ряд тестових завдання для закріплення прочитаних матеріалів
- Виконав практичні вправи (Learn HTML (Eng))[https://www.codecademy.com/learn/learn-html]
- Виконав практичні вправи (Learn CSS (Eng))[https://www.codecademy.com/learn/learn-css]
Screenshots
Нове/здивувало/буду використовувати:
Було новим:
- Інструмент GitHub Pages дозволяє запускати в "пісочниці" сайти, ресурси яких зберігаються в моїх репозиторіях
- Посилання на ресурси, що допомогають контролювати правильність написання html-, js-коду та застосування css-стилів, а також дозволяють поділитися кодом
- Яким чином організовується перехід на фрагменти сторінок
- Flex: існує скорочена властивість flex-flow (для властивостей flex-direction та flex-wrap найчастіше використовуються разом)
Здивувало:
- Додаткові можливості GitHub та простота використання інструменту запуску в "пісочниці" сайтів, ресурси яких зберігаються в моїх репозиторіях
- Цікаві можливості псевдо-класів селекторів CSS
- Використання окремих стилів для останніх елементів визначених раніше стилів за допомогою last-child
Що я планую використовувати в майбутньому:
- Інструмент GitHub Pages
- Посилання на сутності символів HTML для формування належного вигляду сторінок при перегляді у різних браузерах та кодуваннях
- Ідентификатори фрагментів сторінок
- Псевдо-класи селекторів CSS для створення інтерактивних елементів сторінок
Ознайомився із основами адаптивного web-дизайну. Водночас оглядова стаття трохи незрозуміла та хаотична, у російській версії приклади майже не працюють (якщо дійдуть руки - запропоную правки до README.md).
Були новими концепції Flexbox та CSS Grid Layout, вивчення їх основ вже дозволяє верстати поки що прості неінтерактивні web-сторінки, але із адаптивним дизайном.
Відновив знання з використання вбудованого у браузер інструменту для перевірки адаптивного дизайну.
Також у процесі перегляду лекцій та подальшого спілкування із іншими студентами у чаті почав використовувати автозаповнення коду на основі Emmet та використання плагіну eCSStractor for VSCode, які суттєво прискорюють та спрощують написання стандартних блоків коду.
Виконав завдання:
- Responsive web design basics
- FLEXBOX. Вчимося верстати на флексах
- Пройшов Flexbox Froggy - гра для закріплення
- CSS Grid Layout
- Пройшов Grid Garden - гра для закріплення
Screenshots
Work in progress...
Якщо використовувати українську мову інтерфейсу під час проходження завдань на https://www.freecodecamp.org/ - кидається в очі часта неточність перекладу з англійської.