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

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

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

Go back over the whole course before an exam, an interview or your own project: the course on one page, the key points of each chapter, the words and abbreviations to know, practice questions in the exam styles, a page to spot the problems in, three timed tasks with full model answers — build a page from a wireframe, fix an inaccessible form, make a fixed layout responsive — and where to go next.

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

23 min read23 خولەک خوێندنەوە · 18 stepsهەنگاو

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

  • Recall the main ideas of all eight chapters and find the lesson that teaches each one.
  • Explain the course's key terms and write out its abbreviations.
  • Answer web-design questions in the exam styles.
  • Find accessibility, design and layout problems on a page and say how to fix them.
  • Under time pressure, build a page from a wireframe, repair an inaccessible form and make a fixed layout responsive.
  • بیرۆکە سەرەکییەکانی هەر هەشت بەشەکە بهێنیتەوە بیر و ئەو وانەیە بدۆزیتەوە کە هەریەکەیان فێر دەکات.
  • زاراوە سەرەکییەکانی کۆرسەکە ڕوون بکەیتەوە و بە تەواوی بنووسیت.
  • وەڵامی پرسیارەکانی بە شێوازەکانی تاقیکردنەوە بدەیتەوە.
  • کێشەکانی ، دیزاین و لە لاپەڕەیەکدا بدۆزیتەوە و بڵێیت چۆن چاک دەکرێن.
  • لە ژێر فشاری کاتدا، لاپەڕەیەک لە دروست بکەیت، نادەستڕاگەیشتوو چاک بکەیتەوە و جێگیر بکەیت بە ڕێسپۆنسیڤ.

How to use this reviewچۆن ئەم پێداچوونەوەیە بەکاربهێنیت

This lesson goes back over all eight chapters before an exam, a job interview or your own project. For each chapter, try to recall the key points before you read them: trying to remember shows you what you really know. Follow the link of anything you miss, read that screen again, and come back another day. Then practise the exam styles and the three timed tasks.

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

A loop of four steps: 1 Answer without notes; 2 Check your answers; 3 Follow the link and read the lesson screen again; 4 Try again another day. In the middle: short sessions on several days.سووڕێکی چوار هەنگاوی: 1 بەبێ تێبینی وەڵام بدەرەوە؛ 2 وەڵامەکانت بپشکنە؛ 3 بەستەرەکە بکەرەوە و شاشەی وانەکە دووپاتە بخوێنەوە؛ 4 ڕۆژێکی تر دووپاتە هەوڵ بدەرەوە. لە ناوەڕاستدا: دانیشتنی کورت لە چەند ڕۆژێکدا.
Answer, check, re-read, try again — on several days.وەڵام بدەرەوە، بپشکنە، دووپاتە بخوێنەوە، دووپاتە هەوڵ بدەرەوە — لە چەند ڕۆژێکدا.CêIT

How to use this reviewچۆن ئەم پێداچوونەوەیە بەکاربهێنیت

The whole course on one pageهەموو کۆرسەکە لە یەک لاپەڕەدا

A path with eight numbered stops: 1 Start here; 2 HTML; 3 CSS; 4 Layout; 5 Visual design; 6 Designing for people; 7 Plan to live website; 8 Final project, marked with a flag.ڕێگایەک بە هەشت وێستگەی ژمارەدار: 1 لێرەوە دەست پێ بکە؛ 2 HTML؛ 3 CSS؛ 4 ڕێکخستنی لاپەڕە؛ 5 دیزاینی بینراو؛ 6 دیزاین بۆ مرۆڤ؛ 7 لە پلانەوە تا تۆڕگە لەسەر ئینتەرنێت؛ 8 پڕۆژەی کۆتایی، بە ئاڵایەک نیشانە کراوە.
The course map from the first lesson: you have walked the whole path.نەخشەی کۆرسەکە لە یەکەم وانەوە: هەموو ڕێگاکەت بڕیوە.CêIT
One idea per chapterیەک بیرۆکە بۆ هەر بەشێک
ChapterبەشThe big ideaبیرۆکە گەورەکە
1 Start here1 لێرەوە دەست پێ بکەHTML is the structure, CSS the presentation, JavaScript the behaviour; a site is a folder of files. پێکهاتەیە، شێوە و ڕەفتار؛ پڕ لە .
2 HTML2 Choose each element for its meaning; links, images, media and forms that work for everyone.هەر بۆ واتاکەی هەڵبژێرە؛ ، وێنە، میدیا و کە بۆ هەمووان کار بکەن.
3 CSS3 Rules, the cascade, selectors, text and type, and the box model.ڕێساکان، ، ، دەق و و .
4 Layout4 Flexbox for one direction, grid for two, mobile-first media queries, right-to-left pages.Flexbox بۆ یەک ئاڕاستە، grid بۆ دوو، ، لاپەڕەی .
5 Visual design5 دیزاینی بینراوHierarchy, alignment, contrast, white space, colour and calm motion.، ڕێکخستن، کۆنتراست، ، ڕەنگ و جووڵەی هێمن.
6 People6 مرۆڤKnow your users, test with them, meet WCAG 2.2 and design forms people can finish.بەکارهێنەرەکانت بناسە، لەگەڵیان تاقی بکەرەوە، ⁦2.2⁩ جێبەجێ بکە و دیزاین بکە کە خەڵک بتوانن تەواوی بکەن.
7 Live website7 زیندووA little JavaScript, website types, the life cycle and publishing with HTTPS.کەمێک ، جۆرەکانی ، و بە .
8 Final project8 پڕۆژەی کۆتاییYour own portfolio, planned, built, tested and published — and this review. خۆت، پلان کراو، دروستکراو، تاقیکراو و بڵاوکراو — و ئەم پێداچوونەوەیە.

Chapter 2 — HTML: structure and contentبەشی 2 — HTML: پێکهاتە و ناوەڕۆک

Lessons: HTML Basics · Text, Images and Lists · Semantic HTML · Links and Navigation · Images for the Web · Audio, Video and Embeds · HTML Forms.

وانەکان: بنەماکانی HTML · دەق، وێنە و لیست · HTMLـی واتایی · بەستەرەکان و ڕێنیشاندان · وێنە بۆ وێب · دەنگ، ڤیدیۆ و ناوەڕۆکی چەسپاو · فۆرمەکانی HTML.

  • Every page: <!DOCTYPE html>, then <html lang> with a <head> (charset, viewport, title) and a <body>. Attributes go in the opening tag, in straight quotes.
  • Choose elements for their meaning: the landmarks header, nav, one main, aside, footer; one h1 and no skipped levels; article stands alone, div means nothing.
  • Links: absolute, relative (../), #fragment, mailto: and tel:; words that make sense alone; aria-current="page" in the menu; a skip link first.
  • Pictures: alt that says what the picture shows (alt="" for decoration), width and height; SVG for logos and icons, AVIF/WebP with a JPEG fallback for photos; loading="lazy" below the first screen.
  • Media: <video controls> with <source>s, captions from <track> and WebVTT, no autoplay with sound; every <iframe> has a title.
  • Forms: action and method; a name on every field that is sent; a <label for> on every field; HTML5 types help, the server always checks again.
  • هەموو لاپەڕەیەک: <!DOCTYPE html>، پاشان <html lang> لەگەڵ <head> (charset، viewport، title) و <body>. دەچنە ناو کردنەوە، بە کەوانەی ڕاست.
  • بۆ واتاکەیان هەڵبژێرە: header، nav، یەک main، aside، footer؛ یەک h1 و بێ بازدان بە سەر ئاستەکاندا؛ article بە تەنیا خۆی واتای هەیە، div هیچ واتایەکی نییە.
  • : ڕەها، ڕێژەیی (../)، #fragment، mailto: و tel:؛ وشەی وا کە بە تەنیا واتایان هەبێت؛ aria-current="page" لە ؛ لە سەرەتادا.
  • وێنە: alt کە دەڵێت وێنەکە چی پیشان دەدات (alt="" بۆ ڕازاندنەوە)، width و height؛ بۆ لۆگۆ و ، ⁦AVIF/WebP⁩ بە JPEGـێکی یەدەگ بۆ وێنەی فۆتۆ؛ loading="lazy" لە خوارەوەی یەکەم شاشە.
  • میدیا: <video controls> بە <source>ـەکانەوە، لە <track> و WebVTTـەوە، بێ بە دەنگەوە؛ هەموو <iframe>ـێک titleـی هەیە.
  • : action و method؛ name لەسەر هەموو خانەیەک کە دەنێردرێت؛ <label for> لەسەر هەموو خانەیەک؛ جۆرەکانی ⁦HTML5⁩ یارمەتی دەدەن، هەمیشە دووپاتە دەپشکنێت.
