آموزش HTML و CSS از ابتدا

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

معرفی Introduction

• مقدمه ای بر HTML و CSS از دوره اولیه Introduction to HTML & CSS from the scratch course

مقدمه ای بر HTML INTRODUCTION TO HTML

• معنی و تاریخچه HTML MEANING AND HISTORY OF HTML

• بخش 2 آزمون SECTION 2 QUIZ

نمای کلی یک فایل HTML OVERVIEW OF AN HTML FILE

• برچسب ها، ویژگی ها و عناصر HTML HTML TAGS, ATTRIBUTES AND ELEMENTS

• نمای کلی یک فایل HTML Overview of an HTML FILE

نظرات HTML و نقل قول های HTML HTML COMMENTS & HTML QUOTATIONS

• نظرات HTML و تگ های نقل قول (blockquote، q، abbr، آدرس، نقل قول، bdo) HTML COMMENTS AND QUOTATION TAGS(blockquote, q, abbr, address, cite, bdo)

• نظرات HTML HTML COMMENTS

سبک HTML و اسکریپت HTML STYLE AND SCRIPT

• سبک و اسکریپت HTML HTML STYLE & SCRIPT

• سبک های HTML (HTML CSS) HTML STYLINGS (HTML CSS)

• HTML SCRIPT (HTML JAVASCRIPT) HTML SCRIPT (HTML JAVASCRIPT)

تصاویر HTML، فاویکون های HTML و رسانه های HTML HTML IMAGES, HTML FAVICONS & HTML MEDIA

• تصاویر HTML (تصاویر پس‌زمینه و عناصر تصویر) HTML IMAGES (background images and picture elements)

• تصاویر HTML HTML IMAGES

• HTML FAVICONS HTML FAVICONS

• HTML FAVICONS HTML FAVICONS

• HTML MEDIA (صوتی HTML، ویدیوی HTML و HTML YouTube API) HTML MEDIA (HTML audio, HTML video and HTML YouTube API)

• HTML MEDIA HTML MEDIA

جداول HTML HTML TABLES

• جداول HTML HTML TABLES

• جداول HTML HTML TABLES

لیست های HTML HTML LISTS

• لیست های HTML (لیست های مرتب شده، لیست های نامرتب و لیست توصیفی) HTML LISTS (ordered lists, unordered lists and descriptive list)

• HTML LIST HTML LIST

فرم های HTML HTML FORMS

• فرم HTML و انواع ورودی HTML FORM AND INPUT TYPES

• عناصر فرم HTML - عنصر را انتخاب کنید HTML FORM ELEMENTS - select element

• عناصر فرم HTML - عنصر textarea HTML FORM ELEMENTS - textarea element

• عناصر فرم HTML - عنصر دکمه HTML FORM ELEMENTS - button element

• عناصر فرم HTML - مجموعه فیلدها و عنصر افسانه HTML FORM ELEMENTS - fieldset and legend element

• HTML FORM ELEMENTS - عنصر فهرست داده HTML FORM ELEMENTS - datalist element

• فرم HTML (ویژگی های ورودی) I HTML FORM (INPUT ATTRIBUTES) I

• فرم HTML (ویژگی های ورودی) II HTML FORM (INPUT ATTRIBUTES) II

• فرم های HTML HTML FORMS

کلاس ها و شناسه های HTML HTML CLASSES AND IDS

• کلاس ها و شناسه های HTML HTML CLASSES AND IDS

• کلاس ها و شناسه های HTML HTML CLASSES AND IDS

عناصر معنایی HTML - HTML5 HTML SEMANTIC ELEMENTS - HTML5

• عناصر معنایی HTML HTML SEMANTIC ELEMENTS

• HTML معنایی Semantic HTML

مسیرهای فایل FILE PATHS

• مسیرهای فایل FILE PATHS

• مسیرهای فایل FILE PATHS

IFRAMES HTML HTML IFRAMES

