KHaalid Cabdi Yare

28/07/2026

🚀 60 Days Full-Stack Development Challenge

Week 2 – Advanced HTML & CSS

🚀 Day 13: CSS Positioning
Sharaxaad Kooban
Casharkan waxaan ku baran doonaa CSS Positioning, oo ah habka lagu xakameeyo meesha ay HTML elements-ku kaga muuqanayaan bogga. Waxaad baran doontaa sida loo isticmaalo static, relative, absolute, fixed, iyo sticky si loo abuuro layout nadiif ah oo xirfad leh.
🚀 Day 14: Style the Landing Page
Sharaxaad Kooban
Casharkan waxaan ku baran doonaa sida Landing Page loogu sameeyo naqshad casri ah iyadoo la adeegsanayo CSS3. Waxaad baran doontaa sida loo qurxiyo qaybaha bogga sida Header, Hero Section, Buttons, Cards, iyo Footer, si website-ku u noqdo mid qurux badan, responsive ah, isla markaana bixiya khibrad isticmaale (User Experience) oo wanaagsan.

Tik Tok: https://www.tiktok.com/?_r=1&_t=ZS-98532x3jqaaYouTube:https://youtu.be/Ws1yCLvj06g?feature=shared🛠 Tech Stack💻 HTML5🎨 CSS3⚡ Bootstrap 5🟨 JavaScript⚛️ React.js🟢 Node.js🚀 Express.js🍃 MongoDB👨‍💻 Eng. Khaalid Cabdi Cabdulle

27/07/2026

🚀 60 Days Full-Stack Development Challenge

Week 2 – Advanced HTML & CSS

Day 12: CSS Box Model & Spacing

Casharkan waxaan ku baran doonaa CSS Box Model & Spacing, kuwaas oo ah aasaaska qaabeynta (layout) website-ka. Box Model wuxuu ka kooban yahay Content, Padding, Border, iyo Margin, kuwaas oo wada shaqeeya si ay u habeeyaan cabbirka iyo kala fogaanshaha element kasta.
Sidoo kale, waxaad baran doontaa sida loo isticmaalo spacing si loo abuuro bog nadiif ah, isku dheellitiran, oo si fudud loo akhrisan karo. Fahamka Box Model wuxuu kaa caawinayaa inaad dhisto website-yo casri ah oo leh naqshad xirfad leh..

Tik Tok: https://www.tiktok.com/?_r=1&_t=ZS-98532x3jqaaYouTube:https://youtu.be/Ws1yCLvj06g?feature=shared🛠 Tech Stack💻 HTML5🎨 CSS3⚡ Bootstrap 5🟨 JavaScript⚛️ React.js🟢 Node.js🚀 Express.js🍃 MongoDB👨‍💻 Eng. Khaalid Cabdi Cabdulle

27/07/2026

🚀 60 Days Full-Stack Development Challenge

Week 2 – Advanced HTML & CSS

Day 11: Typography & Google Fonts

Casharkan waxaan ku baran doonaa Typography iyo Google Fonts, kuwaas oo muhiim u ah quruxda iyo akhris-fudeydka website-ka. Typography waa habka loo habeeyo qoraalka sida nooca font-ka, cabbirka, miisaanka, kala fogaanshaha xarafka, iyo dhererka xariiqda si boggu u noqdo mid nadiif ah oo xirfad leh.
Sidoo kale, waxaan baran doonaa sida loo isticmaalo Google Fonts si aan website-ka ugu darno fonts casri ah oo bilaash ah, taasoo ka dhigaysa naqshadda mid soo jiidasho leh isla markaana kor u qaadaysa khibradda isticmaalaha.

Tik Tok: https://www.tiktok.com/?_r=1&_t=ZS-98532x3jqaaYouTube:https://youtu.be/Ws1yCLvj06g?feature=shared🛠 Tech Stack💻 HTML5🎨 CSS3⚡ Bootstrap 5🟨 JavaScript⚛️ React.js🟢 Node.js🚀 Express.js🍃 MongoDB👨‍💻 Eng. Khaalid Cabdi Cabdulle

