Horumarinta website-yada

Waxa guddiyadu raadiyaan

• Website-yo ku shaqeeya taleefan Android ah oo qiimo jaban iyo xog mobile oo gaabis ah, ee aan ku ekayn shaashadda weyn ee laptop-kaaga.
• Aasaas nadiif ah: HTML macne leh (semantic), qaabaynta CSS ee Flexbox ama Grid, iyo JavaScript aad sharxi karto adigoon framework isticmaalin.
• Aqoonta jidka oo dhan ee website nool: domain, DNS, hosting, SSL, email-ka ganacsiga iyo backup-yada.
• Caadooyinka amniga ee foomamka, login-ka iyo WordPress: cusboonaysiin, password admin oo adag, iyo in xogta lagu hubiyo server-ka.
• La shaqaynta macaamiil aan farsamo aqoon: in “ka dhig mid casri ah” loo beddelo liis cad oo bogag, qoraal iyo waqti go'an ah.
• Shaqo nool oo ay taleefankooda ku furi karaan inta wareysigu socdo, oo doorkaaga saxda ahi ku cad yahay mashruuc kasta.

Su'aalaha ay weydiiyaan

1. 1“Sidee u hubisaa in website si fiican ugu shaqeeyo taleefannada?”

   Sababta ay u weydiiyaan: Booqdayaasha badankood halkan waxay isticmaalaan taleefan iyo xog mobile. Guddigu wuxuu hubinayaa inaad iyaga marka hore u naqshadayso, ee aanad dambe ka xusuusan.

   Sida looga jawaabo

   • CSS mobile-first ah: viewport tag, qaab dabacsan (flexible), iyo media query-yo shaashadaha waaweyn.
   • Bogag fudud: sawirro la cufay (compressed), script-yo yar, iyo font-yo si degdeg ah u soo baxa.
   • Ku tijaabi taleefan dhab ah oo qiimo jaban, iyo network-ga oo DevTools lagu gaabiyey.

   I build mobile-first. I write the CSS for a small screen, then add media queries for larger ones, and use Flexbox or Grid so nothing has a fixed width. Images are compressed to WebP and never wider than their container. For a school website in Hargeisa, most parents opened it on phones, so I tested it on a basic Android phone and in Chrome DevTools on slow 3G. The first version was too slow, so I made the main image smaller and removed a slider plugin.

2. 2“Macmiil ayaa sheegay in website-kiisu gaabis yahay. Maxaad hubinaysaa, oo sidee u kala horreysiinaysaa?”

   Sababta ay u weydiiyaan: Waxay tijaabinaysaa inaad marka hore cabbirto oo aad hagaajiso sababta ugu weyn, halkii aad qiyaasi lahayd ama wax walba dib u dhisi lahayd.

   Sida looga jawaabo

   • Ku cabbir PageSpeed Insights ama Lighthouse iyo Network tab ka hor intaadan waxba beddelin.
   • Marka hore hagaaji waxa ugu culus: badanaa sawirrada, kadib script-yada iyo plugin-yada dheeriga ah, kadibna caching-ka.
   • Hosting-ka ugu dambayn hubi, oo mar kale cabbir si aad macmiilka ugu muujiso farqiga.

   I measure before I change anything. I run PageSpeed Insights and look at the Network tab to see what is heavy. On a hotel site I worked on, the home page had photos straight from a camera, several megabytes each. I resized them, converted them to WebP and lazy-loaded the ones lower on the page. I also removed two plugins nobody used and turned on caching. Then I measured again, so I could show the client the before and after.

3. 3“Sharax sidaad u dhisi lahayd foom xidhiidh (contact form), laga bilaabo HTML-ka ilaa meesha fariintu gaadho.”

   Sababta ay u weydiiyaan: Foomku wuxuu taabanayaa wax walba: HTML, hubinta xogta, server-ka, email-ka, spam-ka iyo amniga. Wuxuu muujinayaa inaad aragto jidka oo dhan.

   Sida looga jawaabo

   • HTML sax ah: label-yo, noocyada input-ka ee saxda ah, meelaha qasabka ah iyo fariin khalad oo cad.
   • Xogta ku hubi browser-ka isticmaalaha dartiis, mar kalena server-ka, maxaa yeelay hubinta browser-ka waa laga boodi karaa.
   • Fariinta si ammaan ah u dir ama u kaydi, jooji spam-ka, oo password kasta oo email ah ku hay server-ka oo keliya.