• IFRAMES HTML HTML IFRAMES

• IFRAMES HTML HTML IFRAMES

طراحی وب ریسپانسیو RESPONSIVE WEB DESIGN

• طراحی وب ریسپانسیو RESPONSIVE WEB DESIGN

• طراحی وب ریسپانسیو RESPONSIVE WEB DESIGN

جایزه - هک ها و نکات مهم BONUS - IMPORTANT HACKS AND TIPS

• سرور زنده LIVE SERVER

• کلیدهای میانبر برای دستورات Shortcut keys for commands

• مقدمه ای بر IDE آنلاین - Codepen Introduction to online IDE - Codepen

• مقدمه ای بر مخزن کد آنلاین - Github Introduction to online code repository - Github

مقدمه ای بر CSS INTRODUCTION TO CSS

• معنی، تاریخچه و معرفی CSS MEANING , HISTORY & INTODUCTION TO CSS

• CSS SYNTAX - نحوه اضافه کردن CSS به یک سند HTML. CSS SYNTAX - how to add CSS to an HTML document.

• مقدمه ای بر CSS INTRODUCTION TO CSS

CSS CYNTAX Continuation CSS SYNTAX CONTINUATION

• نظرات CSS CSS COMMENTS

• انتخابگرهای CSS CSS selectors

• CSS CYNTAX Continuation CSS SYNTAX CONTINUATION

سبک های CSS CSS STYLES

• رنگ های CSS CSS COLORS

• پس زمینه CSS CSS BACKGROUNDS

• CSS HEIGHT/WIDTH CSS HEIGHT/WIDTH

• قانون مهم CSS CSS IMPORTANT RULE

• سبک های CSS CSS STYLES

مدل جعبه CSS CSS BOX MODEL

• مقدمه ای بر CSS BOX MODEL INTRODUCTION TO CSS BOX MODEL

• CSS MARGIN CSS MARGIN

• CSS BORDER CSS BORDER

• CSS PADDING CSS PADDING

• مدل جعبه CSS CSS BOX MODEL

قالب‌بندی‌های متنی CSS CSS TEXT FORMATTINGS

• CSS TEXT COLOR CSS TEXT COLOR

• CSS TEXT TRANSFORM CSS TEXT TRANSFORM

• سایه متن CSS CSS TEXT SHADOW

• تراز متن CSS CSS TEXT ALIGNMENT

• دکوراسیون متن CSS CSS TEXT DECORATION

• CSS TEXT SACING CSS TEXT SPACING

• CSS TEXT CSS TEXT

ویژگی های فونت CSS CSS FONT PROPERTIES

• CSS FONT FAMILIES CSS FONT FAMILIES

• اندازه قلم CSS CSS FONT SIZE

• ویژگی های سبک قلم و وزن فونت CSS CSS FONT STYLE & FONT WEIGHT PROPERTIES

• ویژگی مختصر فونت CSS CSS FONT SHORTHAND PROPERTY

• فونت CSS CSS FONT

ویژگی CSS DISPLAY CSS DISPLAY PROPERTY

• ویژگی CSS DISPLAY CSS DISPLAY PROPERTY

• CSS DISPLAY CSS DISPLAY

ویژگی سرریز CSS CSS OVERFLOW PROPERTY

• ویژگی سرریز CSS CSS OVERFLOW PROPERTY

• سرریز CSS CSS OVERFLOW

موقعیت یابی CSS CSS POSITIONING

• ویژگی CSS POSTION CSS POSTION PROPERTY

• ویژگی موقعیت CSS CSS POSITION PROPERTY

ویژگی CSS Z-INDEX CSS Z-INDEX PROPERTY

• CSS Z-INDEX CSS Z-INDEX

• CSS Z-INDEX CSS Z-INDEX

CSS FLOAT PROPERTY CSS FLOAT PROPERTY

