პროგრამირება ბავშვებისთვის

შეხვედრა #1

• რა არის Front-End პროგრამირება

• VS Code-ის დაყენება, Live Server extension

• Chrome DevTools — Inspect ელემენტი

• GitHub ანგარიშის შექმნა + პირველი repository

• Git GUI vs Command Line (მარტივად)

შეხვედრა #2

git init, status, add, commit, push

• commit-ის მნიშვნელობა

• პრაქტიკა: HTML ფაილის GitHub-ზე ატვირთვა + commit-ების გაკეთება

შეხვედრა #3 - HTML შესავალი

• რა არის HTML, როგორ მუშაობს ბრაუზერი

• HTML ფაილის სტრუქტურა

• tags, elements, attributes

• Chrome DevTools — Inspect

შეხვედრა #4 - ტექსტი, სიები, ლინკები + მედია

• h1–h6, p, span, strong, em• ul, ol, li — სიები

• a tag, target="_blank"

• img, alt, width/height

• video, audio — მარტივი ჩასმა

• პრაქტიკა: გვერდი + ფოტო გალერეა

შეხვედრა #5 - ფორმები

• form, input (text, email, password)

• label, button, checkbox, radio

• პრაქტიკა: რეგისტრაციის ფორმა

შეხვედრა #6 - HTML სტრუქტურა (Semantic)

• div

• Semantic tags: header, nav, main, section, footer

• რატომ არის სემანტიკა მნიშვნელოვანი

• პროექტის განხილვა

შეხვედრა #7 - HTML ფინალური პროექტი + GitHub Pages

• GitHub Pages — საიტის გამოქვეყნება

• პროექტი: პირადი ვებგვერდი — ინფო + სურათი + კონტაქტის ფორმა

• GitHub Pages-ზე გამოქვეყნება

გაკვეთილი 8 — პრეზენტაცია

• სტუდენტები წარადგენენ HTML პროექტებს

• კოდის განხილვა და უკუკავშირი

• კითხვა- პასუხი

შეხვედრა #9 - III მოდული — CSS (6 გაკვეთილი + პრეზენტაცია)

• რა არის CSS, inline / internal / external

• სელექტორები (tag, class, id)

• color, background-color, background-image, gradients

• CSS Variables (--primary-color)

• margin, padding, border, width / height

• პრაქტიკა: სტილიზებული ბარათი

შეხვედრა #10 - ტექსტი + Layout საფუძვლები

• font-size, font-family, text-align, line-height

• display: block / inline / inline-block

• position: relative / absolute (მარტივი შესავალი)

შეხვედრა #11 - Flexbox

• flex-container, justify-content, align-items

• flex-wrap, gap

• პრაქტიკა: ნავბარი + ბარათები

შეხვედრა 12 — CSS Grid

• display: grid, grid-template-columns

• fr ერთეული, repeat(), gap

• grid-column: span 2

• auto-fit + minmax() — responsive Grid

• პრაქტიკა: ფოტო გალერეა

შეხვედრა # 13 — Hover, Transitions + Responsive დიზაინი

• :hover, :focus, transition

• @keyframes — მარტივი ანიმაციები

• media queries, mobile-first

• პრაქტიკა: საიტის მობილური ვერსია

• პროექტების განხილვა

შეხვედრა # 14 — HTML + CSS ფინალური პროექტი

• Landing Page: Header + Hero + ბარათები + Footer

• Responsive დიზაინი

• GitHub Pages-ზე გამოქვეყნება

შეხვედრა # 15 — პრეზენტაცია

• სტუდენტები წარადგენენ Landing Page პროექტებს

• კოდის განხილვა და უკუკავშირი

• კითხვა- პასუხი

შეხვედრა # 16 — AI ინსტრუმენტები + JS შესავალი + ცვლადები

• AI ინსტრუმენტები კოდის სწავლაში (ChatGPT, Copilot)

• სწორი პრომპტის წერა

• JS-ის მიმოხილვა — Big Picture (HTML+CSS+JS)

• let / const / var — განსხვავება

• მონაცემთა ტიპები, typeof

• ოპერატორები, კონსოლი (log, warn, error), alert / prompt / confirm

შეხვედრა # 17 — პირობები

• Number() კონვერტაცია

• ლოგიკური ოპერატორები (&&, ||, !)

• if / else, Nested პირობები

• switch

• ternary operator

შეხვედრა # 18 — Math + String

• Math ობიექტი (random, round, floor, ceil, abs)• parseInt, parseFloat, isNaN

• სტრინგის მეთოდები (slice, replace, includes, trim, toUpperCase...)

შეხვედრა # 19 — ლუპები

• for, while, do-while, for-of

• პრაქტიკა: გამეორება და შაბლონები

შეხვედრა # 20 — მასივები

• მასივები — შექმნა და წვდომა

• მეთოდები: push, pop, shift, unshift, splice, includes, join

• array.sort() — მარტივი დალაგება

• მასივი + ლუპი ერთად

შეხვედრა 21 — ფუნქციები

• function — განმარტება და გამოძახება

• parameters, return, void

• კომპლექსური მაგალითები

• მინი პროექტი ფუნქციებით

შეხვედრა 22 — Callbacks + Array მეთოდები

• ანონიმური ფუნქციები

• Arrow ფუნქციები (=>)

• filter, map, forEach

შეხვედრა 23 — ობიექტები + Date + Timers

• ობიექტები — შექმნა, წვდომა, შეცვლა

• for-in ლუპი

• Date ობიექტი (getFullYear, getMonth, toLocaleString)

• setTimeout / setInterval

შეხვედრა # 24 — DOM შესავალი

• querySelector, getElementById, querySelectorAll

• addEventListener

• textContent, innerHTML

• პრაქტიკა: increment/decrement ღილაკები

შეხვედრა # 25 — classList + DOM პროექტი

• classList: add, remove, toggle, contains

• ნავბარი classList-ით

• Color Game (easy + hard)

• sweetAlert2 ბიბლიოთეკა

შეხვედრა # 26 — Fetch + API + JSON

• JSON — მონაცემთა ფორმატი• Fetch API — GET მოთხოვნა

• ენდპოინტის დემო (ამინდი / სურათი)

• მიღებული მონაცემების გვერდზე გამოტანა

შეხვედრა # 27 — Input Events + პრაქტიკა

• input ველი: keyup, keypress, change

• ფორმის მარტივი ვალიდაცია JS-ით

• პრაქტიკა: ინტერაქტიული მინი აპლიკაცია

• პროექტების განხილვა

შეხვედრა # 28 — JavaScript ფინალური პროექტი

• პროექტი (არჩევით): Quiz / To-Do List / Calculator / Mini Game

• მოთხოვნები: HTML + CSS + JS + GitHub

• ინტერაქტიულობა სავალდებულოა

• GitHub-ზე ატვირთვა

შეხვედრა # 29 — პრეზენტაცია

• სტუდენტები წარადგენენ JavaScript პროექტებს

• კოდის განხილვა და უკუკავშირი

• კითხვა- პასუხი