CêIT Homeسەرەکی
Glossaryفەرهەنگی زاراوەکان
Web Designدیزاینی وێب

Chapterبەش 8 · Lectureوانە 8.1

Final Project: Your Portfolio Websiteپڕۆژەی کۆتایی: پۆرتفۆلیۆی ئۆنلاینی خۆت

Plan, design, build, test and publish your own portfolio website: the brief and its success criteria, a SMART goal and a site map, hand-written CSS or a framework (Bootstrap 5.3, Tailwind CSS 4) or a CMS (WordPress), wireframes and a style tile, the HTML structure, a mobile-first layout, one small JavaScript touch, layered tests and GitHub Pages — with a complete model site for a student, Shilan, and a rubric to score your own.

خۆت پلان بکە، دیزاینی بکە، دروستی بکە، تاقی بکەرەوە و بڵاوی بکەرەوە: ئەرکەکە و مەرجەکانی سەرکەوتن، و ، بە دەست نووسراو یان (⁦Bootstrap 5.3⁩، ⁦Tailwind CSS 4⁩) یان ⁦(WordPress)⁩، و ، پێکهاتەی ، ، کەمێک ، تاقیکردنەوەی چین بە چین و GitHub Pages — لەگەڵ نموونەیی تەواو بۆ قوتابییەک بە ناوی شیلان و خشتەیەکی هەڵسەنگاندن بۆ نرخاندنی خۆت.

24 min read24 خولەک خوێندنەوە · 22 stepsهەنگاو

What you will learnچی فێر دەبیت

  • Write a brief with testable success criteria, a SMART goal, the audience, user tasks and a site map for a portfolio.
  • Choose between hand-written CSS, a CSS framework and a CMS or site builder, and explain what each still needs from you.
  • Turn phone and desktop wireframes into a style tile kept as CSS custom properties.
  • Build a bilingual site in layers: semantic HTML, mobile-first CSS with logical properties and one small progressive-enhancement script.
  • Test the site in layers, fix what fails, publish it and score it with a rubric.
  • بۆ ئەرکێک بە مەرجی تاقیکراوەی سەرکەوتن، ، بینەر، کارەکانی و بنووسیت.
  • لە نێوان بە دەست نووسراو، CSS و یان هەڵبژێریت و ڕوون بکەیتەوە هەریەکەیان هێشتا چی لە تۆ دەوێت.
  • مۆبایل و بکەیت بە کە وەک هەڵدەگیرێت.
  • دووزمانە چین بە چین دروست بکەیت: ، بە و بچووکی .
  • چین بە چین تاقی بکەیتەوە، ئەوەی دەرناچێت چاکی بکەیت، بڵاوی بکەیتەوە و بە خشتەیەکی هەڵسەنگاندن بینرخێنیت.

The brief: build your own portfolioئەرکەکە: پۆرتفۆلیۆی ئۆنلاینی خۆت دروست بکە

This last project joins the whole course into one website: your own . Choose a showcase portfolio (only your best work) or a reflective one (each project with a note on what you learned) — Online portfolios. Give it three to five pages — Home, Projects, About and Contact — in Kurdish, English or both (Bilingual sites). The site is also your best evidence: whoever opens it sees at once what you can build.

ئەم پڕۆژەی کۆتاییە هەموو کۆرسەکە لە یەک کۆ دەکاتەوە: خۆت. پۆرتفۆلیۆی پیشاندان هەڵبژێرە (تەنیا باشترین کارەکانت) یان پۆرتفۆلیۆی بیرکردنەوە (هەر پڕۆژەیەک بە تێبینییەک لەبارەی ئەوەی فێری بوویت) — پۆرتفۆلیۆ ئۆنلاینەکان. سێ تا پێنج لاپەڕەی هەبێت — سەرەکی، پڕۆژەکان، لەبارە و پەیوەندی — بە کوردی، ئینگلیزی یان هەردووکیان (تۆڕگەکان دووزمانە). خۆی باشترین بەڵگەشتە: هەر کەسێک بیکاتەوە یەکسەر دەبینێت چی دەتوانیت دروست بکەیت.

A road with five numbered stops and the chapter that teaches each: 1 Plan — goal, audience, site map (chapter 7: the life cycle); 2 Design — wireframes and a style tile (chapters 5 and 6); 3 Build — HTML, then CSS, then a little JavaScript (chapters 2, 3, 4 and 7); 4 Test — validators, keyboard, phone, zoom (chapter 6); 5 Publish — GitHub Pages and a link to share (chapter 7). A curved arrow runs from Test back to Build: fix and test again.ڕێگایەک بە پێنج وێستگەی ژمارەدار و ئەو بەشەی کۆرسەکە کە هەریەکەیان فێر دەکات: 1 پلان — ئامانج، بینەر، نەخشەی تۆڕگە (بەشی 7: سووڕی ژیانی تۆڕگە)؛ 2 دیزاین — وایەرفرەیمەکان و تەختەیەکی شێواز (بەشەکانی 5 و 6)؛ 3 دروستکردن — HTML، پاشان CSS، پاشان کەمێک JavaScript (بەشەکانی 2، 3، 4 و 7)؛ 4 تاقیکردنەوە — پشکنەرەکان، کیبۆرد، مۆبایل، زووم (بەشی 6)؛ 5 بڵاوکردنەوە — GitHub Pages و بەستەرێک بۆ ناردن (بەشی 7). تیرێکی چەماوە لە تاقیکردنەوەوە بۆ دروستکردن دەگەڕێتەوە: چاکی بکە و دووپاتە تاقی بکەرەوە.
Five stops, each one taught earlier in the course.پێنج وێستگە، هەریەکەیان پێشتر لە کۆرسەکەدا فێر کراوە.CêIT

The brief: build your own portfolioئەرکەکە: پۆرتفۆلیۆی ئۆنلاینی خۆت دروست بکە

Success criteria: when is it finished?مەرجەکانی تەواوبوون: کەی تەواو دەبێت؟

Before you start, write down how you will know that the site is finished. Shilan's list — use it, or add your own:

پێش ئەوەی دەست پێ بکەیت، بینووسە چۆن دەزانیت تەواو بووە. لیستەکەی شیلان — بەکاری بهێنە یان هی خۆتی بۆ زیاد بکە:

  1. Three to five pages with one shared header, menu and footer; every link works.
  2. Valid code: no errors in the W3C HTML and CSS checkers.
  3. It works from a 320 px phone to a wide screen without sideways scrolling.
  4. It can be used with the keyboard alone, and the focus is always visible.
  5. Text contrast is at least 4.5 : 1, and every picture has fitting alt text.
  6. Every page has its own <title>, a description and the right lang (with dir="rtl" on Kurdish pages).
  7. Each project says what you did and what you learned.
  8. It is published at an https:// address that you can share.
  1. سێ تا پێنج لاپەڕە بە یەک ، و هاوبەش؛ هەموو کار دەکات.
  2. کۆدی دروست: هیچ هەڵەیەک لە پشکنەرەکانی و نییە.
  3. لە مۆبایلێکی ⁦320 px⁩ـەوە تا شاشەیەکی پان کار دەکات، بێ ئەوەی بە لادا بڕوات.
  4. تەنیا بە بەکار دەهێنرێت و هەمیشە دیارە.
  5. دەق لانیکەم 4.5:14.5:1ـە و هەموو وێنەیەک گونجاوی هەیە.
  6. هەموو لاپەڕەیەک <title>، پێناسە و langـی دروستی خۆی هەیە (لەگەڵ dir="rtl" لە لاپەڕە کوردییەکاندا).
  7. هەر پڕۆژەیەک دەڵێت چیت کرد و چیت فێر بوو.
  8. لەسەر ناونیشانێکی https:// بڵاو کراوەتەوە کە دەتوانیت بینێریت.

Plan: goal, audience and a site mapپلان: ئامانج، بینەر و نەخشەی تۆڕگە

Plan before you open the editor, as in the planning phase of the life cycle. Shilan wrote three short answers:

پێش کردنەوەی پلان دابنێ، وەک قۆناغی پلاندانان لە . شیلان سێ وەڵامی کورتی نووسی:

  • Goal (SMART): publish a four-page portfolio with three projects, in Kurdish and English, by 15 January 2027, and send its link with three internship applications.
  • Audience: web companies and teachers in the Kurdistan Region. They open links on their phones, read Kurdish and English, and decide within a minute.
  • Tasks (user tasks and the site map): see her best work quickly, read what she can do, and write to her.
  • ئامانج (SMART): تا ⁦15⁩ی کانوونی دووەمی ⁦2027⁩ چوار لاپەڕەیی بە سێ پڕۆژە، بە کوردی و ئینگلیزی، بڵاو بکاتەوە و لەگەڵ سێ داواکاریی ڕاهێنان بنێرێت.
  • بینەر: کۆمپانیاکانی وێب و مامۆستایان لە هەرێمی کوردستان. لەسەر مۆبایلەکانیان دەکەنەوە، کوردی و ئینگلیزی دەخوێننەوە و لە ماوەی یەک خولەکدا بڕیار دەدەن.
  • کارەکان (کارەکانی بەکارهێنەر و نەخشەی تۆڕگە): بە خێرایی باشترین کارەکانی ببینن، بخوێننەوە چی دەتوانێت بکات و نامەی بۆ بنووسن.
