Mentora — Learn, Grow, Succeed

Frontend Dasturlash Kursi

Zamonaviy web-dasturlashni noldan boshlab o'rganing. HTML, CSS, JavaScript va eng so'ngi texnologiyalar.

50+ Darslar

100+ Soat

Sertifikat

Frontend Dasturlash Qiziqarli Faktlari

Webning kelib chiqishi

1991 yil Tim Berners-Lee

World Wide Web 1991 yilda Tim Berners-Lee tomonidan ixtiro qilingan. Birinchi veb-sahifa faqat matn va havolalardan iborat edi.

Birinchi brauzer: WorldWideWeb
1993 yilda 600 dan ortiq veb-sahifa
Hozirgi kunda 1.7 milliard+ sayt

CSSning rivojlanishi

1996 yil Håkon Wium Lie

CSS birinchi marta 1996 yilda taklif qilingan. U veb-sahifalarni chiroyli qilish uchun yaratilgan.

CSS1 (1996), CSS2 (1998), CSS3 (2011)
Flexbox (2012), Grid (2017)
Hozirda CSS4 ishlanmoqda

JavaScript tarixi

1995 yil Brendan Eich

JavaScript atigi 10 kun ichida yaratilgan! U dastlab Mocha deb nomlangan, keyin LiveScript, nihoyat JavaScript bo'lgan.

1997 yilda ECMA standardi qabul qilindi
ES6/ES2015 katta o'zgarishlar keltirdi
Hozirgi kunda dunyodagi eng mashhur til

🚀 Frameworklar davri

2010-yillar Facebook, Google

Zamonaviy frontend frameworklar 2010-yillarda paydo bo'la boshladi. React, Angular, Vue katta inqilob keltirdi.

jQuery (2006) - birinchi mashhur kutubxona
Angular (2010), React (2013), Vue (2014)
Component-based development

📚 HTML Darslari - Boshlang'ichlar Uchun

HTML ni o'rganish endi juda oson! Har bir darsda amaliy misollar va tushuntirishlar mavjud.

📖

1-Dars: HTML Nima?

🕐 10 daqiqa 🎯 Juda oson

HTML - bu veb-sahifaning "skeleti". U qanday ishlashini o'rganamiz.

📝 Nimalarni o'rganasiz:

HTML nima?
Veb-sahifa tuzilmasi
Asosiy teglar

💡 Misol:


                                    <h1>Salom Dunyo!</h1>

✏️

2-Dars: Matnlarni Yozish

🕐 15 daqiqa 🎯 Juda oson

Matnlarni formatlash, sarlavhalar va paragraflar yaratish.

📝 Nimalarni o'rganasiz:

Sarlavhalar (h1-h6)
Paragraflar (p)
Matnni belgilash

💡 Misol:


                                    <p>Bu mening <strong>paragrafim</strong>.</p>

📋

3-Dars: Ro'yxatlar Yaratish

🕐 12 daqiqa 🎯 Juda oson

Turli xil ro'yxatlar yaratish: raqamli, nuqtali, ichki ro'yxatlar.

📝 Nimalarni o'rganasiz:

Raqamli ro'yxat (ol)
Nuqtali ro'yxat (ul)
Ichki ro'yxatlar

💡 Misol:


                                    <ul><li>Olma</li></ul>

🖼️

4-Dars: Rasmlarni Qo'yish

🕐 15 daqiqa 🎯 Juda oson

Web-sahifaga rasm qo'shish va uni to'g'ri sozlash.

📝 Nimalarni o'rganasiz:

img tegi
src va alt atributlari
Rasm o'lchamlari

💡 Misol:


                                    <img src="rasm.jpg" alt="Tavsif">

🔗

5-Dars: Havolalar Yaratish

🕐 18 daqiqa 🎯 Juda oson

Sahifalar orasida havolalar yaratish va navigatsiya qurish.

📝 Nimalarni o'rganasiz:

a tegi
href atributi
Ichki va tashqi havolalar

💡 Misol:


                                    <a href="https://google.com">Google</a>

📊

6-Dars: Jadvallar

🕐 20 daqiqa 🎯 Juda oson

Ma'lumotlarni jadval shaklida ko'rsatish.

📝 Nimalarni o'rganasiz:

table, tr, td teglari
Sarlavha qatori (th)
Yacheykalarni birlashtirish

💡 Misol:


                                    <table><tr><td>Ma'lumot</td></tr></table>

📝

7-Dars: Formalar

🕐 25 daqiqa 🎯 Oson

Foydalanuvchidan ma'lumot olish uchun formalar yaratish.

📝 Nimalarni o'rganasiz:

form, input teglari
Matn, parol, email maydonlari
Tanlash elementlari

💡 Misol:


                                    <input type="text" placeholder="Ism">

🆕

8-Dars: Zamonaviy HTML5

🕐 20 daqiqa 🎯 O'rta

HTML5 ning yangi imkoniyatlari va semantic teglar.

