تخفیف ویژه آموزش Git به همراه GitLab + Github و Azure DevOps مدت محدود

آموزش طراحی سایت (HTML CSS Javascript)

توضیحات دوره

Web Design، دقیقا به معنای تلاش برای ایجاد یک پایگاه اینترنتی برای ارائه خدمات، فروش محصول یا اطلاع رسانی است. طراحی وب سایت یک پروسه است که از لایه‌سازی صفحات وب، تولید محتوا، طراحی گرافیکی و رعایت اصول سئو تشکیل شده است. در واقع اگر شما می‌خواهید یک وب سایت قدرتمند ایجاد کنید که بتوانید با استفاده از آن خدمات، محصول یا هر چیز دیگری را به صفحه اول گوگل بیاورید، باید به عنوان یک طراح سایت تمام اصول فنی و ظاهری طراحی یک وب سایت را رعایت کنید. بنابراین یک طراح وب (Web Designer) در واقع فردی است که به ابزارها و تکنولوژی های طراحی سایت تسلط دارد و با بهره گیری از خلاقیت و مهارت خود وب سایت را با رعایت تمام اصول فنی و ظاهری طراحی می کند که کاربران و مشتریان به صورت مستقیم با آن در ارتباط هستند. به عبارت دیگر هر آن چیزی که شما در محض ورود به یک سایت مشاهده می کنید، حاصل طراحی یک Web Designer است.

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

در دوره آموزش طراحی سایت ما تمام تلاش خود را به کار بردیم تا تجربیات سال ها تدریس و طراحی سایت را در قالب یک بسته آموزشی در اختیار شما قرار دهیم. این بسته شامل ویژگی ها و قابلیت های زیادی است که با فراگیری آن ها، می توانید ظاهر هر سایتی را طراحی و پیاده سازی کنید. از طرفی با یادگیری تمام مباحث این بسته آموزشی می توانید در بازار گسترده طراحی وب سایت در ایران به راحتی استخدام شده و یا به صورت فریلنسری پروژه بگیرید و به درآمد بالایی دست پیدا کنید.

اگر بخواهیم به صورت خلاصه به آنچه در بسته آموزش طراحی سایت گفته شده است بپردازیم، می توانیم این بسته را در 5 محور اصلی مورد بررسی قرار دهیم:

آموزش زبان HTML 5

آموزش HTML 5

HTML که مخفف عبارت Hyper Text Markup Language است یک زبان Markup است که با استفاده از این زبان می توان صفحات وب را توصیف کرد. HTML 5 در حقیقت آخرین استاندارد مرورگرها برای نمایش صفحات وب و تعامل با آنهاست. html 5 تکنولوژی جدیدی است که برای از بین بردن وابستگی وب سایت ها به نرم افزارهای مولتی مدیا و پخش کنندهای ویدئو مانند adobe ، flash و Silverlight به وجود آمده است. html 5 این توانایی را دارد که تمامی امکانات این نرم افزار ها را به راحتی با نوشتن چند خط کد پیاده سازی کند. در دوره آموزش طراحی سایت ما به طور کامل با زبان HTML و تغییرات جدید آن که در نسخه 5 به آن افزوده شده آشنا می شویم. در فصل دوم ما به معرفی زبان HTML و IDE های مختلف طراحی سایت می پردازیم. در این فصل کار با تصاویر، لینک ها، لیست ها، جداول و ... را یاد میگیریم.

آموزش زبان CSS 3

آموزش CSS3

