آموزش مبانی HTML5 - تفکر مانند یک معمار وب - آخرین آپدیت
دانلود HTML5 Foundations - Think Like a Web Architect
به جای کدنویسی مانند یک دکوراتور، مانند یک معمار فکر کنید.
بسیاری از مبتدیان مستقیماً به سراغ CSS و JavaScript میروند و پروژههای خود را بر روی پایهای ضعیف و قدیمی بنا میکنند. این امر منجر به ساخت وبسایتهایی میشود که برای گوگل نامرئی هستند، در موبایل دچار مشکل میشوند و برای افراد دارای معلولیت غیرقابل استفادهاند.
در این دوره، ما تمام حواسپرتیهای مربوط به استایلدهی را کنار میگذاریم تا ۱۰۰٪ روی لایه ساختاری وب تمرکز کنیم: HTML5 مدرن و معنایی (Semantic).
آنچه خواهید آموخت:
-
ساختار سند - نحوه راهاندازی یک پروژه حرفهای در VS Code.
-
تگهای معنایی - زمان استفاده از article، section، header و footer برای دستیابی به حداکثر سئو (SEO).
-
سازماندهی دادهها - ساخت جداول پیچیده و دسترسپذیر برای رتبهبندیها و نمودارها.
-
تعامل کاربر - ساخت فرمهای کاربردی با استفاده از اعتبارسنجی بومی HTML5.
-
دسترسپذیری (Accessibility) -اطمینان از اینکه سایت شما توسط صفحهخوانها و فناوریهای کمکی قابل خواندن است.
پروژه عملی
شما در مسیر ساخت CineVault(یک دیتابیس فیلم ۵ صفحهای) همراه من خواهید بود. برای پروژه نهایی دوره، شما همین نقشهها را برای ساخت ردیاب علاقهمندیهای شخصیخود (مانند کتابخانه شخصی، جعبه دستور پخت یا آرشیو بازیها) به کار میبرید.
چرا باید این دوره را بگذرانید؟
HTML مهمترین مهارت در جعبهابزار یک توسعهدهنده است، اما اغلب بیشترین سوءتفاهمها پیرامون آن وجود دارد. نوشتن "کد تمیز"فقط مربوط به زیبایی نیست، بلکه درباره ساخت سایتی است که سریع، دسترسپذیر و دوستداشتنی برای موتورهای جستجو باشد.
با یادگیری تفکر معمارانه، صدها ساعت در مرحله رفع خطا (Debugging) صرفهجویی خواهید کرد و پایهای محکم برای پروژههای آینده CSS و JavaScript خود میسازید.
این دوره برای چه کسانی است؟
-
مبتدیان مطلق - اگر هرگز حتی یک خط کد ننوشتهاید، اینجا بهترین نقطه برای شروع است.
-
توسعهدهندگان خودآموز - مناسب برای کسانی که میخواهند عادتهای بد کدنویسی را کنار گذاشته و بر استانداردهای مدرن HTML5 مسلط شوند.
-
طراحان - ایدهآل برای طراحان UI/UX که میخواهند منطق ساختاری پشت طرحهای خود را درک کنند.
ابزارها و منابع مورد نیاز
برای دنبال کردن این دوره، شما تنها به موارد زیر نیاز دارید:
-
یک کامپیوتر (Mac، Windows یا Linux).
-
Visual Studio Code(نصب رایگان آن را در دوره آموزش میدهیم).
-
کنجکاوی شما!
درسها Lessons
-
مقدمهای بر دوره مبانی HTML5 Introduction to HTML5 Foundations Class
-
زیرساختها: کلاینتها، سرورها و موتورهای مرورگر The Infrastructure - Clients, Servers & Browser Engines
-
نصب VS Code و افزونههای ضروری VS Code & Essential Extensions
-
کدنویسی هوشمند و استفاده مسئولانه از AI برای دیباگ Coding Smart & Debugging AI Responsibly
-
تگها، المانها و سینتکس HTML5 HTML5 Tags, Elements & Syntax
-
چیدمان معنایی: Header، Main و Footer Semantic Layout - Header, Main, and Footer
-
ساختاردهی محتوا: تفاوت Section و Article Structuring Content - Sections vs. Articles
-
افزودن تصاویر و متن جایگزین (Alt) دسترسپذیر Adding Images & Accessible Alt Text
-
جاسازی ویدیوها با کنترلهای بومی Embedding Videos with Native Controls
-
تسلط بر لینکها و تگ Anchor Mastering Links and the Anchor Tag
-
ساخت جداول تمیز در HTML Building Clean HTML Tables
-
ایجاد فرمها و ورودیهای کاربر Creating Forms & User Inputs
-
درک ARIA و صفحهخوانها Understanding ARIA & Screen Readers
-
پروژه CineVault بخش اول: ساخت صفحه اصلی معنایی CineVault Part 1 - Building the Semantic Homepage
-
پروژه CineVault بخش دوم: ایجاد جدول رتبهبندی CineVault Part 2 - Creating the Rankings Chart
-
پروژه CineVault بخش سوم: ساختاردهی صفحه نظرات CineVault Part 3 - Structuring the Reviews Page
-
پروژه CineVault بخش چهارم: فرم درخواست فیلم CineVault Part 4 - The Movie Request Form
-
پروژه نهایی دوره و گامهای بعدی Your Class Project & Beyond
https://donyad.com/d/97c27e
Akalanka Karunarathna
طراح UI/UX و سازنده محتوا
سلام،
من یک طراح UI/UX آزاد هستم با بیش از 5 سال سابقه کار .
هدف من این است که دانش و تجربه خود را با دانشجویانی که مایل به یادگیری طراحی وب و گرافیک هستند به اشتراک بگذارم.
نمایش نظرات