دوره آموزش طراحی سایت

بخش اول: آموزش HTML 5

آشنایی با مفاهیم پایه طراحی صفحات وب

• آشنایی با مفاهیم اینترنت و وب و تفاوت آن ها
• آشنایی با مفاهیم شبکه ای مرتبط با وب مانند دامنه، هاست، وب سرور، DNS Server
• آشنایی با پروتکل HTTP
• URL - Uniform Resource Locator

آشنایی با HTML و تگ های HTML

• معرفی و کار با IDE های مختلف مانند : Visual Studio 2019 ، VS Code ، Notepad
• آشنایی با زبان های Markup برای تولید صفحات وب
• آشنایی با HTML و نقش آن در ساخت صفحات وب
• آشنایی با tag های HTML
• آشنایی با Attribute های HTML

• فنداسیون یک صفحه سایت
• تقسیم کردن یک صفحه سایت به قسمت های مختلف با استفاده از تگ Div
• Encoding برای نمایش درست متن ها
• عنوان یک صفحه وب سایت
• آشنایی با Header ها
• ساخت پاراگراف ها
• المان های طلایی وب div و span
• کاراکترهای خاص در HTML

فرمت دهی متن درHTML

• نوشتن متن به صورت bold وitalic
• تغییر سایز نوشته یک متن
• استفاده از فونت های Monospaced
• استفاده از متن های Preformatted
• متن های نقل قول
• متن های Superscript و Subscript
• تراز متن در صفحه وب
• پروژه عملی : ایجاد یک صفحه سایت مشابه صفحات وبلاگی

کار با تصاویر

• پسوندهای رایج تصاویر در وب
• آشنایی با نرم افزارهای کار با تصاویر
• ضرورت استفاده از فوتوشاپ (یا نرم افزارهای مشابه)
• شفافیت (Transparency) در تصاویر
• وارد کردن تصاویر درون صفحه سایت
• آشنایی با متن جایگزین عکس
• شناور کردن تصاویر در صفحه سایت
• Images in Another Folder
• Images on Another server
• Animated Images
• پروژه عملی: ایجاد یک گالری تصویر ساده

آموزش لینک ها در HTML

• آشنایی با انواع لینک ها
• ساخت لینک ها در صفحه وب
• نحوه آدرس دهی به لینک ها
• بررسی روشهای مختلف آدرس دهی لینک ها Internal و External
• استفاده از تصاویر به عنوان لینک

آموزش لیست ها در HTML

• آشنایی با انواع لیست ها
• ساخت لیست های غیر ترتیبی (Onordered List)
• ساخت لیست های ترتیبی (ordered List)
• انتخاب نوع بولت برای لیست ها
• ساخت لیست های توضیحی (HTML Description List)
• لیست های تودرتو و مدیریت آن ها (Nested HTML Lists)
• بررسی انواع روش های ایجاد منو
• پروژه عملی: ایجاد یک منو حرفه ای به همراه یک صفحه فهرست مقاله اینترنتی

آموزش جداول در HTML

• بررسی تگ Table و اجزاء مختلف آن
• بررسی نحوه استفاده از Table برای چیدمان
• نکات مربوط به Formatting در Table
• تعیین حاشیه کنار جدول (Adding a Border)
• تعیین فاصله درونی و بیرونی سلول جدول
• تقسیم کردن جدول به گروه های افقی
• تقسیم کردن جدول به قسمت های عمودی

HTML5

• آشنایی با HTML 5
• المان های جدید HTML 5 مانند article, aside, header, section, footer و ...
• سمانتک تگ ها در HTML 5
• مهاجرت کردن از HTML 4 به HTML 5
• Change to HTML5 Doctype
• HTML Coding Conventions

HTML Graphics

• HTML Canvas
• HTML SVG
• SVG Star
• SVG Logo

HTML Media

• HTML Media
• Multimedia Formats
• HTML Video
• HTML Audio
• HTML Plug-ins

آموزش فرم ها

