آموزش تسلط بر HTML5 — ساخت وب سایت ها و برنامه های موبایل برتر جدید 2023

سرفصل ها و درس ها

خوش آمدی! Welcome!

• معرفی Introduction

• اختیاری: محیط کدنویسی خود را تنظیم کنید OPTIONAL: Set up your Coding Environment

• اختیاری: ساختار این دوره چگونه است OPTIONAL: How This Course Is Structured

• اختیاری: با HTML5 چه کاری می توانید انجام دهید؟ OPTIONAL: What Can You Do With HTML5?

• پروژه: اولین پروژه HTML5 شما PROJECT: Your First HTML5 Project

• در چند ثانیه روی تلفن همراه خود تست کنید Test on Your Mobile Phone in Seconds

• یک تجربه VR با HTML5 ایجاد کنید Create a VR Experience with HTML5

• اولین برنامه موبایل خود را تمام کنید Finish Your First Mobile App

با HTML شروع کنید Get Started with HTML

• معرفی Introduction

• کد HTML با نحو معتبر Code HTML with Valid Syntax

• کد خود را اعتبار سنجی کنید Validate Your Code

• پروژه: یک مقاله خبری ایجاد کنید PROJECT: Create a News Article

• رندر متن با عناصر بلوک Render Text with Block Elements

• Semantics برای کلمات و عبارات را مشخص کنید Specify Semantics for Words and Phrases

• داده های خود را با لیست ها مرتبط کنید Relate Your Data with Lists

• عناصر گروه در ظروف Group Elements in Containers

• تمرین: محتوای معنایی HTML5 ایجاد کنید EXERCISE: Create Semantic HTML5 Content

• اختیاری: مرور تمرین OPTIONAL: EXERCISE REVIEW

• خلاصه Recap

تصاویر، ویدیوها و محتوای غنی را اضافه کنید Add Images, Videos & Rich Content

• معرفی Introduction

• پروژه: یک آلبوم برای رویداد اجتماعی خود ایجاد کنید PROJECT: Create an Album for Your Social Event

• تصاویر خود را برای وب آماده کنید Prepare Your Images for the Web

• رندر عکس و تصاویر Render Photos and Images

• یک پخش کننده صوتی ایجاد کنید Create an Audio Player

• یک پخش کننده ویدیو ایجاد کنید Create a Video Player

• یک پخش کننده ویدیو را سفارشی کنید Customize a Video Player

• رندر جداول داده Render Data Tables

• خلاصه Recap

سبک و طراحی با CSS Style and Design with CSS

• معرفی Introduction

• پروژه: اولین وبلاگ خود را ایجاد کنید PROJECT: Create Your First Blog

• اعمال سبک های پایه Apply Basic Styles

• برچسب های HTML را با انتخابگرها هدف قرار دهید Target HTML Tags with Selectors

• حاشیه ها و مرزها را اضافه کنید Add Margins and Borders

• سبک متن و رنگ Style Text and Colors

• چیدمان تصاویر و جداول Layout Images and Tables

• لیست های چیدمان با Flexbox Layout Lists with Flexbox

• اضافه کردن تصاویر پس زمینه Add Background Images

• خلاصه Recap

پیوندها، اقدامات و محتوای خارجی را اضافه کنید Add Links, Actions & External Content

• معرفی Introduction

• پروژه: یک وب سایت شرکت ایجاد کنید PROJECT: Create a Company Website

• پیوندها توضیح داده شده است Links Explained

• URL ها توضیح داده شده است URLs Explained

• گزینه های پیوند پیشرفته Advanced Link Options

• فیلم ها و محتوا را جاسازی کنید Embed Videos and Content

• پروژه: صفحه اصلی فعالیت شخصی خود را ایجاد کنید PROJECT: Create Your Personal Activity Home Screen

• برنامه های بومی را در دستگاه های تلفن همراه باز کنید: نقشه ها و ناوبری Open Native Apps on Mobile Devices: Maps and Navigation

• برنامه های پیام رسانی، تماس تلفنی و اجتماعی را باز کنید Open Messaging, Phone Call and Social Apps

• خلاصه Recap

کار خود را منتشر کنید Publish Your Work

• معرفی Introduction

• یک ارائه دهنده و یک URL عمومی را انتخاب کنید Select a Provider and a Public URL

• بازدیدهای خود را با Analytics دنبال کنید Track Your Visits with Analytics

• به صورت رایگان در Firebase منتشر کنید Publish on Firebase for Free

• در یک سرور FTP منتشر کنید Publish on an FTP Server

