fbpx

ვებ პროგრამირება FRONTEND (HTML & CSS)-ის კურსის აღწერა

ვებპროგრამირება Front-End (HTML/CSS)-ის კურსის აღწერა

ვებპროგრამირებაში მნიშვნელოვანი ადგილი უკავია HTML-ს (Hyper Text Markup Language), რენდერის (მარკაპის) ენას, რომელსაც დღეისთვის არსებული საიტების აბსოლუტური უმრავლესობა იყენებს, როგორც მობილურიაპლიკაციებისთვის, ისე დესკტოპ-პროგრამების შესაქმნელად. HTML  წარმოადგენს გვერდის ჩონჩხს, რომლისსტრუქტურის გასალამაზებლად (სტილების მისანიჭებლად) გამოიყენება სტილის ენა – CSS.

კურსის განმავლობაში დეტალურად გაეცნობით  HTML-ის ძირითადად სტრუქტურას და CSS-ის სტილებს (სილაბუსის მიხედვით). პრაქტიკული დავალებების საშუალებით შეისწავლით მათ ერთობლივ გამოყენებას სხვადასხვა ტიპისა და სირთულის ვებსაიტების შესაქმნელად. დავალებების შესრულება მოხდება როგორც სალექციო საათებში (მენტორთან ერთად), ასევე დამოუკიდებლად, არასალექციო პერიოდში (გავლილი მასალის მიხედვით). თითოეული ლექციის შემდეგ მიიღებთ საჭირო დოკუმენტებს დავალებების მოსამზადებლად.

კურსის ბოლოს სტუდენტი შეასრულებს პროექტს დიზაინის მიხედვით, რომელიც მორგებული იქნება დესკტოპის, პლანშეტისა და მობილურის რეზოლუციებზე.

ვებ პროგრამირების FRONTEND (HTML & CSS) კურსის მენტორები

სალომე გაჩეჩილაძე

დაამთავრა თბილისის სახელმწიფო უნივერსიტეტი, კომპიუტერული მეცნიერებების ფაკულტეტი. ამჟამად სწავლობს მაგისტრატურაზე, ინფორმაციული ტექნოლოგიების მიმართულებით, ამავე უნივერსიტეტში. 

2017 წლიდან მუშაობს frontend დეველოპმენტის სფეროში. 2018 წლიდან ჩართულია სხვადასხვა საგანმანათლებლო პროექტებში: თანატოლგანმანათლებელი, ლექტორი, კურსის კურატორი.

2019 წლიდან დასაქმებულია RSM Georgia Solutions-ში საცალო და სასაწყობე გადაწყვეტილებების სპეციალისტად, ასევე რეპორტინგის ანალიტიკოსად. 

2020 წლიდან, თსუ-ს საბაკალავრო პროგრამაზე, ატარებს ვოქრშოპებს ვებ დეველოპემენტის მიმართულებით, ხოლო 2021 წლიდან კრეატიული ტექნოლოგიების ცენტრსა და პროფესარეაში ხელმძღვანელობს ვებ დეველოპმენტის კურსებს.

2018 წელს მონაწილეობა მიიღო აიესეკის გაცვლით პროგრამაში, იტალიაში ეხმარებოდი სტუდენტებს ინგლისური ენის შესწავლასა და ამ მხრივ კომპლექსების დაძლევაში (სკოლა: ITCG Baggi).

თამარ ჭყოიძე

სწავლობდა Tbilisi BootCamp-ში, Front-End ვებ პროგრამისტის სპეციალობაზე. გაიარა HTML/CSS, JAVASCRIPT, REACT.JS თეორიული და პრაქტიკული კურსები. ასევე გავლილი აქვს Udemy-ს კურსები.

პროექტში veyvey მონაწილეობას იღებდა, როგორც მარკაპერი. Tbilisi BootCamp-ში კითხულობდა Front-End-ის კურსს. ამჟამად არის ციფრული ინდუსტრიის აკადემიის მენტორი.

ვებ პროგრამირების კურსის სილაბუსი

1 ლექცია:

  • front end  დეველოპმენტის კომპონენტების განხილვა
  • html5 დოკუმენტის სტრუქტურა
  • კოდის ედიტორის გარჩვეა
  • პროექტისათვის დოკუმენტების ორგანიზება
  • html ტეგების დამატება 
  • დავალება

2 ლექცია:

  • css ფაილების დაკავშირება
  • css სელექტორების თვისებები და მათი მნიშვნელობის განხილვა
  • html ატრიბუტები
  • აბსოლუტური და რელატიური მისამართები
  • adobe xd – ის ძირითადი ხელსაწყოები
  • chrome devtools
  • დავალება

3 ლექცია:

  • html მნიშვნელობის მქონე ტეგები ვებ გვერდის სტრუქტურისთვის
  • display property – block/inline/inline-block/none
  • ბრაუზერის სტილების განულება
  • რუკის დამატება
  • დავალება

4 ლექცია:

  • css ბოქს მოდელი
  • html / css კომენტარი
  • ფონტები და შესაბამისი ფორმატები ვებისთვის
  • ფონტების სტილების/ ზომების მართვა
  • ტექსტის ფორმატირება
  • საფიანალო პროექტზე მუშაობის დაწყება
  • დავალება

5 ლექცია:

  • git-ის შესავალი / version control system
  • github – ზე რეგისტრაცია
  • რეპოზიტორის შექმნა
  • github desktop-ის განხილვა
  • პროექტის ატვირთვა / ჩამოტვირთვა
  • ცვლილებების შეტანა
  • git commands
  • აბსოლუტური მისამართი
  • დავალება

6 ლექცია:

  • flexbox – ის გარჩევა
  • fontawesome  / icomon;
  • ფსევდო კლასები 
  • border radius
  • კოდის ვალიდაცია
  • საფინალო პროექტის მიმოხილვა
  • დავალება

7 ლექცია:

  • visual studio code – ედიტორის გარჩევა
  • vs code extension-ების განხილვა
  • პოზიციონირების განსაზღვრა – position property – static / absolute / relative / fixed / sticky
  • transform property
  • დავალება

8 ლექცია:

  • hover ეფექტები
  • transition property
  • keyframe animations
  • ჩრდილი – box-shadow / text-shadow
  • background image property
  • საფინალო პროექტის მიმოხილვა
  • დავალება

9 ლექცია:

  • ვებ გვერდის რესპონსიული წყობა
  • css @media-ს გამოყენება 
  • breakpoints in responsive web design 
  • responsive checker
  • დავალება

10 ლექცია:

  • css grid layout module
  • css ცვლადები
  • ფსევდო ელემენტები 
  • დამატებითი პრეფიქსერები – autoprefixer css
  • საფინალო პროექტის მიმოხილვა
  • დავალება

11 ლექცია:

  • html form elements
  • meta ტეგები ბრაუზერებისთვის
  • სოციალური ქსელებისთვის ინფორმაციის ოპტიმიზაცია
  • დავალება

12 ლექცია:

  • საფინალო პროექტის მიმოხილვა 
  • ჯავასკრიპტის სინტაქსის განხილვა 
  • ცვლადები 
  • ციკლები 
  • პირობითი გამოსახულება
  • ობიექტები
  • მასივები
  • დავალება

13 ლექცია:

  • ფუნქციები
  • რა არის dom? 
  • dom მანიპულაციები ჯავასკრიპტში 
  • html ელემენტებთან მუშაობა
  • ჯავასკრიპტის ფაილების დამატება საიტზე
  • burger bar ფუნქციონალის დამატება
  • დავალება

14 ლექცია:

საფინალო პროექტების პრეზენტაცია