CSS

გვერდის იერსახე: ფერები, შრიფტები, განლაგება Flexbox-ით და Grid-ით, ანიმაციები და რესპონსიული დიზაინი.

👑 Pro4 დონე40 მოდული200 თავიმალე

რას ისწავლი

სელექტორები, ფერები და ტიპოგრაფია
განლაგება Flexbox-ით და Grid-ით
რესპონსიული დიზაინი და ანიმაციები

სილაბუსი

დამწყები10 მოდული · 50 თავი

1CSS-ის საფუძვლები0 / 5

რა არის CSSმალესტილის მიერთება გვერდზემალეწესის აგებულებამალეკომენტარები CSS-შიმალებრაუზერის ხელსაწყოებიმალექვიზი: CSS-ის საფუძვლებიმალე

2სელექტორები0 / 5

ტეგის სელექტორიმალეკლასის სელექტორიმალეid სელექტორიმალესელექტორების დაჯგუფებამალეშთამომავლის სელექტორიმალექვიზი: სელექტორებიმალე

3ფერები0 / 5

ფერის სახელებიმალეHEX ფერებიმალეRGB და HSLმალეგამჭვირვალობამალეფონის ფერიმალექვიზი: ფერებიმალე

4ტექსტის სტილი0 / 5

შრიფტის ოჯახიმალეშრიფტის ზომამალესისქე და სტილიმალეტექსტის გასწორებამალეხაზის სიმაღლემალექვიზი: ტექსტის სტილიმალე

5ყუთის მოდელი0 / 5

რა არის ყუთის მოდელიმალეშიდა დაშორება paddingმალეჩარჩო borderმალეგარე დაშორება marginმალეbox-sizingმალექვიზი: ყუთის მოდელიმალე

6ზომის ერთეულები0 / 5

პიქსელიმალეპროცენტიმალეem და remმალეvw და vhმალერომელი ერთეული როდისმალექვიზი: ზომის ერთეულებიმალე

7ჩვენების ტიპები0 / 5

block და inlineმალეinline-blockმალეელემენტის დამალვამალეvisibilityმალეoverflowმალექვიზი: ჩვენების ტიპებიმალე

8ფონი0 / 5

ფონის სურათიმალეგამეორება და პოზიციამალეფონის ზომამალეგრადიენტებიმალერამდენიმე ფონიმალექვიზი: ფონიმალე

9ჩარჩოები და ჩრდილები0 / 5

ჩარჩოს სტილიმალემომრგვალებული კუთხეებიმალეყუთის ჩრდილიმალეტექსტის ჩრდილიმალეoutlineმალექვიზი: ჩარჩოები და ჩრდილებიმალე

10კასკადი0 / 5

როგორ მუშაობს კასკადიმალესპეციფიკურობამალემემკვიდრეობამალე!importantმალესტილის ორგანიზებამალექვიზი: კასკადიმალე

პროექტი: პროფილის ბარათიმალე

ლამაზი ბარათი ფოტოთი, ტექსტით და ღილაკებით: ფერები, შრიფტები და ყუთის მოდელი.

საშუალო10 მოდული · 50 თავი

1Flexbox-ის საფუძვლები0 / 5

flex კონტეინერიმალემიმართულებამალეjustify-contentმალეalign-itemsმალედაშორება gapმალექვიზი: Flexbox-ის საფუძვლებიმალე

2Flexbox სიღრმეში0 / 5

flex-grow, shrink და basisმალეგადატანა flex-wrapმალეalign-selfმალერიგი orderმალეტიპური განლაგებები flexbox-ითმალექვიზი: Flexbox სიღრმეშიმალე

3პოზიციონირება0 / 5

static და relativeმალეabsoluteმალეfixedმალეstickyმალეz-indexმალექვიზი: პოზიციონირებამალე

4Grid-ის საფუძვლები0 / 5

grid კონტეინერიმალესვეტები და რიგებიმალეfr ერთეულიმალედაშორება ბადეშიმალეელემენტის განთავსებამალექვიზი: Grid-ის საფუძვლებიმალე

5Grid სიღრმეში0 / 5

grid-template-areasმალეrepeat და minmaxმალეauto-fit და auto-fillმალეიმპლიციტური ბადემალეgrid თუ flexboxმალექვიზი: Grid სიღრმეშიმალე

6რესპონსიული დიზაინი0 / 5

viewportმალეmedia queriesმალეჯერ ტელეფონიმალეგარდატეხის წერტილებიმალერესპონსიული ტიპოგრაფიამალექვიზი: რესპონსიული დიზაინიმალე

7ფსევდოკლასები0 / 5

hover და focusმალეfirst, last და nth-childმალე:notმალეფორმის მდგომარეობებიმალეfocus-visibleმალექვიზი: ფსევდოკლასებიმალე

8ფსევდოელემენტები0 / 5

before და afterმალეპირველი ასო და ხაზიმალეplaceholder და selectionმალესიის მარკერიმალედეკორაცია ფსევდოელემენტებითმალექვიზი: ფსევდოელემენტებიმალე

9გადასვლები0 / 5

transitionმალედროის ფუნქციებიმალერა თვისებები ანიმირდებამალეhover ეფექტებიმალეგადასვლების წარმადობამალექვიზი: გადასვლებიმალე

10გარდაქმნები0 / 5

გადაადგილება translateმალეrotate და scaleმალეtransform-originმალე3D გარდაქმნებიმალეცენტრირების ხერხებიმალექვიზი: გარდაქმნებიმალე

პროექტი: რესპონსიული ლენდინგიმალე

გვერდი, რომელიც ტელეფონზეც და კომპიუტერზეც კარგად ჩანს: flexbox, grid და media queries.