• نقش فرم ها در صفحات وب
• ساخت فرم ثبت نام کاربر
• پردازش اطلاعات وارد شده توسط کاربر
• آشنایی با Server-Side Programming
• دسته بندی المان های موجود در فرم
• ساخت منوهای کشویی
• ساخت دکمه های رادیویی و چک باکس ها (Checkbox)
• آشنایی با دکمه های Submitو Reset
• Action Attribute
• Target Attribute
• Method Attribute
• When to Use GET
• When to Use POST
• قراردادن عکس به جای دکمه تایید فرم
• غیرفعال کردن المان های موجود در فرم
• فیلدهای فقط خواندنی
• پروژه عملی : ایجاد یک فرم ارتباط با ما

بخش دوم: آموزش CSS3

آموزش کار با CSS3

• درک مفهوم CSS و جایگاه آن در صفحات وب
• آشنایی با استایل ها و روش های مختلف نوشتن آن (Inline-Internal-External)
• درک ساختار یک دستور CSS
• نوشتن دستورات CSS در کنار یکدیگر
• CSS id Selector
• CSS class Selector
• CSS Universal Selector
• CSS Grouping Selector
• Multiple style Sheets
• آشنایی با کلاس های دروغین (Pseudo-Class)
• آشنایی با المان های دروغین (Pseudo-Element)
• وراثت در CSS

فرمت دهی متن و فونت توسط CSS

• تعیین نوع فونت مورد نظر برای متن صفحات سایت
• Import کردن یک فونت دلخواه با استفاده از CSS
• آشنایی با گروه های کلی فونت (Font Families)
• تعیین سایز فونت
• آشنایی با ویژگی های یک فونت style, weight, variant
• تعیین فاصله بین حروف و فاصله بین خطوط یک متن
• تراز یک متن در صفحه سایت

افکت ها در CSS3

• افکت سایه
• افکت گرادیانت
• افکت شعاعی به المان ها

تعیین موقعیت المان ها (Position)

• درک کامل CSS Box Model و ناسازگاری های موجود در طراحی سایت
• نقش استانداردها در CSS Box Model
• شناور کردن المان ها در صفحه سایت
• کنترل المان های موجود در مجاورت المان های شناور
• آشنایی با انواع مختلف تعیین موقعیت یک المان و کاربردهای آن
• Static Position
• Relative Position
• Fixed Position
• Absolute Position
• Sticky Position

آموزش درست کردن ساختار (Layout) توسط CSS

• آشنایی با انواع صفحات مختلف سایت
• آشنایی با صفحات تک ستونی
• آشنایی با صفحات چندستونی
• ساخت صفحات دوستونی
• ساخت صفحات سه ستونی ساده و پیچیده
• تنظیم ارتفاع تمامی ستون های صفحه وب به یک اندازه
• آشنایی با صفحات Absolutely-Positioned
• پروژه عملی :ایجاد یک قالب کامل با HTML and CSS

آموزش طراحی سایت واکنشگرا (Responsive)

• آشنایی با انواع صفحات مختلف سایت
• بررسی مفهوم Responsive
• مفهوم Mobile First
• معرفی Grid System
• کار با Media Query و مفاهیم CSS شرطی
• معرفی انواع سایزها و کلاس های مرتبط و روش تشخیص Resolution کاربر
• معرفی Fixed Layout
• معرفی Responsive Layout

آموزش CSS Flexbox

• Flex-direction
• Flex-wrap
• Flex-flow
• Justify-content
• Align-items
• Align-content
• پروژه عملی: Responsive Website Using Flexbox

آموزش CSS Grid

• آشنایی با CSS Grid و مفاهیم اولیه آن
• کار با CSS Grid
• Repeat and minmax functions
• Grid Gap
• معرفی auto-fill & auto-fit
• Grid Areas
• Spanning Column and Row
• ترازبندی آیتم های Grid
• مرتب سازی آیتم ها در Grid
• Media Queries & The Grid