25/07/2026

🚀 60 Days Full-Stack Development Challenge

Week 2 – Advanced HTML & CSS

Day 10: CSS Selectors & Colors

Casharkan waxaan ku baran doonaa CSS Selectors iyo Colors, kuwaas oo ah aasaaska naqshadaynta website-yada. CSS Selectors waxaa loo isticmaalaa in lagu xusho HTML elements-ka si loogu dabaqo styles kala duwan, halka Colors loo isticmaalo in lagu qurxiyo bogga loona siiyo muuqaal soo jiidasho leh.
Marka aad si fiican u fahanto Selectors iyo Colors, waxaad awoodi doontaa inaad si fudud u maamusho muuqaalka website-kaaga una abuurto naqshado casri ah oo xirfad leh.

Tik Tok: https://www.tiktok.com/?_r=1&_t=ZS-98532x3jqaaYouTube:https://youtu.be/Ws1yCLvj06g?feature=shared🛠 Tech Stack💻 HTML5🎨 CSS3⚡ Bootstrap 5🟨 JavaScript⚛️ React.js🟢 Node.js🚀 Express.js🍃 MongoDB👨‍💻 Eng. Khaalid Cabdi Cabdulle

24/07/2026

🚀 60 Days Full-Stack Development Challenge

Week 2 – Advanced HTML & CSS
Day 9: Build Responsive Footer

Footer waa qaybta ugu dambeysa ee website-ka. Waxaa lagu soo bandhigaa macluumaad muhiim ah sida xuquuqda daabacaadda (Copyright), xogta xiriirka, adeegyada, bogagga muhiimka ah (Quick Links), iyo xiriirrada baraha bulshada.
Footer-ku wuxuu ka caawiyaa booqdaha inuu si fudud u helo xogta muhiimka ah, wuxuuna website-ka ka dhigaa mid dhammaystiran, nidaamsan, oo xirfad leh.

Tik Tok: https://www.tiktok.com/?_r=1&_t=ZS-98532x3jqaaYouTube:https://youtu.be/Ws1yCLvj06g?feature=shared🛠 Tech Stack💻 HTML5🎨 CSS3⚡ Bootstrap 5🟨 JavaScript⚛️ React.js🟢 Node.js🚀 Express.js🍃 MongoDB👨‍💻 Eng. Khaalid Cabdi Cabdulle

23/07/2026

🚀 60 Days Full-Stack Development Challenge

Week 2 – Advanced HTML & CSS
Day 8: Add Images & Icons

Maanta waxaan baran doonaa sida website-ka loogu daro sawirro iyo icons si uu u noqdo mid qurux badan oo si fudud loo fahmi karo. Sawirradu waxay ka caawiyaan booqdaha inuu si muuqaal ah u fahmo waxa website-ku ku saabsan yahay, halka icons-kuna ay si kooban u muujiyaan adeegyada ama qaybaha kala duwan ee bogga.
Casharkan waxaad ku baranaysaa sida sawirrada iyo icons-ka loogu daro HTML5, ka dibna CSS loogu habeeyo si ay u yeeshaan muuqaal casri ah oo xirfad leh. Tani waa xirfad muhiim u ah dhismaha website-yada professional-ka ah.

Tik Tok: https://www.tiktok.com/?_r=1&_t=ZS-98532x3jqaaYouTube:https://youtu.be/Ws1yCLvj06g?feature=shared🛠 Tech Stack💻 HTML5🎨 CSS3⚡ Bootstrap 5🟨 JavaScript⚛️ React.js🟢 Node.js🚀 Express.js🍃 MongoDB👨‍💻 Eng. Khaalid Cabdi Cabdulle

22/07/2026

🚀 60 Days Full-Stack Development Challenge

Day 7 Build Complete Landing Page

