توضیحات دوره
یادگیری HTML & CSS چیزی فراتر از آشنایی با چند خط کد است؛ این مهارت در واقع دروازه‌ای به دنیای ساخت و خلق تجربه‌های دیجیتال است. شرکت در دوره HTML & CSS در مجتمع فنی تهران زعفرانیه به شما این امکان را می‌دهد تا اولین گام‌های ورود به دنیای طراحی وب را در فضایی حرفه‌ای و الهام‌بخش تجربه کنید. فضایی که در آن آموزش با تمرین، تجربه و خلاقیت در هم آمیخته و مسیر یادگیری را به فرآیندی زنده و ماندگار تبدیل می‌کند.
در این دوره، شما یاد می‌گیرید چگونه مفاهیم پایه طراحی وب را به زبان ساختار و استایل ترجمه کنید؛ یعنی با HTML ساختار صفحات را بنا کنید و با CSS به آن‌ها شخصیت، رنگ، زیبایی و جذابیت ببخشید. اما فراتر از این مهارت‌ها، آنچه یاد می‌گیرید طرز فکر یک طراح وب است؛ تفکری تحلیلی و خلاقانه که می‌تواند ایده‌ها را به شکل یک تجربه کاربری قابل لمس تبدیل کند.
یکی از نقاط تمایز این دوره، رویکرد پروژه‌محور و کاربردی آن است. شما صرفاً مخاطب مطالب نیستید، بلکه درگیر ساخت و خلق می‌شوید. هر بخش از یادگیری با تمرین‌های عملی و کار روی سناریوهای واقعی همراه است. به جای حفظ کردن مطالب، یاد می‌گیرید چگونه به شکل هدفمند و کاربردی از آن‌ها استفاده کنید. این شیوه یادگیری باعث می‌شود مفاهیم در ذهن شما ماندگار شوند و توانایی تبدیل دانش به مهارت واقعی در شما شکل بگیرد.
محیط آموزشی مجتمع فنی تهران زعفرانیه به شکلی طراحی شده که تجربه یادگیری را به یک مسیر الهام‌بخش تبدیل کند. کلاس‌ها به صورت تعاملی برگزار می‌شوند؛ یعنی شما تنها شنونده نیستید، بلکه مشارکت‌کننده‌ای فعال در فرایند یادگیری هستید. گفت‌وگو با دیگر هنرجویان، تعامل با اساتید و کار عملی روی پروژه‌ها باعث می‌شود از فضای کلاس فراتر بروید و در یک تجربه واقعی طراحی وب قرار بگیرید.
در این مسیر، خلاقیت جایگاه ویژه‌ای دارد. HTML & CSS ابزارهایی هستند که به شما امکان می‌دهند تخیل خود را به واقعیت تبدیل کنید. از طراحی ساده‌ترین صفحات تا خلق طرح‌های چشم‌نواز و حرفه‌ای، هر تمرین فرصتی است برای تقویت مهارت‌های طراحی و پرورش نگاه هنری شما. این فرآیند باعث می‌شود یادگیری نه تنها کارآمد بلکه لذت‌بخش نیز باشد.
ویژگی دیگر این دوره، رشد تدریجی مهارت‌ها است. مفاهیم به گونه‌ای ارائه می‌شوند که یادگیرنده بتواند گام به گام پیشرفت کند و اعتماد به نفس بیشتری در کار با کد پیدا کند. این روند باعث می‌شود حتی افرادی که تجربه قبلی در طراحی وب ندارند، بتوانند به راحتی وارد این مسیر شوند و در پایان دوره به سطحی برسند که بتوانند صفحات وب حرفه‌ای و ساختارمند طراحی کنند.
فضای آموزشی مجتمع فنی تهران زعفرانیه با امکانات مدرن و فضایی متفاوت، بستری فراهم می‌کند که در آن آموزش به یک تجربه عمیق تبدیل می‌شود. حضور در چنین فضایی به شما کمک می‌کند تمرکز بیشتری داشته باشید، با دیگر هنرجویان ارتباط برقرار کنید و یادگیری را در یک بستر پویا تجربه کنید. این ترکیب منحصربه‌فرد از امکانات آموزشی، فضای الهام‌بخش و شیوه آموزش تعاملی، یادگیری را به تجربه‌ای ارزشمند و ماندگار تبدیل می‌کند.
دوره HTML & CSS علاوه بر آموزش مهارت‌های پایه، دید شما را نسبت به مسیر طراحی وب گسترده‌تر می‌کند. این دوره پلی است میان شروع یادگیری و ورود به مسیر حرفه‌ای. هنرجویان پس از پایان دوره می‌توانند به راحتی وارد یادگیری مفاهیم پیشرفته‌تری مانند طراحی واکنش‌گرا، JavaScript و فریم‌ورک‌های مدرن شوند. همچنین برای بسیاری از علاقه‌مندان، همین مهارت‌های پایه می‌تواند مسیر شغلی جدیدی ایجاد کند و امکان اجرای پروژه‌های شخصی یا کاری را فراهم آورد.
در پایان دوره، شما نه تنها با ساختار و استایل آشنا می‌شوید، بلکه توانایی تبدیل یک طرح ذهنی به یک صفحه وب واقعی را خواهید داشت. این توانایی، نقطه‌ای کلیدی در ورود به دنیای طراحی وب است. شما یاد می‌گیرید چگونه تصمیم‌های طراحی بگیرید، ساختار منطقی صفحات را ایجاد کنید، تجربه کاربری را درک کنید و به کمک CSS جلوه‌ای زیبا و کاربرپسند به آن بدهید.
آنچه این دوره را متمایز می‌کند، ترکیب سه عنصر کلیدی است: آموزش هدفمند، محیط آموزشی الهام‌بخش و تجربه عملی مداوم. این ترکیب باعث می‌شود یادگیری 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 به صفحات وب
• نحوه خرید دامنه و هاست