The site map as a tree. Home, index.html, at the top, with three links under it: Projects, projects.html, which has three parts — #bakery, #form and #travel; About, about.html; and Contact, contact.html. Beside it, a dashed box ckb/ holds the same four pages in Kurdish, joined to the English pages by a two-way arrow labelled hreflang and the language switch. At the bottom: 404.html for wrong addresses, and the shared files css/style.css, js/menu.js and images/.نەخشەی تۆڕگە وەک دارێک. لە سەرەوە سەرەکی (index.html) و سێ بەستەر لە ژێریدا: پڕۆژەکان (projects.html) کە سێ بەشی هەیە — #bakery، #form و #travel؛ لەبارە (about.html)؛ پەیوەندی (contact.html). لە تەنیشتیدا، چوارچێوەیەکی پچڕپچڕی ckb/ هەمان چوار لاپەڕە بە کوردی لەخۆ دەگرێت، بە تیرێکی دوو لایەنە بە ناوی hreflang و گۆڕینی زمان بە لاپەڕە ئینگلیزییەکانەوە بەستراوە. لە خوارەوە: 404.html بۆ ناونیشانی هەڵە و فایلە هاوبەشەکان css/style.css، js/menu.js و images/.
Four pages, their Kurdish twins and the shared files.چوار لاپەڕە، جمکە کوردییەکانیان و .CêIT

Plan: goal, audience and a site mapپلان: ئامانج، بینەر و نەخشەی تۆڕگە

Gather the content firstسەرەتا ناوەڕۆکەکە کۆ بکەرەوە

Write the words before the code: real text shows what the layout must hold. For every project collect a title, one sentence about it, what you did, what you learned, the tools, one picture, and links to the live page and to the code.

پێش کۆد وشەکان بنووسە: دەقی ڕاستەقینە پیشان دەدات دەبێت چی لەخۆ بگرێت. بۆ هەر پڕۆژەیەک ئەمانە کۆ بکەرەوە: ناونیشانێک، یەک ڕستە لەبارەی، چیت کرد، چیت فێر بوو، ئامرازەکان، یەک وێنە و بۆ لاپەڕە زیندووەکە و بۆ کۆدەکە.

Use your own screenshots and drawings, or free-licensed photos with a credit line under each (Pictures you may use), and export each picture at the size it is shown (Export at the size you show). Keep private data off a public site: no home address, no ID numbers, no photos of other people without their permission — an e-mail address is enough.

و وێنەکێشانی خۆت بەکاربهێنە، یان وێنەی مۆڵەتی ئازاد بە دێڕێکی ناوی خاوەنەکەی لە ژێر هەریەکەیاندا (ئەو وێنانەی دەتوانیت بەکاریان بهێنیت) و هەر وێنەیەک بەو قەبارەیە هەناردە بکە کە پیشان دەدرێت (بەو قەبارەیە هەناردەی بکە کە پیشانی دەدەیت). لە گشتیدا دامەنێ: نە ناونیشانی ماڵ، نە ژمارەی ناسنامە، نە وێنەی کەسانی تر بەبێ ئەوەی ڕازی بن — بەسە.

Choose your tools: by hand, a framework or a CMSئامرازەکانت هەڵبژێرە: بە دەست، فرەیموۆرک یان سیستەمی بەڕێوەبردنی ناوەڕۆک

There are three ways to build the same site. By hand: you write every line of HTML and CSS — slower at first, but you learn the most, and the code is small and yours. With a CSS : you still write the HTML, and add ready-made classes and parts. With a or a : you fill in forms and pick a , without writing code. The University of Michigan's web design capstone offers students the same choice: from scratch, from a template or with a framework.

سێ ڕێگە هەیە بۆ دروستکردنی هەمان . بە دەست: هەموو دێڕێکی و خۆت دەنووسیت — سەرەتا هێواشترە، بەڵام زۆرترین شت فێر دەبیت و کۆدەکە بچووک و هی خۆتە. بە CSS: هێشتا خۆت دەنووسیت و کلاس و پارچەی ئامادەی بۆ زیاد دەکەیت. بە یان : پڕ دەکەیتەوە و هەڵدەبژێریت، بێ نووسینی کۆد. پڕۆژەی کۆتایی کۆرسی زانکۆی میشیگان هەمان هەڵبژاردن دەداتە قوتابیان: لە سفرەوە، لە یان بە .

Three paths lead to the same portfolio. By hand: HTML + CSS that you write — full control, the most learning, slower at first; any static host such as GitHub Pages; marked 'learning? start here'. CSS framework: Bootstrap 5.3 or Tailwind CSS 4 — fast, tested parts, but it can look like many other sites and you still check HTML, contrast and keyboard; a static host. CMS or site builder: WordPress or an online builder — edit in the browser without code, but less control, and updates and plugins to look after; PHP hosting with a database, or the builder's own hosting.سێ ڕێگا دەگەنە هەمان پۆرتفۆلیۆی ئۆنلاین. بە دەست: HTML + CSS کە خۆت دەینووسیت — کۆنترۆڵی تەواو، زۆرترین فێربوون، سەرەتا هێواشتر؛ هەر هۆستینگی لاپەڕەتۆڕی نەگۆڕێک وەک GitHub Pages؛ نیشانەی «فێر دەبیت؟ لێرەوە دەست پێ بکە». فرەیموۆرکی CSS: Bootstrap 5.3 یان Tailwind CSS 4 — پارچەی خێرا و تاقیکراوە، بەڵام دەشێت وەک زۆر تۆڕگەی تر دەربکەوێت و هێشتا HTML، کۆنتراست و کیبۆرد دەپشکنیت؛ هۆستینگی لاپەڕەتۆڕی نەگۆڕ. سیستەمی بەڕێوەبردنی ناوەڕۆک یان دروستکەری تۆڕگە: WordPress یان دروستکەرێکی ئۆنلاین — دەستکاری لە ناو تۆڕگەڕدا بێ کۆد، بەڵام کۆنترۆڵی کەمتر و نوێکردنەوە و پاشکۆکان کە ئاگات لێیان بێت؛ هۆستینگی PHP بە بنکەدراوەوە، یان هۆستینگی خودی دروستکەرەکە.
Three roads to one site — pick the one that matches your goal.سێ ڕێگا بۆ یەک — ئەوە هەڵبژێرە کە لەگەڵ ئامانجەکەتدا دەگونجێت.CêIT

Choose your tools: by hand, a framework or a CMSئامرازەکانت هەڵبژێرە: بە دەست، فرەیموۆرک یان سیستەمی بەڕێوەبردنی ناوەڕۆک

What a CSS framework gives — and what it does notفرەیموۆرکێکی CSS چی دەدات — و چی نادات

Two CSS frameworks are common in 2026. Bootstrap (stable version 5.3.8; a version 6 is in alpha testing) gives ready components — a menu bar, cards, buttons, a 12-column grid — that you switch on with classes such as btn btn-primary; you link its CSS file and, for menus and dialogs, its JavaScript. Tailwind CSS (version 4.3) is utility-first: many small classes, each doing one job — flex, p-4, text-center — written in your HTML. A build step then keeps only the CSS you really used; its CDN script is for trying things out, not for a real site.

دوو CSS لە ساڵی ⁦2026⁩ـدا باون. Bootstrap (وەشانی جێگیر ⁦5.3.8⁩؛ وەشانی 6 لە تاقیکردنەوەی alphaـدایە) پارچەی ئامادە دەدات — شریتی ، ، ، grid بە ⁦12⁩ ستوون — کە بە کلاسی وەک btn btn-primary کارایان دەکەیت؛ CSSـەکەی دەبەستیتەوە و بۆ و ، . Tailwind CSS (وەشانی ⁦4.3⁩) شێوازی ⁦utility-first⁩ـی هەیە: زۆر کلاسی بچووک کە هەریەکەیان یەک کار دەکات — flex، p-4، text-center — لە ناو دەنووسرێن. پاشان هەنگاوێکی دروستکردن تەنیا ئەو CSSـە دەهێڵێتەوە کە بەڕاستی بەکارت هێناوە؛ CDNـەکەی بۆ تاقیکردنەوەیە، نەک بۆ ڕاستەقینە.

The same 'See my projects' button written three ways, each with the rendered button below it. By hand: <a class="button" …> in the HTML and a rule .button { background-color: var(--brand); … } in your own style.css. Bootstrap: <a class="btn btn-primary" …> with bootstrap.min.css linked — the look comes from Bootstrap. Tailwind CSS: <a class="rounded-xl bg-rose-800 px-6 py-2 font-bold text-white" …> — every class is one small rule, and the build writes only those rules.هەمان دوگمەی «See my projects» بە سێ شێوە نووسراوە، هەریەکە لەگەڵ دوگمە پیشاندراوەکە لە ژێریدا. بە دەست: <a class="button" …> لە HTMLـدا و ڕێسای .button { background-color: var(--brand); … } لە style.cssـی خۆتدا. Bootstrap: <a class="btn btn-primary" …> لەگەڵ بەستنەوەی bootstrap.min.css — شێوەکە لە Bootstrapـەوە دێت. Tailwind CSS: <a class="rounded-xl bg-rose-800 px-6 py-2 font-bold text-white" …> — هەر کلاسێک یەک ڕێسای بچووکە و دروستکردنەکە تەنیا ئەو ڕێسایانە دەنووسێت.
Same button, three ways to write it.هەمان ، سێ ڕێگای نووسینی.CêIT