4. 4“Ganacsi ayaa kaa codsaday website. Maxaad uga baahan tahay, sideese u gelinaysaa internet-ka?”

   Sababta ay u weydiiyaan: Waxay wada hubinaysaa garashada mashruuca iyo aqoonta hosting-ka: waxa loo baahan yahay, qoraalka, domain-ka, DNS-ka, SSL-ka iyo wareejin nadiif ah.

   Sida looga jawaabo

   • Isku raaca ujeeddada, bogagga, cidda cusboonaysiin doonta, iyo taariikhda qoraalka la keenayo.
   • Domain-ka ku diiwaangeli magaca macmiilka, DNS-ka ku jiho hosting-ka, ku rakib SSL, oo diyaari email-ka.
   • Wareeji login-yada, hage gaaban iyo taariikhaha cusboonaysiinta, oo isku raaca cidda qabanaysa update-yada.

   First I ask what the site must do: which pages, who will update them, and whether they need a form or a WhatsApp button. I collect the logo, photos and text early, because content is usually what delays a project. Then I register the domain in the client's name, point the DNS to the hosting, install a free SSL certificate and set up business email. At handover I give them the admin login, a one-page guide, and a note of when the domain and hosting renew.

5. 5“Goormaad isticmaali lahayd WordPress, goormaadse ku dhisi lahayd React ama koodh caadi ah?”

   Sababta ay u weydiiyaan: Waxay rabaan garasho, ee ma aha qalabka aad jeceshahay: cidda website-ka dayactiri doonta, waxa uu qabanayo, iyo miisaaniyadda.

   Sida looga jawaabo

   • WordPress: website-yo qoraal ah oo macmiilku isagu wax ka beddelo, war, blog iyo dukaamo yaryar.
   • React ama framework: app-yo is-dhexgal leh oo shaashado iyo xaalado badan leh, sida dashboard ama nidaam ballan-qabsasho.
   • HTML iyo CSS caadi ah: website yar oo degdeg ah oo dhif wax laga beddelo.

6. 6“React-ka, maxay ku kala duwan yihiin props iyo state?”

   Sababta ay u weydiiyaan: Waa hubin aasaasi ah oo React ah. Waxay rabaan sharaxaad gaaban oo sax ah iyo tusaale fudud oo ka yimid shaashad dhab ah.

   Sida looga jawaabo

   • Props waxaa soo gudbiya component-ka waalidka ah, component-ka ilmaha ahna wax kama beddeli karo.
   • State waa mid component-ka iska leh; marka uu isbeddelo, React ayaa component-ka dib u sawira.
   • Tusaale: tirada gaadhiga iibka (cart) waa state bogga ku jira, waxaana props ahaan loo gudbiyaa calaamadda header-ka.

7. 7“Website WordPress ah oo aad maamusho ayaa la jabsaday wuxuuna muujinayaa link-yo spam ah. Maxaad samaynaysaa?”

   Sababta ay u weydiiyaan: Waxay hubinayaan inaad deggenaato, si sax ah u nadiifiso, macmiilka si daacad ah ugu sheegto, oo aad ka hortagto inay mar kale dhacdo.

   Sida looga jawaabo

   • Kaydi nuqul sidiisa ah, kadib beddel password kasta: WordPress, hosting, database iyo FTP.
   • Soo celi backup nadiif ah ama nadiifi fayl-yada, cusboonaysii wax walba, ka saar isticmaalayaasha aan la aqoon iyo plugin-yada aan la isticmaalin.
   • Si cad ugu sheeg macmiilka, kadib ku dar update-yo joogto ah, login laba-tallaabo ah (2FA) iyo backup meel kale lagu hayo.

   First I make a copy of the site as it is and put up a maintenance page. Then I change every password: the WordPress admin, the hosting, the database and FTP. I restore the last clean backup, update WordPress, the theme and all plugins, and delete plugins and admin users that should not be there. I tell the client plainly what happened and what I changed. After that I set up automatic updates, two-factor login and daily backups stored outside the server.

Tusaalooyinka jawaabaha waa English, luqadda guddiyada badankoodu isticmaalaan. Adigu erayadaada ku sheeg.

Mawduucyada dib u eeg