HTML at a glance, in two panels. Left, the anatomy of <a href="about.html">About me</a>: the opening tag, the attribute href with its value, the content and the closing tag. Right, a page skeleton as nested boxes: <!DOCTYPE html>, html lang, a head with charset, viewport and title, and a body with header and nav, main with h1, an article with an img that has alt, width and height, a form with a label joined to its input, and a footer.HTML بە یەک سەیرکردن، لە دوو پانێڵدا. لای چەپ، پێکهاتەی <a href="about.html">About me</a>: تاگی کردنەوە، خەسڵەتی href بە نرخەکەیەوە، ناوەڕۆک و تاگی داخستن. لای ڕاست، پێکهاتەی لاپەڕەیەک وەک سندووقی ناو یەکتر: <!DOCTYPE html>، html lang، head بە charset، viewport و title؛ body بە header و nav، main بە h1، article بە img کە alt، width و heightـی هەیە، فۆرمێک کە لەیبڵێکی بە inputـەکەیەوە بەستراوە و footer.
Elements chosen for their meaning, from the doctype to the footer. بۆ واتاکەیان هەڵبژێردراون، لە doctypeـەوە تا footer.CêIT

Chapter 3 — CSS: styling pagesبەشی 3 — CSS: ڕازاندنەوەی لاپەڕەکان

Lessons: CSS Basics · Selectors · Styling Text, Backgrounds, Lists and Tables · Typography and Web Fonts · The Box Model.

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

  • A rule is a selector and { property: value; }. Keep the CSS in one external file linked with <link rel="stylesheet">.
  • Which rule wins: !important, then specificity (inline style > id > class > element), then the later rule. Text properties are inherited; box properties are not.
  • Selectors: p, .class, #id, descendant (space) and child (>), [type="email"], states such as :hover and :focus-visible, parts such as ::before.
  • Colour as a name, hex, rgb() or hsl(); text contrast at least 4.5 : 1.
  • Type: a font stack that ends in a generic family, a Kurdish font, line-height about 1.5 for English and 1.8 for Kurdish, 45–75 characters a line, a type scale, @font-face with WOFF2.
  • The box: content, padding, border, margin; box-sizing: border-box; margin: 0 auto centres a box that has a width; display decides block or inline.
  • ڕێسا و { property: value; }ـە. لە یەک دەرەکیدا هەڵبگرە کە بە <link rel="stylesheet"> دەبەسترێتەوە.
  • کام ڕێسا دەباتەوە: !important، پاشان (ستایلی ناو دێڕ لە id بەهێزترە، id لە class و class لە )، پاشان ڕێسای دواتر. تایبەتمەندییەکانی دەق بە دەگوازرێنەوە؛ هی سندووق نا.
  • : p، .class، #id، نەوە (بۆشایی) و منداڵ (>)، [type="email"]، دۆخی وەک :hover و :focus-visible، بەشی وەک ::before.
  • ڕەنگ وەک ناو، hex، rgb() یان hsl()؛ کۆنتراستی دەق لانیکەم 4.5:14.5:1.
  • : ڕیزێک کە بە خێزانێکی گشتی کۆتایی دێت، کوردی، line-height نزیکەی ⁦1.5⁩ بۆ ئینگلیزی و ⁦1.8⁩ بۆ کوردی، ⁦45⁩ تا ⁦75⁩ پیت لە دێڕێکدا، ، @font-face بە ⁦WOFF2⁩.
  • سندووق: ناوەڕۆک، ، ، ؛ box-sizing: border-box؛ margin: 0 auto سندووقێک کە پانیی هەیە دەخاتە ناوەڕاست؛ display بڕیار دەدات block بێت یان inline.