მოწინავე10 მოდული · 50 თავი

1ანიმაციები0 / 5

keyframesმალეანიმაციის თვისებებიმალეანიმაციის მართვამალეანიმაცია გადახვევაზემალემოძრაობის შემცირებამალექვიზი: ანიმაციებიმალე

2CSS ცვლადები0 / 5

ცვლადის გამოცხადებამალეvar და სათადარიგო მნიშვნელობამალეცვლადების ხილვადობამალეთემები ცვლადებითმალეცვლადები და JavaScriptმალექვიზი: CSS ცვლადებიმალე

3თანამედროვე სელექტორები0 / 5

ატრიბუტის სელექტორებიმალეკომბინატორებიმალე:is და :whereმალე:hasმალესპეციფიკურობის მართვამალექვიზი: თანამედროვე სელექტორებიმალე

4ტიპოგრაფია0 / 5

ვებ-შრიფტებიმალე@font-faceმალეცვლადი შრიფტებიმალევერტიკალური რიტმიმალეტექსტის გადატანა და მოჭრამალექვიზი: ტიპოგრაფიამალე

5თანამედროვე განლაგება0 / 5

aspect-ratioმალეclamp, min და maxმალეcontainer queriesმალეsubgridმალელოგიკური თვისებებიმალექვიზი: თანამედროვე განლაგებამალე

6სტილის არქიტექტურა0 / 5

BEMმალეutility კლასებიმალეკომპონენტური სტილიმალეკასკადის შრეებიმალესტილის ფაილების სტრუქტურამალექვიზი: სტილის არქიტექტურამალე

7Sass0 / 5

ცვლადები და ჩადგმამალეmixinმალეფუნქციები Sass-შიმალენაწილები და მოდულებიმალეგვჭირდება თუ არა პრეპროცესორიმალექვიზი: Sassმალე

8ვიზუალური ეფექტები0 / 5

object-fitმალეfilterმალეbackdrop-filterმალეშერევის რეჟიმებიმალეclip-path და maskმალექვიზი: ვიზუალური ეფექტებიმალე

9ფორმების სტილი0 / 5

ველების სტილიმალეღილაკების სტილიმალეcheckbox და radioმალეselect-ის სტილიმალეშემოწმების მდგომარეობებიმალექვიზი: ფორმების სტილიმალე

10მუქი რეჟიმი0 / 5

prefers-color-schemeმალეფერის ტოკენებიმალეcolor-schemeმალეთემის გადამრთველიმალეკონტრასტის შემოწმებამალექვიზი: მუქი რეჟიმიმალე

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

ღილაკების, ბარათების და ფორმების ნაკრები ღია და მუქი თემით, ცვლადებზე აგებული.

ექსპერტი10 მოდული · 50 თავი

1რენდერი0 / 5

როგორ ხატავს ბრაუზერიმალეlayout, paint და compositeმალეreflow-ის თავიდან აცილებამალეwill-change და containმალეcontent-visibilityმალექვიზი: რენდერიმალე

2სტილის წარმადობა0 / 5

სელექტორების სიჩქარემალეკრიტიკული CSSმალეგამოუყენებელი CSS-ის მოცილებამალეშრიფტების ჩატვირთვამალეანიმაციების წარმადობამალექვიზი: სტილის წარმადობამალე

3რთული განლაგებები0 / 5

ჟურნალის განლაგებამალეmasonry განლაგებამალეგანლაგება და ხელმისაწვდომობამალეგანლაგების ანიმაციამალეგანლაგების გამართვამალექვიზი: რთული განლაგებებიმალე

4სტილის მიდგომები0 / 5

CSS Modulesმალეstyled კომპონენტებიმალეzero-runtime მიდგომამალეutility-first ფრეიმვორკებიმალემიდგომის არჩევამალექვიზი: სტილის მიდგომებიმალე

5დიზაინის ტოკენები0 / 5

ტოკენების იერარქიამალეფერის სისტემებიმალედაშორებების სკალამალეტოკენების ავტომატიზაციამალემრავალბრენდიანი თემებიმალექვიზი: დიზაინის ტოკენებიმალე

6ახალი შესაძლებლობები0 / 5

@propertyმალეგადახვევით მართული ანიმაციამალეview transitionsმალეanchor positioningმალეჩაშენებული ჩადგმამალექვიზი: ახალი შესაძლებლობებიმალე

7ბეჭდვა და მოწყობილობები0 / 5

ბეჭდვის სტილებიმალეგვერდის გაწყვეტამალემაღალი სიმკვრივის ეკრანებიმალემომხმარებლის პარამეტრებიმალეforced colorsმალექვიზი: ბეჭდვა და მოწყობილობებიმალე

8ხელმისაწვდომი სტილი0 / 5

ფოკუსის სტილიმალემოძრაობის პარამეტრებიმალეტექსტის გადიდებამალედამალვა ხელმისაწვდომადმალეშეხების სამიზნეებიმალექვიზი: ხელმისაწვდომი სტილიმალე

9ხელსაწყოები0 / 5

PostCSSმალეautoprefixerმალეstylelintმალევიზუალური რეგრესიის ტესტებიმალებრაუზერების მხარდაჭერის მართვამალექვიზი: ხელსაწყოებიმალე

10დიდი კოდბაზა0 / 5

სტილი დიდ პროექტშიმალემოძველებული CSS-ის რეფაქტორინგიმალესპეციფიკურობის ომებიმალესტილის დოკუმენტაციამალესტილის მიმოხილვამალექვიზი: დიდი კოდბაზამალე

პროექტი: თემირებადი UI ბიბლიოთეკამალე

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