Blog

You are currently viewing Yadda Za Ka Kirkiri Personal Website Da HTML A Waya

Yadda Za Ka Kirkiri Personal Website Da HTML A Waya

Kirkirar personal website daga waya abu ne mai yiwuwa kuma mai sauƙi idan ka bi mataki-mataki. A cikin wannan cikakken jagora zan nuna maka yadda zaka gina shafi na mutum (profile/portfolio) ta amfani da HTML, CSS, da ɗan JavaScript — duka daga wayarka ta Android ko iPhone. Zan kuma nuna maka yadda zaka gwada shafin, ka yi responsive design (ya dace da wayoyi), sannan ka dora shi kan yanar gizo (publish) ta amfani da hanyoyi masu sauƙi kamar GitHub Pages ko Netlify — duk daga waya.

Me za ka bukata kafin ka fara

  1. Waya mai intanet (Android ko iPhone).

  2. Text editor a waya (misali: Acode, Dcoder, Spck Editor, QuickEdit).

  3. Browser (Chrome, Firefox, Safari) don gwaji.

  4. Asusun GitHub ko Netlify idan kana son dora shafin kan internet (ba dole ba amma yana da kyau).

  5. Hotuna (profile photo, portfolio images) a cikin wayarka — ka tsara su ƙanana (optimize) domin website ya dinga loda sauri.

Mataki 1 — Fara sabon fayil: structure na HTML

Fara da buɗe text editor dinka, ƙirƙiri sabon fayil mai suna index.html. Rubuta wannan asalin HTML:

<!DOCTYPE html>
<html lang="ha">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Sunan Ka — Portfolio</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header class="site-header">
<img src="profile.jpg" alt="Sunan Ka" class="avatar">
<h1>Sunan Ka</h1>
<p class="tag">Mai kirkirar abubuwa • Developer • Designer</p>
</header>

<main class="content">
<section id="about">
<h2>Game da Ni</h2>
<p>Rubuta gajeren bayani game da kai: kwarewa, abin da kake yi, da abin da kake nema.</p>
</section>

<section id="portfolio">
<h2>Portfolio</h2>
<div class="grid">
<div class="card"><img src="proj1.jpg" alt=""><h3>Project 1</h3></div>
<div class="card"><img src="proj2.jpg" alt=""><h3>Project 2</h3></div>
</div>
</section>

<section id="contact">
<h2>Tuntube Ni</h2>
<form id="contactForm">
<label>Sunanka<input type="text" name="name" required></label>
<label>Email<input type="email" name="email" required></label>
<label>Sako<textarea name="message" rows="4" required></textarea></label>
<button type="submit">Aika</button>
</form>
<p id="status"></p>
</section>
</main>

<footer class="footer">
<p>© <span id="year"></span> Sunan Ka. Duk hakkoki an tanada.</p>
</footer>

<script src="script.js"></script>
</body>
</html>

Wannan shine ginshikin shafinka: header (hoto da suna), sashen about, portfolio, da contact form.

Mataki 2 — Ƙara style: style.css

Ƙirƙiri style.css sannan ka liƙa wannan CSS don shafi ya yi kyau a wayoyi da kwamfuta:

:root{
--bg:#0f1724;
--card:#111827;
--accent:#06b6d4;
--text:#e6eef3;
}

*{box-sizing:border-box}
body{
margin:0;
font-family:system-ui,-apple-system,Segoe UI,Roboto,"Noto Sans",sans-serif;
background:linear-gradient(180deg,#081029 0%, #071021 100%);
color:var(--text);
line-height:1.6;
padding:16px;
}

.site-header{
text-align:center;
padding:20px 0;
}
.avatar{
width:110px;
height:110px;
object-fit:cover;
border-radius:50%;
border:3px solid rgba(255,255,255,0.06);
display:block;
margin:0 auto 12px;
}
.tag{opacity:0.9}

.content{
max-width:900px;
margin:16px auto;
}

h2{
color:var(--accent);
margin-top:18px;
}

.grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:12px;
}
.card{
background:rgba(255,255,255,0.03);
padding:8px;
border-radius:8px;
text-align:center;
}
.card img{width:100%;height:140px;object-fit:cover;border-radius:6px}