• Semantic HTMLIn la isticmaalo tag-ga macnaha ku habboon: header, nav, main, button, label. Wuxuu caawiyaa akhristayaasha shaashadda (screen reader), makiinadaha raadinta iyo horumariyeyaasha kale. Waxay ku weydiin karaan sababta <button> uga fiican yahay <div> leh click: si toos ah ayuu ula shaqeeyaa kiiboodhka iyo screen reader-ka.
• CSS Flexbox and GridFlexbox wuxuu walxaha u habeeyaa hal jiho, sida saf badhamo ah ama menu. Grid wuxuu wada maareeyaa safaf iyo tiirar, sida gallery kaadhad ah. Hawl caadi ah: sanduuq bartamaha bogga dhig, ama samee saddex tiir oo taleefanka ku noqda hal tiir.
• Responsive design and media queriesIsla boggu wuxuu la qabsadaa shaashad kasta. Waxaad u baahan tahay viewport meta tag, cabbirro isku-xidhan (%, rem), sawirro aan ka ballaadhnayn meeshooda, iyo media query-yo sida min-width: 768px. Mobile-first waxay ka dhigan tahay inaad marka hore qorto qaabka taleefanka, kadibna aad ku darto xeerar shaashadaha waaweyn.
• JavaScript: DOM, events and fetchDOM waa bogga sida JavaScript u arko. Waxaad doorataa walxaha, ku dhegaysataa dhacdooyinka addEventListener, oo aad beddeshaa qoraalka. fetch oo la socda async/await ayaa API wacaya. Su'aal caadi ah: fur oo xidh menu-ga mobile-ka marka la gujiyo, ama liis ka keen API adigoo muujinaya fariin “waa la soo rarayaa”.
• React: components, props, state and hooksComponent waa qayb shaashadda ka mid ah oo dib loo isticmaali karo. Props waxay ka yimaadaan waalidka; state-ku gudaha ayuu ku jiraa oo wuxuu isbeddelaa waqti kadib iyadoo la isticmaalayo useState. useEffect wuxuu fuliyaa koodh ka dib marka la sawiro, tusaale xog soo rarid. Liisasku waxay u baahan yihiin key gaar ah shay kasta. Filo inaad sharaxdo component aad qortay.
• Web performance and Core Web VitalsXawaaraha waxaa badanaa go'aamiya sawirrada, script-yada iyo caching-ka. Core Web Vitals waa cabbirrada Google: LCP (sida degdegga ah ee waxa ugu muhiimsan u soo baxo), CLS (in qaabku boodboodo iyo in kale) iyo INP (sida degdegga ah ee boggu uga jawaabo taabasho). Qalabka: PageSpeed Insights, Lighthouse, Network tab.
• Domain, DNS and hostingDomain-ku waa magaca, hosting-ku waa server-ka website-ka ku shaqeeya, DNS-kuna waa kan isku xidha. A record wuxuu magaca ku jiheeyaa IP-ga server-ka, CNAME wuxuu ku jiheeyaa magac kale, MX record-yaduna waxay go'aamiyaan meesha email-ku aado. Isbeddelladu waxay qaadan karaan saacado inay faafaan. Su'aal caan ah: maxaa email-ku u istaagay kadib markii website-ka la raray?
• HTTPS and SSL certificatesShahaadada SSL/TLS waxay qarisaa (encrypt) xogta u dhexaysa browser-ka iyo server-ka, waxayna muujisaa qufulka. Shahaadooyinka Let's Encrypt waa bilaash laakiin waa inay si toos ah isu cusboonaysiiyaan. U weeci HTTP oo dhan HTTPS, oo hagaaji “mixed content”: sawirro ama script-yo weli HTTP lagu soo rarayo.
• Form security (validation, XSS, CSRF, spam)Weligaa ha aaminin waxa foom soo diro. Xogta ku hubi server-ka, nadiifi (escape) wax kasta oo aad bogga dib ugu muujinayso (si looga hortago XSS), isticmaal CSRF token foomamka login-ka ka dambeeya, oo spam-ka kaga hortag meel qarsoon (honeypot) ama CAPTCHA. Waxay ku weydiin karaan waxa XSS yahay hal jumlad.
• WordPress: themes, plugins, updates and rolesTheme-ku wuxuu maamulaa naqshadda, plugin-yaduna waxay ku daraan awoodo, child theme-kuna wuxuu badbaadiyaa isbeddelladaada marka la cusboonaysiinayo. Plugin-yo yar oo la yaqaan waxay ka dhigan yihiin dalool amni oo yar. Shaqaalaha sii doorka Editor, ee ha siin Administrator. Waxay ku weydiin karaan sidaad si ammaan ah backup ugu samayso oo u cusboonaysiiso website nool.
• Accessibility basicsWebsite-yo qof kastaa isticmaali karo: qoraal alt ah oo sawirrada ku jira, kala-duwanaansho midab oo ku filan, label input kasta, iyo bog ku shaqeeya kiiboodhka oo keliya. Macaamiisha NGO-yada iyo UN-ku badanaa way codsadaan. Tijaabo degdeg ah: ma buuxin kartaa foomka adigoo isticmaalaya furaha Tab oo keliya?

