آموزش HTML CSS Javascript
اگر می‌خوای طراحی سایت رو یاد بگیری و نمیدونی از کجا؟ دقیقاً از همینجا و همین آموزش باید طراحی سایت رو شروع کنی. تو این دوره آموزشی HTML، CSS و Javascript رو به صورت کامل آموزش می‌دیم و در واقع بخش مهم فرانت‌اند (Frontend) رو پوشش می‌دیم. پس از یادگیری کلیه مفاهیم از پایه تا حرفه‌ای، طراحی سایت یوتیوب رو در کنار همدیگه انجام می‌دیم تا بتونید اعتماد به نفس کامل جهت ورود به بازار کار رو بدست بیارید. هدف دوره‌های ما اخذ اعتماد به نفس برای ورود به بازار کار است. پس اگر تا الان بیکار موندی، با ما بمون ... قول می‌دیم دیگه بیکار نمونی!
ویژگی های متمایز دوره آموزش طراحی سایت چیست؟
اولین و آخرین هدف ما، تربیت نیروی کار حرفه‌ای برای ورود به بازار کار و کسب درآمد است. این دوره آموزشی کاملاً مهارت محور و پروژه محور است، لذا با شرکت در دوره آموزش طراحی سایت با HTML، CSS و Javascript، شما علاقه‌مندان و طراحان وب می‌توانید مباحث لازم را یاد بگیرید و در نهایت روی پروژه‌های مختلف کار کنید.
در دوره‌های آموزش هوش پیروزی، مباحث به زبانی ساده و شیوا برای شما توضیح داده خواهند شد و طی تمرینات و پروژه‌هایی که انجام خواهید داد به راحتی می‌توانید یک وبسایت با صفحاتی ثابت شامل تصاویر، جداول، متون و غیره را طراحی نمایید. این دوره آموزشی شامل اصول طراحی وبسایت استاتیک است که با زبان‌های HTML،CSS و جاوااسکریپت قابل‌اجرا هستند.
شما علاقه‌مندان به حوزه برنامه‌نویسی وب بدون در نظر گرفتن شرایط مکانی، سنی، موقعیتی و مالی خود می‌توانید اقدام به یادگیری مباحث مرتبط با این حوزه نمایید. در این مجموعه برترین اساتید از دانشگاه صنعتی شریف به تدریس دوره می‌پردازند تا محتوایی کارآمد و کاربردی را در اختیار شما عزیزان قرار دهند.
دانشجویان پس از پایان دوره آموزش HTML،CSS و Javascript قادر هستند صفحات وب کاملی با پیروی از استانداردهای کدنویسی و سئو بسازند و اولین قدم برای یک طراح سایت یا برنامه‌نویس سایت شدن را به‌خوبی بردارند.
HTML چیست؟
HTML (مخفف عبارت Hyper Text Markup Language) یک زبان نشانه‌گذاری استاندارد برای ایجاد صفحات وب است. یادگیری این زبان بسیار آسان است. HTML ساختار صفحات وب را تعیین می‌کند. در واقع می‌توان گفت که اسکلت صفحه وب است. به هر وب‌سایتی که مراجعه کنید، تمام نوشته‌ها، دکمه‌ها، تصاویر و المان‌ها صفحه به کمک html در صفحه وب قرار گرفته‌اند.
CSS چیست؟
CSS که مخفف Cascading Style Sheet است، یک زبان طراحی صفحات وب برای ایجاد و ساخت مشخصات ظاهری اسناد و اطلاعات وب سایت است. CSS یکی از رایج ترین و محبوب ترین ابزارهای طراحی صفحات وب سایت نوشته شده توسط زبان HTML و یا XHTML است. همچنین از زبان های اسکریپت دیگری مانند plain XML، SVG و XUL نیز به خوبی پشتیبانی می‌نماید.
جاوا اسکریپت چیست؟
جاوا اسکریپت (Javascript) زبان برنامه‌نویسی پویا و مبتنی بر شی (Object-based) است که هم سمت کاربر و هم سمت سرور، برای ایجاد تعامل با صفحات وب به کار می‌رود. جایی که HTML و CSS ساختار اولیه و ظاهر صفحات وب را تعیین می‌کنند، جاوا اسکریپت نحوه عملکرد صفحات وب را کنترل می‌کند. جاوا اسکریپت، تجربه کاربر را از صفحه وب با تبدیل آن از یک صفحه استاتیک به یک صفحه تعاملی بهبود می‌بخشد. بطور خلاصه، جاوا اسکریپت به صفحات وب رفتار می‌بخشد.
به بیان ساده‌تر صفحات وب از قسمت‌های زیر تشکیل شده:
- Content (محتوا): این بخش وب به وسیله کدهایHTML ایجاد می‌شود.
- Presentation (نمایش): این بخش وب به وسیله کدهای CSS ایجاد می‌شود.
- Behavior (رفتار): این بخش وب به وسیله JavaScript ایجاد می‌شود.
بعد از فراگیری دوره آموزش طراحی سایت چه مهارت‌هایی کسب خواهید کرد؟
- طراحی سایت‌های زیبا با رابط‌های کاربری جذاب
- طراحی سایت‌های واکنش‌گرا
- چگونگی استفاده از رنگ‌های جذاب در طراحی سایت و نوشتن متن‌ها
- استفاده از انیمیشن‌ها در قسمت‌های مختلف سایت
- آشنایی با مفهوم وب و نرم‌افزارها و دیگر زبان‌های مورد نیاز برای طراحی آن
سرفصل‌های آموزش طراحی سایت
معرفی دوره
- تعریف وبسایت پویا
- معرفی زبان‌های برنامه‌نویس وب
- معرفی زبان‌های HTML، CSS و Javascript و کاربرد هر یک
ورود به HTML
- معرفی HTML
- ساخت اولین سند HTML
- معرفی ادیتور Notepad++ و نحوه کار با آن
- معرفی ادیتور Visual Studio Code و نحوه کار با آن
- معرفی
- تگ در HTML
- المان در HTML
- تگ body
- تگ head
- تگ title
- هدینگ‌ها در HTML
- تگ p
- Attribute در HTML
متن در HTML
- تگ pre و تفاوت آن با تگ p
- فرمت‌دهی متن (Bold، Italic، Subscript، Superscript و ...)
- Quotation در HTML
- Citation در HTML
- تگ (Bi-Directional Override)bdo در HTML
- Comment در HTML
رنگ‌ها در HTML
- RGB
- Hex
- HSL
- RGBA
- HSLA
Non-Semantic Elements در HTML
- div
- span
Semantic Elements در HTML
- article
- aside
- details
- figcaption
- figure
- footer
- header
- main
- mark
- nav
- section
- summary
- time
ادامه کار با HTML
- تگ a و لینک‌دهی
- بوکمارک کردن لینک‌ها
- درج تصویر در صفحات وب
- Image map
- تگ picture
- جدول (table) در HTML
- لیست‌ها در HTML (مرتب‌شده و نامرتب)
- مفهوم block و المان‌های بلاک در HTML
- مفهوم Inline والمان‌های اینلاین در HTML
- تگ iframe در HTML
- مفهوم Layout در صفحات وب
- واکنش‌گرا یا Responsive در صفحات وب
- HTML Entities
- HTML Symbols
- استفاده از Emoji در HTML
- HTML Encoding
- تفاوت HTML و XHTML
فرم‌ها در HTML
- تگ form
- Attributeهای تگ form (action، target، Method و ...)
- المان‌های استفاده شده در تگ form
- انواع inputها در form
- Attributeهای input
مالتی مدیا در HTML
- انواع مالتی مدیا و پشتیبانی مرورگرها
- درج ویدئو در سند HTML
- درج Audio در سند HTML
- درج ویدئوهای آپارات و یوتیوب در HTML
معرفی CSS
- CSS چیست؟
- CSS Syntax
- اتریبیوت‌های Class و ID
- Selectorها در CSS
- اضافه کردن CSS به سند HTML به صورت Inline
- اضافه کردن CSS به سند HTML به صورت Internal
- اضافه کردن CSS به سند HTML به صورت External
- Comment در CSS
- Comment در فایل‌هایی با ترکیب CSS و HTML
CSS Backgrounds
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
- background
Box Model در CSS
- padding
- margin
- border
- outline
- height/width
- مفهوم Box Model در CSS
استایل متن
- رنگ دهی متن (color property)
- text-align
- direction
- unicode-bidi
- vertical-align
- text-decoration
- text-transform
- text-indent
- letter-spacing
- word-spacing
- white-space
- text-shadow
- font-family
- font-style
- font-weight
- font-variant
- font-size
- line-height
- استفاده از Google Fonts
آیکن در CSS
- استفاده از FontAwesome
- استفاده از Bootstrap Icon
- استفاده از Google Icon
- استفاده از Icomoon
ادامه کار با CSS
- استایل‌دهی به لینک‌ها
- وضعیت‌های link، visited، hover و active
- list-style-type در لیست‌ها
- استایل‌دهی به جداول در CSS
- Width و height در جدول
- Alignment در جداول
- جداول Responsive
CSS Layout
- Inline display
- Block display
- Visibility
- width و max-width
- positionهای static، relative، fixed، absolute و sticky
- Overflow
- Float
- clear
- Inline-block
- Alignment افقی و عمودی
- انواع combinatorها در css
ادامه کار با CSS
- Pseudo-classes
- Pseudo-elements
- opacity
- ساخت Navigation bar افقی
- ساخت Navigation bar عمودی
- ساخت DropDown
- ساخت گالری تصاویر
- Image Sprites
- Attribute Selectors
- استایل دهی به فرم‌ها
- شمارنده‌ها در CSS
- انواع واحدها (unit) در CSS
- !important
مفاهیم پیشرفته در CSS
- گرد کردن گوشه‌ها (Rounded Corners)
- Border image
- استفاده از چند پس زمینه برای یک المان
- گرادینت (Gradient)
- text-shadow و box-shadow
- انواع web-fonts
- Transform دو بعدی
- Transform سه بعدی
- Transition در CSS
- Animation در CSS
- ساخت tooltip
- Image Reflections
- object-fit و object-position
- ساخت pagination
- تابع var
- مفهوم box-sizing
- Flexbox Layout
- Responsive Flexbox
طراحی سایت واکنش‌گرا (RWD)
- مفهوم واکنش‌گرایی
- Viewport
- Grid View
- Media Queries
- تصاویر واکنش‌گرا
- واکنش‌گرا بودن ویدئو‌ها
جاوااسکریپت (Javascript)
- تعریف جاوااسکریپت
- تگ script
- اضافه کردن جاوااسکریپت به صفحه به صورت Internal
- اضافه کردن جاوااسکریپت به صفحه به صورت External
- انتخاب یک المان در جاوااسکریپت
- تغییر Content یک المان HTML بوسیله جاوااسکریپت
- تغییر Attribute یک المان HTML بوسیله جاوااسکریپت
- Output در جاوااسکریپت
متغیرها در جاوااسکریپت
- متغیر چیست؟
- متغیر در جاوااسکرپیت
- انواع داده‌ای در جاوااسکریپت
- Syntax جاوااسکریپت
- Comment در جاوااسکریپت
- let و var در جاوااسکرپیت و تفاوت آن
- Assignment در جاوااسکریپت
- ثابت (const) در جاوااسکریپت
- مفهوم آرایه در جاوااسکریپت
- تعریف آرایه در جاوااسکریپت
- عملگرها در جاوااسکریپت
- محاسبات ریاضی و مثال‌های متناقض در جاوااسکریپت
- Object در جاوااسکریپت
توابع در جاوااسکریپت
- تابع چیست؟
- Return
- آرگومان‌ها در توابع
- فراخوانی (Invoke) توابع
رویدادها در جاوااسکریپت
- onchange
- onclick
- onmouseover
- onmouseout
- onkeydown
- onload
توابع از پیش تعریف شده
- توابع مرتبط با رشته‌ها (string) در جاوااسکریپت
- توابع جست‌وجو در رشته‌ها
- توابع مرتبط با اعداد (Number) در جاوااسکریپت
- توابع مرتبط با آرایه‌ها (Array) در جاوااسکریپت
- توابع مرتبط با تاریخ (Date) در جاوااسکریپت
دستورات جاوااسکریپت
- عملگرهای مقایسه
- دستورات شرطی
- دستور switch
- دستور for در جاوااسکریپت
- دستور for in در جاوااسکریپت
- دستور for of در جاوااسکریپت
- دستور while در جاوااسکریپت
- دستورات break و continue
- دستور typeof
- تبدیل انواع داده‌ای به نوع داده‌ای دیگر
- عملگرهای بیتی در جاوااسکریپت
- Regular Expression در جاوااسکریپت
- مدیریت خطا در جاوااسکریپت
مفاهیم پیشرفته در جاوااسکریپت
- Scope در جاوااسکریپت
- کلمه this و ارجاع آن
- Arrow Function در جاوااسکریپت
- کلاس و شی گرایی در جاوااسکریپت
- JSON
- روش‌های debug در جاوااسکریپت
- Conventionهای استایل کد در جاوااسکریپت
- اشتباهات رایج در جاوااسکریپت
- تکنیک‌های افزایش performance در جاوااسکریپت
اساتید دوره
عقیل جوکار
عقیل جوکار بیش از 10 سال است که مدرس، برنامه نویس و توسعه دهنده وب و موبایل است. او فارغ التحصیل کارشناسی ارشد مهندسی نرم‌افزار از دانشگاه صنعتی شریف است و بیش از 20 دوره‌ی برتر آموزشی در سطح وب با بیش از 3000 دانشجو در زمینه طراحی سایت، موبایل و برنامه‌نویسی در ایران و خارج از ایران را در رزومه خود دارد.
موسی کشاورز دهقان
موسی کشاورز برنامه نویسی را با فرانت‌اند شروع کرده و در حال حاضر روی پروژه‌های Laravel در هوش پیروزی مشغول به فعالیت است. وی کارشناسی ارشد خود را از دانشگاه علم و صنعت ایران اخذ نموده است و بیش از 10 دوره آموزشی با بیش از 2000 دانشجو را در رزومه خود دارد.
سوالات متداول
من چیزی از طراحی سایت نمیدونم، آیا واقعاً با یادگیری این دوره میتونم طراح سایت بشم و درآمدی کسب کنم؟
اگر در تمامی جلسات دوره شرکت کنید و هر جلسه سعی کنید مباحث رو تمرین و مرور کنید، این ضمانت رو از گروه مشاورین هوش پیروزی دارید که بتونید با ورود به بازار کار، درآمدی عالی کسب کنید.
آیا این دوره فقط برای دانشجویان مهندسی کامپیوتر و آیتی توصیه میشه؟
این دوره برای تمامی داوطلبانی که صرفاً علاقه مند به طراحی سایت هستند، توصیه میشه، مهم نیست که از چه رشته‌ای هستید و چه سنی دارید، فقط کافیه علاقه مند باشید. اگر علاقه مندی ثبت نام کن و شروع کن.
دوره به صورت آنلاین هست یا حضوری یا فیلم آموزشی؟
این دوره هم به صورت آنلاین هست و هم حضوری. فیلم آموزشی برای یادگیری حرفه‌ای مناسب نیست، شما باید با استاد در تعامل باشید، سوال بپرسید، پاسخ بگیرید، درخواست مثال بیشتر داشته باشید که این موارد در فیلم آموزشی نمیتونه باشه. ما دوره‌ها رو با حضور استاد برگزار می‌کنیم، چون هدف یادگیری موثر و حرفه‌ای و ورود به بازار کار است.
آیا تو این دوره برنامه نویسی هم درس داده میشه؟
قطعاً، اصل حرفه‌ای برای ورود شما به بازار کار برنامه نویسی است. با ما باشید و از برنامه نویسی ترسی نداشته باشید. انشااله تو این دوره به راحت ترین روش ممکن، برنامه نویسی رو یاد خواهید گرفت.
آیا این دوره پشتیبانی پس از دوره رو هم داره؟
بله، کلیه دانشجویانی که چه به صورت آنلاین و چه به صورت حضوری سرکلاس بوده‌اند، تا یکسال پس از دوره میتونن از راهنمایی اساتید در جهت رفع مشکلات خودشون استفاده کنند.
مریم –
سلام.ممنون ازدوره خوبتون.من قبلا تو این دوره شرکت کردم. دوره خیلی خوبی بود با اساتید خوب و طناز
گروه مشاورین هوش پیروزی –
سلام
نظر لطف شماست
خوشحال میشیم توی دوره های بعدی هم شما رو ببینیم
تشکر
سعید رضایی –
سلام
کلاسها خیلی خوب بودند اما من متاسفانه بخاطر مشغله هایی که برام پیش میومد نتونستم دو جلسه بیام.واقعا جلسه به جلسه عالیه.اگر فیلم آموزشی هم ارائه بدید عالی میشه
گروه مشاورین هوش پیروزی –
سلام
وقت بخیر
خیلی ممنون آقای رضایی عزیز
نظر لطف شماست
تشکر
حسین عمادی –
سلام. ببخشید دوره تون چند ساعت هست؟
گروه مشاورین هوش پیروزی –
سلام
وقت بخیر
زمان کل دوره 25 ساعت است.
تشکر
ناشناس –
سلام. کلاس ها حضوری هست یا آنلاین؟
گروه مشاورین هوش پیروزی –
سلام
وقت بخیر
هم به صورت آنلاین و هم به صورت حضوری است. یک الی دو روز قبل از شروع دوره از طرف شرکت باهاتون هماهنگ میشه
تشکر
مایا –
سلام و وقت بخیر
من میخوام در دوره انلاین شرکت کنم، سوال من این هست که لپ تاپ موردنظر برای اینکار باید چه ویژگی هایی داشته باشه، ممنون میشم پاسخ بدین🙏
گروه مشاورین هوش پیروزی –
سلام
عرض ادب
با یه لپتاپ خیلی ساده کارتون راه میفته، اصلا نیاز به سیستم قوی ندارید.
سوال دقیقتری داشتید از طریق واتس اپ یا تماس با شماره 09370721578 در خدمتتون هستیم.
با تشکر
رضا يزدانپناه –
با سلام دوره ای بسیار عالی هستش ما راضی بودیم و استادان با تجربه و مسلط با تشکر
گروه مشاورین هوش پیروزی –
سلام
عرض ادب
خیلی ممنونم از شما و لطف شما
سارا –
سلام
من چند جلسه از کلاس رو شرکت کردم ولی تا همین جا خیلی راضی بودم چون علاوه به کد نویسی اطلاعات دیگه یی هم دریافت کردم
گروه مشاورین هوش پیروزی –
سلام
وقت بخیر
خیلی خوشحالیم که تونستیم نظرتون رو جلب کنیم.
تشکر
A hossrini –
واقعا آموزش از روی اصول خودش صورت می گیره من تو این دوره شرکت کردم و واقعا راضی هستم همه جزییات مورد نیاز توضیح داده میشه واقعا خسته نباشید ممنونم از آموزش کامل و بجاتون
گروه مشاورین هوش پیروزی –
سلام
عرض ادب
بسیار ممنونم از اینکه وقت گذاشتید و خیلی خوشحالیم کلاس آموزش طراحی وب براتون مفید واقع شده
تشکر
الهام بانشی (خریدار محصول) –
سلام، دوره خیلی خوبیه و همه چیز با جزئیات اموزش داده میشه، ممنون از اساتید محترم
گروه مشاورین هوش پیروزی –
سلام
وقت بخیر
خیلی ممنونم از شما بابت وقتی که میذارید.
تشکر