آموزش HTML و CSS برای فعالیت در حوزه طراحی وب، یک امر ضروری محسوب می‌شود. فراگیری آموزش جامع HTML اولین گام برای شروع طراحی سایت است. با استفاده از قابلیت‌های CSS می‌توان به‌صورت زیبا، جذاب، کاربر‌پسند و از همه مهم‌تر کاربردی، روی صفحات وب، فرم و استایل دلخواه را پیاده‌سازی کرد.

Sass یکی از محبوب‌ترین پیش‌پردازنده‌های حال حاضر برای CSS می باشد؛ که وظیفه آن جبران بسیاری از ضعف های CSS  می باشد. در طی دوره آموزش Sass قصد داریم روش استفاده از این زبان پیش پردازنده CSS را به شکل کامل آموزش دهیم. برای آنکه بتوانید Sass را یاد بگیرید نیاز است در ابتدا با CSS آشنا باشید.

در انتهای دوره tailwind css را که یک فریمورک Utility First هست مورد بررسی قرار می دهیم، این فریمورک متشکل از یکسری کلاس های آماده ای هست که شما برای پیاده سازی هرگونه دیزاینی میتونید از آن استفاده کنید.

دسترسی به کامپیوتری که ویندوز، مک او اس ایکس یا لینوکس دارد.

بدون نیاز به دانش پیش نیاز

ساختار یک صفحه را تعریف می کند، در حالی که CSS سبک آن را تعریف می کند. آموزش html و css آغازی برای همه مواردی هستند که باید برای ساخت اولین صفحه وب خود بدانید! هر دو را بیاموزید و شروع به ایجاد وب سایت های شگفت انگیز کنید.

مفاهیم اولیه HTML

توضیح مختصری درباره html  و css

معرفی کروم و ادیتور

آشنایی با vscode

تفاوت html و css و Js

ساختار html

Heading

Paragraph

Inspect element

انواع لیست

Image

Br & hr

Link

Sup & sub & strong & em

جدول ها

Audio

Video

Id & class

Form

Div & span

تگ های معنایی html  و متاتگ

Html5

متاتگ ها

پروژه html (کاربرد تمام دستورات بالا در قالب یک پروژه)

مقدمات css

Inline css

Internal css

External css

کدوم یکی قویتره؟

سینتکس css

مفاهیم پایه ای css

Element selector & grouping selector

Id selector & class selector

ارث بری

Universal selector

رنگ ها

Color & background color

RGB

RGBa

Hex

Site for color palette

واحد های اندازه گیری

Width & height & px

Percent

Font-size

EM & rem

Vw & vh

بررسی inspect element

فانکشن calc

Font

Font-weight & google font

Font-face

Font-style

Text-align & text-indent

Line-height & letter-spacing & word-spacing

Font shorthand

Box-model

Padding

Border

Margin

Outline

Display

Display

Horizontal centering

Descendant selectors & list-style

Inline-block

Box-sizing

Opacity & visibility & display

Last rule order

Pos & background

Background

Background -size

Background-position

Gradient

Position

z-index

pseudo elements

pseudo class

more selectors

box-shadow & text-shadow

style html

معرفی سایت های مهم

Fontawesome

Can I use

…

بررسی flex و انجام پروژه

بررسی grid و انجام پروژه

پروژه فرم لاگین

Transition & transform & animation

Variable & prefix

پروژه نهایی landing zarinpal

Sass

مقدمه

معرفی ابزارهای مورد نیاز

نصب کردنnode  و sass

اجرای sass

متغیرها

Nesting

Mixin

Input

شبه کلاس ها

عملگرهای ریاضی

Content

دستورات شرطی

ارث بری

حلقه ها

پروژه

Tailwind css

نصب و آشنایی با تیلویند

توسعه کامپوننت های headlessUI

Drop down static

Drop down dynamic

radio group static

radio group dynamic

disclosure static

disclosure dynamic

tab static

tab dynamic

dynamic header and content

پروژه صفحه محصولات

Digitize ui/ux

Setup app using postcss

Adding fonts to app

Mobile app bar selection

Mobile filter sort bar selection

Mobile products selection

Color group selection

Loop on products data

Products grid section

Desktop filter section

Desktop dynamic sort

Sidbar

Navbar

Fix container and style

Bottom navigation

Dynamic bottom navigation

Improve bottom navigation

صفحه سبد خرید

ساختار یک صفحه را تعریف می کند، در حالی که CSS سبک آن را تعریف می کند. آموزش html و css آغازی برای همه مواردی هستند که باید برای ساخت اولین صفحه وب خود بدانید! هر دو را بیاموزید و شروع به ایجاد وب سایت های شگفت انگیز کنید.