آموزش با ساختن پروژه های دنیای واقعی به HTML و CSS مسلط شوید

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

HTML5 (مبانی) HTML5 (Basics)

• راه اندازی محیط - کد ویژوال استودیو Environment setup - Visual Studio Code

• زبان مارک داون Markdown Language

• HTML چیست؟ چرا HTML؟ What is HTML? Why HTML?

• برچسب های HTML و انواع آنها HTML Tags & their types

• ویژگی های HTML HTML Attributes

• ساختار اصلی فایل HTML Basic Structure of HTML File

• آزمون HTML 1 HTML Quiz 1

• کاربرد اصلی Head Tag Head Tag's Basic Usage

• استفاده پیشرفته و بررسی سئوی Head Tag Head Tag's Advanced Usage & SEO Checking

• نحوه اعتبار سنجی فایل HTML How To Validate HTML File

• نظرات HTML HTML Comments

• سرفصل های HTML HTML Headings

• شکست خط و پاراگراف HTML HTML Line Break & Paragraph

• برچسب های قالب بندی متن HTML HTML Text Formatting Tags

• موجودیت و نماد HTML HTML Entity & Symbol

• نماد فونت عالی و پسوند فونت نماد Font Awesome Icon & Icon Font Extension

• آزمون HTML 2 HTML Quiz 2

• فهرست HTML (بخش 1) HTML List (Part-1)

• فهرست HTML (بخش 2) HTML List (Part-2)

• فهرست HTML (بخش 3) HTML List (Part-3)

• فهرست HTML (بخش 4) فهرست توضیحات HTML List (Part-4) Description List

• لینک HTML HTML Link

• نحوه ایجاد آیکون قابل کلیک How To Create Clickable Icon

• نحوه اضافه کردن تصویر How To Add Image

• نحوه دریافت تصاویر از Unsplash How To Get Images From Unsplash

• نحوه میزبانی تصویر در سرور How To Host Image On Server

• نحوه اضافه کردن نقشه با استفاده از iframe How To Add A Map Using iframe

• آزمون HTML 3 HTML Quiz 3

HTML5 (پیشرفته) HTML5 (Advanced)

• نحوه اضافه کردن هر وب سایت با استفاده از iframe How To Add Any Website Using iframe

• چگونه با استفاده از iframe یک ویدیوی YouTube اضافه کنیم How To Add A YouTube Video Using iframe

• نحوه اضافه کردن صدا و تصویر How to Add Audio & Video

• جدول HTML HTML Table

• فرم HTML (بخش 1) - فرم پایه HTML Form (Part-1) - Basic Form

• فرم HTML (بخش 2) - فرم قابل دسترسی HTML Form (Part-2) - Accessible Form

• فرم HTML (بخش 3) - دکمه رادیویی، ناحیه متن HTML Form (Part-3) - Radio Button, Text Area

• ارسال اطلاعات فرم به آدرس ایمیل Send Form Data To Email Address

• دسترسی به وب (قسمت 1) - تست دسترسی به وب Web Accessibility (Part-1) - Testing Web Accessibility

• دسترسی به وب (بخش 2) - معنایی در مقابل HTML غیر معنایی Web Accessibility (Part-2) - Semantic vs Non-Semantic HTML

• دسترسی به وب (بخش 3) Web Accessibility (Part-3)

• دسترسی به وب (بخش 4) - نقش، برچسب آریا Web Accessibility (Part-4) - role, aria-label

• آزمون HTML 4 HTML Quiz 4

CSS (اصول) CSS (Basics)

• طرح کلی ماژول CSS CSS Module Outline

• چرا CSS؟ نحو قوانین CSS Why CSS? CSS Rules Syntax

• CSS درون خطی Inline CSS

• CSS داخلی Internal CSS

• CSS خارجی External CSS

• انتخابگرها و ترکیب‌کننده‌های CSS CSS Selectors & Combinators

• انتخابگرهای عنصر و گروه بندی Element & Grouping Selectors

• انتخابگرهای تودرتو و جهانی Nested & Universal Selectors

• انتخابگرهای شناسه ID Selectors

• انتخاب کنندگان کلاس Class Selectors

• پسوند تکمیل خودکار HTML به CSS HTML To CSS Auto Completion extension

• انتخابگرهای ویژگی Attribute Selectors

• کلاس شبه و انتخابگر عنصر شبه Pseudo class & Pseudo element Selector

• انتخاب کنندگان نسل، فرزند، مجاور و خواهر و برادر عمومی Descendant, Child, Adjacent & general sibling Selectors

• امتحان CSS 1 CSS Quiz 1

• تایپوگرافی | ویژگی های فونت Typography | Font Properties

• تایپوگرافی | نحوه اضافه کردن فونت گوگل Typography | How to add google font

• تایپوگرافی | نحوه اضافه کردن رنگ Typography | How to add color

• تایپوگرافی | نحوه قالب بندی متن Typography | How to format Text

• مدل جعبه | محتوا، بالشتک Box Model | Content, Padding

• مدل جعبه | حاشیه، حاشیه Box Model | border, Margin

• خواص اندازه جعبه box-sizing properties

• تایپوگرافی | نحوه اضافه کردن و استایل آیکون ها Typography | How to add & style icons

• عناصر درون خطی در مقابل بلوک درون خطی در مقابل عناصر بلوک inline vs inline-block vs block elements

• ویژگی های عرض در مقابل حداکثر عرض width vs max-width properties

• ویژگی های کدورت و سرریز opacity & overflow properties

• ویژگی های پس زمینه background properties

• امتحان CSS 2 CSS Quiz 2

CSS (پیشرفته) CSS (Advanced)

• متغیرها و فیلترها Variables & Filter

