Waa Maxay responsive?
Responsive waa in boggaagu si fiican ugu shaqeeyo shaashad kasta: telefoon, tablet iyo computer. Isla code-ka ayaa isbeddelaya sida uu isu habeeyo cabbir walba.
Sidoo kale loo yaqaan
responsive, responsive-ka, responsive design, mobile first
Sharaxaad
Dad badan ayaa website-ka telefoonka ku daawada, sidaas darteed design-ku waa inuu telefoonka ka bilaabmaa. Habka ugu badan waa mobile first: marka hore waxaad qortaa qaabka telefoonka, kadibna breakpoints ayaad ku dartaa si shaashadda weyni u kala fidsato. CSS-ka waxaa loo isticmaalaa media queries; Tailwind-ka waxaa la isticmaalaa horgale sida md ama lg.
Waxa inta badan jabta waa afar: sawirrada oo aan is-yarayn, qoraalka oo aad u weyn shaashadda yar, table-yada oo dhinaca u baxaya, iyo badhannada oo aad u yar oo farta lagu taaban waayo. Mid walba xal fudud ayuu leeyahay: max-width sawirka, cabbir la qabsan kara qoraalka, table-ka meel iska socota gali, badhannadana bal weynee.
Xeer fudud: cabbir go'an ha isticmaalin marka aad awoodo. Boqolkiiba, max-width, flexbox iyo grid ayaa bogga ka dhigaya mid isu habeeya. Marka aad dhammayso, tijaabi: browser-ka developer tools ka dooro cabbirka telefoonka, kadibna telefoon real ah ku fiiri.
Tusaale
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">...</div>
Telefoonka hal column ayuu noqonayaa, shaashadda dhexe iyo tan weynina saddex column. Isla code-ka, laba muuqaal oo kala duwan.
Halkee ayaad Dugsiiye ku baranaysaa?
Tailwind iyo bogag casri ah oo isu habeeya: Tailwind CSS: Modern Websites. Aasaaska flexbox iyo grid: CSS Masterclass.
Video-ga
Daawo meesha uu ereygu kaga hadlayo
Xallinta Ciladaha iyo Hagaajinta CSS/Tailwind 30:00
Koorsooyinka
Halkan ayaad si buuxda uga baran kartaa
Su'aalo
Su'aalaha badanaa la weydiiyo
- Responsive iyo mobile app ma isku mid baa?
- Maya. Responsive waa website browser-ka ku shaqeeya oo isu habeeya shaashadda. Mobile app-ku waa barnaamij telefoonka lagu shubto, sida kuwa React Native lagu dhiso.
- Sidee ayaan u tijaabiyaa?
- Browser-ka developer tools fur, cabbirrada telefoonka dooro, kadibna telefoon real ah ku fiiri. Simulator-ku wax walba ma muujiyo.
Ereyo la xiriira
Sii wad akhriska
Waa Maxay CSS?
CSS (Cascading Style Sheets) waa luqadda muuqaalka website-ka lagu sameeyo: midabada, fonts-ka, kala dhexaadka, layout-ka iyo responsive-ka. HTML waa qaab-dhismeedka, CSS waa qurxinta.
Waa Maxay Tailwind?
Tailwind CSS waa framework CSS ah oo ku siiya classes yaryar (utility classes), sida flex, p-4 iyo text-center, si aad design-ka toos ugu qorto HTML-ka gudihiisa, adigoon file CSS ah u kala bixin.
Waa Maxay HTML?
HTML (HyperText Markup Language) waa luqadda qaab-dhismeedka bogga internet-ka lagu qoro. Tags ayay ka kooban tahay, mid walbana wuxuu sheegaa waxa qaybtaasi tahay: cinwaan, qoraal, sawir, liis ama link.
Waa Maxay UI?
UI waa soo gaabinta User Interface: qaybta barnaamijka ee user-ku arko oo gacanta ku hayo. Buttons, forms, menus, sawirrada, midabada iyo layout-ka oo dhan waa UI.
Waa Maxay frontend?
Frontend waa dhinaca application-ka ee user-ku arko oo taabto: bogagga, badhannada, foomamka iyo dhaqdhaqaaqa shaashadda. Browser-ka ama telefoonka ayuu ku shaqeeyaa.