آموزش کدنویسی HTML و CSS برای وب سایت های دنیای واقعی واکنش گرا

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

شروع به کار Getting Started

• مقدمه Introduction

• برنامه درسی دوره Course Curriculum

• نحوه دریافت الزامات دوره How to get Course requirements

• شروع به کار در ویندوز، لینوکس یا مک Getting Started on Windows, Linux or Mac

• چگونه از یک سوال بزرگ بپرسیم How to ask a Great Questions

• سوالات متداول FAQ’s

• کد منبع چیست؟ What is Source code

• مهارت‌های هوش مصنوعی ChatGPT را برای یادگیری دوره خود اضافه کنید Add ChatGPT AI skills for your Course Learning

• بیاموزید Generative AI/Generative AI چیست Learn What is Generative AI / Gen AI

راه اندازی محیط توسعه Setting up Development Environment

• مقدمه Introduction

• انتخاب ویرایشگر کد Choosing Code Editor

• نصب ویرایشگر کد (متن عالی) Installing Code Editor(Sublime Text)

• نمای کلی یک صفحه وب Overview of a Webpage

• صفحه کد کامل HTML Full HTML Code Page

• اول "سلام دنیا!" صفحه First “Hello World!” page

اصول HTML HTML Fundamentals

• مقدمه Introduction

• سرفصل Heading

• پاراگراف Paragraph

• قالب بندی متن Formatting text

• فهرست موارد بدون ترتیب List Items Un Ordered

• فهرست موارد مرتب شده List Items Ordered

• کلاس ها Classes

• شناسه ها در CSS ID’s in CSS

• نظرات در HTML Comments in HTML

• خلاصه Summary

HTML متوسط HTML Intermediate

• مقدمه Introduction

• تصاویر Images

• فرم ها Forms

• فرم اقدامات Form Actions

• برچسب Br Br tag

• خیمه شب بازی Marquee

• ناحیه متن Text area

• جداول Tables

• پیوندها Links

• نوار ناوبری/منو Navbar / Menu

• موجودیت های HTML HTML Entities

• تگ Div Div tag

• نقشه های گوگل Google Maps

• خلاصه Summary

HTML پیشرفته HTML Advanced

• مقدمه Introduction

• صوتی HTML5 HTML5 Audio

• ویدئوی HTML5 HTML5 Video

• نوار پیشرفت Progress Bar

• کشیدن و رها کردن Drag & Drop

• بوم Canvas

• قاب می کنم I frames

• انواع ورودی Input Types

• ویژگی های ورودی Input Attributes

• پیوند ویدیوی YouTube YouTube Video Linking

• ایجاد صفحه واکنش گرا Creating Responsive Page

• خلاصه Summary

کارشناس HTML HTML Expert

• مقدمه Introduction

• فرم ثبت نام Registration Form

• فرم ورود Login Form

• درباره ما فرم About Us Form

• فرم تماس با ما Contact Us Form

• فرم پاورقی Footer Form

• همه را با هم ادغام کنید Integrate All Together

• تمرین کدنویسی Coding Exercise

• راه حل تمرین کدنویسی Solution for Coding Exercise

• خلاصه Summary

پروژه وب سایت HTML HTML Website Project

• مقدمه Introduction

• چالش - صفحه ساعت HTML 5 با اعداد روی بوم Challenge – HTML 5 Clock Face with Numbers on Canvas

• بررسی اجمالی پروژه Project Overview

• نتیجه گیری در مورد پروژه Conclusion on Project

• خلاصه Summary

اصول CSS CSS Fundamentals

• مقدمه Introduction

• نحو CSS CSS Syntax

• ساخت صفحه وب با CSS Creating webpage with CSS

• CSS درون خطی Inline CSS

• CSS داخلی Internal CSS

• CSS خارجی CSS External

• کلاس های CSS CSS Classes

• شناسه های CSS CSS IDs

• رنگ ها Colors

• پس زمینه ها Backgrounds

• شناور Floating

• موقعیت یابی Positioning

• حاشیه ها Margins

• بالشتک Padding

• مرزها Borders

• خلاصه Summary

CSS Intermediate CSS Intermediate

• مقدمه Introduction

• استایل دادن به متن Styling Text

• تراز کردن متن Aligning Text

• پیوندهای یک ظاهر طراحی شده Styling Links

• خانواده فونت Font Family

• سبک های فونت Font Styles

• استفاده از فونت های گوگل Applying Google Fonts

• مدل جعبه Box Model

• نمادها Icons

• جداول Tables

• Navigation-Menu Navigation-Menu

• کشویی Dropdowns

• خلاصه Summary

CSS پیشرفته CSS Advanced

• مقدمه Introduction

• انتخابگرهای پیشرفته Advanced Selectors

• فرم ها Forms

• طرح بندی وب سایت Website Layout

• گوشه های گرد Rounded Corners

• کلمات کلیدی رنگی Color Keywords

• انیمیشن ها Animations

• کلاس های شبه Pseudo Classes

• گرادیان ها Gradients

• سایه ها Shadows

• محاسبات Calculations

• ایجاد صفحه واکنش گرا Creating Responsive Page

• خلاصه Summary

کارشناس CSS CSS Expert

• مقدمه Introduction

• سبک های دکمه Button Styles

• فلکس باکس Flexbox

• شبکه CSS CSS Grid

• صفحه بندی Pagination

• ستون های متعدد Multiple Columns

• انعکاس تصویر Image Reflection

• طراحی UI/UX UI / UX Design

• آیکون های رسانه های اجتماعی Social Media Icons

• اضافه کردن سبک CSS خارجی External CSS Style adding

• تمرین کدنویسی Coding Exercise

• راه حل تمرین کدنویسی Solution for Coding Exercise

• خلاصه Summary

پروژه وب سایت CSS CSS Website Project

• مقدمه Introduction

• دریافت پروژه CSS CSS Project Getting

• بررسی اجمالی پروژه CSS CSS Project Overview

• خلاصه Summary

وب سایت خود را به صورت زنده منتشر کنید Publish Your Website for Live

• مقدمه Introduction

• نصب راه حل FTP رایگان (FileZilla) Installing Free FTP Solution (FileZilla)

• راه اندازی FTP (پروتکل انتقال فایل) Setting Up FTP (File Transfer Protocol)

• وب سایت را در سرور میزبانی وب منتشر کنید Publish Website to Hosting Server

• خلاصه Summary