CSS at a glance, in three panels. The rule h1 { color: #8a3a57; } with its parts: selector, property, value and declaration. Which rule wins: a ladder of 1 !important, 2 specificity — inline style, then #id, then .class, then element — and 3 the later rule in the file. The box model: content inside padding, inside border, inside margin, with box-sizing: border-box measuring the width to the outside of the border.CSS بە یەک سەیرکردن، لە سێ پانێڵدا. ڕێسای h1 { color: #8a3a57; } بە بەشەکانییەوە: هەڵبژێر، تایبەتمەندی، نرخ و ڕاگەیاندن. کام ڕێسا دەباتەوە: پەیژەیەکی 1 !important، 2 وردیی هەڵبژێر — ستایلی ناو دێڕ، پاشان #id، پاشان .class، پاشان توخم — و 3 ڕێسای دواتر لە فایلەکەدا. مۆدێلی سندووق: ناوەڕۆک لە ناو بۆشایی ناوەوە، لە ناو سنوور، لە ناو پەراوێز؛ box-sizing: border-box پانییەکە تا دەرەوەی سنوور دەپێوێت.
Rules, the cascade and the box: the three ideas behind every style sheet.ڕێساکان، و سندووق: سێ بیرۆکەی پشتی هەموو .CêIT

Chapter 4 — Layout and responsive designبەشی 4 — ڕێکخستنی لاپەڕە و دیزاینی ڕێسپۆنسیڤ

Lessons: Normal Flow, Floats and Positioning · Flexbox · CSS Grid · Responsive Design · Kurdish and Bilingual Websites · Project: Building and Styling Pages.

وانەکان: ڕەوتی ئاسایی، float و شوێندانان · Flexbox · CSS Grid · دیزاینی ڕێسپۆنسیڤ · تۆڕگەکانی کوردی و دووزمانە · پڕۆژە: دروستکردن و ڕازاندنەوەی لاپەڕە.

  • Normal flow first. position: relative (moves from its own place), absolute (from the nearest positioned ancestor), fixed, sticky (needs top). Floats only for text around a picture.
  • Flexbox lines items up in one direction: display: flex on the parent, justify-content along the main axis, align-items across it, flex-wrap and gap.
  • Grid places items in rows and columns together: grid-template-columns with fr and repeat(), numbered lines, named areas, and repeat(auto-fit, minmax(…)) without media queries.
  • Responsive design: the viewport meta tag, fluid widths, max-width: 100% on media, mobile-first min-width queries with breakpoints where the content needs them; container queries for components.
  • Kurdish pages: <html lang="ckb" dir="rtl">. Flexbox and grid follow dir; left, right and floats do not — use logical properties. Isolate mixed text with <bdi> or dir="auto".
  • Test in device mode, at 400 % zoom and on a real phone.
  • سەرەتا . position: relative (لە شوێنی خۆیەوە دەجووڵێت)، absolute (لە نزیکترین باوانی شوێندانراوەوە)، fixed، sticky (topـی دەوێت). float تەنیا بۆ دەقی دەوری وێنەیەک.
  • Flexbox لە یەک ئاڕاستەدا ڕیز دەکات: display: flex لەسەر باوان، justify-content بە درێژایی ، align-items بە پانییدا، flex-wrap و gap.
  • Grid لە ڕیز و ستووندا پێکەوە دادەنێت: grid-template-columns بە fr و repeat()، هێڵی ژمارەدار، ناوچەی ناونراو و repeat(auto-fit, minmax(…)) بەبێ .
  • : تاگی meta viewport، پانیی ڕەوان، max-width: 100% لەسەر میدیا، min-widthـی بە لەو شوێنەی ناوەڕۆکەکە پێویستی پێیانە؛ بۆ پارچەکان.
  • لاپەڕەی کوردی: <html lang="ckb" dir="rtl">. Flexbox و grid شوێن dir دەکەون؛ چەپ، ڕاست و float نا — بەکاربهێنە. دەقی تێکەڵ بە <bdi> یان dir="auto" جیا بکەرەوە.
  • لە دۆخی ئامێر، بە ⁦400 %⁩ و لەسەر مۆبایلێکی ڕاستەقینە تاقی بکەرەوە.
Flexbox or grid? Left, flexbox for one direction: a menu bar Home, Books, Join in a row, a row of three buttons, and the inside of a card stacked in a column — the sizes come from the content. Right, grid for rows and columns together: a gallery of six cards whose columns line up, and a page map with header, nav, main, aside and footer — the container sets the tracks. Bottom: usually both — grid for the page, flexbox inside the header and the cards.Flexbox یان grid؟ لای چەپ، flexbox بۆ یەک ئاڕاستە: شریتی مێنیوێک سەرەکی، کتێبەکان، بەشداربوون لە ڕیزێکدا، ڕیزێک سێ دوگمە و ناوەوەی کارتێک لە ستوونێکدا — قەبارەکان لە ناوەڕۆکەوە دێن. لای ڕاست، grid بۆ ڕیز و ستوون پێکەوە: گەلەرییەکی شەش کارت کە ستوونەکانیان ڕێک دێن و نەخشەی لاپەڕەیەک بە header، nav، main، aside و footer — کۆنتەینەرەکە ڕێچکەکان دادەنێت. لە خوارەوە: زۆرجار هەردووکیان — grid بۆ لاپەڕەکە، flexbox لە ناو سەرپەڕە و کارتەکاندا.
One direction: flexbox. Rows and columns together: grid. Usually both.یەک ئاڕاستە: flexbox. ڕیز و ستوون پێکەوە: grid. زۆرجار هەردووکیان.CêIT

Chapter 5 — Visual designبەشی 5 — دیزاینی بینراو

Lessons: Design Principles · Colour for the Web · Effects, Transitions and Animations.

وانەکان: بنەماکانی دیزاین · ڕەنگ بۆ وێب · کاریگەری، گۆڕانە نەرمەکان و ئەنیمەیشنەکان.

  • Hierarchy: size, weight, colour, position and space decide what is seen first; one main action per screen; check it with the squint test.
  • Alignment to one start line and a column grid; proximity groups what belongs together; the same job always looks the same; white space from a spacing scale.
  • People scan text pages in an F and simple pages in a Z — both mirrored on Kurdish pages.
  • Colour: hue, saturation, lightness; neutrals plus one accent; never colour alone; contrast = (L1 + 0.05) / (L2 + 0.05), text 4.5 : 1, large text, icons and borders 3 : 1.
  • Custom properties hold the palette; a dark theme gives them new values inside prefers-color-scheme: dark.
  • Motion: short transitions of transform and opacity, @keyframes for longer animations, prefers-reduced-motion respected, nothing that flashes more than three times a second.
  • : قەبارە، ئەستووری، ڕەنگ، شوێن و بۆشایی بڕیار دەدەن چی یەکەم دەبینرێت؛ یەک کرداری سەرەکی بۆ هەر شاشەیەک؛ بە تاقیکردنەوەی چاونووقاندن بیپشکنە.
  • ڕێکخستن لەسەر یەک هێڵی سەرەتا و گریدێکی ستوونی؛ نزیکی ئەوانە کۆ دەکاتەوە کە پێکەوەن؛ هەمان ئەرک هەمیشە هەمان شێوەی هەیە؛ لە .
  • خەڵک لاپەڕەی دەق بە شێوەی F و لاپەڕەی سادە بە شێوەی Z سەیر دەکەن — هەردووکیان لە لاپەڕەی کوردیدا بە ئاوێنەیی.
  • ڕەنگ: ، ، ؛ ڕەنگی بێلایەن و یەک ڕەنگی جیاکەرەوە؛ هەرگیز تەنیا ڕەنگ نا؛ کۆنتراست = (L1+0.05)/(L2+0.05)(L_1 + 0.05) / (L_2 + 0.05)، دەق 4.5:14.5:1، دەقی گەورە، و 3:13:1.
  • هەڵدەگرن؛ لە ناو prefers-color-scheme: darkـدا نوێیان دەداتێ.
  • جووڵە: کورتی transform و opacity، @keyframes بۆ درێژتر، ڕێزگرتن لە prefers-reduced-motion، هیچ شتێک کە لە چرکەیەکدا زیاتر لە سێ جار بترووسکێتەوە.
The finished home page of Shilan's Bakery with six numbered marks: hierarchy at the big heading, alignment at a dashed start line, proximity in the grouped cards, contrast and repetition in the matching buttons, white space between the sections and balance across the page.لاپەڕەی سەرەکیی تەواوکراوی نانەواخانەی شیلان بە شەش نیشانەی ژمارەدار: پلەبەندیی بینراو لە سەردێڕە گەورەکەدا، ڕێکخستن لە هێڵێکی پچڕپچڕی سەرەتادا، نزیکی لە کارتەکانی کۆکراوەدا، کۆنتراست و دووپاتەبوونەوە لە دوگمەکانی وەک یەکدا، شوێنی بەتاڵ لە نێوان بەشەکاندا و هاوسەنگی لە سەرانسەری لاپەڕەکەدا.
The design principles of chapter 5 on one page (from Design Principles).بنەماکانی دیزاینی بەشی 5 لەسەر یەک لاپەڕە (لە بنەماکانی دیزاینەوە).CêIT

Chapter 6 — Designing for peopleبەشی 6 — دیزاین بۆ مرۆڤ

Lessons: User Experience · Web Accessibility · Designing Usable Forms.

وانەکان: ئەزموونی بەکارهێنەر · دەستڕاگەیشتنی وێب · دیزاینکردنی فۆرمەکانی ئاسان.

  • UX is the whole trip of a task, UI the screens. User-centred design repeats: understand, specify, design, evaluate — with real users and their consent.
  • A persona sums up the research; sketch → wireframe → mock-up → prototype; check with Nielsen's ten heuristics and test with about five users per round.
  • WCAG 2.2: perceivable, operable, understandable, robust; levels A, AA and AAA, with AA the usual target.
  • Native HTML first, ARIA only where HTML has no answer; everything works with the keyboard and the focus is always visible; targets at least 24 × 24 px.
  • Test in layers: automated tools, the W3C Easy Checks, the keyboard, a screen reader, people.
  • Forms: one column, visible labels above the fields, the right type and autocomplete, errors next to the field in words, buttons that say what happens.
  • هەموو گەشتی کارێکە، شاشەکانە. دووپاتە دەکاتەوە: تێگەیشتن، دیاریکردن، دیزاینکردن، هەڵسەنگاندن — لەگەڵ ڕاستەقینە و .
  • توێژینەوەکە کورت دەکاتەوە؛ وێنەکێشان ← ← ← ؛ بە دە پێوەرەکەی Nielsen بپشکنە و لە هەر خولێکدا لەگەڵ نزیکەی پێنج تاقی بکەرەوە.
  • ⁦2.2⁩: هەستپێکراو، بەکارهێنراو، تێگەیشتراو، پتەو؛ ئاستەکانی A، AA و AAA، کە AA ئامانجی باوە.
  • سەرەتا ڕەسەن، ARIA تەنیا لەو شوێنەی وەڵامی نییە؛ هەموو شتێک بە کار دەکات و هەمیشە دیارە؛ لانیکەم ⁦24 × 24 px⁩.
  • چین بە چین تاقی بکەرەوە: ئامرازی خۆکار، Easy Checksـی ، ، ، خەڵک.
  • : یەک ستوون، دیار لە سەرەوەی خانەکان، type و autocompleteـی گونجاو، لە تەنیشت خانەکە بە وشە، کە دەڵێن چی ڕوو دەدات.
Shilan's Bakery page in a browser with eight numbered pins for the checks of every page: the page title in the tab, the language code, alt text, heading levels, contrast, the visible focus, link text and the form labels.لاپەڕەی نانەواخانەی شیلان لە تۆڕگەڕێکدا بە هەشت دەرزیی ژمارەدار بۆ پشکنینەکانی هەموو لاپەڕەیەک: ناونیشانی لاپەڕە لە تابەکەدا، کۆدی زمان، دەقی جێگرەوە، ئاستەکانی سەردێڕ، کۆنتراست، نیشانەی فۆکەس، دەقی بەستەر و لەیبڵەکانی فۆرم.
The checks for every page (from Web Accessibility).پشکنینەکانی هەموو لاپەڕەیەک (لە ).CêIT

Chapter 7 — From plan to live websiteبەشی 7 — لە پلانەوە تا تۆڕگە لەسەر ئینتەرنێت

Lessons: A First Look at JavaScript · Static and Dynamic Websites · The Website Development Life Cycle · Publishing Your Website.

وانەکان: یەکەم سەیرکردنی JavaScript · تۆڕگەکانی نەگۆڕ و داینامیک · سووڕی ژیانی گەشەپێدانی تۆڕگە · بڵاوکردنەوەی تۆڕگەکەت.

  • JavaScript is the behaviour layer: <script src="…" defer>, querySelector(), textContent, classList and addEventListener(); keep ARIA in step; the page works with HTML alone first (progressive enhancement).
  • Static pages are sent as they are; dynamic pages are built on the server (PHP) or changed in the browser (JavaScript, fetch()).
  • Websites by purpose: portals, information, business, e-commerce, educational, blogs, portfolios… A blog is a website; a CMS is the software behind it.
  • The life cycle is a loop: planning, analysis, design and development, testing, launch and maintenance.
  • Publishing: static hosting for HTML, CSS and JavaScript, PHP hosting for PHP; a domain from a registrar, pointed with DNS records; free HTTPS; then test the live address.
  • چینی ڕەفتارە: <script src="…" defer>، querySelector()، textContent، classList و addEventListener()؛ ARIA هاوکات بهێڵەوە؛ لاپەڕەکە سەرەتا تەنیا بە کار دەکات ().
  • وەک خۆیان دەنێردرێن؛ لەسەر دروست دەکرێن () یان لە دەگۆڕێن (، fetch()).
  • بەپێی ئامانج: دەروازە، زانیاری، بازرگانی، ، پەروەردەیی، ، … ؛ ئەو کە لە پشتییەتی.
  • سووڕێکە: پلاندانان، شیکردنەوە، دیزاین و گەشەپێدان، تاقیکردنەوە، دەستپێکردن و چاککردنەوە.
  • : بۆ ، و ، بۆ ؛ لە ، کە بە ئاڕاستە دەکرێت؛ بێبەرانبەر؛ پاشان ناونیشانە زیندووەکە تاقی بکەرەوە.
An animation in six frames. Five boxes stand in a circle: planning, analysis, design and development, testing, and launch and maintenance. One box lights up after the other, and an arrow from maintenance leads back to planning.
An animation in six frames. Five boxes stand in a circle: planning, analysis, design and development, testing, and launch and maintenance. One box lights up after the other, and an arrow from maintenance leads back to planning.
The website development life cycle: a loop, not a line (from The Website Development Life Cycle).: سووڕێکە، نەک هێڵێک (لە وانەی ).CêIT

Words and abbreviations to knowوشە و کورتکراوەکان کە دەبێت بیانزانیت

The key terms of the course — tap one to see its definition and its Kurdish name. Exams often ask for them, and so do job interviews.

زاراوە سەرەکییەکانی کۆرسەکە — دەست لە یەکێکیان بدە بۆ بینینی پێناسە و ناوە کوردییەکەی. تاقیکردنەوەکان زۆرجار دەیانپرسن، .

ExerciseڕاهێنانAbbreviation drillڕاهێنانی کورتکراوەکان

Write the full words for HTML, CSS, JS, DOM, SVG, WCAG, UX, UI, RWD, DNS, URL and HTTPS, and say in a few words what each one is. The PHP and SQL abbreviations are drilled in Words that are easy to get wrong.

وشە تەواوەکان بنووسە بۆ HTML، CSS، JS، DOM، SVG، WCAG، UX، UI، RWD، DNS، URL و HTTPS و بە چەند وشەیەک بڵێ هەریەکەیان چییە. و SQL لە ئەو وشانەی بە ئاسانی هەڵەیان تێدا دەکرێت ڕاهێنانیان پێ دەکرێت.

Show answerوەڵامەکە پیشان بدە
Twelve abbreviations of web designدوازدە
LettersپیتەکانFull wordsوشە تەواوەکانIn a few wordsبە چەند وشەیەک
HTMLHyperText Markup Languagethe structure of a page بۆ پێکهاتەی لاپەڕە
CSSCascading Style Sheetsthe look of a page; C is the cascadeشێوەی لاپەڕەکان؛ C بۆ
JSJavaScriptthe behaviour layer in the browserزمانی ڕەفتار لە ناو
DOMDocument Object Modelthe page as a tree that JavaScript changesلاپەڕەکە وەک دارێک کە دەیگۆڕێت
SVGScalable Vector Graphicsvector pictures that scale without blur کە بێ تێکچوون گەورە دەبێت
WCAGWeb Content Accessibility Guidelinesthe W3C's web accessibility guidelinesڕێنماییەکانی
UXUser Experiencethe whole trip of a task: هەموو گەشتەکە
UIUser Interfacethe screens and controls: شاشە و
RWDResponsive Web Designone page for every screen: یەک لاپەڕە بۆ هەموو شاشەیەک
DNSDomain Name Systemturns a domain name into an IP address دەکات بە
URLUniform Resource Locatorthe full address of a pageناونیشانی تەواوی لاپەڕەیەک
HTTPSHyperText Transfer Protocol SecureHTTP made private with a certificate پارێزراو بە

How exams ask: practice questionsتاقیکردنەوەکان چۆن دەپرسن: پرسیاری ڕاهێنان

Web exams ask in nine styles, and each wants a different kind of answer (How web exams ask: nine question styles). Seven of them are practised here, each with one web-design question. Answer on paper first, then open the model answer.

تاقیکردنەوەکانی وێب بە نۆ شێواز دەپرسن و هەریەکەیان جۆرێکی جیاوازی وەڵامی دەوێت (تاقیکردنەوەکانی وێب چۆن دەپرسن: نۆ شێوازی پرسیار). لێرەدا حەوت لەو شێوازانە هەن، هەریەکەیان بە یەک پرسیاری . سەرەتا لەسەر کاغەز وەڵام بدەرەوە، پاشان وەڵامە نموونەییەکە بکەرەوە.

ExerciseڕاهێنانStyle 1 — Define: semantic HTMLشێوازی 1 — پێناسە: HTMLـی واتایی

Define semantic HTML and give one example.

پێناسە بکە و نموونەیەک بهێنەوە.

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

Semantic HTML means choosing each element for what the content is, not for how it looks, so that browsers, screen readers and search engines understand the page. Example: <nav> for the menu instead of <div class="menu">, and <h2> for a heading instead of bold text (Why semantic HTML?).

واتە هەڵبژاردنی هەر بۆ ئەوەی ناوەڕۆکەکە چییە، نەک بۆ شێوەکەی، بۆ ئەوەی ، و لە لاپەڕەکە تێبگەن. نموونە: <nav> بۆ لە بری <div class="menu"> و <h2> بۆ لە بری دەقی ئەستوور (بۆچی HTMLـی واتایی؟).

ExerciseڕاهێنانStyle 2 — Why: mobile-firstشێوازی 2 — بۆچی: مۆبایل لە پێشدا

Why do many designers build mobile-first? Give two reasons.

بۆچی زۆر دیزاینەر بە شێوازی دروست دەکەن؟ دوو هۆکار بهێنەوە.

Show answerوەڵامەکە پیشان بدە
  • The narrow screen forces you to decide what matters most, so the content comes first and the page stays simple.
  • The base CSS is short and works on every phone; min-width media queries only add columns and details as the screen grows, which is easier than taking a wide layout apart.
  • Most visitors use phones, often on slow mobile data (Mobile-first).
  • شاشەی تەسک ناچارت دەکات بڕیار بدەیت چی لە هەمووی گرنگترە، بۆیە ناوەڕۆک یەکەم دێت و لاپەڕەکە سادە دەمێنێتەوە.
  • بنەڕەتی کورتە و لەسەر هەموو مۆبایلێک کار دەکات؛ min-width تەنیا ستوون و وردەکاری زیاد دەکەن کاتێک شاشەکە گەورە دەبێت، کە لە هەڵوەشاندنەوەی پان ئاسانترە.
  • زۆربەی سەردانیکەران مۆبایل بەکار دەهێنن، زۆرجار بە دراوەی مۆبایلی هێواش (مۆبایل لە پێشدا).
ExerciseڕاهێنانStyle 3 — Compare: flexbox and gridشێوازی 3 — بەراورد: flexbox و grid

Compare flexbox and grid.

flexbox و grid بەراورد بکە.

Show answerوەڵامەکە پیشان بدە
Flexbox and grid comparedبەراوردی flexbox و grid
PointخاڵFlexboxFlexbox (یەک ئاڕاستە)GridGrid (دوو ئاڕاستە)
DirectionsئاڕاستەکانOne: a row or a columnیەک: ڕیزێک یان ستوونێکTwo: rows and columns togetherدوو: ڕیز و ستوون پێکەوە
Sizes come fromقەبارەکان لەوێوە دێنThe items' contentناوەڕۆکی The tracks of the containerڕێچکەکانی کۆنتەینەرەکە
Lines up across rowsلە نێوان ڕیزەکاندا ڕێک دەبێتNo: each line is on its ownنا: هەر دێڕێک بە تەنیا خۆیەتیYes: the columns line upبەڵێ: ستوونەکان ڕێک دێن
Typical jobsکاری باوMenu bars, button rows, the inside of a cardشریتی ، ڕیزی ، ناوەوەی Page layouts, galleries, forms with a label column، گەلەری، بە ستوونێکی
Key propertiesتایبەتمەندییە سەرەکییەکانjustify-content, align-items, flex-wrap, gapjustify-content، align-items، flex-wrap، gapgrid-template-columns, fr, grid-template-areas, gapgrid-template-columns، fr، grid-template-areas، gap

Both follow dir="rtl", and most pages use both: grid for the page, flexbox inside its parts (Grid or flexbox?).

هەردووکیان شوێن dir="rtl" دەکەون و زۆربەی لاپەڕەکان هەردووکیان بەکار دەهێنن: grid بۆ لاپەڕەکە، flexbox لە ناو بەشەکانیدا (Grid یان flexbox؟).

How exams ask: practice questionsتاقیکردنەوەکان چۆن دەپرسن: پرسیاری ڕاهێنان

Style 4: abbreviationsشێوازی 4: کورتکراوەکان

ExerciseڕاهێنانStyle 4 — Abbreviationsشێوازی 4 — کورتکراوەکان

What do WCAG, RWD and SVG stand for?

WCAG، RWD و SVG کورتکراوەی چین؟

Show answerوەڵامەکە پیشان بدە
  • WCAG: Web Content Accessibility Guidelines
  • RWD: Responsive Web Design
  • SVG: Scalable Vector Graphics
  • WCAG: Web Content Accessibility Guidelines (ڕێنماییەکانی )
  • RWD: Responsive Web Design ()
  • SVG: Scalable Vector Graphics ()

Spell every word exactly; the full list is in the abbreviation drill.

هەموو وشەیەک بە وردی بنووسە؛ لیستە تەواوەکە لە ڕاهێنانی کورتکراوەکاندایە.

How exams ask: practice questionsتاقیکردنەوەکان چۆن دەپرسن: پرسیاری ڕاهێنان

Styles 7–9: true or false, match, write codeشێوازەکانی 7 تا 9: ڕاست یان هەڵە، بەیەکەوەبەستن، نووسینی کۆد

ExerciseڕاهێنانStyle 7 — True or false? Correct the false ones.شێوازی 7 — ڕاست یان هەڵە؟ هەڵەکان ڕاست بکەرەوە.

(a) A placeholder can replace a label. (b) alt="" is right for a picture that is only decoration. (c) Flexbox follows dir="rtl", but float: left does not. (d) GitHub Pages can run a PHP contact form.

(أ) placeholder دەتوانێت جێگەی بگرێتەوە. (ب) alt="" بۆ وێنەیەک کە تەنیا ڕازاندنەوەیە دروستە. (ج) Flexbox شوێن dir="rtl" دەکەوێت، بەڵام float: left نا. (د) GitHub Pages دەتوانێت پەیوەندیی کار پێبکات.

Show answerوەڵامەکە پیشان بدە
  • (a) False: a placeholder disappears as soon as people type; every field needs a visible label (Labels, not placeholders).
  • (b) True: an empty alt tells screen readers to skip the picture (Alt text).
  • (c) True: flex and grid follow the direction; floats and left/right stay where they are (What flips by itself).
  • (d) False: GitHub Pages only sends ready files; a form that saves data needs PHP hosting (Static hosting or PHP hosting?).
ExerciseڕاهێنانStyle 8 — Matchشێوازی 8 — بەیەکەوەبەستن

Match each term with its meaning: 1 viewport, 2 breakpoint, 3 landmark, 4 custom property, 5 static hosting. a) a big region of a page, such as nav or main; b) the width at which the layout changes; c) a value you name with -- and read with var(); d) the part of the page you can see in the browser window; e) hosting that sends ready files exactly as they are.