• کدهای QR و نشانگرهای وب فیزیکی را توزیع کنید Distribute QR Codes & Physical Web Beacons

• خلاصه Recap

افزودن تعامل با شبکه های اجتماعی Add Interaction with Social Networks

• معرفی Introduction

• پروژه: راهنمای شهر بسازید PROJECT: Make a City Guide

• محتوای خود را قابل اشتراک گذاری کنید Make Your Content Shareable

• ادغام با فیس بوک Integrate with Facebook

• ادغام با توییتر Integrate with Twitter

• با WhatsApp و سایر شبکه های اجتماعی کار کنید Work with WhatsApp & Other Social Networks

• خلاصه Recap

بهینه سازی برای دستگاه های تلفن همراه Optimize for Mobile Devices

• معرفی Introduction

• پروژه: یک برنامه منوی رستوران ایجاد کنید PROJECT: Create a Restaurant Menu App

• کد بهینه سازی های پایه موبایل Code Basic Mobile Optimizations

• بهینه سازی برای iPhone و iPad Optimize for iPhone and iPad

• بهینه سازی برای اندروید Optimize for Android

• هدرهای چسبنده را اضافه کنید Add Sticky Headers

• با نمایشگرهای با وضوح بالا کار کنید Work with High-Resolution Displays

• خلاصه Recap

ایجاد فرم های تعاملی Create Interactive Forms

• معرفی Introduction

• پروژه: یک سایت تجارت الکترونیک ایجاد کنید PROJECT: Create an E-commerce Site

• طرح بندی فرم پایه را طراحی کنید Design the Basic Form Layout

• اعتبار سنجی و سبک ها را اضافه کنید Add Validation and Styles

• از انواع ورودی پیشرفته استفاده کنید Use Advanced Input Types

• اضافه کردن منوهای کشویی Add Drop Down Menus

• فرم را ارسال کنید Send the Form

• خلاصه Recap

افزودن تعامل با جاوا اسکریپت Add Interactivity with JavaScript

• معرفی Introduction

• پروژه: ایجاد یک سبد خرید PROJECT: Create a Shopping Cart

• HTML خود را با جاوا اسکریپت برنامه ریزی کنید Program Your HTML with JavaScript

• رویدادها را با شنوندگان مدیریت کنید Handle Events with Listeners

• دستکاری عناصر و سبک ها Manipulate Elements and Styles

• خلاصه Recap

محتوای خود را متحرک کنید Animate Your Content

• معرفی Introduction

• پروژه: بنرهای تبلیغاتی خود را طراحی کنید PROJECT: Design Your Own Ad Banners

• با Visibility کار کنید Work with Visibility

• ایجاد انتقال های اساسی Create Basic Transitions

• تبدیل های دو بعدی را اضافه کنید Add 2D Transformations

• انیمیشن های Keyframe ایجاد کنید Create Keyframe Animations

• خلاصه Recap

از موقعیت جغرافیایی و نقشه ها استفاده کنید Use Geolocation and Maps

• معرفی Introduction

• پروژه: مکان یاب کسب و کار Yelp مانند خود را ایجاد کنید PROJECT: Create Your Own Yelp-like Business Locator

• موقعیت جغرافیایی توضیح داده شده است Geolocation Explained

• مکان کاربر را بدست آورید Acquire User's Location

• نمایش نقشه با نشانگر Display a Map with Markers

• محاسبه فاصله ها Calculate Distances

• خلاصه Recap

از طراحی وب سایت ریسپانسیو استفاده کنید Use Responsive Web Design

• معرفی Introduction

• پروژه: پورتفولیوی شخصی خود را ایجاد کنید PROJECT: Create Your Personal Portfolio

• وب تطبیقی ​​در مقابل وب پاسخگو Adaptive Web vs. Responsive Web

• از Basic Media Queries استفاده کنید Use Basic Media Queries

• درخواست های رسانه ای را برای دستگاه های تلفن همراه اعمال کنید Apply Media Queries for Mobile Devices

• اضافه کردن تصاویر واکنش گرا Add Responsive Images

• خلاصه Recap

از حسگرهای موبایل، لمس و صدا استفاده کنید Use Mobile Sensors, Touch and Voice

• معرفی Introduction

• پروژه: یک قطب نمای دیجیتال ایجاد کنید PROJECT: Create a Digital Compass

• پروژه: با یک برنامه Gravity Level بازی کنید PROJECT: Play with a Gravity Level App

