Front end

HTML

Week 1

Day 1. Boshlang'ich tushunchalar

• Veb saytlar va .html kengaytmasi
• Teglar
• Teglarning atributlari
• Inline va block elementlar
• HTML da bo'sh joy
• Rasm joylashtirish
• HTML dokument strukturasi

Day 2. HTML linklar

• <a> tegi va uning atributlari
• Relative vs absolute path
• Bir nechta sahifalarni bir biriga bog'lash
• Sahifa ichida ichki navigatsiya yaratish. Smooth scroll.
• Telefon raqam va email uchun havola yaratish
• Fayllarni yuklab olish uchun link yaratish

Day 3. Jadvallar va ro'yxatlar

• Jadval teglari
• Qatorlar va ustunlarni birlashtirish
• Ordered list
• Unordered list
• Description list
• Ro'yxatlarni ichma-ich joylashtirish

Homework

Homework 1

Homework 2

Day 4. Formalar

• <form> tegi va uning atributlari
• Forma elementlari
• input elementlari va ularning turlari
• input elementlarining atributlari

Day 5. Media. Video va audio

• <video> tegi
• <audio> tegi
• Video platformalardan video joylashtirish (youtube, vimeo va.h.k)

CSS

Week 2

Day 1. Boshlang'ich tushunchalar

• CSS nima
• CSS ni HTMLga bog'lash usullari
• CSS sintaksisi. Selectorlar

Day 2. Box model

• CSS box model
• <div>, <span> teglari va class lar
• Semantik teglar

Day 3. Tipografiya

• Veb saytda tipografiyaning ahamiyati
• Matn o'lchami, rangi va qalinligi
• Matnga font berish
• Yangi fontlarni e'lon qilish
• Ranglar bilan ishlash
• Fontlarni internetdan yuklab olish (Google fonts)

Day 4. Linklar, ro'yxatlar va jadvallar

• Linklarga stil berish
• Ro'yxatlarga stil berish
• Jadvallarga stil berish

Day 5. Position, transform

• Absolute position
• Relative position
• Fixed position
• translate
• scale, skew...

Week 3

Day 1. Selector, pseudo class, pseudo element

• Selector larning turlari
• Combinator lar
• pseudo class
• pseudo element

Day 2. Rasmlar bilan ishlash. Gradient va box-shadow

• Moslashuvchan rasmlar
• picture, source va img teglarini birgalikda ishlatish
• Rasmlarga CSS orqali effektlar berish
• CSS object-fit xususiyati
• Background images

Day 3. Transition, animation

• Transition orqali animatsiya qilish
• Animatsiya davomiyligi funksiyalari va cubic-bezier funksiyasi
• CSS keyframe animation

Day 4. Float, Flexbox

• Float xususiyati va uning tadbiqlari
• Flexbox orqali layout larni ishlab chiqish

Day 5. Responsive design

• Responsive design ga kirish. Meta teglarni qo'shish
• Media query. Ekran o'lchamiga qarab sahifani moslashtirish
• Grid tizimidan foydalanish

SASS

Week 4

Day 1

• Boshlang’ich tushunchalar. O'rnatishSASS nima va nega kerak? Preprocessor nima?
• SASS ni o’rnatish
• SASS sintaksisi

Day 2

• O'zgaruvchilar. Interpolyatsyia
• Ichma-ich yozish. Nesting

Day 3

• Partials, modules
• Mixin lar

Day 4

• Extend/Inheritance
• Operatorlar

Day 5

Practice and review

Practice

Week 5

5 projects in 5 days

2 in team 3 indvidually

ml6g

JavaSbcript

Week 6

Day 1

1. JavaScript-ga kirishJavaScript nima?
2. JavaScript nima qila oladi?
3. JavaScript nima qila olmaydi?
4. JavaScript-ni noyobligi nimada?
5. JavaScript ni HTML da ishlatish usullariInternal Javascript
6. External JavaScript
7. Hello World
8. O’zgaruvchilarO’zgaruvchilar haqida tushuncha.
9. JavaScriptda o’zgaruvchilar turlari. Primitive va reference tiplar
10. undefined va null
11. String tipi. Satrlar bilan ishlash

Day 2

1. Number tipiSonlarni satrga o’girish va satrdan songa o’girish
2. Sonlar bilan ishlovchi funksiyalar
3. Boolean tipi. if shart operatori. switch operatoriBoolean tipi
4. if shart operatori
5. Mantiqiy ifodalar

Day 3

1. Sikllar.
2. for
3. while
4. do while
5. for of
6. Massivlar

Day 4

1. FunksiyalarFunksiyalarni e’lon qilish
2. scope haqida tushuncha
3. closure
4. Rekursiv funksiyalar
5. Obyektlar

Day 5. DOM bilan ishlash

• Chrome developer tools
• DOM tree
• getElement*, querySelector
• HTML elementlar atributlari, stillarini JavaScript orqali o'zgartirish

Day 6 - 7. EcmaScript

• Desstruktirizatsiya
• Arrow function lar
• let, const.
• let va var ning farqi
• Rest va spread
• class larSintaksis
• Vorislik (Inheritance)
• Statik maydonlar va metodlar

Day 8 - 9

Practice

Day 10

Webpack

TailwindCSS

Week 7

Day 1

Webpack. TailwindCSS

1. KirishTailwindcss haqida
2. O’rnatish
3. Boshlang’ich tushunchalarUtility first
4. Layout - sahifa strukturasi bilan ishlashcontainer
5. flexbox
6. grid

Day 2

1. Masofalar (Spacing)Padding
2. Margin
3. Space between
4. O’lchamlarwidth, height,
5. max-width, max-height
6. Tipografiyafont size
7. font weight
8. Harflar orasidagi masofa
9. Qatorlar orasidagi masofa
10. Matnlar bilan ishlash

Day 3

1. Orqa fon. Background
2. Effektlar va animatsiyalar

Day 4

1. Moslashuvchan design. Responsive design
2. Funksiyalar. Tailwindcss ni moslashtirish. Dark mode

Day 5

Practice

Week 8

Practice

VueJS

Week 9

Day 1

1. KirishVueJS haqida
2. VueJS ni o’rnatish
3. Declarative rendering
4. Sikllar va mantiqiy ifodalar. Conditionals and loops
5. HTML bilan ishlash. Template syntaxInterpolyatsiya
6. Direktivalar
7. Atributlar
8. JavaScript ifodalarni shablonda ishlatish

Day 2

1. Computed property va watcher larComputed property va metodning farqi. Keshlash
2. Computed va watcherlar
3. Computed setter lar
4. Class va style larni bind qilishObject syntax
5. Array syntax
6. Inline stillarni bind qilish

Day 3

1. v-if va v-show
2. v-for. Sikllar

Day 4

Componentlar

Day 5

Animatsiyalar va transition lar

Week 10

Day 1

1. Vue-Router. Vue-CLIVue-CLI orqali proyekt yaratish
2. vue router yordamida sahifalar yaratish.

Day 2

Vuex

1. State management haqida
2. Global state ni Vuex da saqlash

Day 3

1. Mocking APIAPI ni mock qilish haqida.
2. MirageJS

Day 4

Version control system: GIT

Day 5

Practice

Week 11

Practice

Havolalar