Choose your tools: by hand, a framework or a CMSئامرازەکانت هەڵبژێرە: بە دەست، فرەیموۆرک یان سیستەمی بەڕێوەبردنی ناوەڕۆک

A CMS or a site builderسیستەمی بەڕێوەبردنی ناوەڕۆک یان دروستکەری تۆڕگە

WordPress is the best-known : free, open-source software (GPLv2) written in PHP. It keeps your pages in a MySQL or MariaDB database and builds each page when someone asks for it — so it needs PHP hosting, not a static host such as GitHub Pages (Static hosting or PHP hosting?). On 4 November 2026 the survey site W3Techs found it on 39.5 % of all websites. A is an online service instead: you drag blocks onto a , and the company hosts the site for you.

WordPress ناسراوترین : بێبەرانبەر و ⁦(GPLv2)⁩ کە بە نووسراوە. لاپەڕەکانت لە MySQL یان MariaDBـدا هەڵدەگرێت و هەر لاپەڕەیەک کاتێک کەسێک داوای دەکات دروست دەکات — بۆیە پێویستی بە هەیە، نەک وەک GitHub Pages (هۆستینگی لاپەڕەتۆڕی نەگۆڕ یان هۆستینگی PHP؟). لە 4ی تشرینی دووەمی ⁦2026⁩ـدا ڕاپرسیی ⁦W3Techs⁩ لەسەر ⁦39.5 %⁩ـی هەموو دۆزییەوە. لە بری ئەوە خزمەتگوزارییەکی ئۆنلاینە: بلۆکەکان ڕادەکێشیت بۆ سەر و کۆمپانیاکە بۆت هۆست دەکات.

Three rows show where a page comes from. Static site, by hand or with a framework: your files go to a static host and are sent to the browser as they are. WordPress: you write in the admin page in your browser; the text is saved in a MySQL or MariaDB database; for every visitor PHP reads the database and builds the HTML page. Site builder: you drag blocks in the builder's editor, and the builder's own servers host and send the site.سێ ڕیز پیشان دەدەن لاپەڕە لە کوێوە دێت. تۆڕگەی نەگۆڕ، بە دەست یان بە فرەیموۆرک: فایلەکانت دەچنە سەر هۆستینگی لاپەڕەتۆڕی نەگۆڕێک و وەک خۆیان بۆ تۆڕگەڕ دەنێردرێن. WordPress: لە لاپەڕەی بەڕێوەبردندا لە ناو تۆڕگەڕەکەتدا دەنووسیت؛ دەقەکە لە بنکەدراوەیەکی MySQL یان MariaDBـدا پاشەکەوت دەکرێت؛ بۆ هەر سەردانیکەرێک PHP بنکەدراوەکە دەخوێنێتەوە و لاپەڕەی HTML دروست دەکات. دروستکەری تۆڕگە: لە دەستکاریکەری دروستکەرەکەدا بلۆکەکان ڕادەکێشیت و ڕاژەکارەکانی خودی دروستکەرەکە تۆڕگەکە هۆست دەکەن و دەینێرن.
Files sent as they are, a page built by PHP, or a page hosted by the builder. وەک خۆی دەنێردرێت، لاپەڕەیەک کە دروستی دەکات، یان لاپەڕەیەک کە دروستکەرەکە هۆستی دەکات.CêIT
Three ways to build a portfolioسێ ڕێگا بۆ دروستکردنی
QuestionپرسیارBy handبە دەستCSS framework CSSCMS or builder یان دروستکەر
You writeتۆ دەینووسیتAll the HTML and CSSهەموو و The HTML, with ready classes، بە کلاسی ئامادەText in forms; no codeدەق لە ناو ؛ بێ کۆد
ControlکۆنترۆڵFullتەواوHighزۆرLow to mediumکەم تا مامناوەند
Best forباشترین بۆLearning; a small personal siteفێربوون؛ کەسیی بچووکFast work in a teamکاری خێرا لە تیمێکداOwners who update content oftenئەو خاوەنانەی ناوەڕۆک زۆرجار نوێ دەکەنەوە
HostingFree static hosting بێبەرانبەرFree static hosting بێبەرانبەرPHP hosting, or the builder's own ، یان هی خودی دروستکەرەکە
UpkeepچاودێریYour own code onlyتەنیا کۆدی خۆتFramework updatesنوێکردنەوەی Updates for the CMS, theme and pluginsنوێکردنەوەی ، تێم و

Wireframes: the phone first, then the wide screenوایەرفرەیمەکان: سەرەتا مۆبایل، پاشان شاشەی پان

Sketch every page on paper before you style anything (Wireframes: boxes before colours). Draw the phone first — one column — then the wide screen, and write the real headings and button words. Shilan's home page: her name and a Menu button, a big hello, one button that leads to the projects, then three project cards — stacked on a phone, side by side on a laptop.

پێش ئەوەی هیچ شتێک بڕازێنیتەوە، هەموو لاپەڕەیەک لەسەر کاغەز بکێشە (وایەرفرەیمەکان: سندووق پێش ڕەنگ). سەرەتا مۆبایل بکێشە — یەک ستوون — پاشان شاشەی پان و و وشەکانی ڕاستەقینە بنووسە. شیلان: ناوەکەی و Menu، سڵاوێکی گەورە، یەک کە دەچێت بۆ پڕۆژەکان، پاشان سێ پڕۆژە — لەسەر مۆبایل لە ژێر یەکتر، لەسەر لاپتۆپ لە تەنیشت یەکتر.

A pencil sketch on paper. Left, the phone: the name Shilan and a Menu button, the heading Hi, I'm Shilan with wavy lines for text, a button See my projects, then three boxes with a cross for a picture, each with a heading and lines, one under the other. Right, the wide screen: the name on the left and the links Home, Projects, About, Contact and the language switch on the right; the same heading and button; three project boxes in one row.وێنەیەکی قەڵەمی لەسەر کاغەز. لای ڕاست، مۆبایل: ناوی شیلان و دوگمەیەکی مێنیو، سەردێڕی سڵاو، من شیلانم بە هێڵی شەپۆلاوی بۆ دەق، دوگمەی پڕۆژەکانم ببینە، پاشان سێ سندووق بە خاچێک بۆ وێنە، هەریەکە بە سەردێڕێک و چەند هێڵێک، لە ژێر یەکتر. لای چەپ، شاشەی پان: ناوەکە لە لایەک و بەستەرەکان سەرەکی، پڕۆژەکان، لەبارە، پەیوەندی و گۆڕینی زمان لە لایەکی تر؛ هەمان سەردێڕ و دوگمە؛ سێ سندووقی پڕۆژە لە یەک ڕیزدا.
Phone first, then the wide screen — with the real words.سەرەتا مۆبایل، پاشان شاشەی پان — بە وشە ڕاستەقینەکان.CêIT

Wireframes: the phone first, then the wide screenوایەرفرەیمەکان: سەرەتا مۆبایل، پاشان شاشەی پان

A style tile: colours, type and spacing on one pageتەختەی شێواز: ڕەنگ، فۆنت و بۆشایی لە یەک لاپەڕەدا

Definitionپێناسە

One page that shows the look of a site before its pages are designed: the colours with their jobs and contrast, the fonts and the , the spacing, and a sample button, link and card. It is quicker to make than a full , and its values become the site's and, later, its .

یەک لاپەڕەیە کە شێوەی پیشان دەدات پێش ئەوەی لاپەڕەکانی دیزاین بکرێن: ڕەنگەکان لەگەڵ ئەرک و کۆنتراستیان، و ، بۆشاییەکان و نموونەی ، و . لە تەواو خێراتر دروست دەکرێت و بەهاکانی دەبنە و دواتر ئەو.

Shilan chose a warm paper colour, near-black ink and one brand colour for links and buttons, and checked every pair (The contrast ratio). She took a 1.25 type scale (A type scale) and the six spacing steps of White space and a spacing scale. Vazirmatn, self-hosted, carries the Kurdish text (@font-face).

شیلان ڕەنگێکی گەرمی کاغەز، مەرەکەبێکی نزیک لە ڕەش و یەک ڕەنگی براندی بۆ و هەڵبژارد و هەموو جووتێکی پشکنی (ڕێژەی کۆنتراست). ⁦1.25⁩ـی وەرگرت (پەیژەی قەبارەی فۆنت) و شەش پلە بۆشاییەکەی شوێنی بەتاڵ و پەیژەی بۆشایی. Vazirmatn، کە لەسەر خۆی هەڵگیراوە، دەقە کوردییەکە هەڵدەگرێت (⁦@font-face⁩).