• CSS FLOAT CSS FLOAT

شفافیت/شفافیت CSS CSS OPACITY/TRANSPARENCY

• شفافیت و شفافیت CSS CSS OPACITY AND TRANSPARENCY

• شفافیت و شفافیت CSS CSS OPACITY & TRANSPARENCY

CSS COMBINATORS CSS COMBINATORS

• CSS COMBINATORS CSS COMBINATORS

• CSS COMBINATORS CSS COMBINATORS

کلاس های CSS PSEUDO CSS PSEUDO CLASSES

• کلاس های CSS PSEUDO CSS PSEUDO CLASSES

• کلاس های CSS PSEUDO CSS PSEUDO CLASSES

CSS GRADIDENT CSS GRADIENT

• CSS GRADIENT I - گرادیان خطی CSS GRADIENT I -linear gradient

• CSS GRADIENT II - گرادیان شعاعی CSS GRADIENT II - radial gradient

• CSS GRADIDENT III - گرادیان مخروطی CSS GRADIENT III - conic gradient

پیوندهای CSS CSS LINKS

• پیوندهای CSS CSS LINKS

• آزمون پیوندهای CSS CSS LINKS QUIZ

CSS BOX SHADOW CSS BOX SHADOW

• CSS BOX SHADOW CSS BOX SHADOW

جداول سبک در CSS STYLED TABLES IN CSS

• میز CSS سبک STYLED CSS TABLE

CSS PSEUDO Elements CSS PSEUDO ELEMENTS

• CSS PSEUDO Elements CSS PSEUDO ELEMENTS

• CSS PSEUDO Elements CSS PSEUDO ELEMENTS

CSS GRID CSS GRID

• CSS GRID CSS GRID

CSS FLEXBOX CSS FLEXBOX

• CSS FLEXBOX CSS FLEXBOX

• CSS FLEXBOX PROJECT - گالری عکس پاسخگو CSS FLEXBOX PROJECT - RESPONSIVE IMAGE GALLERY

ناوبارهای پاسخگو به سبک CSS با استفاده از فهرست ها RESPONSIVE CSS STYLED NAVBARS USING LISTS

• CSS NAVBARS پاسخگو - نوار ناوبری ثابت/افقی RESPONSIVE CSS NAVBARS - fixed/horizontal navbar

• CSS NAVBARS II پاسخگو - نوار ناوبری جانبی RESPONSIVE CSS NAVBARS II - side navbar

• منوی کشویی CSS پاسخگو RESPONSIVE CSS DROP DOWN MENU

فرم های CSS پاسخگو RESPONSIVE CSS FORMS

• فرم CSS پاسخگو RESPONSIVE CSS FORM

CSS TRANSFORMS (تغییرهای دوبعدی و سه بعدی) CSS TRANSFORMS (2D & 3D TRANSFORMATIONS)

• CSS TRANSFORMS (2D و 3D) CSS TRANSFORMS (2D AND 3D)

انتقال CSS CSS TRANSITION

• ویژگی های انتقال CSS CSS TRANSITION PROPERTIES

انیمیشن های CSS CSS ANIMATIONS

• انیمیشن های CSS CSS ANIMATIONS

• CSS ANIMATIONS PROJECT I - STORY SCENE ANIMATION CSS ANIMATIONS PROJECT I - STORY SCENE ANIMATION

• CSS ANIMATIONS PROJECT II - CSS SPRITES CSS ANIMATIONS PROJECT II - CSS SPRITES

یک صفحه وب پاسخگو با HTML و CSS بسازید BUILD A RESPONSIVE WEB PAGE WITH HTML & CSS

• صفحه وب پاسخگو RESPONSIVE WEB PAGE

نتیجه CONCLUSION

• نحوه میزبانی وب سایت به صورت آنلاین - netlify How to host a website online - netlify

• پایان درس/چه باید کرد END OF LESSON / WHAT TO DO NEXT