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

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

ثبت نام کننده
۴۷,۰۵۷ دانشجو
یادگیری توسط دانشجویان
۱۲/۹ میلیون دقیقه
مدت زمان آموز‌ش‌های این صفحه
۳,۳۵۴ دقیقه
تعداد آموز‌ش‌های این صفحه
۱۵ عنوان آموزشی
1

آموزش طراحی وب با HTML – مقدماتی

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

مدرس: مهندس محمد عبداللهی مدت زمان آموزش: ۲ ساعت و ۵۶ دقیقه
یادگیری را شروع کنید
2

آموزش طراحی وب با CSS - مقدماتی

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

مدرس: مهندس محمد عبداللهی مدت زمان آموزش: ۴ ساعت و ۳۴ دقیقه
یادگیری را شروع کنید
3

آموزش طراحی وب با HTML – تکمیلی

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

مدرس: مهندس سید رضا هاشمیان مدت زمان آموزش: ۳ ساعت و ۲۳ دقیقه‎
یادگیری را شروع کنید
4

آموزش طراحی وب با CSS3) CSS) - تکمیلی

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

مدرس: مهندس سید رضا هاشمیان مدت زمان آموزش: ۳ ساعت و ۱۶ دقیقه
یادگیری را شروع کنید
5

آموزش بوت استرپ (Bootstrap) برای طراحی صفحات وب

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

مدرس: مهندس سید رضا هاشمیان مدت زمان آموزش: ۶ ساعت و ۲۶ دقیقه
یادگیری را شروع کنید
6

آموزش پروژه محور HTML و CSS

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

مدرس: مهندس مهران بهدوست مدت زمان آموزش: ۴ ساعت و ۹ دقیقه
یادگیری را شروع کنید
7

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

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

مدرس: مهندس زهرا داودی مدت زمان آموزش: ۳ ساعت و ۵۹ دقیقه
یادگیری را شروع کنید
8

آموزش کاربردی HTML5 - CSS3 - jQuery در طراحی وب - بخش اول

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

مدرس: مهندس سید مجتبی حیات الغیب مدت زمان آموزش: ۵ ساعت و ۳۲ دقیقه
یادگیری را شروع کنید
9

آموزش طراحی قالب استاتیک برای سایت

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

مدرس: پویا ریحانی مدت زمان آموزش: ۲ ساعت و ۵۳ دقیقه
یادگیری را شروع کنید
10

آموزش کدنویسی سریع HTML و CSS با Emmet

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

مدرس: مهندس مهدی جنگجو مدت زمان آموزش: ۱ ساعت و ۵۰ دقیقه
یادگیری را شروع کنید
11

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

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

مدرس: مهندس محمد عبداللهی مدت زمان آموزش: ۱ ساعت و ۶ دقیقه
یادگیری را شروع کنید
12

آموزش طراحی قالب​ واکنشگرا ​(Responsive)​ با بوت استرپBootstrap) ‎)

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

مدرس: مهندس مهران بهدوست مدت زمان آموزش: ۷ ساعت و ۱۱ دقیقه
یادگیری را شروع کنید
13

آموزش طراحی واکنش گرا با Grid و Flexbox در CSS

در این فرادرس شما به سرعت و در اولین خطوط کد، با یک پروژه عملی و کاربردی مواجه می شوید. از مفاهیم تئوری، مثال های نامرتبط و توضیحات اضافی صرف نظر می کنیم. در ابتدا یک صفحه کامل را به عنوان هدف نهایی پروژه نمایش می دهیم و قدم به قدم در مراحل ساخت این صفحه با هم همراه می شویم. اولین قدم ما طرح بندی کلی HTML با استفاده از Grid و بهینه کردن آن برای صفحه نمایش های کوچک تر است. در ادامه با ساخت منوی واکنش گرا به وسیله فناوری Flexbox آشنا می شویم. ضمن اینکه در حین اجرای پروژه با نکات کوچک بی شماری نظیر: استفاده از انواع فونت ها و آیکون های تحت وب، تغییر اندازه عکس ها براساس اندازه صفحه نمایش، مفهوم سایه و شفافیت و همین طور واحدهای اندازه گیری em و vh آشنا می شویم.

مدرس: مهندس حسین بدری مدت زمان آموزش: ۲ ساعت و ۳۳ دقیقه
یادگیری را شروع کنید
14

آموزش مقدماتی پیش پردازنده Less و توسعه پذیری CSS

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

مدرس: سهیل سیدی مدت زمان آموزش: ۱ ساعت و ۱۶ دقیقه
یادگیری را شروع کنید
15

آموزش کاربردی HTML5, CSS3, jQuery در طراحی وب - بخش دوم

آموزش های مقدماتی تکنولوژی های مختلف برنامه نویسی تحت وب فراوان یافت می شوند و تعداد بسیار کمی از این آموزش ها به صورت کاربردی به این تکنولوژی ها می پردازند. به همین منظور، برای استفاده کاربردی از سه تکنولوژی HTML5 ,CSS3 و jQuery آموزشی را تهیه کردیم تا کاربرد این سه تکنولوژی وب را به صورت عملی تدریس نموده و زمینه استفاده کاربردی از مقدمات را فراهم نماییم. بخش یکم آموزش نیز بر همین مبنا پایه ریزی شده بود و مثال های متنوعی در آن ارائه شده بود. در این قسمت، مثال های متنوع تری را ارائه می کنیم تا تسلط شما بر استفاده کاربردی از این سه تکنولوژی افزایش یابد.

مدرس: مهندس سید مجتبی حیات الغیب مدت زمان آموزش: ۴ ساعت و ۵۰ دقیقه
یادگیری را شروع کنید
موضوعات آموزشی مرتبط