Shilan's style tile. Colours: paper #fdfbf7, ink #1f2328 (15.28 : 1 on paper), muted #5b6168 (6.05 : 1), brand #8a3a57 (7.19 : 1 on paper; white on brand 7.43 : 1), soft #f4e9ee and line #e2dcd3. Type: one sample per step of the 1.25 scale, from 2.441rem down to 1rem body text, in system-ui for English and Vazirmatn for Kurdish. Spacing: six bars from 0.25rem to 3rem. Samples: the See my projects button, a link, a focus ring and a project card.تەختەی شێوازی شیلان. ڕەنگەکان: کاغەز #fdfbf7، مەرەکەب #1f2328 (15.28:1 لەسەر کاغەز)، کاڵ #5b6168 (6.05:1)، براند #8a3a57 (7.19:1 لەسەر کاغەز؛ سپی لەسەر براند 7.43:1)، نەرم #f4e9ee و هێڵ #e2dcd3. فۆنت: نموونەیەک بۆ هەر پلەیەکی پەیژەی 1.25، لە 2.441remـەوە تا دەقی سەرەکیی 1rem، بە system-ui بۆ ئینگلیزی و Vazirmatn بۆ کوردی. بۆشایی: شەش شریت لە 0.25remـەوە تا 3rem. نموونەکان: دوگمەی پڕۆژەکانم ببینە، بەستەرێک، بازنەی فۆکەس و کارتێکی پڕۆژە.
The whole look on one board — before any page is styled.هەموو شێوەکە لەسەر یەک تەختە — پێش ئەوەی هیچ لاپەڕەیەک بڕازێنرێتەوە.CêIT
css/style.css: the style tile as custom properties⁦css/style.css⁩: تەختەی شێوازەکە وەک تایبەتمەندییە دڵخوازەکانcss/style.cssCSSRuns in the browserلە ناو تۆڕگەڕ کار دەکات
:root {
  --paper: #fdfbf7;
  --card: #ffffff;
  --ink: #1f2328;
  --muted: #5b6168;
  --brand: #8a3a57;
  --brand-dark: #6f2c45;
  --on-brand: #ffffff;
  --soft: #f4e9ee;
  --line: #e2dcd3;

  --step-0: 1rem;
  --step-1: 1.25rem;
  --step-2: 1.563rem;
  --step-3: 1.953rem;
  --step-4: 2.441rem;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;

  --radius: 0.75rem;
  --font: system-ui, "Segoe UI", Roboto, sans-serif;
  color-scheme: light dark;
}
Explain the codeڕوونکردنەوەی کۆدەکە
Lineدێڕی 2-10

Each colour has a job, not just a name: paper, card, ink, muted, brand.

هەر ڕەنگێک ئەرکێکی هەیە، نەک تەنیا ناوێک: کاغەز، ، مەرەکەب، کاڵ، براند.

Lineدێڕی 12-16

The type scale: each step is 1.25 times the one before.

: هەر پلەیەک ⁦1.25⁩ هێندەی پلەی پێشووە.

Lineدێڕی 18-23

The spacing scale in rem, so it grows when the reader enlarges the text.

بە rem، بۆ ئەوەی گەورە ببێت کاتێک خوێنەر دەقەکە گەورە دەکات.

Build step 1: the HTML structureهەنگاوی یەکەمی دروستکردن: پێکهاتەی HTML

Write all four pages in HTML only, with no CSS yet. Put a skip link first; then the landmarks — a header with the menu, one main and a footer, the same on every page; aria-current="page" on the link of the page you are on (Navigation menus); one h1; and alt, width and height on every picture (Width and height). The page is plain, but complete: it already works.

هەر چوار لاپەڕەکە تەنیا بە بنووسە، هێشتا بێ . سەرەتا بەستەری بازدانێک دابنێ؛ پاشان ناوچە نیشانەدارەکان — لەگەڵ ، یەک main و ، لە هەموو لاپەڕەیەکدا وەک یەک؛ aria-current="page" لەسەر ئەو لاپەڕەیەی لەسەریت (لیستە ڕێنیشاندەرەکان)؛ یەک h1؛ و alt، width و height لەسەر هەموو وێنەیەک (پانی و بەرزی). لاپەڕەکە سادەیە، بەڵام تەواوە: ئێستاش کار دەکات.

Step 1: plain, but every part is there and in reading order.هەنگاوی یەکەم: سادە، بەڵام هەموو بەشێک لە شوێنی خۆیدا و بە ڕیزبەندیی خوێندنەوە.CêIT
index.html: the top of the body⁦index.html⁩: سەرەوەی bodyindex.htmlHTMLRuns in the browserلە ناو تۆڕگەڕ کار دەکات
<a class="skip-link" href="#main">Skip to main content</a>
<header class="site-header">
  <div class="wrapper">
    <a class="logo" href="index.html">Shilan</a>
    <nav id="site-nav" class="site-nav" aria-label="Main">
      <ul>
        <li><a href="index.html" aria-current="page">Home</a></li>
        <li><a href="projects.html">Projects</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="contact.html">Contact</a></li>
      </ul>
    </nav>
    <nav class="lang-switch" aria-label="Language">
      <ul>
        <li><a href="index.html" hreflang="en" lang="en" aria-current="page">English</a></li>
        <li><a href="ckb/index.html" hreflang="ckb" lang="ckb">کوردی</a></li>
      </ul>
    </nav>
  </div>
</header>
Explain the codeڕوونکردنەوەی کۆدەکە
Lineدێڕی 1

The skip link comes first, so a keyboard user can jump past the menu.

یەکەم شتە، بۆ ئەوەی بەکارهێنەری بتوانێت بە سەر باز بدات.

Lineدێڕی 5-12

The main menu, with aria-current on the page you are on.

سەرەکی، بە ⁦aria-current⁩ لەسەر ئەو لاپەڕەیەی لەسەریت.

Lineدێڕی 13-18

A second, named nav for the language switch: each link in its own language.

nav-ێکی دووەمی ناونراو بۆ گۆڕینی زمان: هەر بە زمانی خۆی.

Build step 1: the HTML structureهەنگاوی یەکەمی دروستکردن: پێکهاتەی HTML

Each project card is an articleهەر کارتێکی پڕۆژە <article>ـێکە

A project card makes sense on its own, so it is an <article> (article, section or div?). Its heading is a link whose words name the project (Link text that makes sense alone), and its picture has alt text that says what the picture shows (Alt text).

پڕۆژە بە تەنیا خۆی واتای هەیە، بۆیە <article>ـێکە (article، section یان div؟). کە وشەکانی ناوی پڕۆژەکە دەڵێن (دەقی بەستەر کە بە تەنیا واتای هەبێت) و وێنەکەی هەیە کە دەڵێت وێنەکە چی پیشان دەدات (دەقی جێگرەوە).

The bakery card with four labels. 1 article: the whole card, which makes sense on its own. 2 img with alt, width and height: the picture of the bakery site; alt says what it shows, width and height keep its space while it loads. 3 h3 with a link: Shilan's Bakery, link words that name the project. 4 p: one sentence about the project.کارتی نانەواخانەکە بە چوار نیشانەوە. 1 article: هەموو کارتەکە، کە بە تەنیا واتای هەیە. 2 img بە alt، width و height: وێنەی تۆڕگەی نانەواخانەکە؛ alt دەڵێت چی پیشان دەدات، width و height شوێنەکەی دەپارێزن تا بار دەبێت. 3 h3 بە بەستەرێکەوە: Shilan's Bakery، وشەی بەستەر کە ناوی پڕۆژەکە دەڵێت. 4 p: یەک ڕستە لەبارەی پڕۆژەکە.
Four parts, each chosen for its meaning.چوار بەش، هەریەکە بۆ واتاکەی هەڵبژێردراوە.CêIT
index.html: one project card⁦index.html⁩: یەک کارتی پڕۆژەHTMLRuns in the browserلە ناو تۆڕگەڕ کار دەکات
<article class="card">
      <img src="images/bakery.svg" alt="The bakery site in a browser: a brown header, a loaf of bread and an Order button." width="480" height="300">
      <h3><a href="projects.html#bakery">Shilan's Bakery</a></h3>
      <p>A four-page site for my family's bakery, built mobile-first and published on GitHub Pages.</p>
    </article>

Build step 2: CSS, mobile-firstهەنگاوی دووەمی دروستکردن: CSS، مۆبایل لە پێشدا

One style sheet serves all nine pages. Its base rules make one column for phones; media queries add columns when there is room (Mobile-first): two cards side by side from 40em (640 px), three from 64em (1024 px), and from 48em the menu opens on its own. Logical properties such as margin-inline-start let the same file work for the Kurdish twins (Logical properties).

یەک خزمەتی هەر نۆ لاپەڕەکە دەکات. ڕێسا بنەڕەتییەکانی یەک ستوون بۆ مۆبایل دروست دەکەن؛ کاتێک شوێن هەبێت ستوون زیاد دەکەن (مۆبایل لە پێشدا): لە ⁦40em⁩ـەوە ⁦(640 px)⁩ دوو لە تەنیشت یەکتر، لە ⁦64em⁩ـەوە ⁦(1024 px)⁩ سێ. لە ⁦48em⁩ـەوەش خۆی دەکرێتەوە. وەک margin-inline-start وا دەکەن هەمان بۆ جمکە کوردییەکانیش کار بکات (تایبەتمەندییە لۆجیکییەکان).