هەر زاراوەیەک بە واتاکەیەوە ببەستەوە: 1 ، 2 ، 3 ، 4 ، 5 . أ) ناوچەیەکی گەورەی لاپەڕە، وەک nav یان main؛ ب) ئەو پانییەی تێدا دەگۆڕێت؛ ج) کە بە -- ناوی لێ دەنێیت و بە var() دەیخوێنیتەوە؛ د) ئەو بەشەی لاپەڕەکە کە لە پەنجەرەی دەیبینیت؛ ه) کە ئامادە ڕێک وەک خۆیان دەنێرێت.

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

1 → d, 2 → b, 3 → a, 4 → c, 5 → e.

1 ← د، 2 ← ب، 3 ← أ، 4 ← ج، 5 ← ه.

ExerciseڕاهێنانStyle 9 — Write code: a responsive card gridشێوازی 9 — کۆد بنووسە: گریدێکی ڕێسپۆنسیڤی کارت

Write the HTML and CSS for three cards that sit in one column on a phone and side by side when there is room, with 1.5rem between them — without a media query.

و بنووسە بۆ سێ کە لەسەر مۆبایل لە یەک ستووندا بن و کاتێک شوێن هەبێت لە تەنیشت یەکتر، بە ⁦1.5rem⁩ لە نێوانیاندا — بێ .