CSS که مخفف عبارت Cascading Style Sheet است، یک زبان نشانه گذاری تحت وب است که برای توصیف ظاهر وب‎ سایت استفاده می‎ شود. هدف از تولید زبان css در حقیقت جداسازی اطلاعات محتوایی سایت که توسط زبان HTML نوشته شده اند از اطلاعات ظاهری مانند صفحه آرایی، رنگ بندی، سایز و نوع فونت می باشد. این جداسازی باعث افزایش سرعت بارگذاری سایت، انعطاف پذیری بیشتر برای کنترل ویژگی های ظاهری، قابلیت طراحی چندین صفحه با یک فرمت یکسان و جلوگیری از انجام کارهای تکراری در طراحی وب سایت می گردد. استفاده از زبان CSS برای طراحی صفحات وب ضروری است زیرا صفحات وب بدون استفاده از CSS بسیار ساده و فاقد جذابیت های ظاهری هستند. در دوره آموزشی طراحی سایت ما در طی چندین فصل به طور کامل به آموزش CSS پرداخته ایم. مباحثی از قبیل Box Shadow ، CSS Animations ، CSS Box Model ، Float & Clear ، CSS Position ، Gradient ، تعریف متغیر در CSS و ... . تا شما را به طور کامل با CSS آشنا کرده، به نحوی که بتوانید با استفاده از CSS صفحات وب زیبا و جذابی را طراحی نمایید.

آموزش Flexbox

آموزش Flexbox

ما همیشه صفحه آرایی را با استفاده از عناصر و ویژگی هایی انجام می دادیم که هدف آن ها صفحه آرایی نبوده است. تا قبل از معرفی شدن CSS 3 ما از جداول HTML و پس از آن از ویژگی float و position برای صفحه آرایی و چیدمان عناصر HTML استفاده می کردیم. اما مشکلی که وجود داشت، هدف این عناصر و ویژگی ها صفحه آرایی نبود و برای کار دیگری ایجاد شده اند و به همین دلیل استفاده کردن از این ویژگی ها برای صفحه آرایی مشکلاتی را به همراه داشت.

تا اینکه بالاخره ماژولی به نام Flexbox مطرح شد. Flexbox یک ماژول صفحه آرایی تک بعدی در طراحی صفحات وب است که به طراحان وب کمک می کند بدون استفاده از روش های قدیمی مانند float و position چیدمان و صفحه آرایی صفحات وب خود را انجام دهند. در این دوره تلاش شده تا ماژول Flexbox به طور کامل و به صورت کاربردی آموزش داده شود تا از این پس به راحتی بتوانید با استفاده از این ماژول چیدمان و ترازبندی عناصر صفحات وب خود را انجام دهید. حتی در این دوره در دو فصل مجزا به آموزش سیستم صفحه آرایی جدید CSS به نام CSS Grid پرداختیم که یک تکنیک عالی برای صفحه آرایی و چیدمان عناصر HTML است. شما با استفاده از این دو ماژول خیلی راحت می توانید طراحی صفحات وب خود را انجام دهید.

ریسپانسیو کردن سایت (Responsive Web Design)

آموزش ریسپانسیو کردن سایت

طراحی سایت واکنشگرا مربوط به تغییر ظاهر صفحات سایت متناسب با سایز دستگاه کاربران است. امروزه کاربران با موبایل، تبلت، لپتاپ و سیستم هایی با مانیتورهای wide از اینترنت استفاده می‌کنند و بنابراین صفحات وب سایت ما باید به گونه‌ای طراحی شده باشند که کاربران موقع بازدید و استفاده از این صفحات نیاز به زوم کردن، اسکرول کردن افقی و… را نداشته باشند و در حقیقت وب سایت ما در صفحه نمایش های مختلف با اندازه های مختلف به درستی نمایش پیدا کند. در این دوره آموزشی ما به طور کامل در رابطه با Media Query ها، ماژول Flexbox، واحدهای اندازه گیری نسبی (Relative Units) و سیستم Grid صحبت خواهیم کرد و تمام این موضوعات را به طور کامل بررسی می کنیم تا شما خیلی راحت بتوانید از این ویژگی ها برای ریسپانسیو کردن وب سایت های خود استفاده کنید.

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

آموزش javascript

JavaScript که به اختصار JS نیز نامیده می شود، یکی از محبوبترین زبان های برنامه نویسی تحت وب است. زبان جاوا اسکریپت یک زبان سطح بالا، داینامیک، مبتنی بر شی و تفسیری است. از این زبان می توان برای برنامه نویسی سمت سرور (Server Side)، اپلیکیشن های موبایل، بازی و اپلیکیشن های دسکتاپ استفاده کرد.  در دوره آموزش طراحی سایت ما زبان جاوا اسکریپت را به صورت قدم به قدم و کاربردی در طی چندین فصل آموزش داده ایم تا شما علاقمندان بتوانید خیلی راحت این زبان را فرا بگیرید و در طراحی های خود از آن استفاده کنید و جذابیت و پویایی صفحات وب خود را بالا ببرید.