form{display:grid;gap:10px}
label{display:block}
input,textarea,button{
width:100%;
padding:10px;
border-radius:6px;
border:1px solid rgba(255,255,255,0.06);
background:rgba(255,255,255,0.02);
color:var(--text);
}
button{
background:var(--accent);
border:none;
color:#042;
font-weight:600;
cursor:pointer;
}

.footer{text-align:center;margin-top:20px;color:rgba(255,255,255,0.6)}

/* Responsive */
@media (max-width:600px){
.grid{grid-template-columns:1fr}
.avatar{width:90px;height:90px}
}

Wannan CSS zai tabbatar shafinka ya yi kyau, ya zama dark theme da mai amfani ke so, kuma responsive domin ya dace da wayoyi.

Mataki 3 — Ƙara ɗan JavaScript: script.js

Ƙirƙiri script.js don ɗan aiki na contact form (mock) da sabunta shekara a footer:

// sabunta shekara
document.getElementById('year').textContent = new Date().getFullYear();

// simple form handler (no backend) - yana nuna status kawai
const form = document.getElementById('contactForm');
const status = document.getElementById('status');

form.addEventListener('submit', function(e){
e.preventDefault();
status.textContent = 'An samu sako — za mu tuntube ka cikin lokaci.';
form.reset();
setTimeout(()=> status.textContent = '', 4000);
});

Idan kana son ainihin aika form zuwa email ko database, zaka iya amfani da services kamar Formspree, Formsubmit, ko Netlify Forms — zan nuna yadda a gaba.

Mataki 4 — Gwada shafin a browser na waya

