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
- JavaScript-ga kirishJavaScript nima?
- JavaScript nima qila oladi?
- JavaScript nima qila olmaydi?
- JavaScript-ni noyobligi nimada?
- JavaScript ni HTML da ishlatish usullariInternal Javascript
- External JavaScript
- Hello World
- O’zgaruvchilarO’zgaruvchilar haqida tushuncha.
- JavaScriptda o’zgaruvchilar turlari. Primitive va reference tiplar
- undefined va null
- String tipi. Satrlar bilan ishlash
Day 2
- Number tipiSonlarni satrga o’girish va satrdan songa o’girish
- Sonlar bilan ishlovchi funksiyalar
- Boolean tipi. if shart operatori. switch operatoriBoolean tipi
- if shart operatori
- Mantiqiy ifodalar
Day 3
- Sikllar.
- for
- while
- do while
- for of
- Massivlar
Day 4
- FunksiyalarFunksiyalarni e’lon qilish
- scope haqida tushuncha
- closure
- Rekursiv funksiyalar
- 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
- KirishTailwindcss haqida
- O’rnatish
- Boshlang’ich tushunchalarUtility first
- Layout - sahifa strukturasi bilan ishlashcontainer
- flexbox
- grid
Day 2
- Masofalar (Spacing)Padding
- Margin
- Space between
- O’lchamlarwidth, height,
- max-width, max-height
- Tipografiyafont size
- font weight
- Harflar orasidagi masofa
- Qatorlar orasidagi masofa
- Matnlar bilan ishlash
Day 3
- Orqa fon. Background
- Effektlar va animatsiyalar
Day 4
- Moslashuvchan design. Responsive design
- Funksiyalar. Tailwindcss ni moslashtirish. Dark mode
Day 5
Practice
Week 8
Practice
VueJS
Week 9
Day 1
- KirishVueJS haqida
- VueJS ni o’rnatish
- Declarative rendering
- Sikllar va mantiqiy ifodalar. Conditionals and loops
- HTML bilan ishlash. Template syntaxInterpolyatsiya
- Direktivalar
- Atributlar
- JavaScript ifodalarni shablonda ishlatish
Day 2
- Computed property va watcher larComputed property va metodning farqi. Keshlash
- Computed va watcherlar
- Computed setter lar
- Class va style larni bind qilishObject syntax
- Array syntax
- Inline stillarni bind qilish
Day 3
- v-if va v-show
- v-for. Sikllar
Day 4
Componentlar
Day 5
Animatsiyalar va transition lar
Week 10
Day 1
- Vue-Router. Vue-CLIVue-CLI orqali proyekt yaratish
- vue router yordamida sahifalar yaratish.
Day 2
Vuex
- State management haqida
- Global state ni Vuex da saqlash
Day 3
- Mocking APIAPI ni mock qilish haqida.
- MirageJS
Day 4
Version control system: GIT
Day 5
Practice
Week 11
Practice