دقت نمایید که این دوره همچنان درحال ضبط می باشد و سرفصل دوره آموزش طراحی سایت همزمان با ضبط فصل های جدید به روز رسانی و تکمیل می گردد. شما می توانید هم اکنون این دوره را با تخفیف ویژه پیش خرید کنید و سرفصل هایی که تا به این لحظه روی سایت قرار گرفته است را دریافت و یادگیری طراحی سایت را آغاز نمایید.

سرفصل دوره

آشنایی با مفاهیم پایه دنیای وب و نحوه کار وب سایت ها (4 قسمت)

آشنایی با مفاهیم اینترنت، وب و وب سرور
آشنایی با هاست
آشنایی با دامنه سایت
آشنایی با dns server

آشنایی با HTML 5 و تگ های HTML (12 قسمت)

آشنایی با زبان های Markup مانند HTML5
آشنایی با ساختار کلی یک سند html
معرفی IDE های مختلف برای طراحی وب سایت
نصب افزونه Live Server
HTML Heading
HTML Formmating
HTML Links
HTML Images
HTML Block & Inline
HTML List
HTML Table
HTML Entities

آشنایی و کار با CSS3 (6 قسمت)

آشنایی با زبان نشانه گذاری CSS و کاربرد آن در طراحی سایت
آموزش انواع روش های استایل دهی با استفاده از CSS
آشنایی با base selector ها در CSS3
آموزش کار با ابزار Inspect Element مرورگرها
آموزش کار با رنگ ها در طراحی صفحات وب
آموزش تزریق Font دلخواه به سایت با استفاده از CSS

آشنایی و کار با CSS3 - Part 2 (6 قسمت)

آموزش CSS Box Model
آشنایی با نحوه اعمال Background و Border به عناصر در CSS
آشنایی با float و نحوه استفاده از آن برای چیدمان عناصر صفحه وب
طراحی Button Link های زیبا
آموزش ایجاد منوی تک سطحی و Side Menu
آموزش مفاهیم inline و inline block در CSS

آشنایی و کار با CSS3 - Part 3 (4 قسمت)

آموزش مفهوم CSS Position و کار با انواع Position ها در CSS
آموزش تفاوت های استفاده از Display و Visibility در طراحی سایت
ایجاد یک فرم ورود اطلاعات
استایل دهی فرم ورود اطلاعات

پروژه : سایت هتل آتریا (7 قسمت)

طراحی منوی سایت
طراحی بخش ویترین سایت
طراحی بخش درباره ما
طراحی بخش خدمات هتل و استفاده از font awesome برای افزودن آیکون به سایت
طراحی صفحه درباره ما بخش اول
طراحی صفحه درباره ما بخش دوم
طراحی صفحه تماس با ما

آشنایی با نحوه Responsive کردن سایت (Responsive Web Design) (8 قسمت)

آشنایی با ریسپانسیو سایت (Responsive Web Design)
آشنایی با تگ Viewport و کاربرد آن
آشنایی با Media Query ها در CSS
کار با Media Query
ایجاد استایل های مختلف برای screen های مختلف
آشنایی با واحدهای اندازه گیری Absolute و Relative در CSS
کار با واحدهای اندازی گیری em و rem در css
ریسپانسیو کردن سایت هتل طراحی شده در فصل 6

آموزش Flexbox در CSS3 - بخش 1 (7 قسمت)

آشنایی با CSS Flexbox
آشنایی با پراپرتی های Letter Spacing and White Space جهت رفع مشکل Display inline-block
کار با ماژول Flex در CSS3
آشنایی با Flex Direction
تراز عناصر داخلی نسبت به محور اصلی با استفاده از ویژگی justify-content
تراز عناصر داخلی نسبت به محور عمودی با استفاده از ویژگی align-items
آشنایی با align-content