Animation in four steps of Shilan's home page as the screen gets wider, with a ruler and the breakpoints 40em, 48em and 64em. At 360 px, a phone: the name and a Menu button, the heading, the button and one column of cards. At 700 px: still the Menu button, but two cards side by side. At 900 px: the Menu button is gone, and the menu links and the language switch share one header row; still two columns of cards. At 1280 px: three cards in one row.
Animation in four steps of Shilan's home page as the screen gets wider, with a ruler and the breakpoints 40em, 48em and 64em. At 360 px, a phone: the name and a Menu button, the heading, the button and one column of cards. At 700 px: still the Menu button, but two cards side by side. At 900 px: the Menu button is gone, and the menu links and the language switch share one header row; still two columns of cards. At 1280 px: three cards in one row.
One style sheet, four widths: the content decides where the layout changes.یەک ، چوار پانی: ناوەڕۆکەکە بڕیار دەدات لە کوێ بگۆڕێت.CêIT
css/style.css: the cards, mobile-first⁦css/style.css⁩: کارتەکان، مۆبایل لە پێشداCSSRuns in the browserلە ناو تۆڕگەڕ کار دەکات
.cards {
  display: grid;
  gap: var(--space-4);
}

.card {
  padding: var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background-color: var(--card);
}

@media (width >= 40em) {
  .cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (width >= 64em) {
  .cards {
    grid-template-columns: repeat(3, 1fr);
  }
}
Explain the codeڕوونکردنەوەی کۆدەکە
Lineدێڕی 1-4

Phones: one column — no media query needed.

مۆبایل: یەک ستوون — هیچ پێویست نییە.

Lineدێڕی 13-23

Wider screens add columns.

شاشەی پانتر ستوون زیاد دەکەن.

Build step 3: one small JavaScript touchهەنگاوی سێیەمی دروستکردن: کەمێک JavaScript

Shilan added a single script: the phone Menu button from the JavaScript lesson, with one change. The button sits in the header of every page, right after the name, and the base CSS hides it. The script puts the class js on <html>, and the CSS shows the button and folds the menu only when that class is there and the screen is narrow. If the script never runs, every link simply shows (Progressive enhancement).

شیلان تەنیا یەک زیاد کرد: Menu بۆ مۆبایل لە وانەی JavaScript، بە یەک گۆڕانکارییەوە. لە هەموو لاپەڕەیەکدا، ڕێک دوای ناوەکە دادەنرێت و بنەڕەتی دەیشارێتەوە. کلاسی js دەخاتە سەر <html> و تەنیا کاتێک پیشان دەدات و دەپێچێتەوە کە ئەو کلاسە هەبێت و شاشەکە تەسک بێت. ئەگەر هەرگیز کار نەکات، هەموو بە سادەیی دەردەکەوێت (باشترکردنی پلەبەپلە).

index.html: the button, right after the name⁦index.html⁩: دوگمەکە، ڕێک دوای ناوەکەindex.htmlHTMLRuns in the browserلە ناو تۆڕگەڕ کار دەکات
<a class="logo" href="index.html">Shilan</a>
<button type="button" class="menu-button" aria-expanded="false" aria-controls="site-nav">Menu</button>
<nav id="site-nav" class="site-nav" aria-label="Main">…</nav>
Explain the codeڕوونکردنەوەی کۆدەکە
Lineدێڕی 2

A real button: aria-expanded is false at the start (the menu is closed), and aria-controls names the menu it opens.

ڕاستەقینە: لە سەرەتادا aria-expanded بریتییە لە false ( داخراوە) و aria-controls ناوی ئەو دەبات کە دەیکاتەوە.

js/menu.js — the whole script⁦js/menu.js⁩ — هەموو دەسنووسەکەjs/menu.jsJAVASCRIPTRuns in the browserلە ناو تۆڕگەڕ کار دەکات
// The Menu button for phones. Without JavaScript, every link simply shows.
document.documentElement.classList.add("js");

const menuButton = document.querySelector(".menu-button");
const siteNav = document.querySelector("#site-nav");

menuButton.addEventListener("click", () => {
  const isOpen = siteNav.classList.toggle("is-open");
  menuButton.setAttribute("aria-expanded", isOpen);
});
Explain the codeڕوونکردنەوەی کۆدەکە
Lineدێڕی 2

Tell the CSS that JavaScript works.

بە بڵێ کە کار دەکات.

Lineدێڕی 7-10

Open or close the menu, and keep aria-expanded in step.

بکەرەوە یان دابخە و ⁦aria-expanded⁩ هاوکات بهێڵەوە.

css/style.css: the menu on phones⁦css/style.css⁩: مێنیوەکە لەسەر مۆبایلcss/style.cssCSSRuns in the browserلە ناو تۆڕگەڕ کار دەکات
/* Without JavaScript the Menu button stays hidden */
.menu-button {
  display: none;
}

/* With JavaScript, phones get a Menu button and a folded menu */
.js .menu-button {
  display: inline-block;
}

.js .site-nav {
  display: none;
  flex-basis: 100%;
}

.js .site-nav.is-open {
  display: block;
}

.js .site-nav.is-open ul {
  flex-direction: column;
}

@media (width >= 48em) {
  .js .menu-button {
    display: none;
  }

  .js .site-nav {
    display: block;
    flex-basis: auto;
  }
}
Explain the codeڕوونکردنەوەی کۆدەکە
Lineدێڕی 2-4

The base rule: no script, no button.

ڕێسای بنەڕەتی: بێ ، بێ .

Lineدێڕی 7-9

With the js class, phones get the button.

بە کلاسی js، مۆبایل وەردەگرێت.

Closed, then open: aria-expanded changes from false to true.داخراو، پاشان کراوە: ⁦aria-expanded⁩ لە false دەگۆڕێت بۆ true.CêIT

Test it like your visitorsوەک سەردانیکەرەکانت تاقی بکەرەوە

Test every page in layers, as in Testing: tools, keyboard, screen reader, people and the checklist before you publish:

هەموو لاپەڕەیەک چین بە چین تاقی بکەرەوە، وەک تاقیکردنەوە: ئامراز، کیبۆرد، خوێنەرەوەی شاشە، خەڵک و لیستی پشکنین پێش بڵاوکردنەوە:

  1. Code: every page in the Nu HTML Checker and the style sheet in the W3C CSS validator — no errors.
  2. The W3C Easy Checks: page title, alt text, headings, contrast, skip link, visible focus, language, zoom.
  3. Keyboard only: Tab, Shift+Tab and Enter through every page; the focus is always visible.
  4. Zoom to 400 %: on a 1280 px window that is a 320 px layout (WCAG 1.4.10 Reflow); nothing may scroll sideways.
  5. Real devices: your phone, and at least two different browsers.
  6. An audit: Lighthouse in the developer tools, then read the page aloud for typos and wrong links.
  1. کۆد: هەموو لاپەڕەیەک لە پشکنەری Nu HTML و لە پشکنەری CSSـی — بێ هەڵە.
  2. Easy Checksـی : ناونیشانی لاپەڕە، ، ، کۆنتراست، ، ، زمان، .
  3. تەنیا : Tab، ⁦Shift+Tab⁩ و Enter بە هەموو لاپەڕەیەکدا؛ هەمیشە دیارە.
  4. بۆ ⁦400 %⁩: لە پەنجەرەیەکی ⁦1280 px⁩ـدا ئەوە ⁦320 px⁩ـە ( ⁦1.4.10 Reflow⁩)؛ هیچ شتێک نابێت بە لادا بڕوات.
  5. ئامێری ڕاستەقینە: مۆبایلەکەت و لانیکەم دوو جیاواز.
  6. پشکنینێکی خۆکار: Lighthouse لە ، پاشان لاپەڕەکە بە دەنگی بەرز بخوێنەرەوە بۆ هەڵەی نووسین و هەڵە.
A test board with six rows, each with a tool and what it finds. 1 Nu HTML Checker and W3C CSS validator: errors in the code. 2 W3C Easy Checks: title, alt text, headings, contrast, skip link, focus, language, zoom. 3 Keyboard: Tab, Shift+Tab, Enter — can you reach and see everything? 4 Zoom 400 % = 320 px: does anything scroll sideways? 5 A phone and two browsers: real screens, real fingers. 6 Lighthouse and reading aloud: what tools and eyes miss. An arrow from the board back to the code: fix, then test again.تەختەیەکی تاقیکردنەوە بە شەش ڕیز، هەریەکە بە ئامرازێک و ئەوەی دەیدۆزێتەوە. 1 پشکنەری Nu HTML و پشکنەری CSSـی W3C: هەڵە لە کۆددا. 2 Easy Checksـی W3C: ناونیشان، دەقی جێگرەوە، سەردێڕەکان، کۆنتراست، بەستەری بازدان، فۆکەس، زمان، زووم. 3 کیبۆرد: Tab، Shift+Tab، Enter — دەگەیتە هەموو شتێک و دەیبینیت؟ 4 زوومی 400 % = 320 px: هیچ شتێک بە لادا دەڕوات؟ 5 مۆبایلێک و دوو تۆڕگەڕ: شاشەی ڕاستەقینە، پەنجەی ڕاستەقینە. 6 Lighthouse و خوێندنەوە بە دەنگی بەرز: ئەوەی ئامراز و چاو لێی بێئاگان. تیرێک لە تەختەکەوە بۆ کۆدەکە دەگەڕێتەوە: چاکی بکە، پاشان دووپاتە تاقی بکەرەوە.
Each layer finds what the others miss.هەر چینێک ئەوە دەدۆزێتەوە کە ئەوانی تر لێی بێئاگان.CêIT

Test it like your visitorsوەک سەردانیکەرەکانت تاقی بکەرەوە

Fix, then test againچاکی بکە، پاشان دووپاتە تاقی بکەرەوە

Shilan's first version failed three of the tests. Each fix was small, and after each one she ran the same test again:

یەکەم وەشانی شیلان لە سێ تاقیکردنەوەدا دەرنەچوو. هەر چاککردنێک بچووک بوو و دوای هەریەکەیان هەمان تاقیکردنەوەی دووپاتە کردەوە:

Shilan's test logتۆماری تاقیکردنەوەکانی شیلان
TestتاقیکردنەوەWhat went wrongچی هەڵە بووFixچاککردن
Nu HTML Checkerپشکنەری Nu HTML"An img element must have an alt attribute" (index.html, line 47)«An img element must have an alt attribute» (⁦index.html⁩، دێڕی ⁦47⁩)Alt text for the bakery picture بۆ وێنەی نانەواخانەکە
Contrast in the developer toolsکۆنتراست لە Footer text #9a948b on #fdfbf7: 2.9 : 1دەقی ⁦#9a948b⁩ لەسەر ⁦#fdfbf7⁩: 2.9:12.9:1--muted: #5b6168 gives 6.05 : 1--muted: #5b6168 6.05:16.05:1 دەدات
400 % zoom (320 px) ⁦400 % (320 px)⁩The long e-mail address made the contact page 431 px wide درێژەکە لاپەڕەی پەیوەندیی ⁦431 px⁩ پان کردoverflow-wrap: anywhere on .emailoverflow-wrap: anywhere لەسەر .email
Before and after: the same page at 320 px.پێش و دوای: هەمان لاپەڕە لە ⁦320 px⁩ـدا.CêIT

Publish it and share the linkبڵاوی بکەرەوە و بەستەرەکە بنێرە

Put the folder on GitHub Pages as in GitHub Pages step by step; the free plans and their limits are in Free static hosting. Check the folder first: index.html at the top level, lowercase names without spaces, and a 404.html (A friendly 404 page). Then open the live address on your phone, run the tests there again (After publishing), and put the link in your CV and your e-mails.

بخە سەر GitHub Pages وەک GitHub Pages هەنگاو بە هەنگاو؛ پلانە بێبەرانبەرەکان و سنوورەکانیان لە هۆستینگی لاپەڕەتۆڕی نەگۆڕی بێبەرانبەرـدان. سەرەتا بپشکنە: index.html لە ئاستی سەرەوە، ناوی پیتی بچووک بێ بۆشایی و 404.htmlـێک (لاپەڕەیەکی ⁦404⁩ـی دۆستانە). پاشان ناونیشانە زیندووەکە لەسەر مۆبایلەکەت بکەرەوە، تاقیکردنەوەکان لەوێ دووپاتە بکەرەوە (دوای بڵاوکردنەوە) و بخە ناو CVـەکەت و ئیمەیڵەکانتەوە.

The folder to upload as a tree, in a repository named username.github.io: index.html, projects.html, about.html, contact.html and 404.html at the top level; css/style.css; js/menu.js; images/ with bakery.svg, form.svg, travel.svg and favicon.svg; fonts/vazirmatn-arabic.woff2; and ckb/ with the four Kurdish pages. Notes: index.html at the top level becomes https://username.github.io/; ckb/index.html becomes …/ckb/ and links its style sheet as ../css/style.css; every name lowercase, without spaces.ئەو فۆڵدەرەی هەڵبار دەکرێت وەک دارێک، لە کۆگای کۆدێکدا بە ناوی username.github.io: index.html، projects.html، about.html، contact.html و 404.html لە ئاستی سەرەوە؛ css/style.css؛ js/menu.js؛ images/ بە bakery.svg، form.svg، travel.svg و favicon.svg؛ fonts/vazirmatn-arabic.woff2؛ و ckb/ بە چوار لاپەڕە کوردییەکەوە. تێبینییەکان: index.htmlـی ئاستی سەرەوە دەبێت بە https://username.github.io/؛ ckb/index.html دەبێت بە …/ckb/ و پەڕەی شێوازەکەی وەک ../css/style.css دەبەستێتەوە؛ هەموو ناوێک بە پیتی بچووک، بێ بۆشایی.
Exactly this folder becomes the site.ڕێک ئەم دەبێت بە .CêIT

The model: Shilan's portfolioنموونەکە: پۆرتفۆلیۆی ئۆنلاینی شیلان

Here is the finished model for a fictional student, Shilan: four pages in English and the same four in Kurdish, one style sheet, one small script, three pictures drawn as SVG and a 404 page. All nine pages pass the Nu HTML Checker and the style sheet passes the W3C CSS validator. These screenshots were taken in Chrome at 1280 px wide. Find the style tile in them: the brand colour on the current menu item, the button and the links, and the 1.25 type scale from the hello down to the card text.

ئەمە نموونە تەواوکراوەکەیە بۆ قوتابییەکی خەیاڵی بە ناوی شیلان: چوار لاپەڕە بە ئینگلیزی و هەمان چوار بە کوردی، یەک ، یەک بچووک، سێ وێنەی کێشراو بە و لاپەڕەیەکی ⁦404⁩. هەر نۆ لاپەڕەکە لە پشکنەری Nu HTMLـدا دەردەچن و لە پشکنەری CSSـی دەردەچێت. ئەم لە Chromeـدا بە پانیی ⁦1280 px⁩ گیراون. تێیاندا بدۆزەرەوە: ڕەنگی براند لەسەر بڕگەی ئێستای ، و . هەروەها ⁦1.25⁩ لە سڵاوەکەوە تا دەقی ببینە.

The model's home page at 1280 px (the Kurdish twin is mirrored). نموونەکە لە ⁦1280 px⁩ـدا (جمکە کوردییەکەی بە ئاوێنەیی وەرگەڕاوە).CêIT

The model: Shilan's portfolioنموونەکە: پۆرتفۆلیۆی ئۆنلاینی شیلان

The model on a phone, by day and by nightنموونەکە لەسەر مۆبایل، بە ڕۆژ و بە شەو

On a 390 px phone every page has one column. The first phone shows the projects page, where each project says what Shilan did and what she learned; the second, the contact page, whose long address now wraps; the third, the home page at night. Because her colours live in custom properties, the dark theme is only new values inside prefers-color-scheme: dark — not one other rule changes (A dark theme).

لەسەر مۆبایلێکی ⁦390 px⁩ هەموو لاپەڕەیەک یەک ستوونی هەیە. یەکەم مۆبایل لاپەڕەی پڕۆژەکان پیشان دەدات، کە هەر پڕۆژەیەک دەڵێت شیلان چی کرد و چی فێر بوو؛ دووەم، لاپەڕەی پەیوەندی، کە ناونیشانە درێژەکەی ئێستا دەچێتە دێڕی دواتر؛ سێیەم، بە شەو. چونکە ڕەنگەکانی لە ، تەنیا نوێیە لە ناو prefers-color-scheme: darkـدا — هیچ ڕێسایەکی تر ناگۆڕێت (دۆخی تاریک).

Projects, contact and the home page at night.پڕۆژەکان، پەیوەندی و بە شەو.CêIT
css/style.css: the whole dark theme⁦css/style.css⁩: هەموو دۆخی تاریکەکەcss/style.cssCSSRuns in the browserلە ناو تۆڕگەڕ کار دەکات
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #17191c;
    --card: #202327;
    --ink: #ecebe8;
    --muted: #b4b0aa;
    --brand: #f0a8c0;
    --brand-dark: #f6c6d6;
    --on-brand: #17191c;
    --soft: #33262c;
    --line: #3a3d42;
  }
}
Explain the codeڕوونکردنەوەی کۆدەکە
Lineدێڕی 1

