ლექტორის შესახებ:
ზურა ჯელაძე
განათლება: საქართველოს ტექნიკური უნივერსიტეტი – ინფორმატიკის ფაკულტეტის სტუდენტი
არაფორმალური განათლება:
Web Development – IT Academy Step Georgia
Computer Software Engineering – UniLab
Game Development – UniLab
სამუშაო გამოცდილება:
Freelancer Angular Developer
Frontend Web Development- ის ლექტორი – CodeWill
Frontend Web Developer – UniLab
მოკლე აღწერა:
| შეხვედრების რაოდენობა | 50 შეხვედრა (100 საათი) |
| სასწავლო კურსის მიზანი | დღესდღეობით Web დეველოპმენტი ერთ-ერთი ყველაზე მოთხოვნადი და მაღალანაზღაურებადი პროფესიაა. ამ პროფესიის დაუფლებას რამოდენიმე თვეში შეძლებ. ეს კურსი შენთვისაა თუ: -ხარ მონდომებული -ხარ განვითარებაზე ორიენტირებული -გიყვარს პრობლემების მარტივად გადაჭრა -გაქვს ლოგიკური აზროვნების უნარი კურსის მიზანია სტუდენტი ჩამოყალიბდეს Junior Front-end Web დეველოპერად და შეეძლოს რეალურ პროექტებზე მუშაობა. |
| სწავლის შედეგი | კურსის დასრულების შემდეგ სტუნდეტს შეუძლია: -რეალურ პროექტებზე მუშაობა Frontend Web Development-ის მიმართულებით. -კარგად აქვს გააზრებული რა არის ვებ დეველოპმენტი და როგორ მუშაობს ის. კურსდამთავრებულს აქვს ქვემოთ ჩამოთვლილი ენების ძირითადი საკითხების გააზრებული ცოდნა: HTML CSS/SCSS JavaScript Git, GitHub TypeScript Angular სტუდენტი მზადაა სტაჟირებისთვის ან დასაქმდეს ჯუნიორ დეველოპერად |
სილაბუსი:
| # | სასწავლო კურსის შინაარსი HTML, CSS | ძირითადი მიგნებები |
| 1 . | რა არის ვებ დეველოპმენტი, რა არის ვებსაიტი, სად მდებარეობს ის და როგორ მუშაობს? რა არის სერვერი? როგორ უკავშირდება front end და back end ერთმანეთს? სამუშაო სივრცის (vscode) გადმოწერა და კომპიუტერზე მორგება. | ვებსაიტების მუშაობის პრინციპი |
| 2. | შესავალი html ში, რა არის html? მარტივი html თეგები: html, head, body, h1-h6, p, div, span. პრაქტიკული სამუშაო. დავალება: მარტივი html ვებგვერდის აწყობა დიზაინის მიხედვით. | html-ის გაცნობა |
| 3. | შესავალი css-ში. რა არის css? css-ის დაკავშირება html-სთან. მარტივი სელექტორები: თეგი, კლასი, აიდი. მარტივი სტილები: color, background-color, width, height, text-align, font-size. დავალება: მარტივი გვერდის აწყობა html და css-ის გამოყენებით დიზაინის მიხედვით. | css-ის გაცნობა |
| 4. | დავალების წარდგენა: გაზიარება, განხილვა, რჩევები | |
| 5. | რა არის inline/block-level ელემენტები, box model? პრაქტიკული სამუშაო. დავალება: html დოკუმენტის აწყობა inline და block-level ელემენტების გამოყენებით. | inline და block-level ელემენტები |
| 6. | სემანტიკურობა, რა არის სემანტიკა და რა საჭიროა? სემანტიკური და არასემანტიკური თეგები. ჰიპერლინკების გამოყენება. პრაქტიკული სამუშაო. დავალება: მარტივი ვებგვერდის აწყობა სემანტიკური თეგებით | სემანტიკურობა |
| 7. | მეტი css: ჩარჩოს შექმნა, ჩარჩოს მომრგვალება, ტექსტის სისქის, სტილის და ფონტის შეცვლა. პრაქტიკული სამუშაო. დავალება: ტურისტული ვებგვერდის აწყობა განვლილი მასალის გამოყენებით | სხვადასხვა ელემენტების გასტილვა |
| 8. | დავალების წარდგენა: გაზიარება, განხილვა, რჩევები | |
| 9. | ელემენტების პოზიციონირება: relative/absolute. რა სხვაობაა მათ შორის? თვისებები: top, left, right, bottom. პრაქტიკული სამუშაო. დავალება | ელემენტების განლაგება დოკუმენტში |
| 10. | სიის შექმნა: ul/ol. position: fixed, sticky. პრაქტიკული სამუშაო. დავალება | სიის შექმნა, ელემენტების განლაგება დოკუმენტში |
| 11. | gradient ბექგრაუნდი, მაუსის hover effects, ანიმაციის transition პრაქტიკული სამუშაო. დავალება | ინტერაქტიულობა css-ის გამოყენებით |
| 12. | ბექგრაუნდზე ფოტოს დადება, მისი გასწორება და შესაბამისად მორგება. პრაქტიკული სამუშაო. დავალება | ფოტოს ჩასმა ელემენტის ბექგრაუნდზე |
| 13. | flexbox განლაგება. თამაში – flexbox froggy. პრაქტიკული სამუშაო. დავალება: მოცემული layout-ის აწყობა flexbox-ის გამოყენებით. | flexbox – ელემენტების განლაგება flexbox-ის გამოყენებით |
| 14. | ფორმების შექმნა. პრაქტიკული სამუშაო. დავალება: სარეგისტრაციო ფორმის შექმნა. | სარეგისტრაციო ფორმები |
| 15. | flexbox-ის ალტერნატივა grid. თამაში – grid garden. პრაქტიკული სამუშაო. დავალება: მოცემული layout-ის აწყობა grid-ის გამოყენებით. | grid – ელემენტების განლაგება grid-ის გამოყენებით |
| 16. | header და footer-ის შექმნა. ფსევდო კლასები. პროექტის დაწყება ლექციაზე. | header და footer |
| 17. | რა არის რესპონსიულობა? რესპონსიული საიტის აწყობა media query-ების გამოყენებით. პრაქტიკული სამუშაო. დავალება | ვებსაიტის მორგება სხვადასხვა მოწყობილობაზე |
| 18. | რა არის ბიბლიოთეკა? სლაიდერების ჩასმა ვებსაიტში swiper.js ბიბლიოთეკის გამოყენებით. პრაქტიკული სამუშაო. დავალება | ბიბლიოთეკები, swiper.js |
| 19. | live coding. ფინალურ პროექტზე მუშაობა. | |
| 20. | ფინალური პროექტის წარდგენა: ვებსაიტის მარკაპის აწყობა განვლილი მასალის გამოყენებით: html, css. | |
| სასწავლო კურსის შინაარსი JAVASCRIPT | ||
| 21. | hello world! შესავალი პროგრამირებაში. ჯავასკრიპტის გაცნობა, მისი დაკავშირება html-თან. მონაცემთა ტიპები, ცვლადები, მარტივი ოპერატორები, expressions, მონაცემების გამოტანა ბრაუზერში. პრაქტიკული სამუშაო. დავალება | პროგრამირება |
| 22. | როგორ მივაღებინოთ პროგრამას გადაწყვეტილება? if else და switch ის გამოყენებით. პრაქტიკული სამუშაო. დავალება | conditions/პირობები |
| 23. | როგორ გავამეორებინოთ პროგრამას ერთი და იგივე სამუშაო იმდენჯერ, რამდენჯერაც გვინდა (10-ჯერ, 100-ჯერ, 1000-ჯერ)? ციკლები: while, do while, for loop, for of, for in. ციკლების გაწყვეტა, break, continue. პრაქტიკული სამუშაო. დავალება. | ციკლები |
| 24. | როგორ შევინახოთ ერთ ცვლადში დიდი ინფორმაცია? მასივები და ობიექტები. რით განსხვავდებიან ისინი ჩვეულებრივი ცვლადებისგან? primitive type vs reference type. პრაქტიკული სამუშაო. დავალება. | მასივები და ობიექტები |
| 25. | მეთოდები და თვისებები. მათი გამოყენება რიცხვებზე, სტრინგებზე, მასივებზე, ობიექტებზე. 1/2 პრაქტიკული სამუშაო. დავალება. | მეთოდები და თვისებები |
| 26. | მეთოდები და თვისებები. მათი გამოყენება რიცხვებზე, სტრინგებზე, მასივებზე, ობიექტებზე. 2/2 პრაქტიკული სამუშაო. დავალება. | მეთოდები და თვისებები |
| 27. | ფუნქციები. რა არის ფუნქცია და რატომაა მნიშვნელოვანი? რთული ციკლები: ციკლების გამოყენება ციკლებში. პრაქტიკული სამუშაო. დავალება. | ფუნქციები |
| 28. | Dom. ვებგვერდის მანიპულაცია ჯავასკრიპტით პრაქტიკული სამუშაო. დავალება. | html დოკუმენტის სტრუქტურა და მისი მანიპულაცია |
| 29. | ჩაშენებული კლასები, რიცხვების დამრგვალება, რენდომ რიცხვების დაგენერირება და მსგავსი მზა ფუნქციონალის გამოყენება. პრაქტიკული სამუშაო. დავალება. | ჩაშენებული კლასები |
| 30. | event listeners. ვამატებთ ფუნქციონალს მაუსის დაკლიკებისთვის. ანონიმური ფუნქციები, callback ფუნქციები. პრაქტიკული სამუშაო. დავალება. | ფუნქციების გაშვება კონკრეტულ მოქმედებაზე |
| 31. | window object. ბრაუზერის ფანჯრის მონაცემების გაგება/მანიპულაცია. პრაქტიკული სამუშაო. დავალება | ბრაუზერის ფანჯრის ინფორმაციის დადგენა |
| 32. | დავალების წარდგენა: გაზიარება, წარდგენა, რჩევები. | |
| 33. | ინფორმაციის ლოკალურად შენახვა local storage & session storage-ით. ტაიმერების დაყენება: settimeout & setinterval. პრაქტიკული სამუშაო. დავალება | მომხმარებლის ინფორმაციის შენახვა |
| 34. | კლასები ჯავასკრიპტში. რა არის კლასი და რისთვის ვიყენებთ? კონსტრუქტორი. ჩვენი საკუთარი მეთოდების შექმნა. პრაქტიკული სამუშაო. დავალება | |
| 35. | ენკაფსულაცია. ინფორმაციის უსაფრთხოდ შენახვა და წაკითხვა. getters & setters. პრაქტიკული სამუშაო. დავალება | ინფორმაციის დაცვა |
| 36. | github. შევინახოთ ჩვენი პროექტების ვერსიები. დავბრუნდეთ ნებისმიერ ვერსიაზე. ვიმუშაოთ უფრო პროფესიონალურად და დაცულად. პრაქტიკული სამუშაო. დავალება: ფინალური პროექტის დაწყება | ვერსიების კონტროლის სისტემა |
| 37. | დეტალურად როგორ მუშაობს ვებსაიტი? კომპიუტერი, სერვერი, კლინეტ-სერვერის კომუნიკაცია. api-ები. პრაქტიკული სამუშაო. დავალება: ფინალურ პროექტზე მუშაობა | ვებსაიტების მუშაობის პრინციპში |
| 38. | როგორ გავაკეთთ მოთხოვნები სერვერზე? როგორ ჩავწეროთ, წავიკითხოთ ან წავშალოთ ინფორმაცია მონაცემთა ბაზაში? api-ების გამოყენება პრაქტიკული სამუშაო. დავალება: ფინალურ პროექტზე მუშაობა | http მოთხოვნები fetch api-ს გამოყენებით |
| 39. | live coding, ერთად ვმუშაობთ ფინალურ პროექტებზე. | ფინალურ პროექტზე მუშაობა |
| 40. | ფინალური პროექტის წარდგენა: სრულფასოვანი front-end ვებსაიტის შექმნა შემდეგი ტექნოლოგიების გამოყენებით: html, css, javascript. | |
| სასწავლო კურსის შინაარსი: TYPESCRIPT/ANGULAR | ||
| 41. | შესავალი typescript-ში, რა არის ის და რა საჭიროა? რატომაა javascript-ზე უკეთესი? ცვლადის მარტივი და რთული ტიპების განსაზღვრა. | typescript-ის მნიშვნელობა და უპირატესობები |
| 42. | ინტერფეისები, ცვლადისთვის რამდენიმე შესაძლო ტიპის მინიჭება, ფუნქციის ტიპები. | ცვლადის ტიპების შექმნა |
| 43. | შესავალი ანგულარში. angular cli, ანგულარის აპლიკაციის შექმნა, ფაილების სტრუქტურა, კომპონენტები | რატომ ანგულარი? |
| 44. | ინტერპოლაცია, თვისებების მიბმა, two way binding, ngclass, *ngif | დინამიური ინფორმაციის გამოტანა |
| 45. | საიტის მისამართების (routes) გაწერა, კომპონენტზე ციკლის დატრიალება (*ngfor), *ngswitchcase. | როუტები |
| 46. | ინტერაქციულობა, ივენთების მიბმა (მაუსის კლიკის, კლავიშზე დაჭერის ან სხვა ივენთის შემთხვევაში გარკვეული ფუნქციონალის შესრულება), სერვისები | ინტერაქციულობა ანგულარში |
| 47. | სარეგისტრაციო ფორმების შექმნა. reactive & template-driven ფორმები. ფორმებზე ვალიდაციების დადება. | ფორმები |
| 48. | კომპონენტებს შორის ინფორმაციის გადაცემა input და output-ის გამოყენებით. event emmiter-ის შექმნა. | ინფორმაციის ტრანსპორტირება კომპონენტებს შორის |
| 49. | angular material – ანგულარის ბიბლიოთეკა. მზა ელემენტების ჩასმა პროექტში | მზა კომპონენტები |
| 50. | http client – http მოთხოვნების გაკეთება სერვერზე deployment – ანგულარის აპლიკაციის დაჰოსტვა (გამოქვეყნება) | http პროტოკოლები ანგულარში |
| 51. | ფინალური პროექტის წარდგენა: სრულფასოვანი front-end ვებსაიტის შექმნა angular-ის გამოყენებით. დედლაინი 2 კვირა |