توضیحات دوره
یادگیری HTML & CSS به‌عنوان نخستین گام در مسیر طراحی و توسعه وب، دروازه‌ای است به دنیایی خلاقانه و پویا. این دوره در مجتمع فنی تهران زعفرانیه فرصتی فراهم می‌کند تا شرکت‌کنندگان در محیطی متفاوت و مجهز، مفاهیم پایه‌ای و بنیادین طراحی وب را به شکلی کاربردی و الهام‌بخش بیاموزند. آموزش در این فضا تنها به انتقال دانش محدود نیست، بلکه تجربه‌ای است زنده، پویا و تعاملی که باعث می‌شود مهارت‌ها به شکل عمیق و ماندگار در ذهن هنرجویان شکل بگیرد.
دوره HTML & CSS برای کسانی طراحی شده که می‌خواهند مسیر حرفه‌ای خود را در دنیای طراحی وب آغاز کنند یا پایه‌ای مستحکم برای یادگیری تکنولوژی‌های پیشرفته‌تر داشته باشند. هنرجویان در این دوره یاد می‌گیرند چگونه ایده‌های خود را به صفحات وب ساخت‌یافته و زیبا تبدیل کنند، ساختار صفحات را به درستی طراحی نمایند و ظاهر آن را با استفاده از CSS به شکلی چشم‌نواز و حرفه‌ای درآورند.
یکی از ویژگی‌های برجسته این دوره، تجربه عملی و پروژه‌محور بودن آن است. فضای آموزشی مجتمع فنی تهران زعفرانیه به گونه‌ای طراحی شده که یادگیری صرفاً به دریافت اطلاعات محدود نباشد، بلکه هنرجویان بتوانند مفاهیم را در لحظه به کار بگیرند و نتیجه را به‌صورت ملموس مشاهده کنند. این تجربه باعث می‌شود یادگیری سریع‌تر، ماندگارتر و لذت‌بخش‌تر باشد و هنرجویان با اعتماد به نفس بیشتری وارد پروژه‌های واقعی شوند.
در طول دوره، شرکت‌کنندگان با فضای واقعی طراحی وب آشنا می‌شوند؛ از ساختاردهی صفحات با HTML گرفته تا زیباسازی و ایجاد جلوه‌های بصری با CSS. اما آنچه این تجربه را ارزشمندتر می‌کند، فضای آموزشی متفاوت و تعامل‌محور است. این محیط امکان می‌دهد هنرجویان با یکدیگر همکاری کنند، ایده‌ها را به اشتراک بگذارند و از نگاه‌های مختلف الهام بگیرند. چنین فرآیندی باعث پرورش تفکر خلاق، حل مسئله و یادگیری عمیق‌تر می‌شود.
یادگیری در محیطی با امکانات به‌روز و فضای الهام‌بخش باعث می‌شود فرآیند آموزش تنها به یک کلاس محدود نباشد، بلکه به سفری آموزشی تبدیل شود. هنرجویان یاد می‌گیرند چگونه ساختار را با زیبایی‌شناسی ترکیب کنند، جزئیات را با دقت طراحی نمایند و در عین سادگی، وب‌سایت‌هایی بسازند که مخاطب را جذب کند. این توانایی، نقطه‌ای کلیدی در مسیر تبدیل شدن به یک طراح وب حرفه‌ای است و پایه‌ای محکم برای یادگیری فناوری‌های بعدی فراهم می‌کند.
یکی دیگر از ابعاد ارزشمند این دوره، پرورش اعتماد به نفس و توانایی تصمیم‌گیری مستقل است. هنرجویان در این مسیر یاد می‌گیرند چگونه با چالش‌ها روبرو شوند، راه‌حل‌های مناسب پیدا کنند و ایده‌های شخصی خود را به اجرا بگذارند. این فرآیند یادگیری، زمینه‌ساز رشد مهارت‌های فنی و تحلیلی است و شرکت‌کنندگان را برای ورود به مسیرهای حرفه‌ای‌تر آماده می‌کند.
فضای مجتمع فنی تهران زعفرانیه با طراحی آموزشی مناسب و تعامل نزدیک بین هنرجویان و اساتید، بستری ایجاد می‌کند که در آن آموزش به تجربه‌ای پویا تبدیل می‌شود. حضور در چنین محیطی باعث می‌شود روند یادگیری برای افراد لذت‌بخش و انگیزه‌بخش باشد. ترکیب محیط آموزشی مجهز، فضای خلاقانه و تمرکز بر پروژه‌های عملی، هنرجویان را از مرحله یادگیری اولیه به سطحی می‌رساند که بتوانند با اعتماد به نفس، صفحات وب حرفه‌ای طراحی کنند.
دوره HTML & CSS نه تنها پایه‌ای برای یادگیری طراحی وب است، بلکه هنرجویان را با دنیایی از فرصت‌ها آشنا می‌کند. در پایان این دوره، شرکت‌کنندگان می‌توانند صفحات وب ساخت‌یافته و زیبا طراحی کنند، به ساخت تجربه کاربری توجه داشته باشند و مهارت‌هایی را کسب کنند که در مسیر حرفه‌ای آن‌ها تأثیرگذار خواهد بود.
این دوره برای علاقه‌مندان به ورود به دنیای طراحی وب، دانشجویان، افرادی که به دنبال تغییر مسیر شغلی هستند و کسانی که می‌خواهند پروژه‌های شخصی خود را پیاده‌سازی کنند، تجربه‌ای ارزشمند و الهام‌بخش خواهد بود. هنرجویان پس از پایان دوره می‌توانند به راحتی وارد مسیر یادگیری JavaScript، طراحی واکنش‌گرا و حتی فریم‌ورک‌های پیشرفته‌تر شوند.
در مجموع، دوره HTML & CSS در مجتمع فنی تهران زعفرانیه فرصتی فراهم می‌کند تا یادگیری با خلاقیت، تجربه و لذت همراه شود. این دوره نقطه شروعی است برای ساختن آینده‌ای حرفه‌ای در حوزه طراحی وب، با فضایی متفاوت، محیطی الهام‌بخش و فرآیندی آموزشی که مهارت‌ها را به شکلی عمیق و ماندگار در ذهن شما تثبیت می‌کند.
سر فصل‌ها
معرفی مفاهیم پایه طراحی وب
• بررسی مفهم UI
• بررسی مفهوم UX
• بررسی مفهوم Front-End
• بررسی مفهوم Back-End
• معرفی HTML
• معرفی CSS
• معرفی Javascript
• بررسی مفهوم SEO
• بررسی مفهوم Progressive Enhancement
• بررسی مفهوم Responsive Web Design
• بررسی مفهوم Internet
• بررسی مفهوم Protocol
• بررسی مفهوم WEB
• بررسی مفهوم HTTP
• بررسی مفهوم Server
• بررسی مفهوم IP
• بررسی مفهوم Domain
• بررسی مفهوم DNS
• بررسی مفهوم Intranet
• بررسی مفهوم Extranet
• بررسی موتور های رندرگیری مرورگر ها
• بررسی URL
• بررسی مفهوم HTTPS
• بررسی تفاوت سایت های static و dynamic
• بررسی request و response های یک وب سایت
• بررسی نحوه رندرگیری کد ها توسط مرورگر
• کامنت ها در HTML
• معرفی tag ها در HTML و انواع آن ها(single & pairs)
• بررسی ساختار تگ ها در HTML
• معرفی VS Code و پلاگین های آن(material icons, material themes , open in browser , prettier ,rainbow brackets , path intellisense, )
• بررسی ساختار یک سند HTML
• معرفی BOM و DOM
• نمایش درخت HTML
• بررسی مفهوم semantic
معرفی HTML
• معرفی تگ p و display آن
• معرفی تگ های Heading و display آن ها
• معرفی تگ hr و display آن
• معرفی لیست های ترتیبی و غیر ترتیبی و display آن ها
• آموزش Emmet
• معرفی attribute های تگ های HTML و بررسی نکات آن ها
• آموزش لیست های Nested
• معرفی پلاگین live-server در vs code
• معرفی تگ blockqoute و display آن
• معرفی تگ pre و display آن
• معرفی Webstorm و نحوه نصب و کرک آن
• معرفی پلاگین های Webstorm و استفاده از آن ها (atom material icons, material theme ui lite, rainbow brackets)
• برسی تفاوت های HTML4 و HTML5
• معرفی Doctype
• معرفی تگ های sematic
• معرفی تگ main و display آن
• معرفی تگ header و display آن
• معرفی تگ footer و display آن
• معرفی تگ section و display آن
• معرفی تگ article و display آن
• معرفی تگ aside و display آن
• معرفی تگ nav و display آن
• معرفی تگ address و display آن
• معرفی تگ em و display آن
• بررسی تفاوت display های inline و block
• معرفی تگ strong و display آن
• معرفی تگ b و display آن
• معرفی تگ i و display آن
• معرفی تگ s و display آن
• معرفی تگ u و display آن
• معرفی تگ small و display آن
• معرفی تگ q و display آن
• معرفی تگ abbr و display آن
• بررسی حالات nesting در element ها
• معرفی تگ sub و display آن
• معرفی تگ sup و display آن
• معرفی تگ mark و display آن
• معرفی تگ ins و display آن
• معرفی تگ del و display آن
• معرفی تگ br و display آن
• معرفی تگ div و display آن
• معرفی تگ span و display آن
• معرفی id و class و بررسی تفاوت آن ها
• معرفی global attributes
• بررسی character escapes
• آموزش دستورات پایه CMD
• معرفی node js
• معرفی npm
• معرفی live-server و دستورات آن
• معرفی تگ a و display آن
• معرفی Attribute HREF
• معرفی URL های Relative و Absolute
• لینک کردن تگ a به بخشی از سایت و استفاده از پراپرتی scroll-behavior
• بررسی Attribute Target
• بررسی mail links
• بررسی tel links
• معرفی تصاویر و بررسی انواع آن ها(vector & raster)
• بررسی فرمت های عکس ها
• بررسی انواع color mode
• معرفی mimetype
• معرفی تگ img و display آن
• بررسی تفاوت display های block و inline و inline-block
• معرفی تگ table و display آن
• معرفی تگ های tr و th و td
• معرفی Attribute colspan & rowspan
• معرفی تگ caption در table
• معرفی تگ های thead و tbody و tfoot
• بررسی چگونگی عمکرد form ها
• معرفی تگ form و attribute های action و method و enctype
• بررسی method های get و post
• معرفی تگinput و انواع type های آن(text,password,search,email,url,tel,submit,reset,button,radio,checkbox,file,hidden,date,time,number,range,color)
• معرفی attribute های Value,name,placeholder,min-length,max-length,required,diabled,readonly
• معرفی تگtextarea و display آن
• معرفی تگ Select و option و optgroup
• معرفی تگ label و display آن
• آموزش اتصال input و lablel به هم
• معرفی تگ fieldset و legend
• معرفی تگ iframe
• معرفی تگ video و display آن
• معرفی تگ audio و display آن
معرفی CSS
• معرفی declaration
• معرفی selector و property و value
• معرفی element selector
• معرفی id selector(local & global)
• معرفی class selector(local & global)
• بررسی تفاوت Style های inline , internal ,external
• بررسی اولویت های style دهی
• کامنت ها در CSS
• معرفی !important و اولویت آن
• معرفی group selector
• معرفی CSS Units
• معرفی property های زیر در CSS
o Font-family
o استفاده از سایت transfonter
o استفاده از font-face
o بررسی مفهوم font stack
Font-size
Font-weight
Font-style
Font-variant
Font
Color
• معرفی descendant selectors
• معرفی child selectors
• معرفی next-sibling selector
• معرفی Subsequent-sibling selectors
• معرفی universal selector
o Line-height
o Text-indent
o Text-align
o Text-decoration
o Text-transform
o Letter-spacing
o Word-spacing
o Text-shadow
o Whitespace
o Vertical-align
o Direction
o List-style-type
• معرفی رنگ ها
• معرفی HEX color Mode
• معرفی RGB color mode
• معرفی RGBa color mode
o Color
o Background-color
o Width
o Height
o Opacity
• معرفی attribute selector ها و regex
o Background-image
o Background-repeat
o Background-position
o Background-origin
o Background-attachment
o Background-size
o Background
• ساخت کامپوننت parallax
o Linear-gradient
o Radial-gradient
o Repeating-linear-gradient
o Repeating-radial-gradient
• بررسی سایت css gradient generator
• تقسیم بندی ماژولار css با استفاده از @import
• بررسی مفهوم box model
o Overflow
o Padding
o Box-sizing
o Border-style
o Border-width
o Border-color
o Border
o Border-radius
• بررسی سایت border radius generator
o Outline-style
o Outline-width
o Outline-color
o Outline-offset
o Outline
o Margin
• بررسی مفهوم collapsing margin
• بررسی margin در تگ های inline
• بررسی negative margins
• معرفی css variables با استفاده از :root و var()
• معرفی تابع ریاضی calc()
• آموزش وسط چین کردن تگ ها
o Display
o Box-shadow
• معرفی font awesome و نحوه نصب و استفاده از آن
• معرفی pseudo class selector های زیر:
• Link
• Visited
• Focus
• Hover
• Active
• معرفی مفهوم transition
o Transition-property
o Transition-duration
o Transition-timing-functioning
• بررسی وب سایت cubic-bezier
o Transition-delay
o Transition
• بررسی سایت hover.css
• معرفی سایر pseudo class selector ها
o Root
o Empty
o First-child
o Last-child
o Only-child
o First-of-type
o Last-of-type
o Only-of-type
o Nth-child()
o Nth-last-child()
o Nth-of-type()
o Nth-last-of-type()
o Enabled
o Disabled
o Checked
o Not()
• ساخت یک پروژه ساده
• معرفی pseudo element selector های زیر
o First-line
o First-letter
o Before
o After
• ادامه معرفی property های Css
o Float
o Clear
o Shape-outside
o Shape-margin
o Position(static,relative,absolute,fixed,sticky)
o Top , left , right , bottom
o Z index
• ساخت منو nested
• ساخت mega menu
• ساخت منو همبرگری
• ساخت منو دیجی کالا
o Transform
o Translate()
o Rotate()
o Skew()
o Sclale()
o Transform-origin
o Perspective
o Perspective-origin
o Filter
o Blur()
o Brightness()
o Contrast()
o Grayscale()
o hue-rotate()
o invert()
o saturate()
o sepia()
• معرفی animation ها و نحوه استفاده از @keyframes
o animation-name
o animation-duration
o animation-timing-functioning
o animation-delay
o animation-iteration-count
o animation-direction
o animation-fill-mode
• معرفی کتاب خانه animate.css
o resize
o border-collapse
o border-spacing
o empty-cells
o table-layout
o caption-side
• معرفی swiper js
o flex
o flex-direction
o flex-wrap
o flex-flow
o justify-content
o align-items
o align-content
o align-self
o order
o flex-grow
o flex-shrink
• معرفی media query و ساخت صفحات responsive
• معرفی srcset و x-descriptor و w-descriptor
• معرفی تگ picture
• معرفی owl carousel
• پروژه تبدیل UI به صفحات وب
• نحوه خرید دامنه و هاست