Show answerوەڵامەکە پیشان بدە
The HTMLHTMLـەکەHTMLRuns in the browserلە ناو تۆڕگەڕ کار دەکات
<div class="cards">
  <article class="card">
    <h3>Flexbox</h3>
    <p>Boxes in one row or one column.</p>
  </article>
  <article class="card">
    <h3>Grid</h3>
    <p>Rows and columns together.</p>
  </article>
  <article class="card">
    <h3>Media queries</h3>
    <p>CSS that applies from a width.</p>
  </article>
</div>
The CSSCSSـەکەCSSRuns in the browserلە ناو تۆڕگەڕ کار دەکات
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1.5rem;
}

.card {
  padding: 1rem;
  border: 1px solid #d3cfc6;
  border-radius: 0.75rem;
}

Marks go to: article for each card, display: grid, repeat(auto-fit, minmax(…, 1fr)), gap, and straight quotes everywhere.

نمرە دەدرێت بۆ: article بۆ هەر ، display: grid، repeat(auto-fit, minmax(…, 1fr))، gap و کەوانەی ڕاست لە هەموو شوێنێک.

Spot the problemsکێشەکان بدۆزەرەوە

This café page breaks rules from almost every chapter. Find eight problems — and say how to fix each one — before you open the answer.

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

A café home page with many problems, next to the same page on a phone. A white heading Welcome to Sunrise Café sits on a busy striped photo. A long paragraph in very light grey is centred. A line says: To see our menu, click here. A form has two boxes with only grey placeholder words, Name and E-mail; the E-mail box has a red border and no message. Three tiny icon buttons are squeezed together. On the phone, the page is cut off at the right edge.لاپەڕەی سەرەکیی چایخانەیەک بە چەندین کێشەوە، لە تەنیشت هەمان لاپەڕە لەسەر مۆبایل. سەردێڕێکی سپی، بەخێربێن بۆ چایخانەی بەیانی، لەسەر وێنەیەکی خەتخەتی قەرەباڵغ دانراوە. بڕگەیەکی درێژ بە خۆڵەمێشییەکی زۆر کاڵ لە ناوەڕاستدایە. دێڕێک دەڵێت: بۆ بینینی مێنیوەکەمان، لێرە کرتە بکە. فۆرمێک دوو خانەی هەیە تەنیا بە وشەی placeholderـی خۆڵەمێشی، ناو و ئیمەیڵ؛ خانەی ئیمەیڵ سنوورێکی سووری هەیە و هیچ پەیامێک نییە. سێ دوگمەی ئایکۆنی زۆر بچووک بە یەکەوە نووساون. لەسەر مۆبایل، لاپەڕەکە لە لێواری لایەکەوە بڕاوە.
Eight problems from five chapters. How many can you find?هەشت کێشە لە پێنج بەشەوە. چەندیان دەدۆزیتەوە؟CêIT
ExerciseڕاهێنانEight problemsهەشت کێشە

List the problems you can see and how you would fix each one.

ئەو کێشانەی دەیانبینیت بنووسە و بڵێ هەریەکەیان چۆن چاک دەکەیت.