Runs only when the visitor's system is set to dark.

تەنیا کاتێک کار دەکات کە سیستەمی سەردانیکەرەکە لەسەر تاریک دانرابێت.

Lineدێڕی 7-9

The brand colour gets lighter and the text on it dark, so links and buttons keep their contrast (9.28 : 1) on the dark paper.

ڕەنگی براند ڕووناکتر دەبێت و دەقی سەری تاریک، بۆ ئەوەی و لەسەر کاغەزە تاریکەکە کۆنتراستیان بمێنێت (9.28:19.28:1).

The rubric: score your own siteخشتەی هەڵسەنگاندن: تۆڕگەکەی خۆت بنرخێنە

Score your site on these six rows. Be honest: "Not yet" only means "next on my list". Then ask a classmate to score it too — another person finds what you no longer see.

لەسەر ئەم شەش ڕیزە بنرخێنە. ڕاستگۆ بە: «هێشتا نا» تەنیا واتە «دواتر لە لیستەکەمدا». پاشان داوا لە هاوپۆلێک بکە ئەویش بینرخێنێت — کەسێکی تر ئەوە دەدۆزێتەوە کە تۆ چیتر نایبینیت.

Portfolio rubricخشتەی هەڵسەنگاندنی
RowڕیزNot yetهێشتا ناGoodباشExcellentنایاب
StructureپێکهاتەDiv soup, skipped headingsتەنیا div، بازداوLandmarks, one h1, valid HTML، یەک ⁦h1⁩، دروست…and a skip link, aria-current, the same layout on every page…و ، ⁦aria-current⁩، هەمان لە هەموو لاپەڕەیەکدا
DesignدیزاینRandom colours and sizesڕەنگ و قەبارەی هەڕەمەکیA palette and a type scale; text contrast ≥ 4.5 : 1 و ؛ کۆنتراستی دەق ≥ 4.5:14.5:1…and a spacing scale, the same cards and buttons everywhere, a style tile…و ، هەمان و لە هەموو شوێنێک،
ResponsiveڕێسپۆنسیڤThe page scrolls sideways on a phoneلاپەڕەکە لەسەر مۆبایل بە لادا دەڕواتOne column on phones, more on wide screensیەک ستوون لەسەر مۆبایل، زیاتر لەسەر شاشەی پان…and works at 320 px (400 % zoom), tested on a real phone…و لە ⁦320 px⁩ (زوومی ⁦400 %⁩) کار دەکات، لەسەر مۆبایلی ڕاستەقینە تاقیکراوەتەوە
AccessibleدەستڕاگەیشتووMouse only; pictures without altتەنیا ماوس؛ وێنە بێ altKeyboard works, visible focus, alt text, the right lang کار دەکات، ، ، langـی دروست…and the Easy Checks and a screen-reader pass…و Easy Checks و تاقیکردنەوەیەک بە
ContentناوەڕۆکDummy text; no projectsدەقی ساختە؛ بێ پڕۆژەThree projects with titles and descriptionsسێ پڕۆژە بە ناونیشان و وەسفەوە…and what you did, what you learned, links to the live work and its code…و چیت کرد، چیت فێر بوو، بۆ کارە زیندووەکە و کۆدەکەی
PublishedبڵاوکراوەOnly on your laptopتەنیا لەسەر لاپتۆپەکەتLive at an https:// addressزیندوو لەسەر ناونیشانێکی https://…and checked on the live address, a 404 page, the link shared…و لەسەر ناونیشانە زیندووەکە پشکنراوە، لاپەڕەی ⁦404⁩، نێردراوە
ExerciseڕاهێنانScore the modelنموونەکە بنرخێنە