📝 Nimalarni o'rganasiz:

Sarlavha (header)
Menyu (nav)
Asosiy qism (main)
Pastki qism (footer)

💡 Misol:


                                    <header><h1>Sayt sarlavhasi</h1></header>

🎯

🏆 Amaliy Loyiha

🕐 30 daqiqa 🎯 Barchasi birga

🎉 Barcha bilimlarni birlashtirib, o'zingizning birinchi veb-sahifangizni yarating!

🎯 Loyiha tarkibi:

✅ Shaxsiy veb-sahifa
✅ Sarlavha va menyu
✅ O'zingiz haqingizda
✅ Kontakt ma'lumotlari
✅ Rasmlar va havolalar

🏆 Siz olasiz:

To'liq ishlaydigan veb-sahifa
Barcha kodlar bilan tanishish
Keyingi darslar uchun tayyorgarlik

🎓 Darslarni tugatgandan so'ng

📋

HTML asoslari

💻

Birinchi sahifa

🎯

CSSga tayyor

💻 VS Code - Dasturchilarning Eng Yaxshi Tanlovi

Visual Studio Code (VS Code)

Microsoft tomonidan Eng mashhur kod editör

VS Code - bu bepul, ochiq kodli va juda kuchli kod editör. U web-dasturchilar uchun eng yaxshi vositalardan biri hisoblanadi.

🚀

Tezlik va Samaradorlik

IntelliSense avtomatik to'ldirish, tez kod yozish, xatoliklarni aniqlash va boshqa ko'plab imkoniyatlar.

🔧

Kengaytmalar (Extensions)

15000+ dan ortiq kengaytmalar: HTML, CSS, JavaScript, React, va boshqa texnologiyalar uchun.

🎨

Shaxsiylashtirish

Rangli temalar, shriftlar, qisqartmalar va ish maydonini o'zingizga moslashtiring.

🌍

Multi-platform

Windows, macOS, Linux da ishlaydi. Istalgan operatsion tizimda bir xil tajriba.

🔍

Git Integratsiyasi

Qulay Git versiyalarni boshqarish, GitHub bilan ishlash, kodlarni solishtirish.

🐛

Debugging

Xatoliklarni topish va tuzatish uchun kuchli debugging vositalari.

🎯 Nega VS Code tanlash kerak?

Bepul - Hech qanday to'lov kerak emas
Ochiq kodli - Hamma ko'rib, taklif berishi mumkin
Yengil - Kompyuterni yuklamaydi
Doimiy yangilanadi - Yangi imkoniyatlar qo'shiladi
Katta jamoa - Yordam topish oson

📦 Web-dasturlash uchun zarur kengaytmalar:

Live Server

Veb-sahifani real vaqtda ko'rish

Prettier

Kodni avtomatik formatlash

ESLint

Xatoliklarni tekshirish

HTML CSS Support

CSS classlarini avto-tugatish

Interaktiv Kod Editör

<!DOCTYPE html>
<html lang="uz">
<head>
    <meta charset="UTF-8">
    <title>Mening birinchi sahifam</title>
</head>
<body>
    <h1>Salom, Dunyo!</h1>
    <p>Bu mening birinchi HTML sahifam.</p>
</body>
</html>

Natija (Preview)

Bilimlarni Tekshirish

Frontend Testi

10 savol 15 daqiqa

Frontend dasturlash bo'yicha bilimlaringizni tekshiring. HTML, CSS, JavaScript va zamonaviy texnologiyalar haqida savollar.

Batafsil natijalar Sertifikat Qayta topshirish

Frontend Dasturlash Kursi

Frontend Dasturlash Qiziqarli Faktlari

Webning kelib chiqishi

CSSning rivojlanishi

JavaScript tarixi

🚀 Frameworklar davri

📚 HTML Darslari - Boshlang'ichlar Uchun

1-Dars: HTML Nima?

2-Dars: Matnlarni Yozish

3-Dars: Ro'yxatlar Yaratish

4-Dars: Rasmlarni Qo'yish

5-Dars: Havolalar Yaratish

6-Dars: Jadvallar

7-Dars: Formalar

8-Dars: Zamonaviy HTML5

🏆 Amaliy Loyiha

🎓 Darslarni tugatgandan so'ng

💻 VS Code - Dasturchilarning Eng Yaxshi Tanlovi

Visual Studio Code (VS Code)

Tezlik va Samaradorlik

Kengaytmalar (Extensions)

Shaxsiylashtirish

Multi-platform

Git Integratsiyasi

Debugging

🎯 Nega VS Code tanlash kerak?

📦 Web-dasturlash uchun zarur kengaytmalar:

Interaktiv Kod Editör

Natija (Preview)

Bilimlarni Tekshirish

Frontend Testi

Frontend Testi

Test Natijalari

📊 Frontend kurslari rivoji sizning fikringizga bog'liq!

📱 Frontend dasturlashni to'liq o'rganishni xohlaysizmi?