Show answerوەڵامەکە پیشان بدە
  1. Grey text on white (about 1.7 : 1): use dark text, at least 4.5 : 1 (The contrast ratio).
  2. White heading on a busy photo: put the text on a calm area or a solid panel behind it (Contrast for icons, borders and focus).
  3. A long paragraph centred: align body text to the start (Alignment).
  4. "Click here" links: write words that say where the link goes (Link text that makes sense alone).
  5. Placeholders instead of labels: a visible label above every field (Labels, not placeholders).
  6. An error shown only by a red border: add words that say what is wrong and how to fix it (Error messages that help).
  7. Tiny buttons close together: targets at least 24 × 24 px, better 44–48 px (Targets big enough to hit).
  8. The page is cut off on the phone: a fixed width with no viewport tag; use fluid widths and mobile-first media queries (Responsive design).
  1. دەقی خۆڵەمێشی لەسەر سپی (نزیکەی 1.7:11.7:1): دەقی تاریک بەکاربهێنە، لانیکەم 4.5:14.5:1 (ڕێژەی کۆنتراست).
  2. سپی لەسەر وێنەیەکی قەرەباڵغ: دەقەکە بخە سەر شوێنێکی هێمن یان پانێڵێکی یەکڕەنگ لە پشتییەوە (کۆنتراست بۆ ئایکۆن، سنوور و فۆکەس).
  3. بڕگەیەکی درێژ لە ناوەڕاستدا: دەقی سەرەکی بەرەو سەرەتا ڕێک بخە (ڕێکخستن).
  4. «لێرە کرتە بکە»: وشەی وا بنووسە کە بڵێن بۆ کوێ دەچێت (دەقی بەستەر کە بە تەنیا واتای هەبێت).
  5. placeholder لە بری : دیار لە سەرەوەی هەموو خانەیەک (لەیبڵ، نەک placeholder).
  6. هەڵەیەک کە تەنیا بە سوور پیشان دراوە: وشە زیاد بکە کە بڵێن چی هەڵەیە و چۆن چاک دەکرێت (هەڵەنامەکان کە یارمەتی دەدەن).
  7. زۆر بچووک لە نزیک یەکتر: لانیکەم ⁦24 × 24 px⁩، باشتر ⁦44⁩ تا ⁦48 px⁩ (ناوچەکانی دەستلێدان هێندە گەورە کە لێیان بدرێت).
  8. لاپەڕەکە لەسەر مۆبایل بڕاوە: پانییەکی جێگیر بێ تاگی viewport؛ پانیی ڕەوان و بەکاربهێنە (دیزاینی ڕێسپۆنسیڤ).

Did you also see the pale OK button? White on #99cccc is only 1.77 : 1, and "OK" does not say what happens (Buttons that say what happens). Two more problems never show in a picture: check the HTML in the Nu checker and press Tab through the page — a picture cannot show a missing alt or a hidden focus.

OKـی کاڵیشت بینی؟ سپی لەسەر ⁦#99cccc⁩ تەنیا 1.77:11.77:1ـە و «OK» ناڵێت چی ڕوو دەدات (دوگمەکان کە دەڵێن چی ڕوو دەدات). دوو کێشەی تر هەرگیز لە وێنەدا دەرناکەون: لە پشکنەری Nuـدا بپشکنە و بە Tab بە لاپەڕەکەدا بڕۆ — وێنە ناتوانێت altـی ونبوو یان شاراوە پیشان بدات.

Timed task 1: from a wireframe to a page (30 minutes)ئەرکی کاتداری 1: لە وایەرفرەیمەوە بۆ لاپەڕە (⁦30⁩ خولەک)

Three tasks with a time limit. Set a timer, work without the lessons, then compare with the model answer — yours can look different and still be right. In task 1 you turn a wireframe into a finished page.

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

Animation in four steps. 1: a pencil wireframe of a book-club page — the name and three menu words in the header, a big heading, a line of text, three boxes for books and a footer. 2: the same layout as labelled boxes: header with nav, main with h1, p and a section of three articles, and footer. 3: the finished page on a wide screen, with a green header and three cards in a row. 4: the same page on a phone, with the cards in one column.
Animation in four steps. 1: a pencil wireframe of a book-club page — the name and three menu words in the header, a big heading, a line of text, three boxes for books and a footer. 2: the same layout as labelled boxes: header with nav, main with h1, p and a section of three articles, and footer. 3: the finished page on a wide screen, with a green header and three cards in a row. 4: the same page on a phone, with the cards in one column.
Wireframe, structure, style, phone: the same order as the course.، پێکهاتە، ستایل، مۆبایل: هەمان ڕیزبەندیی کۆرسەکە.CêIT
ExerciseڕاهێنانTask 1ئەرکی 1

Build the page of the wireframe for "The Thursday Book Club": a header with the name and a menu (Home, Books, Join); a main area with a heading, one sentence and three book cards; a footer. One column on phones, three cards in a row from 48em. Use semantic elements and mark the current page in the menu.

لاپەڕەی بۆ «The Thursday Book Club» دروست بکە: بە ناوەکە و (Home، Books، Join)؛ ناوچەیەکی سەرەکی بە ، یەک ڕستە و سێ کتێب؛ . لەسەر مۆبایل یەک ستوون، لە ⁦48em⁩ـەوە سێ لە ڕیزێکدا. واتایی بەکاربهێنە و لاپەڕەی ئێستا لە نیشانە بکە.

Show answerوەڵامەکە پیشان بدە
index.html: the page⁦index.html⁩: لاپەڕەکەindex.htmlHTMLRuns in the browserلە ناو تۆڕگەڕ کار دەکات
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>The Thursday Book Club</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header class="site-header">
    <p class="logo">The Thursday Book Club</p>
    <nav aria-label="Main">
      <ul>
        <li><a href="index.html" aria-current="page">Home</a></li>
        <li><a href="books.html">Books</a></li>
        <li><a href="join.html">Join</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <h1>Read with us every Thursday</h1>
    <p>We meet in the school library at 4 pm and talk about one book a month.</p>
    <section>
      <h2>Our books</h2>
      <div class="cards">
        <article class="card">
          <h3>This month</h3>
          <p>A short novel about a family in a mountain village.</p>
        </article>
        <article class="card">
          <h3>Next month</h3>
          <p>Poems by young writers from our city.</p>
        </article>
        <article class="card">
          <h3>Your choice</h3>
          <p>Vote for the book we read in the spring.</p>
        </article>
      </div>
    </section>
  </main>
  <footer>
    <p>© 2026 The Thursday Book Club</p>
  </footer>
</body>
</html>
Explain the codeڕوونکردنەوەی کۆدەکە
Lineدێڕی 9-18

header and nav: the menu is a list, with aria-current on Home.

header و nav: لیستێکە، بە ⁦aria-current⁩ لەسەر Home.

Lineدێڕی 19-40

One main, one h1, a section with a heading and three articles.

یەک main، یەک ⁦h1⁩، sectionـێک بە و سێ article.

style.css: the styles⁦style.css⁩: ستایلەکانstyle.cssCSSRuns in the browserلە ناو تۆڕگەڕ کار دەکات
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: system-ui, sans-serif;
  line-height: 1.6;
  color: #1f2328;
}

.site-header,
main,
footer {
  padding-inline: 1rem;
}

.site-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  padding-block: 0.75rem;
  background-color: #dcefeb;
}

.logo {
  margin: 0;
  font-weight: 700;
}

