ლექტორის შესახებ:
თამარ ზურაბაშვილი
განათლება: ინგლისური ენის და ლიტერატურის ფილოლოგიის ფაკულტეტის ბაკალავრი, სახელმწიფო უნივერსიტეტი
არაფორმალური განათლება:
Frontend Development – BTU;
Manual Testing – TBC Academy;
Scratch -ვიზუალური პროგრამირება – Oxford University
სამუშაო გამოცდილება:
ინგლისურის, ისტ-ს და კომპიუტერული მეცნიერების წამყვანი მასწავლებელი – #172 საჯარო სკოლა
React web developer- სხვადასხვა ინდივიდუალური და კოლაბორაციული პროექტი
მოკლე აღწერა:
| შეხვედრების რაოდენობა | 30 შეხვედრა ლექცია 27 (1.5/2სთ ) საკონსულტაციო შეხვედრა 2 (2სთ) ფინალური პროექტის პრეზეტაცია 1 (1.5 საათი) |
| სასწავლო კურსის მიზანი | კურსის მიზანია: -შეუქმნას მსმენელს მყარი საფუძველი კომპიუტერულ მეცნიერებაში, რომელიც მოიცავს HTML, CSS ,JavaScript და DOM -ის საფუძვლებს -მისცეს შესაძლებლობა გადაჭრას პრობლემები კოდირების გზით -განუვითაროს ალგორითმული აზროვნება -შეძლოს პროგრამული კოდის სინტაქსურად და სემანტიკურად გამართვა -შეძლოს კოდის Debagging |
| სწავლის შედეგი | კურსის გავლის შემდეგ მსმენელებს ეცოდინებათ: -HTML, CSS, Javascript, DOM -ყველა რეზოლუციაზე მორგებული ფუნქციური ვებ გვერდის შექმნა -Git, github -ის გამოყენება -კოდის Debagging -სემანტიკურად და სინტაქსურად გამარათული კოდის წერა -საიტის დაჰოსტვა -პრობლემის გადაჭრის გზების ძიება -ალგორითმული და ლოგიკური აზროვნება |
სილაბუსი:
| # | კურსის შინაარსი | ძირითადი მიგნებები |
| 1 . | -კურსის შესასწავლი საკითხების გაცნობა -როგორ და რატომ უნდა ისწავლონ პროგრამირება -რა არის html , css, js, DOM და რისთვის არის საჭირო -პროექტისათვის დოკუმენტების ორგანიზება -ფაილების სტრუქტურის გაცნობა, შექმნა -html დოკუმენტის სტრუქტურა -ბრაუზერში დეველოპერის ხელსაწყოები -Gmail-ის ექაუნთის შექმნა -Sublime ედიტორის დაინსტალირება -კოდის ედიტორის sublime -ის ინტერფეისის გაცნობა -figma – ს ინტერფეისის გაცნობა საშინაო დავალება | ვები http/https პროტოკოლი inspect element |
| 2. | -html მნიშვნელობის მქონე ტეგები ვებ გვერდის სტრუქტურისთვის -class/id -css-ის გამოყენება და დოკუმენტის სტრუქტურა -ატრიბუტების განხილვა -სურათის გაფართოებების განხილვა jpg/ png/svg -ბრაუზერის სტილების განულება -კომენტარები html/ css-ში; მსმენელები ისწავლიან -გვერდის გალამაზებას -გვერდის სტრუქტურის, სტილების (ფერები, ზომების) დამატებას -ხელსაწყოებს, figma პროგრამაში საუშაოდ საშინაო დავალება | htmlტეგები ატრიბუტები სტილების განულება კომენტარი |
| 3. | -ელემენტების გვერდიგვერდ განთავსება -the display property – block/inline/inline- block/none -css box model-ის სტრუქტურა -Box-sizing; | Display property Box-model |
| 4. | პროექტი | |
| 5. | -ქართული და ლათინური ფონტები და შესაბამისი ფორმატები ვებისთვის -სასურველი ფონტის დამატება -ფონტების სტილების/ზომების მართვა -თუ როგორ უნდა დაემატოს კონკრეტული ფონტი ვებგვერდზე აბსოლიტური და რელატიური მისამართებით -github-ის განხილვა -რეპოზიტორის შექმნა -პროექტის ატვირთვა / ჩამოტვირთვა მსმენელები შეისწავლიან პროექტის github-ზე ატვირთვას,ნებისმიერი ადგილიდან და ნებისმიერი კომპიუტერიდან რომ ჰონდეთ წვდომა მათ მიერ შესრულებულ პროექტებზე. ისწავლიან, თუ როგორ უნდა დაემატოს კონკრეტული ფონტი ვებგვერდზე აბსოლუტური და რელატიური მისამართებით საშინაო დავალება | ფონტები Github |
| 6. | -position property – static / absolute / relative / fixed / sticky -position relative /absolute -css transform property -box shadow -text shadow -css pseudo elements მსმენელები შეისწავლიან პოზიციონირების განსაზღვრას, როდესაც ელემენტი უნდა განთავსდეს მეორე ელემენტზე. მაგ.: წარწერა სურათზე. როდესაც ელემენტი დაფიქსირებული უნდა იყოს ერთ კონკრეტულ ადგილას – მაგ.: ჩატის აიქონი. საშინაო დავალება | პოზიციონირების განსაზღვრა ფსევდო ელემენტები |
| 7. | -background image property -hover ეფექტები -css transition property -keyframe ანიმაცია -border radius -Opacity მსმენელები შეისწავლიან სურათის ფონად შემოტანას, ანიმაციის შექმნას (hover ანიმაცია – მაუსის გადატარების დროს სტილების შესაცვლელად ) და keyframe ანიმაცია ელემენტის სამოძრაოდ | ანიმაცია Hover უკანა ფონი background |
| 8. | მინი პროექტი | |
| 9. | -ახალი კოდის ედიტორის visual studio code -ის გარჩევა -css pseudo classes -css flexbox layout module -fontawesome -კოდის ვალიდაცია: html/css სტუდენტები შეისწავლიან flexbox layout სტრუქტურას, ელემენტების გვერდიგვერდ განთავსებას, ელემენტების ჰორიზონტალურად და ვერტიკალურად გაკონტროლებას საშინაო დავალება | ფსევდო კლასები აიქონები Icons flexbox |
| 10. | -css grid layout module -autoprefixer -html audio & video ტეგები სტუდენტები შეისწავლიან ელემენტების grid სტრუქტურის საშუალებით გაკონტროლებას (სტრიქონებითა და სვეტებით). ასევე, განხილული იქნება, რა პრეფიქსებია საჭირო ყველა პარამეტრის სწორად ასამუშავებლად ბრაუზერის ყველა ვერსიაზე საშინაო დავალება | Grid layout |
| 11. | -ვებგვერდის რესფონსიული წყობა -css @media – ს გამოყენება -screen resolutions -responsive navbar -responsive checker ლექციაზე მსმენელები შეისწავლიან ისეთ მნიშვნელოვან თემას, როგორიც არის რესფონსივი. გვერდი უნდა იყოს მორგებული ყველა რეზოლუციაზე, რადგან უცნობია, რომელი მოწყობილობით გახსნის მომხმარებელი გვერდს ( ipad, ipad pro, iphone & android devices). კონტენტი აუცილებლად უნდა იყოს მორგებული ყველა მოწყობილობაზე. საშინაო დავალება | responsive |
| 12. | მინი პროექტი | |
| 13. | -html form ელემენტები -html form ატრიბუტები -html input ტიპები -მეტა ტეგები -სოციალური ქსელებისთვის ინფორმაციის ოპტიმიზაცია; სარეგისტრაციო/საკონტაქტო/ავტორიზაციის ფორმის აწყობა. ასევე, რა მნიშვნელობის მქონე ტეგები და რა input-ის ტიპები გამოიყენება. საშინაო დავალება | Form Input მეტა ტეგები |
| 14. | -Option form -სქროლიანი ასარჩევი ფორმა -რამოდენიმე მნიშვნელობის არჩევა ერთად -ტექსთ ბოქსი -ფორმის htmlში აწყობა და ვალიდაციის დამატება საშინაო დავალება | Validation hosting |
| 15. | -მოცემულ ინფუთ თეგებსთვის ფერი შეცვლა -ფსევდო-ჩაილდები child -სურათზე გამჭვირვალე ფონის გადაკვრა -სურათზე icon-ის განთავსება | |
| 16. | მინი პროექტი | |
| 17. | -ჯავასკრიპტის სინტაქსის განხილვა -ცვლადები -ტიპები -ობიექტები -მასივები -პირობითი გამოსახულება -ციკლები -ლოგიკური ოპერატორები ვიზუალური პროგრამირების scratch -თან პარალელების გავლებით ჯავასკრიპტის სინტაქსის განხილვა. რა არის ცვლადი, რა ტიპები არსებობს, რა განსხვავებაა მასივსა და ობიექტს შორის საშინაო დავალება | ჯავასცრიპტის სინტაქსი |
| 18. | -ფუნქციის შექმნა -function expression -function declaration -arrow functions -ფუნქციის არგუმენტები -callback -პრაქტიკული მაგალითები სტუდენტები შეისწავლიან, თუ რა არის ფუნქცია, როგორ შეიძლება ფუნქციის შექმნა და შემდეგ გამოძახება საშინაო დავალება | Functions |
| 19. | -მეთოდების განხილვა -სტრინგები და მათი მახასიათებლები -რა არის dom? -dom მანიპულაციები ჯავასკრიპტში -ჯავასკრიპტის ფაილების დამატება საიტზე -html ელემენტებთან მუშაობა ლექციაზე განხილული იქნება, თუ რა მეთოდების განხორციელებაა შესაძლებელი მასივზე და სტრინგზე. ამავე ლექციაზე განხილული იქნება document object model (dom) – როგორ არის შესაძლებელი javascriptიდან html ელემენტებზე დინამიკური ზემოქმედება | DOM String Array |
| 20. | მინი პროექტი (js) | |
| 21. | -dom მანიპულაციები – მაგალითების გაგრძელება -event-ებთან მუშაობა -navbar responsive javascript -strict mode dom მანიპულაციების განხილვა (გაგრძელება). ივენთების დამატება, როდესაც ვუსმენთ, რა აქვს გაკეთებული მომხმარებელს – მაგალითად, თუ მომხმარებელი დააწვება კონკრეტულ ღილაკს, რა გვინდა, რომ მოხდეს; ბურგერის კოდის ფუნქციონალის დამატება. | Events DOM |
| 22. | ლექციაზე განხილული იქნება slider -ის აწყობა დებაგინგი | Slider დებაგინგი |
| 23. | ლექციაზე განხილული იქნება load more ღილაკის დამატება და აკორდიონის აწყობა | Load more button |
| 24. | მინი პროექტი | |
| 25. | -Ajax -Xml http request; -Fetch ლექციაზე განხილული იქნება, თუ რა არის ajax – სერვერიდან ინფორმაციის წამოღების საკითხი. მსმენელები შეისწავლიან ლინკიდან ინფორმაციის წამოღების ორ ვარიანტს საშინაო დავალება | Ajax Fetch |
| 26. | -ინფორმაციის წამოღება api-დან -async-await სინტაქსი ლექციაზე შესრულდება კონკრეტული მაგალითი, გამზადებული სერვერიდან პოსტების წამოღება , პოსტის დამატების/წაშლის ფუნქციონალის დამატება საშინაო დავალება | Api Async-await |
| 27. | -this ცვლადის მნიშვნელობის, კლასების განხილვა -Promises -prototype-ები -classe-ები -this keyword -საიტის დაჰოსტვა საფინალო პროექტების კრიტერიუმების განხილვა. პრაქტიკული მაგალითები | This keyword Promises Classes |
| 28. | საკონსულტაციო შეხვედრა | |
| 29. | საკონსულტაციო შეხვედრა | |
| 30. | პროექტების პრეზენტაცია |