Hawlaha la sameeyo ee laga yaabo in lagu siiyo

1. 1Bog ka dhis naqshad 60 ilaa 90 daqiiqo gudahood, tusaale landing page laga sameeyo fayl Figma ah ama sawir shaashadeed. Ku bilow qaabka taleefanka, isticmaal HTML macne leh, qaab-dhismeedka hagaaji ka hor faahfaahinta yaryar, oo ku hubi ballaadhka taleefanka ka hor intaadan dhiibin. Ku tababar adigoo dib u dhisaya laba landing page oo dhab ah oo sawir laga qaaday.
2. 2Hagaaji bog jaban ama gaabis ah: waxay ku siinayaan bog leh cillado qaabeed ama rarid gaabis ah. Fur DevTools, baadh walxaha (inspect), ka akhri Console-ka khaladaadka iyo Network tab-ka fayl-yada culus, oo hagaajin kasta cod dheer ku sharax.
3. 3Hawl yar oo JavaScript ama React ah: xog ka keen API dadweyne oo u muuji liis ahaan adigoo leh xaaladaha “waa la soo rarayaa” iyo khalad, ama liis hawleed fudud oo lagu daro laguna tirtiro. Labadaba ku tababar JavaScript caadi ah iyo React ilaa aad samayn karto tutorial la'aan.
4. 4Hawl WordPress ah: ku dar bog, ku rakib plugin foom, ka dhig foomka xidhiidhka mid u gudbiya fariimaha cinwaan email ah, oo sharax sidaad website-ka u sugi lahayd una samayn lahayd backup. Ku tababar WordPress kombiyuutarkaaga ku rakiban ka hor wareysiga.

Su'aalaha portfolio-ga

• Muuji saddex ama afar website oo nool, mid kastaa leeyahay link ku shaqeeya taleefanka, doorkaaga (naqshad, dhisid, hosting) iyo qalabka. Website ganacsi yar oo dhab ah loo sameeyey ayaa ka roon koobi tutorial ah.
• Hubi link kasta maalinta ka horreysa. Domain-yo dhacay iyo digniinaha SSL-ku waa ku badan yihiin website-yada portfolio-ga ee hore, guddiguna isla goobta ayuu furayaa.
• Si cad u sheeg waxaad dhistay iyo waxa ka yimid theme ama template. “Waxaan wax ka beddelay theme diyaar ah, foomka ballanta-na anigaa dhisay” waa daacad waana la aqbali karaa.
• GitHub ku hay ugu yaraan hal mashruuc oo aad eber ka qortay, si guddigu u arko koodhkaaga ee aanay u arkin shaqo WordPress ah oo keliya.

Khaladaadka ka fogow

• Portfolio si fiican ugu muuqda laptop-ka oo keliya. Guddigu taleefan ayuu ku furayaa.
• Inaad isku magacawdo full-stack kadib hal tutorial. Waxay ku weydiinayaan server-ka iyo database-ka.
• Inaad foomka ku hubiso browser-ka oo keliya. Qof kastaa wuu ka boodi karaa hubinta browser-ka oo xog xun soo diri karaa.
• Inaad domain-ka macmiilka ku diiwaangeliso magacaaga ama aad haysato login admin-ka keliya, si macmiilku kaaga tegi waayo.
• Inaad rakibto plugin-yo WordPress oo badan oo aadan weligaa cusboonaysiin.

Hubin degdeg ah

5 su'aalood. Mid kasta ka jawaab si aad u aragto sharaxaadda.