Landing Page oo aan ku sameeyay HTML5 oo keliya. Website-ka waxaa loogu talagalay shirkad tusaale ah oo la yiraahdo NovaTech, taas oo bixisa adeegyo casri ah oo dhanka technology-ga ah.
Website-ka wuxuu ka kooban yahay qaybo kala duwan:
Header – Waa qaybta sare ee website-ka. Waxaa ku jira magaca shirkadda iyo menu-ga lagu dhex socdo website-ka.
Hero Section – Waa qaybta ugu horreysa ee qofku arko. Waxay ka kooban tahay cinwaan weyn, qoraal sharaxaya shirkadda, sawir iyo links uu qofku ku bilaabi karo adeegga.
About Section – Qaybtan waxay ka hadlaysaa shirkadda, cidda ay tahay, hadafkeeda iyo aragtideeda mustaqbalka.
Services Section – Waxay muujinaysaa adeegyada shirkaddu bixiso, sida:
Web Development
UI/UX Design
Digital Marketing
Features Section – Waxay sharxaysaa sababta macaamiishu u dooran karaan shirkadda, sida tayada shaqada, technology casri ah iyo adeegga macaamiisha.
Statistics Section – Waxay soo bandhigaysaa tirakoobka shirkadda, sida tirada projects-ka la dhammeeyay iyo macaamiisha.
Testimonials Section – Qaybtan waxaa lagu soo bandhigayaa ra'yiga iyo fikradaha macaamiishii h**e.
Pricing Section – Waxay leedahay qorshayaal qiimeyn ah oo kala duwan, sida Starter, Professional iyo Enterprise.
Call to Action (CTA) – Waa qayb qofka ku dhiirrigelinaysa inuu shirkadda la xiriiro ama bilaabo project cusub.
Contact Section – Waxaa ku jira form uu qofku ku soo diri karo magaciisa, email-kiisa, telefoonkiisa iyo fariintiisa.
Footer – Waa qaybta ugu dambeysa ee website-ka. Waxaa ku jira xogta shirkadda, links muhiim ah, contact information iyo social media.

Tik Tok: https://www.tiktok.com/?_r=1&_t=ZS-98532x3jqaaYouTube:https://youtu.be/Ws1yCLvj06g?feature=shared🛠 Tech Stack💻 HTML5🎨 CSS3⚡ Bootstrap 5🟨 JavaScript⚛️ React.js🟢 Node.js🚀 Express.js🍃 MongoDB👨‍💻 Eng. Khaalid Cabdi Cabdulle

20/07/2026

18/07/2026

🚀 60 Days Full-Stack Development Challenge📅
Day 4 Create About Section)


Create About Section waa qaybta website-ka ee lagu soo bandhigo xogta ku saabsan shirkadda, qofka, ama mashruuca. Qaybtan waxay ka caawisaa booqdaha inuu fahmo cidda leh website-ka, waxa ay qabtaan, himiladooda (Mission), aragtidooda (Vision), iyo adeegyada ay bixiyaan.
HTML5 gudaheeda, About Section waxaa lagu dhisaa semantic elements sida si loo qeexo qaybta, cinwaanka, xogta ugu muhiimsan, iyo sawirka, sharaxaadda sawirka, halka , , , iyo loo isticmaalo cinwaannada iyo qoraallada. Ugu dambayn, waxaa lagu daraa si loogu yeero ficil (Call to Action) sida Learn More.
Qaybtani waa inay noqotaa mid nadiif ah, si wanaagsan u habaysan, isla markaana diyaar u ah in mustaqbalka lagu qurxiyo CSS3 iyo Bootstrap.

Tik Tok: https://www.tiktok.com/?_r=1&_t=ZS-98532x3jqaaYouTube:https://youtu.be/Ws1yCLvj06g?feature=shared🛠 Tech Stack💻 HTML5🎨 CSS3⚡ Bootstrap 5🟨 JavaScript⚛️ React.js🟢 Node.js🚀 Express.js🍃 MongoDB👨‍💻 Eng. Khaalid Cabdi Cabdulle