Use the rubric on Shilan's model from the last screens. For each row write a score and one piece of evidence.

خشتەکە لەسەر نموونەکەی شیلان لە شاشەکانی پێشوو بەکاربهێنە. بۆ هەر ڕیزێک نمرەیەک و یەک بەڵگە بنووسە.

Show answerوەڵامەکە پیشان بدە
RowڕیزScoreنمرەEvidenceبەڵگە
StructureپێکهاتەExcellentنایابSkip link, landmarks, one h1, aria-current; the Nu checker finds no errors on all nine pages، ، یەک ⁦h1⁩، ⁦aria-current⁩؛ پشکنەری Nu لە هەر نۆ لاپەڕەکەدا هیچ هەڵەیەک نادۆزێتەوە
DesignدیزاینExcellentنایابA style tile in custom properties: palette, 1.25 type scale, six spacing steps; contrast 6.05 : 1 or more لە : ، ⁦1.25⁩، شەش پلە بۆشایی؛ کۆنتراست 6.05:16.05:1 یان زیاتر
ResponsiveڕێسپۆنسیڤExcellentنایابOne to three columns; the 320 px test passed after the e-mail fixیەک تا سێ ستوون؛ تاقیکردنەوەی ⁦320 px⁩ دوای چاککردنی ئیمەیڵەکە دەرچوو
AccessibleدەستڕاگەیشتووGoodباشKeyboard, visible focus, alt text, lang and dir — but no screen-reader pass yet، ، ، lang و dir — بەڵام هێشتا تاقیکردنەوەی نەکراوە
ContentناوەڕۆکGoodباشThree projects with what she did and learned — but no links yet to the live projects and their codeسێ پڕۆژە بە ئەوەی کردی و فێری بوو — بەڵام هێشتا بۆ پڕۆژە زیندووەکان و کۆدەکەیان نییە
PublishedبڵاوکراوەNot yetهێشتا ناTested on a computer; publishing and the live-address checks come nextلەسەر تاقیکراوەتەوە؛ و پشکنینی ناونیشانە زیندووەکە دێنە دواتر

So the model is not perfect, and that is the point of a rubric: it shows Shilan's next three tasks — a screen-reader pass, links to the live projects, and publishing.

کەواتە نموونەکە تەواو نییە و ئەمە مەبەستی خشتەی هەڵسەنگاندنە: سێ ئەرکی داهاتووی شیلان پیشان دەدات — تاقیکردنەوەیەک بە ، بۆ پڕۆژە زیندووەکان و .

Common mistakesهەڵە باوەکان

  • Dummy text left online — fake Latin filler or "Coming soon". Publish only finished pages.
  • Photos straight from the phone camera, 4,000 pixels wide. Export each at the size it is shown.
  • A contact form on a static host. GitHub Pages cannot receive or store what a form sends, so the form does nothing. Use an e-mail link; forms that save data come with PHP (GET and POST).
  • A Kurdish twin without lang="ckb" dir="rtl", or a language switch that jumps to the other home page (A language switch that keeps the page).
  • A downloaded template or theme used as it is. Check its licence, make it your own design, and test it like your own code.
  • Private data on a public page: a home address, a phone number, ID numbers, other people's photos.
  • Tested only on your own laptop, in one browser. Use a real phone, a second browser and the keyboard.
  • دەقی ساختە لەسەر ئینتەرنێت ماوەتەوە — دەقی پڕکەرەوەی لاتینیی درۆیینە یان «بەم زووانە». تەنیا لاپەڕەی تەواوکراو بڵاو بکەرەوە.
  • وێنە ڕاستەوخۆ لە کامێرای مۆبایلەوە، ⁦4,000⁩ پیکسڵ پان. هەریەکەیان بەو قەبارەیە هەناردە بکە کە پیشان دەدرێت.
  • پەیوەندی لەسەر . GitHub Pages ناتوانێت ئەوەی دەینێرێت وەری بگرێت یان هەڵی بگرێت، بۆیە هیچ ناکات. بەکاربهێنە؛ ئەو پاشەکەوت دەکەن لەگەڵ دێن (GET و POST).
  • جمکێکی کوردی بێ lang="ckb" dir="rtl"، یان گۆڕینی زمانێک کە باز دەدات بۆ زمانەکەی تر (گۆڕینی زمان کە لاپەڕەکە دەهێڵێتەوە).
  • یان تێمێکی دابارکراو وەک خۆی بەکار هاتووە. مۆڵەتەکەی بپشکنە، بیکە بە دیزاینی خۆت و وەک کۆدی خۆت تاقی بکەرەوە.
  • لە لاپەڕەیەکی گشتیدا: ناونیشانی ماڵ، ژمارەی تەلەفۆن، ژمارەی ناسنامە، وێنەی کەسانی تر.
  • تەنیا لەسەر لاپتۆپی خۆت و لە یەک تاقیکراوەتەوە. مۆبایلێکی ڕاستەقینە، دووەم و بەکاربهێنە.

Exercisesڕاهێنانەکان

ExerciseڕاهێنانYour plan in five linesپلانەکەت لە پێنج دێڕدا

