مجموعه آموزش طراحی سایت با HTML و CSS

مدرس: مهندس محمد عبداللهی

HTML یک زبان نشانه گذاری است، به این معنی که بخش های مختلف توسط اجزایی به نام تگ از هم جدا شده، که هر کدام دارای کاربرد و خواص مربوط خود هستند. این تگ‌ ها به مرورگر اعلام می‌ کنند، که هر بخش از صفحه چه نوع عنصری است و باید به چه صورت نمایش داده شود.

یادگیری را شروع کنید ...

مدرس: مهندس سید رضا هاشمیان

زبان HTML به مرور دست خوش تغییرات فراوانی شد و در به روز‌ رسانی‌هایی که برای آن ارائه می‌شود، امکانات جدیدی به آن اضافه می‌گردد و همین طور عملکرد برخی امکانات در نسخه‌های قبلی، تغییرات زیادی را شاهد بودند. هم اکنون، آخرین نسخه ارائه شده برای زبان نشانه گذاری HTML، نسخه ۵ می‌باشد، که در این دوره به بررسی قابلیت‌های جدید این زبان نشانه گذاری خواهیم پرداخت.

یادگیری را شروع کنید ...

مدرس: مهندس محمد عبداللهی

یک صفحه وب به طور کلی دارای دو بخش Client Side و Server Side است. بخش Client Side را می‌ توان به سه بخش اساسی تفکیک کرد. اول ساختار صفحه است که توسط HTML ساخته می‌ شود. دوم شکل و شمایل و رنگ و لعاب صفحه است که در CSS تعیین می‌ شود و سوم منطق برنامه در سمت کلاینت است که با زبان‌های اسکریپتی مانند JavaScript مشخص می‌ شود. بنابراین لزوم یادگیری CSS برای طراحی وب مشخص می‌شود. در آموزش تهیه شده در فرادرس سعی شده که جامعیت و مانعیت آموزش رعایت شود. یعنی در عین حال که آموزش فراگیر است و تقریبا شامل تمامی مباحث مربوطه است از گزاف گویی و اتلاف وقت دانشجویان جلوگیری می‌ کند.

یادگیری را شروع کنید ...

مدرس: مهندس سید رضا هاشمیان

با توجه به پیشرفت های حاصل در عرصه وب و همین طور تکنولوژی های مورد استفاده، زبان CSS نیز به مرور شاهد تغییراتی بود که با توجه به ارائه به روزرسانی ها و بهبودهای حاصل، هم اکنون با عنوان نسخه سوم CSS یا همان CSS3 شناخته می شود. زبان CSS3 نیز با توجه به بهبودها و همین طور بروزرسانی های انجام شده، توانسته تا به کاربر کمک کند تا بتوانند رابط کاربری وب سایت های خود را به زیبایی پیاده سازی کنند.

یادگیری را شروع کنید ...

مدرس: مهندس مهران بهدوست

طراحی وب یکی از شاخه های برنامه نویسی محسوب می شود. طرح ابتدا در فتوشاپ پیاده سازی می شود سپس به کدهای HTML و CSS با استانداردهای روز جهانی تبدیل می کنیم. این فرادرس برای کسانی که می خواهند به صورت پروژه محور طراحی وب انجام دهند، مناسب است. زیرا ذهن آن ها  را برای سوالات مختلفی که دارید باز می کند. به عنوان مثال (چطور این Attribute را استفاده کنم؟ در کجا استفاده کنم؟ برای بخش بندی از div استفاده کنم یا section؟ و …) چون ما هنگام انجام پروژه، تک تک این موضوعات را به شما آموزش می دهیم.

یادگیری را شروع کنید ...

مدرس: مهندس مهدی جنگجو

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

یادگیری را شروع کنید ...

مدرس: مهندس سید رضا هاشمیان

Bootstrap یک چارچوب نرم افزاری یا Framework است که شامل توابع و کتابخانه های از پیش آماده شده به زبان HTML و CSS و JavaScript می باشد که به ما این امکان را می دهد تا در صفحات وب خود، با استفاده از کتابخانه های از پیش آماده، المان هایی نظیر: فرم ها، دکمه ها، تب ها و … را ایجاد کرده و رابط کاربری وب سایت خود را توسعه دهیم. با توجه به امکانات ارائه شده توسط Bootstrap و همین طور سادگی استفاده از آن، روز به روز به تعداد وب سایت هایی که از آن استفاده می کنند، افزوده می شود. با توجه به تعداد استفاده کاربران و همین طور امکانات آن، به تازگی به روز رسانی جدیدی برای این ابزار ارائه شده است که با نام Bootstrap 4 شناخته می شود.

یادگیری را شروع کنید ...

مدرس: مهندس محمد عبداللهی

امروزه یک صفحه وب ممکن است از روی هر وسیله ای مورد دستیابی قرار گیرد و نمایش یابد مانند: یک کامپیوتر شخصی، تبلت، موبایل، یک مانیتور عریض و…. پس لزوم نمایش درست و شکیل صفحه وب بر روی همه این وسایل یک حقیقت انکار ناپذیر است. صفحه وبی که بتواند بر روی تمامی ابزارها به شکل مناسب نمایش یابد، Responsive و یا واکنش گرا نامیده می‌ شود. در این فرادرس کاربران یاد خواهند گرفت که چگونه صفحه وبی را بدون کمک گرفتن از هیچ یک از پلتفرم ها و فریم ورک های موجود به صورت واکنش گرا طراحی کنند.

یادگیری را شروع کنید ...

مدرس: مهندس مهران بهدوست

امروزه هر کسب و کار موفقی، نیازمند یک سایت برای ارائه محصولات و توضیحات آن کسب و کار است. یک سایت خوب باید از نظر UI و UX طوری طراحی شود که اولاً برای مخاطب لذت بخش باشد و دوماً سئو و امتیاز خوبی از نظر محتوا داشته باشد. یکی از این امتیازات خوب، واکنش گرا بودن یا ریسپانسیو بودن یک سایت است. به این معنا که بعد از انجام عملیات واکنش گرایی سایت، مخاطب می تواند سایت شما را به صورت صحیح روی تمامی وسایل با عرض های مختلف مثل تبلت و موبایل و لپ تاپ و … مشاهده کند و مشکلی با نمایش سایت نداشته باشد. ما در این آموزش، سعی داریم ریسپانسیو کردن را به وسیله فریمورک قدرتمند Bootstrap به شما آموزش دهیم تا بتوانید یک طراح وب حرفه ای باشید.

یادگیری را شروع کنید ...

مدرس: پویا ریحانی

طراحی قالب استاتیک اولین قدم برای ورود به بازار کار طراحی قالب و طراحی سایت است، زمانی که با نحوه طراحی یک قالب از ابتدا تا انتها آشنا شوید، روش های لایه بندی و همچنین تگ های HTML و CSS را بهتر درک می کنید و می توانید قالب برای انواع سایت های مختلف دانلودی، گرافیکی، شخصی و … طراحی کنید.

یادگیری را شروع کنید ...

مدرس: مهندس زهرا داودی

در این آموزش، علاوه بر بررسی اولیه مفاهیم و پایه مربوط به وردپرس که برای شناخت ساختار وردپرس نیاز است، به صورت پروژه محور قالبی را آماده می کنیم و تمام امکانات لازم برای داینامیک (Dynamic) کردن سایت با وردپرس آموزش داده خواهد شد.

یادگیری را شروع کنید ...

مدرس: مهندس سید مجتبی حیات الغیب

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

یادگیری را شروع کنید ...

مدرس: سهیل سیدی

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

یادگیری را شروع کنید ...