• پروژه: یک برنامه آشپزی ایجاد کنید PROJECT: Create a Cooking App

• سطح باتری را بخوانید Read Battery Level

• با لمس کار کنید Work with Touch

• تلفن را ویبره کنید Vibrate the Phone

• با کاربر صحبت کنید Talk to the User

• خلاصه Recap

از دوربین استفاده کنید Use the Camera

• معرفی Introduction

• پروژه: یک خواننده کد QR ایجاد کنید PROJECT: Generate a QR Code Reader

• عکس و فیلم ثابت بگیرید Take Still Pictures and Videos

• پخش ویدئو از دوربین Stream Video From the Camera

• خلاصه Recap

واقعیت مجازی و تجربه های 360 ایجاد کنید Create Virtual Reality and 360 Experiences

• معرفی Introduction

• هدست و مرورگرهای VR VR Headsets and Browsers

• پروژه: یک نمایشگر 360 ایجاد کنید PROJECT: Create a 360 Viewer

• 360 عکس و 360 ویدیو بگیرید Take 360 Pictures and 360 Videos

• محتوای 360 را در HTML5 جاسازی کنید Embed 360 Content in HTML5

• پروژه: یک آلبوم عکس VR ایجاد کنید PROJECT: Create a VR Photo Album

• مقدمه ای بر WebVR Introduction to WebVR

• با استفاده از A-frame یک دنیای VR ایجاد کنید Create a VR World Using A-frame

• خلاصه Recap

ذخیره داده ها به صورت محلی Save Data Locally

• معرفی Introduction

• پروژه: یک فرم ذخیره خودکار ایجاد کنید PROJECT: Create an Auto-Save Form

• ذخیره و بازیابی داده ها Store and Retrieve Data

• داده های ماندگار با LocalStorage Persist Data with LocalStorage

• ذخیره خودکار فرم Auto-Save a Form

• پروژه: یک خزانه داده مخفی ایجاد کنید PROJECT: Create a Secret Data Vault

• از پایگاه های داده با IndexedDB و Dexie استفاده کنید Use Databases with IndexedDB and Dexie

• خواندن داده ها از یک فروشگاه داده Read Data from a Data Store

• به روز رسانی و حذف داده ها Update and Delete Data

• خلاصه Recap

داده ها را از راه دور ذخیره کنید Save Data Remotely

• معرفی Introduction

• پروژه: اپلیکیشن اینستاگرام خود را بسازید PROJECT: Create Your Own Instagram App

• Google Firebase را راه اندازی کنید Set Up Google Firebase

• کاربران خود را احراز هویت کنید Authenticate Your Users

• ذخیره داده در فضای ابری Save Data in the Cloud

• ذخیره اشیاء در ابر Store Objects in the Cloud

• بازیابی داده ها Retrieve Data

• خلاصه Recap

مصرف داده از خدمات Consume Data from Services

• معرفی Introduction

• پروژه: برنامه هواشناسی خود را ایجاد کنید PROJECT: Create Your Own Weather Application

• AJAX توضیح داده شده است AJAX Explained

• واکشی داده ها از یک سرویس از راه دور Fetch Data from a Remote Service

• تجزیه و تحلیل داده ها با JSON Parse Data with JSON

• خلاصه Recap

ایجاد برنامه های وب پیشرفته Create Progressive Web Apps

• معرفی Introduction

• برنامه های وب پیشرو توضیح داده شد Progressive Web Apps Explained

• نمونه های PWA در عمل PWA Examples in Action

• پروژه: یک اپلیکیشن پوکمون گو بسازید PROJECT: Create a Pokémon Go-like App

• متا تگ های iOS اپلیکیشن وب را ایجاد کنید Create the Web App iOS Meta Tags

• مانیفست برنامه وب را ایجاد کنید Create the Web App Manifest

• PWA خود را با Lighthouse اعتبار سنجی کنید Validate Your PWA with Lighthouse

• خلاصه Recap

سرویس دادن به کاربران در حالت آفلاین Serve Users While Offline

• معرفی Introduction

• معرفی Introduction

• پروژه: یک تجربه آفلاین SketchGo ایجاد کنید PROJECT: Make an Offline SketchGo Experience

• تشخیص وضعیت آفلاین و شبکه Detect Offline and Network Status

• کارگران خدماتی توضیح دادند Service Workers Explained

• دارایی ها را برای پشتیبانی آفلاین آماده کنید Prepare Assets for Offline Support

• خلاصه Recap

• خلاصه Recap

نتیجه Conclusion

• بعد چه می شود؟ What's Next?