Write your own SMART goal, your audience, three user tasks and your site map (as a tree, like Shilan's).

خۆت، بینەرەکەت، سێ کاری و بنووسە (وەک دارێک، وەک ئەوەی شیلان).

Show answerوەڵامەکە پیشان بدە

Compare yours with this example from another student, Aram:

هی خۆت لەگەڵ ئەم نموونەیەی قوتابییەکی تر، ئارام، بەراورد بکە:

Aram's planپلانەکەی ئارامTEXTRuns in the browserلە ناو تۆڕگەڕ کار دەکات
Goal:     Publish a three-page portfolio with two projects by 1 March 2027
          and use it to apply for the IT club's web team.
Audience: the club's leaders; they read English on laptops.
Tasks:    see my two projects; check that I can write HTML and CSS;
          find my e-mail address.

Home (index.html)
├── Projects (projects.html)   #weather  #club-page
└── Contact (contact.html)

Check: is the goal measurable (three pages, two projects) and does it have a date? Is every task something a visitor does? Does every task have a page in the site map?

بپشکنە: ئایا ئامانجەکە پێوانەکراوە (سێ لاپەڕە، دوو پڕۆژە) و ڕێکەوتی هەیە؟ ئایا هەموو کارێک شتێکە کە سەردانیکەر دەیکات؟ ئایا هەموو کارێک لاپەڕەیەکی لە هەیە؟

ExerciseڕاهێنانAdd a fourth projectپڕۆژەی چوارەم زیاد بکە

Shilan made a ten-question HTML quiz for her classmates. Write its <article> for projects.html, in the same pattern as the other three: picture, heading, what she did, what she learned, tools.

شیلان تاقیکردنەوەیەکی دە پرسیاریی بۆ هاوپۆلەکانی دروست کرد. <article>ـەکەی بۆ ⁦projects.html⁩ بنووسە، بە هەمان شێوازی سێ پڕۆژەکەی تر: وێنە، ، چی کرد، چی فێر بوو، ئامرازەکان.

Show answerوەڵامەکە پیشان بدە
projects.html: the fourth project⁦projects.html⁩: پڕۆژەی چوارەمHTMLRuns in the browserلە ناو تۆڕگەڕ کار دەکات
<article class="project" id="quiz">
  <img src="images/quiz.svg" alt="A phone showing one quiz question about HTML with four answer buttons." width="480" height="300" loading="lazy">
  <div>
    <h2>A ten-question HTML quiz</h2>
    <p>A small quiz page for my classmates, with one question on each screen.</p>
    <h3>What I did</h3>
    <p>I wrote the questions in a form with radio buttons and a fieldset, and used JavaScript only to show the score.</p>
    <h3>What I learned</h3>
    <p>Radio buttons need the same name to work as one group.</p>
    <p class="tools"><strong>Tools:</strong> HTML forms · CSS · a little JavaScript</p>
  </div>
</article>

loading="lazy" fits here because the fourth project is far down the page; the first picture of a page never gets it (Lazy loading).

loading="lazy" لێرەدا دەگونجێت چونکە پڕۆژەی چوارەم لە خوارەوەی لاپەڕەکەیە؛ یەکەم وێنەی لاپەڕەیەک هەرگیز ئەمەی پێ نادرێت (بارکردنی دواخراو).

ExerciseڕاهێنانCards without media queriesکارتەکان بێ پرسی میدیا

Rewrite .cards so that the columns appear by themselves, as many as fit, each at least 16rem wide. What changes compared with Shilan's two media queries?

.cards دووپاتە بنووسەوە بۆ ئەوەی ستوونەکان خۆیان دەربکەون، هێندەی جێیان دەبێتەوە، هەریەکە لانیکەم ⁦16rem⁩ پان. بە بەراورد بە دوو شیلان چی دەگۆڕێت؟

Show answerوەڵامەکە پیشان بدە
css/style.css: auto-fit cards⁦css/style.css⁩: کارتەکانی ⁦auto-fit⁩CSSRuns in the browserلە ناو تۆڕگەڕ کار دەکات
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--space-4);
}

One rule replaces the base rule and both media queries (As many columns as fit). The columns now change where the cards need it — about every 16rem plus the gap — not at widths you chose; with three cards you get one, two or three columns. Shilan's media queries are easier to predict; auto-fit is shorter. Both are correct.

یەک ڕێسا جێگەی ڕێسا بنەڕەتییەکە و هەردوو دەگرێتەوە (هێندەی جێیان دەبێتەوە ستوون). ستوونەکان ئێستا لەو شوێنەدا دەگۆڕێن کە پێویستیان پێیەتی — نزیکەی هەر ⁦16rem⁩ و بۆشاییەکە — نەک لەو پانییانەی خۆت هەڵتبژاردوون؛ بە سێ یەک، دوو یان سێ ستوون دەبینیت. شیلان ئاسانتر پێشبینی دەکرێن؛ ⁦auto-fit⁩ کورتترە. هەردووکیان دروستن.

ExerciseڕاهێنانMake a Kurdish twinجمکێکی کوردی دروست بکە

List everything that changes when you copy contact.html into ckb/contact.html. Then write the Kurdish page's <head>.

هەموو ئەو شتانە بنووسە کە دەگۆڕێن کاتێک ⁦contact.html⁩ کۆپی دەکەیت بۆ ⁦ckb/contact.html⁩. پاشان <head>ـی لاپەڕە کوردییەکە بنووسە.

Show answerوەڵامەکە پیشان بدە
  • <html lang="ckb" dir="rtl"> instead of lang="en".
  • A Kurdish <title> and description, and Kurdish alt texts.
  • Every shared file one folder up: ../css/style.css, ../js/menu.js, ../images/….
  • The same hreflang lines as the English page, and aria-current="page" moves to کوردی in the language switch.
  • Nothing in the CSS: the logical properties turn the layout round by themselves.
  • <html lang="ckb" dir="rtl"> لە بری lang="en".
  • <title> و پێناسەی کوردی و کوردی.
  • هەموو هاوبەش یەک بەرزتر: ../css/style.css، ../js/menu.js، ../images/….
  • هەمان دێڕەکانی hreflang وەک لاپەڕە ئینگلیزییەکە و aria-current="page" لە گۆڕینی زماندا دەچێتە سەر کوردی.
  • هیچ شتێک لە : خۆیان وەردەگەڕێنن.
ckb/contact.html: the head⁦ckb/contact.html⁩: بەشی headckb/contact.htmlHTMLRuns in the browserلە ناو تۆڕگەڕ کار دەکات
<!DOCTYPE html>
<html lang="ckb" dir="rtl">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>پەیوەندی – شیلان، پۆرتفۆلیۆی دیزاینی وێب</title>
  <meta name="description" content="چۆن پەیوەندی بە شیلانەوە بکەیت بۆ ڕاهێنانی هاوینە یان تۆڕگەیەکی بچووک.">
  <link rel="alternate" hreflang="en" href="https://username.github.io/contact.html">
  <link rel="alternate" hreflang="ckb" href="https://username.github.io/ckb/contact.html">
  <link rel="alternate" hreflang="x-default" href="https://username.github.io/contact.html">
  <link rel="icon" href="../images/favicon.svg" type="image/svg+xml">
  <link rel="stylesheet" href="../css/style.css">
  <script src="../js/menu.js" defer></script>
</head>

Summaryپوختە

  • A portfolio project follows the whole life cycle: plan → design → build → test → publish.
  • Write testable success criteria, a SMART goal, the audience, user tasks and a site map before any code.
  • By hand, with a CSS framework (Bootstrap 5.3, Tailwind CSS 4) or with a CMS (WordPress) — a framework still needs your HTML, contrast and keyboard checks; WordPress needs PHP hosting.
  • Wireframes phone-first, then a style tile kept as custom properties.
  • Build in layers: semantic HTML that works alone, mobile-first CSS with logical properties, then one small script.
  • Test in layers — validators, Easy Checks, keyboard, 400 % zoom, real phones — fix, and test again.
  • Publish on a static host, check the live address, share the link, and score your site with the rubric.
  • پڕۆژەی هەموو دەگرێتەوە: پلان ← دیزاین ← دروستکردن ← تاقیکردنەوە ← .
  • پێش هەر کۆدێک مەرجی تاقیکراوەی سەرکەوتن، ، بینەر، کارەکانی و بنووسە.
  • بە دەست، بە ⁦CSS (Bootstrap 5.3⁩، ⁦Tailwind CSS 4⁩) یان بە ⁦(WordPress)⁩ — هێشتا پێویستی بە ، پشکنینی کۆنتراست و خۆتە؛ WordPress پێویستی بە هەیە.
  • بە شێوازی ، پاشان کە وەک هەڵدەگیرێت.
  • چین بە چین دروستی بکە: کە بە تەنیا کار دەکات، بە ، پاشان بچووک.
  • چین بە چین تاقی بکەرەوە — پشکنەرەکان، Easy Checks، ، ⁦400 %⁩، مۆبایلی ڕاستەقینە — چاکی بکە و دووپاتە تاقی بکەرەوە.
  • لەسەر بڵاوی بکەرەوە، ناونیشانە زیندووەکە بپشکنە، بنێرە و بە خشتەی هەڵسەنگاندن بنرخێنە.

Next: Web Design Review and Exam Practice goes back over all eight chapters.

دواتر: پێداچوونەوەی دیزاینی وێب و ڕاهێنان بۆ تاقیکردنەوە بە سەر هەر هەشت بەشەکەدا دەچێتەوە.

Lesson complete!وانەکە تەواو بوو!

Well done. Review the key terms, then go on to the next lesson.دەستخۆش. سەیرێکی زاراوە سەرەکییەکان بکەرەوە، پاشان بڕۆ بۆ وانەی داهاتوو.

Key termsزاراوە سەرەکییەکان

Next lessonوانەی داهاتوو

Web Design Review and Exam Practiceپێداچوونەوەی دیزاینی وێب و ڕاهێنان بۆ تاقیکردنەوە

Related lecturesوانە پەیوەندیدارەکان

References and further readingسەرچاوەکان و خوێندنەوەی زیاتر

This lecture is a first edition. The Kurdish text and terminology are waiting for review by Kurdish IT teachers.ئەم وانەیە چاپی یەکەمە. دەقە کوردییەکە و زاراوەکانی چاوەڕێی پێداچوونەوەی مامۆستایانی کوردی بواری IT ن.

Appearanceڕووکار

Modeدۆخ
Styleشێواز
Coloursڕەنگەکان

Saved on this device only.تەنیا لەسەر ئەم ئامێرە پاشەکەوت دەکرێت.