آموزش جامع ساخت صفحات وب با HTML5 و CSS3 - آخرین آپدیت

توسعه صفحه وب با استفاده از HTML5 Develop a Web Page using HTML5

• مقدمه و زمینه‌سازی Context Setting

• کالبدشناسی یک المان HTML و یک سند HTML Anatomy of a HTML element and a HTML document

• مشاهده و تمرین: ایجاد یک سند HTML در Notepad یا ویرایشگر متن Watch and Repeat : Create a HTML document in notepad/text editor

• ساخت صفحه وب با استفاده از المان‌های پرکاربرد HTML5 Create a web page using commonly used HTML5 elements

• مشاهده و تمرین: دانلود و نصب VS Code Watch and Repeat : Downloading and Installing VS code

• مشاهده و تمرین: ایجاد المان‌های Header و Paragraph در فایل HTML Watch and Repeat : Creating header and paragraph elements in a HTML file

• مشاهده و تمرین: ایجاد تگ‌های تصویر، لینک و لیست در فایل HTML Watch and Repeat : Creating image , anchor and list tags in a HTML file

• نصب سرور HTTP برای نمایش صفحات وب Install a HTTP server to deliver web pages

• استفاده از ابزار Emmet و قابلیت Multi-cursor در VS Code Use Emmet Tool Kit and multi cursor feature in VS Code

• مشاهده و تمرین: ابزار Emmet و چند-نشانگر Watch and Repeat : Emmet Toolkit and Multi-cursor

• تمرین عملی ۱ Practice Brief 1

• تمرین عملی ۲ Practice Brief 2

• بررسی تمرین: توسعه یک صفحه وب با HTML Practice Debrief :: Develop a web page using HTML

• جمع‌بندی یادگیری Learning Consolidation

توسعه صفحه وب با استفاده از عناصر معنایی و HTML5 Develop a Web page using Semantic and HTML5 elements

• مقدمه و زمینه‌سازی Context Setting

• تفاوت بین المان‌های معنایی (Semantic) و غیرمعنایی Differentiate between non-semantic and semantic elements​

• مشاهده و تمرین: المان‌های معنایی و غیرمعنایی Watch and Repeat : Semantic and Non-Semantic Elements

• شناسایی مزایای استفاده از المان‌های معنایی Identify the benefits of using semantic elements​

• توضیح کاربرد نشانه‌گذاری معنایی توسط صفحه‌خوان‌ها برای پیمایش صفحه Explain the use of semantic markup by screen readers for page navigation​

• مشاهده و تمرین: برچسب‌های Aria Watch and Repeat : Aria Lables

• ساختاربندی صفحه وب با استفاده از المان‌های معنایی HTML Structure a web page using semantic HTML elements

• مشاهده و تمرین: المان‌های محبوب و معنایی HTML5 Watch and Repeat : Popular semantic HTML5 elements

• مشاهده و تمرین: المان‌های معنایی مانند Footer، Figure و Details Watch and Repeat : Semantic elements like Footer, Figure and Details

• تمرین عملی Practice Brief

• بررسی تمرین Practice Debrief

• جمع‌بندی یادگیری Learning Consolidation

استایل‌دهی به صفحه وب با استفاده از ویژگی‌های پایه CSS Style a Web page using basic CSS properties

• مقدمه و زمینه‌سازی Context Setting

• استفاده از CSS برای استایل‌دهی به صفحه HTML Use CSS to style a HTML page

• مشاهده و تمرین: روش‌های مختلف اعمال استایل Watch and Repeat : Different ways of applying styles

• انتخاب المان‌های HTML با استفاده از Selectorهای CSS Select HTML elements using CSS selectors

• مشاهده و تمرین: انتخاب المان‌های HTML با CSS Selectorها Watch and Repeat : Select HTML elements using CSS selectors

• اعمال استایل به یک المان HTML با استفاده از ویژگی‌های CSS Apply styles to an HTML element using CSS properties​

• مشاهده و تمرین: اعمال استایل‌ها با ویژگی‌های CSS Watch and Repeat : Apply styles using CSS properties

• تمرین عملی Practice Brief

• بررسی تمرین Practice Debrief

• جمع‌بندی یادگیری Learning Consolidation

استایل‌دهی به صفحه وب با استفاده از ویژگی‌های CSS Box Model Style a Web page using CSS box model properties

• مقدمه و زمینه‌سازی Context Setting

• ایجاد چیدمان (Layout) با استفاده از CSS Box Model Create layouts by using the CSS box model​

• اعمال Margin، Border و Padding برای ایجاد فضای تنفس در طراحی Apply margin, border and padding to add more breathing space to the design​

• مشاهده و تمرین: مدل جعبه‌ای CSS (Box Model) Watch and Repeat : CSS Box Model

• مشاهده و تمرین: مدل جعبه‌ای استاندارد و جایگزین Watch and Repeat : Standard and Alternate box model

• مدیریت گروه‌بندی المان‌ها با استفاده از ویژگی CSS Display Manage grouping of elements using the CSS display property​

• مشاهده و تمرین: ویژگی CSS Display Watch and Repeat : CSS display property

• اعمال اولویت‌بندی CSS (Specificity) Apply CSS specificity

• مشاهده و تمرین: اولویت‌بندی در CSS Watch and Repeat : CSS specificity

• استفاده از سینتکس BEM هنگام نام‌گذاری کلاس‌های CSS Use BEM syntax while creating the CSS class names​

• تمرین عملی Practice Brief

• بررسی تمرین Practice Debrief

• جمع‌بندی یادگیری Learning Consolidation