آموزش Flexbox در CSS3 - بخش 2 (5 قسمت)

تغییر ترتیب عناصر داخلی با استفاده از ویژگی order
انعطاف پذیری عناصر داخلی با flex-grow
انعطاف پذیری عناصر داخلی با Flex-shrink و flex-basis
آشنایی با ویژگی align-self
طراحی یک Layout با استفاده از Flexbox

پروژه: طراحی یک سایت تک صفحه ای با استفاده از CSS Flexbox (9 قسمت)

مشاهده demo وب سایت تک صفحه ای که در این فصل طراحی می شود
طراحی منوی سایت
طراحی هدر سایت
طراحی بخش سرویس ها و خدمات ما
طراحی بخش معرفی تیم کاری
طراحی بخش نمونه کارهای شرکت
طراحی بخش تماس با ما سایت
اضافه نمودن آدرس دفتر کار با استفاده از google map
ریسپانسیو کردن قالب برای صفحه نمایش های wide و mobile

CSS Selectors (6 قسمت)

Intro CSS Selectors
Simple Selectors (name,id,class)
Combinator Selectors ( space , > , + , ~ )
Pseudo-class Selectors
Pseudo-element Selectors
Attribute and Attribute value Selectors

Advance CSS (8 قسمت)

آموزش Linear-Gradient & Radial-Gradient
آموزش Box-Shadow
CSS Transforms
CSS Transitions
آموزش CSS Animations بخش اول
آموزش CSS Animations بخش دوم
CSS Filter Property
CSS Variables

آموزش Semantic Elements & HTML Media (4 قسمت)

HTML Audio
HTML Video
Introducing Semantic Tags
Semantic Web Elements

CSS Grid (10 قسمت)

آشنایی با 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

پروژه: طراحی یک سایت خبری با استفاده از CSS Grid (16 قسمت)

معرفی سایت News
طراحی منو بخش اول
طراحی منو بخش دوم
طراحی منو بخش سوم
طراحی منو بخش چهارم
طراحی منو بخش پنجم
درج Favicon Icon
طراحی هدر سایت بخش اول
طراحی هدر سایت بخش دوم
طراحی هدر سایت بخش سوم
طراحی بخش لیست مقالات
طراحی فوتر سایت با استفاده از CSS Grid
اضافه نمودن فونت به سایت
طراحی صفحه Article
طراحی صفحه About
ریسپانسیو کردن قالب با Media Queries

مبانی برنامه نویسی (3 قسمت)

برنامه نویسی چیست و هدف از نوشتن برنامه ها چیست؟
آشنایی با تاریخچه و انواع زبان های برنامه نویسی
معرفی کامپایلر و مفسر در زبان های برنامه نویسی

الگوریتم نویسی و حل مسئله (4 قسمت)

آشنایی با الگوریتم
حل یک نمونه الگوریتم
آشنایی با ساختارهای شرطی در الگوریتم نویسی
آشنایی با حلقه های تکرار

آشنایی با زبان جاوا اسکریپت (10 قسمت)

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

شروع کار با جاوا اسکریپت (4 قسمت)

اولین برنامه به زبان جاوا اسکریپت (محاسبه میانگین 3 عدد)
دریافت اطلاعات با استفاده از ()Prompt
Type Conversions (تبدیل نوع)
مثال: محاسبه حقوق خالص دریافتی یک کارمند

ساختارهای کنترلی (11 قسمت)

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

توابع در جاوا اسکریپت (11 قسمت)

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

اطلاعات دوره آموزشی


  • مدرس دوره: محمد رامشینی
  • مدت زمان دوره: 36:33:25
  • تعداد ویدیو: 155
  • آخرین بروزرسانی: 1399/11/02
  • فیلم های نمونه: امکان دریافت بخش های رایگان

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

دوره آموزش طراحی سایت پیش نیاز خاصی ندارد و مطالب دوره به صورت کامل از پایه آموزش داده می شود.

تجهیزات و استاندارد های ضبط دوره ها

