Zero to Builder

HTML + CSS

كل موقع شفته في حياتك بيبدأ من هنا. هتبني شكل أي صفحة بنفسك، وتشوف النتيجة تحت كل مثال.

Every website you have ever seen starts here. Build any page yourself, and see the real result under every example.

👤 لو عايز تصمم وتبني مواقع بنفسك، وأحسن بداية قبل JavaScript.

👤 For anyone who wants to design and build websites. The best start before JavaScript.

48 صفحة48 pages8 فصول + مقدمة8 chapters + intro8 مشاريع8 projectsكويز في كل فصلQuiz every chapterتمارين 3 مستويات3-level exercisesامتحان نهائيFinal examعربي + إنجليزيArabic + English

$5$6

في مصر: 220 جنيه

اشتري الآنBuy now ادفع من مصرPay from Egypt

📦 هتستلم: PDF عربي + PDF إنجليزي + ملف الأكواد والحلول📦 You get: Arabic PDF + English PDF + all the code and solutions

حمّل عينة مجانية (عربي)Free sample (Arabic) · (إنجليزي)(English)

كل المبيعات نهائية. شوف العينة المجانية قبل ما تشتري.All sales are final. Check the free sample before you buy.

الفهرس

What’s inside

دوس على أي فصل عشان تشوف هتتعلم فيه إيه.

Tap any chapter to see what you will learn.

00ابدأ من هنا: تقدر تعمل إيه بـ HTML وCSSStart here: what you can (and can’t) do⌄
تقدر تعمل إيه بـ HTML وCSS وماتقدرش · المتصفح بيعرض الصفحة إزاي · VS Code و Live ServerWhat HTML & CSS can and can’t do · how the browser shows a page · VS Code + Live Server
01أساسيات HTMLHTML Basics⌄
التاجات · العناوين والفقرات · عريض ومائل · اللينكات والصور · القوائمTags · headings and paragraphs · bold and italic · links and images · lists
02هيكل الصفحة والجداولPage Structure & Tables⌄
header / nav / main / footer · div و span · الجداولheader / nav / main / footer · div and span · tables
03النماذج (Forms)Forms⌄
form · أنواع input · select / textarea · radio و checkbox · requiredform · input types · select / textarea · radio and checkbox · required
04أساسيات CSSCSS Basics⌄
المحددات (tag, .class, #id) · الألوان · الخطوط · :hoverSelectors (tag, .class, #id) · colors · fonts · :hover
05نموذج الصندوق (Box Model)The Box Model⌄
padding · border · margin · box-sizing · block و inlinepadding · border · margin · box-sizing · block vs inline
06FlexboxFlexbox⌄
display: flex · justify-content · align-items · flex-wrap · gapdisplay: flex · justify-content · align-items · flex-wrap · gap
07CSS GridCSS Grid⌄
grid-template-columns · fr · repeat · span · grid-template-areasgrid-template-columns · fr · repeat · span · grid-template-areas
08التصميم المتجاوب والحركة والمتغيراتResponsive Design, effects & variables⌄
media queries · الموبايل الأول · transition · animation · متغيرات CSSMedia queries · mobile first · transition · animation · CSS variables

هتبني إيه بإيدك

What you will build

P1صفحة بروفايل شخصيProfile page
P2منيو مطعمRestaurant menu
P3فورم تسجيلSign-up form
P4بروفايل بتنسيق كاملStyled profile
P5كارت أسعارPricing card
P6شريط تنقّل وكروت مميزاتNavbar + feature cards
P7معرض صورPhoto gallery
P8المشروع النهائي: صفحة كافيه Nile BrewFinal project: Nile Brew coffee landing page