nav ul {
  display: flex;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

nav a {
  color: #0a5a52;
}

nav a[aria-current="page"] {
  font-weight: 700;
}

.cards {
  display: grid;
  gap: 1rem;
}

.card {
  padding: 1rem;
  border: 1px solid #d3cfc6;
  border-radius: 0.75rem;
}

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

Check your answer: valid HTML, landmarks and one h1, a list for the menu, aria-current, mobile-first CSS with one media query, gap rather than margins between the cards.

وەڵامەکەت بپشکنە: دروست، و یەک ⁦h1⁩، لیستێک بۆ ، aria-current، بە یەک ، gap لە بری لە نێوان .

Timed task 1: from a wireframe to a page (30 minutes)ئەرکی کاتداری 1: لە وایەرفرەیمەوە بۆ لاپەڕە (⁦30⁩ خولەک)

Timed task 2: fix an inaccessible form (20 minutes)ئەرکی کاتداری 2: فۆرمێکی نادەستڕاگەیشتوو چاک بکە (⁦20⁩ خولەک)

This form passes the Nu checker with only a warning about the missing lang, yet many people cannot use it. Find what is wrong and rewrite it.

ئەم تەنیا بە ئاگادارکردنەوەیەک لەبارەی langـی ونبوو لە پشکنەری Nuـدا دەردەچێت، بەڵام زۆر کەس ناتوانن بەکاری بهێنن. بیدۆزەرەوە چی هەڵەیە و دووپاتە بینووسەوە.

ExerciseڕاهێنانTask 2ئەرکی 2

Rewrite the form so that everyone can fill it in with a keyboard, a screen reader or a phone. Keep action="join.php" and method="post".

دووپاتە بنووسەوە بۆ ئەوەی هەمووان بتوانن بە ، یان مۆبایل پڕی بکەنەوە. action="join.php" و method="post" بهێڵەوە.

join.html — the version to fix⁦join.html⁩ — ئەو وەشانەی چاک دەکرێتHTMLRuns in the browserلە ناو تۆڕگەڕ کار دەکات
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Join</title>
  <style>
    body { font-family: Arial, sans-serif; }
    input { border: 1px solid #dddddd; padding: 4px; }
    input::placeholder { color: #bbbbbb; }
    .wrong { border-color: red; }
    :focus { outline: none; }
    .btn { display: inline-block; padding: 4px 8px; background-color: #99cccc; color: #ffffff; }
  </style>
</head>
<body>
  <h3>Join the club</h3>
  <form action="join.php" method="post">
    <input type="text" placeholder="Your name"><br>
    <input type="text" placeholder="E-mail" class="wrong"><br>
    <input type="text" placeholder="Phone"><br>
    <div class="btn" onclick="this.closest('form').submit()">OK</div>
  </form>
</body>
</html>
Show answerوەڵامەکە پیشان بدە
  1. No lang on <html>, and the first heading is an h3 instead of an h1.
  2. Placeholders instead of labels, and no name on any field — nothing would be sent.
  3. type="text" for the e-mail address and the phone number: no fitting phone keyboard, no autofill.
  4. The error is only a red border, with no words.
  5. :focus { outline: none; } hides where the keyboard is.
  6. The "button" is a div with onclick: Tab never reaches it, and "OK" does not say what happens; white on #99cccc is only 1.77 : 1.
  1. lang لەسەر <html> نییە و یەکەم لە بری h1، h3ـە.
  2. placeholder لە بری و هیچ خانەیەک nameـی نییە — هیچ شتێک نانێردرێت.
  3. type="text" بۆ و ژمارەی تەلەفۆن: نە کیبۆردی گونجاوی مۆبایل، نە .
  4. هەڵەکە تەنیا سوورە، بێ هیچ وشەیەک.
  5. :focus { outline: none; } شوێنی دەشارێتەوە.
  6. «» divـێکە بە onclick: Tab هەرگیز ناگاتە سەری و «OK» ناڵێت چی ڕوو دەدات؛ سپی لەسەر ⁦#99cccc⁩ تەنیا 1.77:11.77:1ـە.
ExerciseڕاهێنانModel answerوەڵامی نموونەیی

Compare your form with this one. Every change has a reason in chapters 2 and 6.

لەگەڵ ئەمەدا بەراورد بکە. هەر گۆڕانکارییەک هۆیەکی لە بەشەکانی 2 و 6ـدا هەیە.

Show answerوەڵامەکە پیشان بدە
join.html — fixed⁦join.html⁩ — چاککراوHTMLRuns in the browserلە ناو تۆڕگەڕ کار دەکات
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Join the book club</title>
  <style>
    body { margin: 1rem; font-family: system-ui, sans-serif; line-height: 1.5; color: #1f2328; }
    .field { margin-block-end: 1rem; }
    label { display: block; margin-block-end: 0.25rem; font-weight: 700; }
    input { width: min(100%, 22rem); padding: 0.5rem; border: 2px solid #6b7078; border-radius: 0.375rem; font: inherit; }
    input[aria-invalid="true"] { border-color: #b3261e; }
    .error { margin-block: 0.25rem 0; color: #b3261e; font-weight: 700; }
    :focus-visible { outline: 3px solid #b4530f; outline-offset: 2px; }
    button { min-height: 2.75rem; padding: 0.5rem 1.25rem; border: 0; border-radius: 0.375rem;
             background-color: #0d6b62; color: #ffffff; font: inherit; font-weight: 700; }
  </style>
</head>
<body>
  <h1>Join the book club</h1>
  <form action="join.php" method="post">
    <div class="field">
      <label for="name">Full name</label>
      <input id="name" name="name" type="text" autocomplete="name" required>
    </div>
    <div class="field">
      <label for="email">E-mail address</label>
      <input id="email" name="email" type="email" autocomplete="email" required
             aria-invalid="true" aria-describedby="email-error">
      <p class="error" id="email-error">Error: enter an e-mail address with @, such as name@example.com</p>
    </div>
    <div class="field">
      <label for="phone">Phone number (optional)</label>
      <input id="phone" name="phone" type="tel" autocomplete="tel">
    </div>
    <button type="submit">Join the club</button>
  </form>
</body>
</html>

Contrast now: white on #0d6b62 is 6.37 : 1, the error red #b3261e on white 6.53 : 1, and the field borders #6b7078 4.98 : 1 (3 : 1 is needed). See Labels, not placeholders, Autofill, Error messages that help and Native HTML first.

ئێستا کۆنتراست: سپی لەسەر ⁦#0d6b62⁩ 6.37:16.37:1ـە، سووری هەڵە ⁦#b3261e⁩ لەسەر سپی 6.53:16.53:1 و خانەکان ⁦#6b7078⁩ 4.98:14.98:1 (3:13:1 پێویستە). سەیری لەیبڵ، نەک placeholder، پڕکردنەوەی خۆکار، هەڵەنامەکان کە یارمەتی دەدەن و سەرەتا HTMLـی ڕەسەن بکە.

Timed task 1: from a wireframe to a page (30 minutes)ئەرکی کاتداری 1: لە وایەرفرەیمەوە بۆ لاپەڕە (⁦30⁩ خولەک)

Timed task 3: make a fixed layout responsive (25 minutes)ئەرکی کاتداری 3: ڕێکخستنی لاپەڕەیەکی جێگیر بکە بە ڕێسپۆنسیڤ (⁦25⁩ خولەک)

This page was built for one screen, 960 px wide. On a phone it is shrunk until the text is too small to read. Make it work from 320 px to a wide screen.

ئەم لاپەڕەیە بۆ یەک شاشە دروستکراوە، بە پانیی ⁦960 px⁩. لەسەر مۆبایل هێندە بچووک دەکرێتەوە کە دەقەکە ناخوێنرێتەوە. وای لێ بکە لە ⁦320 px⁩ـەوە تا شاشەیەکی پان کار بکات.

Left: built for 960 px. Right: fluid and mobile-first.چەپ: بۆ ⁦960 px⁩ دروستکراوە. ڕاست: ڕەوان و .CêIT
ExerciseڕاهێنانTask 3ئەرکی 3

Rewrite the page so that it fits every screen. Keep the content; you may change the HTML elements.

لاپەڕەکە دووپاتە بنووسەوە بۆ ئەوەی لەگەڵ هەموو شاشەیەکدا بگونجێت. ناوەڕۆکەکە بهێڵەوە؛ دەتوانیت بگۆڕیت.

book-swap.html — built for one screen⁦book-swap.html⁩ — بۆ یەک شاشە دروستکراوەHTMLRuns in the browserلە ناو تۆڕگەڕ کار دەکات
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>The Book Swap</title>
  <style>
    body { margin: 0; font-family: Arial, sans-serif; }
    .page { width: 960px; margin: 0 auto; }
    .main { float: left; width: 640px; }
    .side { float: right; width: 300px; }
    .main img { width: 640px; height: 360px; }
    .footer { clear: both; }
  </style>
</head>
<body>
  <div class="page">
    <h1>The Book Swap</h1>
    <div class="main">
      <img src="swap.jpg" alt="Tables full of second-hand books in the school hall">
      <p>Bring a book you have read, and take home one you have not. Every Saturday in May.</p>
    </div>
    <div class="side">
      <h2>When and where</h2>
      <p>Saturdays, 10 am to 1 pm, in the school hall.</p>
    </div>
    <div class="footer">© 2026 The Book Swap</div>
  </div>
</body>
</html>
Show answerوەڵامەکە پیشان بدە
book-swap.html — responsive⁦book-swap.html⁩ — ڕێسپۆنسیڤHTMLRuns in the browserلە ناو تۆڕگەڕ کار دەکات
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>The Book Swap</title>
  <style>
    * { box-sizing: border-box; }
    body { margin: 0; font-family: system-ui, sans-serif; line-height: 1.6; }
    .page { width: min(100% - 2rem, 60rem); margin-inline: auto; }
    .layout { display: grid; gap: 1.5rem; }
    .layout img { display: block; max-width: 100%; height: auto; }
    @media (width >= 48em) {
      .layout { grid-template-columns: 2fr 1fr; }
    }
  </style>
</head>
<body>
  <div class="page">
    <header>
      <h1>The Book Swap</h1>
    </header>
    <div class="layout">
      <main>
        <img src="swap.jpg" alt="Tables full of second-hand books in the school hall" width="640" height="360">
        <p>Bring a book you have read, and take home one you have not. Every Saturday in May.</p>
      </main>
      <aside>
        <h2>When and where</h2>
        <p>Saturdays, 10 am to 1 pm, in the school hall.</p>
      </aside>
    </div>
    <footer>
      <p>© 2026 The Book Swap</p>
    </footer>
  </div>
</body>
</html>
Explain the codeڕوونکردنەوەی کۆدەکە
Lineدێڕی 5

The viewport tag: without it, phones draw the page 980 px wide and shrink it.

تاگی viewport: بەبێ ئەو، مۆبایلەکان لاپەڕەکە بە ⁦980 px⁩ دەکێشن و بچووکی دەکەنەوە.

Lineدێڕی 10-15

A fluid container, a one-column grid with fluid pictures, and two columns from 48em.

کۆنتەینەرێکی ڕەوان، gridـێکی یەک ستوونی بە وێنەی ڕەوان و دوو ستوون لە ⁦48em⁩ـەوە.

  • The viewport meta tag (The viewport meta tag).
  • width: min(100% - 2rem, 60rem) instead of width: 960px (Fluid layouts).
  • Grid instead of two floats, one column first and 2fr 1fr from 48em (Mobile-first).
  • max-width: 100%; height: auto on the picture, with width and height in the HTML (Pictures that shrink).
  • header, main, aside and footer instead of divs — the same boxes, now with meaning.

Where to go nextدواتر بۆ کوێ بچیت

Web Programming adds the server: PHP, forms that save data, MySQL databases and logins — start with What is PHP? and XAMPP: a web server on your computer. For JavaScript, MDN's free module Dynamic scripting with JavaScript goes on from A first look at JavaScript; if CêIT adds a JavaScript course, it will be the next step here. For the English of web work — job titles, page parts, project stages — see Technical English: Websites. And keep your portfolio growing: every new project is one more card.

پڕۆگرامسازیی وێب زیاد دەکات: ، کە پاشەکەوت دەکەن، و — بە PHP چییە؟ و XAMPP: ڕاژەکاری وێبێک لەسەر کۆمپیوتەرەکەت دەست پێ بکە. بۆ ، مۆدیولی بێبەرانبەری MDN بە ناوی Dynamic scripting with JavaScript لە یەکەم سەیرکردنی JavaScriptـەوە بەردەوام دەبێت؛ ئەگەر CêIT کۆرسێکی زیاد بکات، ئەوە دەبێت بە هەنگاوی داهاتوو لێرەدا. بۆ ئینگلیزیی کاری وێب — ناوی پیشەکان، بەشەکانی لاپەڕە، قۆناغەکانی پڕۆژە — سەیری ئینگلیزیی تەکنیکی: تۆڕگەکان بکە. هەروەها گەورەتر بکە: هەر پڕۆژەیەکی نوێ ترە.

A signpost at the end of the Web Design road with three arms. Web Programming: PHP, forms that save data, MySQL, logins. JavaScript: MDN's Dynamic scripting with JavaScript, and a CêIT JavaScript course if one is added. Technical English: the English of websites and web jobs. At the foot of the post: keep your portfolio growing.تابلۆیەکی ڕێنیشاندەر لە کۆتایی ڕێگای دیزاینی وێب بە سێ قۆڵەوە. پڕۆگرامسازیی وێب: PHP، فۆرم کە دراوە پاشەکەوت دەکەن، MySQL، چوونەژوورەوە. JavaScript: Dynamic scripting with JavaScriptـی MDN و کۆرسێکی JavaScriptـی CêIT ئەگەر زیاد بکرێت. ئینگلیزیی تەکنیکی: ئینگلیزیی تۆڕگەکان و کارەکانی وێب. لە بنی تابلۆکەدا: پۆرتفۆلیۆی ئۆنلاینەکەت گەورەتر بکە.
Three roads on from here — and one portfolio that keeps growing.سێ ڕێگا لێرەوە — و کە بەردەوام گەورە دەبێت.CêIT

The final checklistلیستی پشکنینی کۆتایی

Before you call any website finished — your portfolio, a project or an exam answer — go through these ten checks. Each one is a chapter of this course in one line.

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

A checklist card titled Before you call a website finished, with ten ticked lines in chapter colours: 1 valid HTML and CSS; 2 landmarks, one h1, headings in order; 3 alt, width and height on every picture; 4 text contrast at least 4.5 : 1, never colour alone; 5 everything works with the keyboard, focus visible; 6 viewport tag, mobile-first, no sideways scrolling at 320 px; 7 forms with visible labels, the right types and clear errors; 8 lang, dir on Kurdish pages, a title and a description; 9 pictures at the right size, lazy below the first screen; 10 published on HTTPS and tested on the live address.کارتێکی لیستی پشکنین بە ناونیشانی پێش ئەوەی بڵێیت تۆڕگەیەک تەواو بووە، بە دە دێڕی نیشانەکراو بە ڕەنگی بەشەکان: 1 HTML و CSSـی دروست؛ 2 ناوچە نیشانەدارەکان، یەک h1، سەردێڕەکان بە ڕیز؛ 3 alt، width و height لەسەر هەموو وێنەیەک؛ 4 کۆنتراستی دەق لانیکەم 4.5:1، هەرگیز تەنیا ڕەنگ نا؛ 5 هەموو شتێک بە کیبۆرد کار دەکات، فۆکەس دیارە؛ 6 تاگی viewport، مۆبایل لە پێشدا، بێ چوونە لادا لە 320 pxـدا؛ 7 فۆرمەکان بە لەیبڵی دیار، جۆری گونجاو و هەڵەی ڕوون؛ 8 lang، dir لە لاپەڕە کوردییەکاندا، ناونیشان و پێناسە؛ 9 وێنە بە قەبارەی گونجاو، lazy لە خوارەوەی یەکەم شاشە؛ 10 بڵاوکراوە بە HTTPS و لەسەر ناونیشانە زیندووەکە تاقیکراوەتەوە.
Ten checks, eight chapters, one habit.دە پشکنین، هەشت بەش، یەک خوو.CêIT
Review questionsپرسیارەکانی پێداچوونەوە
What does each of HTML, CSS and JavaScript do?هەریەکە لە HTML، CSS و JavaScript چی دەکەن؟

HTML gives the structure and meaning, CSS the presentation and layout, JavaScript the behaviour — and the page must still work with HTML alone.

پێکهاتە و واتا دەدات، شێوە و ، ڕەفتار — و لاپەڕەکە دەبێت هێشتا تەنیا بە کار بکات.

Name three things that make a page usable with the keyboard.سێ شت ناو بهێنە کە لاپەڕەیەک بە کیبۆرد بەکارهێنراو دەکەن.

Real links and buttons (not clickable divs), a visible focus style, and an HTML order that matches the reading order; a skip link helps too.

و ڕاستەقینە (نەک divـی کرتەپێکراو)، شێوەیەکی دیاری و ڕیزبەندییەکی کە لەگەڵ ڕیزبەندیی خوێندنەوەدا یەکبگرێتەوە؛ یارمەتیش دەدات.

Why is a page that passes the validators not automatically accessible?بۆچی لاپەڕەیەک کە لە پشکنەرەکاندا دەردەچێت خۆبەخۆ دەستڕاگەیشتوو نییە؟

Validators check the code's grammar, not people: a form can be valid and still have no labels, low contrast or a button that the keyboard cannot reach (task 2).

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

What is the difference between static hosting and PHP hosting?جیاوازیی نێوان هۆستینگی لاپەڕەتۆڕی نەگۆڕ و هۆستینگی PHP چییە؟

Static hosting sends ready files as they are and is often free; PHP hosting runs programs that build pages and save data, and usually costs money.

ئامادە وەک خۆیان دەنێرێت و زۆرجار بێبەرانبەرە؛ کار پێدەکات کە لاپەڕە دروست دەکەن و پاشەکەوت دەکەن و زۆرجار بە پارەیە.

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

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

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

Back to the courseگەڕانەوە بۆ کۆرسەکە

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.تەنیا لەسەر ئەم ئامێرە پاشەکەوت دەکرێت.