یکی از مهمترین مواردی که برای تهیه یک دوره آموزشی حائز اهمیت است، کیفیت و رعایت استانداردهای ضبط دوره است. به طوری که کیفیت صدا و تصویر ویدیوهای آموزشی و همچنین رعایت استانداردهای ضبط، باید در بهترین حد و مطلوب باشد. برای این منظور، موسسه آموزشی آتریا با بهره گیری از بهترین تجهیزات ضبط صدا و تصویر و رعایت استانداردهای آموزشی تلاش کرده است تا بسته های آموزشی با بهترین کیفیت را در اختیار دانشجویان عزیز قرار دهد. در زیر به بخشی از این تجهیزات و استانداردها اشاره می کنیم:

میکروفون ضبط صدا

آموزش asp.net core 5

مسلم است که یکی از مهمترین ویژگی های هر ویدیو آموزشی، کیفیت صدای ویدیو است که باید بدون نویز، واضح و شفاف باشد. کیفیت صدای فوق العاده، شفافیت و صدای بدون نویز، از اصلی ترین ویژگی های میکروفون RODE NT-USB است که موسسه آموزش آتریا از آن برای ضبط دوره ها استفاده می کند. اگر ویدیوهای رایگان دوره را مشاهده کرده باشید، به وضوح کیفیت صدای استاد را احساس می کنید.

تصویر مدرس در کنار ویدیوها

آموزش asp.net core 5

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

کیفیت 1080p Full HD ویدیوها

آموزش asp.net core 5

از آنجا که مهمترین دغدغه ما در تولید آموزش ها، کیفیت مطلوب است، تمام ویدیوهای موسسه آموزشی آتریا با بالاترین کیفیت یعنی 1080p ضبط شده اند. کیفیت بالای تصویر بسته ها باعث می شود تا شما کدها و اسلایدهای مورد استفاده مدرس را بهتر ببیند.

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

یکی از استانداردهای ویدیوهای آموزشی، توجه به مدت زمان آن ویدیو است. به نحوی که ویدیوها دارای مدت زمان بین 5 تا 20 دقیقه باشند تا منجر به خستگی دانشجو نگردد. برای این منظور سعی شده است تا حتی الامکان این استاندارد در ضبط ویدیوهای آموزشی رعایت شده باشد.

جامعیت دوره ها

یکی از ویژگی های اساسی بسته های موسسه آموزشی آتریا، جامعیت آنها است. جامعیت به این معنا که با تهیه بسته آموزشی، تمام مباحث مربوط  در آن زمینه را به خوبی فراگرفته و دیگر نیازی به منابع جانبی نداشته باشید. برای این منظور مدرسین مجموعه تلاش کرده اند تا دوره های آموزشی را به صورت کاربردی و پروژه محور ضبط کنند، به طوری که دانشجویان پس از یادگیری، توانایی پیاده سازی و راه اندازی پروژه های واقعی را داشته باشند. بنابراین رویکرد ما در تولید بسته ها، آماده سازی دانشجویان برای ورود به بازار کار و یا ارتقاء جایگاه شغلی ایشان است.

لطفا، بدون ریسک خرید کنید!

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

پلن های قیمتی

00ثانیه
00دقیقه
00ساعت
00روز

بسته پایه

  • ضمانت بازگرداندن وجه
  • دریافت به روزرسانی های دوره آموزشی
  • پشتیبانی از طریق واتساپ و تلفن
  • 3 ساعت خصوصی آنلاین جهت رفع اشکالات
  • 380,000 تومان 290,000
خرید دوره

بسته ویژه

  • ضمانت بازگرداندن وجه
  • دریافت به روزرسانی های دوره آموزشی
  • پشتیبانی از طریق واتساپ و تلفن
  • 3 ساعت خصوصی آنلاین جهت رفع اشکالات
  • 750,000 تومان 550,000
خرید دوره

دانشجویان این دوره، دوره های زیر را هم شرکت کرده اند

نظرات خود را به اشتراک بگذارید
موسسه آموزشی آتریا
نظرات (12)