بخش سوم : آموزش جاوا اسکریپت

معرفی جاوا اسکریپت

• آشنایی با زبان برنامه نویسی جاوا اسکریپت
• نحوه استفاده از جاوا اسکریپت
• بهترین موقعیت استفاده از جاوا اسکریپت در صفحات HTML
• آشنایی با متغیرها (variables)
• انواع داده ها در زبان جاوا اسکریپت
• تعریف متغیرها با استفاده از const ، var و let
• انواع عملگرها در زبان جاوا اسکریپت
• اولین برنامه به زبان جاوا اسکریپت (محاسبه میانگین 3 عدد)
• دریافت اطلاعات با استفاده از ()Prompt
• Type Conversions (تبدیل نوع)

ساختارهای کنترلی در جاوا اسکریپت

• معرفی ساختارهای کنترلی در Javascript
• ساختار شرطی If else
• ساختار Switch
• حلقه تکرار For
• آشنایی با عبارت های break و continue
• حلقه تکرار While

توابع در جاوا اسکریپت

• آشنایی با توابع و مزیت های نوشتن تابع
• تعریف تابع در جاوا اسکریپت
• فراخوانی تابع با پارامترهای متغیر
• توابع تو در تو (Nested Function)
• معرفی انواع Scope ها (Local, Global, Block)
• آشنایی با Hoisting در جاوا اسکریپت
• Function Expressions
• Arrow Functions
• Self-Invoking Functions

آرایه در جاوا اسکریپت

• آشنایی با آرایه و نحوه تعریف آرایه
• متدهای کار با آرایه
• مرتب سازی آرایه
• جستجو در آرایه
• پیمایش عناصر آرایه با متد ForEach
• پیمایش عناصر آرایه با استفاده از ساختار For-of
• انجام عملیات بر روی مقادیر آرایه با متد map
• فیلتر کردن مقادیر آرایه با متد filter

Object در جاوا اسکریپت

• معرفی Object در جاوا اسکریپت
• تفاوت Dot notation و Bracket notation
• اضافه نمودن Property به Object
• Object Methods
• ساختار for..in برای پیمایش Object
• Object.keys, values, entries
• Object Constructors
• Primitive and Reference value

آموزش Document Object Model

• DOM چیست ؟
• DOM Methods
• DOM Document
• DOM Node Lists
• کارکردن با Node ها و HTML Elementها
• دسترسی یافتن به المان های موجود در DOM
• تغییر دادن المان های موجود در DOM
• ساخت المان های DOM

آموزش Event ها

• مدیریت رخدادها در جاوا اسکریپت
• Input Events
• Mouse Events
• Click Events
• Load Events
• Event Attributes
• onload and onunload Events
• کار کردن با Timer
• پروژه عملی: ساخت یک اسلایدر حرفه ای

آموزش رفع خطاهای رخ داده در کدهای جاوا اسکریپت

• آشنایی با برخی خطاهای رایج جاوا اسکریپت
• استفاده از Firebug به منظور رفع خطای کدهای جاوا اسکریپت
• مراحل رفع خطا ی کدهای جاوا اسکریپت

بخش چهارم:آموزش JQuery

معرفی JQuery

• مقدمه ای بر jQuery
• jQuery چیست؟
• دانلود و نصب jQuery
• JQuery Syntax
• JQuery Events
• ایجاد یک صفحه ساده دارای jQuery
• استفاده از انتخابگرهای اولیه jQuery

آموزش JQuery Effects

• JQuery Hide/Show
• JQuery Fade
• JQuery Slide
• JQuery Animate
• JQuery Callback

آموزش JQuery HTML

• JQuery Get
• JQuery Set
• JQuery Add
• JQuery Remove
• JQuery CSS Classes
• JQuery css

آموزش JQuery Traversing

• JQuery Traversing
• JQuery Ancestors
• JQuery Descendants
• JQuery Sibilings
• JQuery Filtering
• پروژه عملی: ساخت یک پنل مدیریتی حرفه ای