Acode da sauran editors suna da preview (Live Preview). Idan kana amfani da Acode:

  1. Buɗe index.html a Acode, danna Preview (browser view).

  2. Idan kana amfani da Dcoder ko QuickEdit, bude browser ka bude local file (file:///storage/.../index.html) ko ka yi use na preview idan app ɗin na bada.

Duba: avatar/profile.jpg da project images ka saka a cikin folder ɗin project ko ka yi link zuwa image a web (amma ka kula da hotunan da girma).

Mataki 5 — Yin minification da optimizing images

Don website ya loda sauri:

  • Resize hotuna zuwa ƙananan girma (misali 800px width) kuma ka compress (sau da yawa apps kamar Photo Compress ko shafuka kamar TinyPNG suna aiki).

  • Cire unnecessary whitespace a CSS/HTML idan kana so, amma a wannan mataki ba dole ka yi minification ba.

Mataki 6 — Publish: dora shafinka kan internet daga waya

Akwai hanyoyi masu sauƙi da zaka dora site daga waya.

Zabi A — GitHub Pages (kyauta, yana aiki da static sites)

  1. Create GitHub account (github.com) idan baka da shi.

  2. A wayarka zaka iya amfani da GitHub mobile app ko browser. Amma don upload files da kyau, mafi sauƙi shi ne amfani da Termux (Android) ko edit via GitHub website (new repo -> Add file -> Upload files).

  3. Matakai (ta website a waya):

    • Je github.com, danna New repository.

    • Saka username.github.io ko sunan repo (e.g., my-portfolio).

    • Create repo.

    • Danna Add file > Upload files, zabi index.html, style.css, script.js, da images. Upload kuma commit.

    • Idan repo name = username.github.io, website zai kasance https://username.github.io.

    • Ko idan ba wannan sunan ba, zaka iya enable GitHub Pages a repo settings > Pages > Source = main branch / root > Save, sannan site zai samu URL https://username.github.io/reponame.

Zabi B — Netlify (kyauta, sauƙi, form support)

  1. Shiga netlify.com a browser na waya, create account (zaka iya amfani da GitHub auth).

  2. Idan baka so amfani da Git, zaka iya dora index.html da sauran files ta Netlify drag-and-drop (amma daga waya, yi upload ta website).

  3. Netlify zai baka custom URL (kamar keen-malasala-12345.netlify.app) kuma yana da form handling free. Idan kana son custom domain zaka iya haɗa domain kuma Netlify zai bada SSL (https) kyauta.

Zabi C — Neocities (mai sauƙi don portfolios)

Neocities (neocities.org) yana bada kyauta hosting don static sites. Create account, upload files ta browser kuma site ya tashi.

Mataki 7 — Sanya contact form aiki (Formspree ko Netlify Forms)

Formspree (sauƙi):

  • Canja <form id="contactForm"> zuwa:

<form action="https://formspree.io/f/yourformid" method="POST">
...
</form>

  • Je formspree.io, create form, zaka samu yourformid. Formspree zai turo maka sakonni zuwa email dinka.

Netlify Forms (idan ka publish a Netlify):

  • Add data-netlify="true" a <form>:

<form name="contact" method="POST" data-netlify="true">
<input type="hidden" name="form-name" value="contact">
...
</form>

  • Netlify zai tattara submissions a dashboard dinsu.

Mataki 8 — Ƙara domain da HTTPS

  • Idan ka so domain na kanka (sunan-ka.com), sayi domain daga registrar (Namecheap, GoDaddy, Google Domains).

  • A GitHub Pages ko Netlify, zaka samu settings don haɗa domain; Netlify baya ɗaukar SSL idan ka haɗa domain — amma Netlify zai samar da free HTTPS ta Let’s Encrypt idan ka bi matakai. GitHub Pages ma yana bada HTTPS ga custom domains (tare da DNS configuration).

Mataki 9 — SEO, meta tags, da sharing

Don mutane su sami shafin ka a Google:

  • A <head> ka ƙara meta description:

<meta name="description" content="Sunan Ka — Developer | Designer | Portfolio na ayyuka.">
<meta name="keywords" content="portfolio, developer, sunan ka, web developer">
<meta name="author" content="Sunan Ka">

  • Add Open Graph tags don social sharing:

<meta property="og:title" content="Sunan Ka — Portfolio">
<meta property="og:description" content="Gajeren bayani game da kai.">
<meta property="og:image" content="https://example.com/profile.jpg">

  • Sanya heading tags (<h1>, <h2>) da content mai ma’ana domin SEO.

Mataki 10 — Responsive design da accessibility

  • Yi amfani da meta viewport (mun riga mun saka) don responsive.

  • Ka tabbata buttons da inputs suna da girma mai sauƙin danna a touch screens.

  • Ka sa alt texts ga duk images don accessibility.

  • Gwada shafin a phone daban-daban (chrome devtools emulation idan kana a PC, ko a wayoyi daban-daban idan akwai).

Mataki 11 — Version control da updates daga waya

  • Idan kana son ci gaba da sabunta site daga waya, yi amfani da GitHub:

    • A GitHub website zaka iya edit files kai tsaye (Edit this file > commit).

    • Ko amfani da GitHub mobile app don manage repo.

    • Ko amfani da Termux + git idan ka fi son CLI: git clone, git add ., git commit -m "update", git push.

Mataki 12 — Performance, analytics, da security

  • Performance: minimize image sizes, ka yi CSS/JS minify idan kana so.

  • Analytics: ƙara Google Analytics (ko Plausible, umami) ta embedding tracking code a index.html.

  • Security: Ka tabbata kana amfani da HTTPS; kar a saka API keys a cikin client-side code.

Troubleshooting da Tips

  • Idan preview bai nuna images: ka tabbata filenames da paths sun dace (profile.jpg a cikin folder ɗaya).

  • Idan contact form bai tura: duba network console (browser devtools idan possible) ko duba settings na Formspree/Netlify.

  • Idan site bai dora a GitHub Pages: ka tabbata index.html yana a main branch root ko gh-pages branch gwargwadon settings.

  • Ka rika yin backup na project (upload a Google Drive) kafin manyan canje-canje.

Examples na ƙarin abubuwa da zaka iya ƙara

  • Light/Dark toggle (button da CSS class switch).

  • Add a skills bar (CSS progress bars).

  • Add downloadable CV link (PDF) — upload PDF a repo ko hosting.

  • Add portfolio detail pages (project1.html) da internal navigation.

  • Add simple blog (static pages: posts/post1.html) ko amfani da GitHub Pages + Jekyll idan ka so blog engine.

Kammalawa

Daga farawa da index.html a Acode har zuwa publish a GitHub Pages ko Netlify, zaka iya gina personal website mai kyau daga wayarka. Abu mafi muhimmanci shine ka fara: rubuta content mai kyau, yi responsive design, sannan ka dora site. Da lokaci, zaka iya ƙara forms da analytics, da domain na kanka. Idan kana so, zan iya:
• Rubuta maka ready-to-use template (index.html, style.css, script.js) domin ka sauke ka gyara.
• Nuna maka mataki-mataki (screenshots style) don upload a GitHub Pages daga browser na waya.
Wane daga cikin waɗannan kake so in yi maka gaba?

Leave a Reply