• طراحی سایه و کارت shadows & card design

• طراحی چیدمان - شناور Layout design - float

• طراحی چیدمان - موقعیت یابی Layout design - Positioning

• طراحی چیدمان - نوار ناوبری ثابت و z-index Layout design - fixed navbar & z-index

• طراحی چیدمان - بدون طرح بندی انعطاف پذیر layout design - without flex layout

• طراحی چیدمان - با چیدمان انعطاف پذیر layout design - with flex layout

• طراحی چیدمان - (وظیفه 1) layout design - (Task 1)

• طراحی طرح - آیتم انعطاف پذیر layout design - flex item

• طراحی چیدمان - (تسک 2 و وظیفه 3) layout design - (Task 2 & Task 3)

• طراحی چیدمان - (وظیفه 4) layout design - (Task 4)

• طراحی چیدمان - چیت شیت CSS FlexBox Layout design - CSS FlexBox cheatsheet

• طراحی چیدمان - طرح بندی شبکه و کدهای بازسازی Layout design - Grid layout and refactoring codes

• طراحی چیدمان - دوباره طرح بندی انعطاف پذیر Layout design - flex layout again

• طراحی چیدمان - مثال طرح بندی شبکه ای Layout design - Grid Layout example

• طراحی چیدمان - آیتم شبکه Layout design - grid item

• امتحان CSS 3 CSS Quiz 3

• طراحی وب سایت واکنش گرا - اصول اولیه Responsive web design - basics

• طراحی وب سایت واکنش گرا - پرسش رسانه ای Responsive web design - media query

• طراحی وب سایت ریسپانسیو – قسمت پایانی Responsive web design - final part

• نحوه ایجاد دایره how to create circle

• دارایی انتقال Transition property

• انتقال (وظیفه 6) Transition (Task 6)

• تبدیل ملک قسمت 1 Transform property part-1

• تبدیل ویژگی قسمت 2 (وظیفه 7) Transform property part-2 (Task 7)

• انیمیشن قسمت 1 Animation part-1

• ایجاد یک دایره (وظیفه 8) Create a circle (Task 8)

• انیمیشن قسمت 2 Animation part-2

• اولویت انتخاب کنندگان Selectors priority

• محاسبه امتیاز ویژه/اولویت Specificity / priority score calculation

• مشکلات بدون معماری BEM Problems without BEM Architecture

• معماری BEM - بلوک، عنصر، اصلاح کننده BEM Architecture - Block, Element, Modifier

• تمرین و توسعه BEM BEM practice & extension

• امتحان CSS 4 CSS Quiz 4

پروژه 1: وب سایت وبلاگ Project 1: Blog Website

• نسخه ی نمایشی پروژه وبلاگ blog project demo

• راه اندازی اولیه برای پروژه وبلاگ basic setup for the blog project

• طراحی نوار ناوبری Navbar design

• طراحی Navbar پاسخگو Responsive Navbar design

• طراحی بنر Banner design

• طراحی بخش بنر ریسپانسیو Responsive Banner Section Design

• بخش طراحی درباره Design About Section

• پاسخگو درباره طراحی بخش Responsive About Section Design

• بخش آرشیو طراحی Design Archive Section

• طراحی بخش آرشیو پاسخگو Responsive Archives Section Design

• طراحی بخش پست وبلاگ Design Blog Post Section

• بخش پست بلاگ پاسخگو Responsive Blog Post Section

• بخش تماس با طراحی Design Contact Section

• طراحی بخش تماس پاسخگو Responsive Contact Section Design

• بخش طراحی پاورقی Design Footer section

• اضافه کردن منوی تاشو Add Collapsible menu

• استقرار وب سایت در Netlify Deploy Website On Netlify

پروژه 2: وب سایت تجارت الکترونیک Project 2: E-commerce website

• نسخه ی نمایشی پروژه Project demo

• راه اندازی پروژه Project setup

• نوار نوار را ایجاد کنید Create Navbar

• نوار ناوبری طراحی کنید Design Navbar

• نوار ناوبری پاسخگو Responsive Navbar

• نوار ناوبری جمع شونده Collapsible Navbar

• ایجاد و طراحی پاورقی Create & Design Footer

• همه صفحات دیگر را راه اندازی کنید Setup All Other Pages

• ایجاد بنر Create Banner

• طراحی بنر Design Banner

• نوار کناری ایجاد کنید Create Sidebar

• طراحی سایدبار Design Sidebar

• بخش اقدام جعبه و طراحی Crate & Design Action Section

• یک محصول واحد ایجاد کنید Create A Single Product

• طراحی یک محصول واحد Design A Single Product

• ایجاد و طراحی نشان Create & Design The Badge

• چندین محصول ایجاد کنید Create Multiple Products

• صفحه بندی ایجاد کنید Create Pagination

• صفحه بندی طراحی Design Pagination

• ایجاد صفحه جزئیات محصول Create Product Details Page

• صفحه جزئیات محصول طراحی کنید Design Product Details Page

• ایجاد بخش اقلام سبد خرید Create Cart Items Section

• بخش اقلام سبد خرید Design Cart Items Section

• ایجاد بخش پرداخت سبد خرید Create Cart Payment Section

• طراحی بخش پرداخت سبد خرید Design Cart Payment Section

• ایجاد و طراحی صفحه نمایه Create & Design Profile Page

• ایجاد صفحه ثبت نام Create Register Page

• صفحه ثبت طراحی Design Register Page

• ایجاد و طراحی صفحه ورود Create & Design Login Page

• ایجاد صفحه تماس Create Contact Page

• طراحی صفحه تماس Design Contact Page

• پروژه را در Netlify اجرا کنید Deploy The Project On Netlify