آموزش طراحی وب سایت - چگونه وب سایت بسازید

چطوری میتونید وب سایت فروشگاهی بسازید ؟  من قول میدم بهتون این کارو براتون خیلی راحت آموزش بدم اگه باور ندارد چند دقیقه وقتتو بذارید ببینید چه راز هایی بهتون خواهم گفت ؟ این آموزش یک آموزش فول استک و کامل برای ساخت یک وب سایت با html می باشد که مشکل بسیار از برنامه نویسان می باشد چرا که یک برنامه نویس باید ساختار وب سایت را درک کند و بتواند در زمان مناسب ریکشن نشان دهد موافقین ؟ اگه...

تمامی انیمیشن های معرفی شده با css و svg و در برخی موارد همراه javascript نیز معرفی شده اند انیمیشن ها قابل دانلود هستند برای دانلود میتوانید از روی کد های آنلاین codepen دانلود را انجام بدید   Border توسط شان مک کافری هنگامی که روی دستورالعمل "HOVER" می روید ، فقط با CSS ساخته می شود و یک حاشیه به راحتی متن ایجاد می شود. Elastic SVG Sidebar by Nikolay Talanov نوار کناری وقتی می خواهید آن را از کنار خود...

انتخابگر رنگ در بسیاری از موارد در کاربردهای وب مورد استفاده قرار می گیرد که کاربر باید رنگ عنصر را تغییر دهد یا یک رنگ را انتخاب کند. ایجاد یک مجموعه رنگ از ابتدا یک کار دشوار برای یک توسعه دهنده است.بنابراین ما مجبور بودیم از کتابخانه های انتخاب رنگ Javascript استفاده کنیم که می توانید به آسانی در وب سایت های خود استفاده کنید. این کتابخانه ها آسان برای استفاده هستند و به خوبی...

دانلود بکگراند رایگان تاسیساتی و امور نصب و انجام کار های لوله کشی و نصابی که به صورت رایگان‌میتوانید در ملت وب دانلود فرمایید.

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

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

پیش بارگیرها اغلب برای بارگیری وب سایت ها / برنامه های کاربردی آهسته استفاده می شوند تا کاربر را مطلع کنند که وب سایت هنوز بارگذاری شده یا سقوط نکرده است. پیش بارگیرها برای وب سایت ها و برنامه های کاربردی با منابع بسیار مفید هستند. در بسیاری از موارد، بارگذاری انیمیشن ها به عنوان اولین عنصرUX استفاده می شود. آن را به کاربر تایید می کند که برنامه یا وب سایت سقوط نمی...

صفحه اصلی شما یک عنصر مهم در طرح وب سایت شماست . این اولین فرصت واقعی است که شما باید کسب و کارتان را معرفی کنید یا محصولی که به فروش می رسانید، طراحی آن کلید است. صفحه فرود با یک هدف متمرکز طراحی شده به عنوان یک تماس به عمل (CTA) طراحی شده است. استفاده از رنگ ها و تصاویر برای تکمیل خواست های به عمل و تجربه کاربر ضروری است.  CodePen برای این آموزش ببینید در این...

طراحان نیاز دارند که امروزه مهارت های بیشتری کسب کنند. نمونه کارها طراحی گرافیک متنوعی است که به این معنی است که با داشتن اعتماد به نفس در ایجاد هویت های تصویری و کار برند، طراحان به طور فزاینده ای در چیزهایی مانند هنر 3D کار می کنند . و همانطور که در این مقاله توضیح می دهیم ، طراحان گرافیک از برنامه نویسی نیز بیشتر و بیشتر مهم هستند.  درک نحوه کار کد میتواند...

WebAssembly (ism) متفاوت با سایر API های وب است که شما ممکن است با آن بازی کرده باشید. این یک استاندارد است که فرمت اجرایی باینری را برای برنامه های سمت سرویس گیرنده در وب تعریف می کند، که می تواند در مرورگر اجرا شود، در عین حال با استفاده از قابلیت های سخت افزاری سرعت و سطح پایین دستگاه ماشین. در حالیکه این یک استاندارد نسبتا جدید است که در حال حاضر توجه بیشتری را به خود جلب کرده است، در حال...

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

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

ما با ایده حرکت بلوک های محتوا به عنوان راهی برای انتقال از صفحه اصلی / گالری به صفحه پروژه، بازی کرده ایم. تمام پانل ها در امتداد محور Y حرکت می کنند (محور x در دستگاه های کوچکتر)، و حرکت به وسیله ی این که کاربر میخواهد بیشتر درباره یک پروژه یاد بگیرد یا میخواهد به ناوبری دسترسی پیدا کند، حرکت می کند. تصاویر: unsplash.com ایجاد ساختار ساختار HTML از دو لیست های نامرتب تشکیل...

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

ما اخیرا با یک انیمیشن طراحی شده با CSS تجربه  کردیم که جایگزین تازه کردن صفحه وب می شود در حالی که محتوای با استفاده از ajax به روز شده است. انفجار امروز بر اساس یک ایده است، اما با یک اجرای متفاوت: در این زمان یک اثر شناور ساده تبدیل به یک نوار بارگذاری، که در نهایت با محتوای جدید گسترش می یابد! آیکون های کتابخانه هسته ای ما . ایجاد ساختار ساختار HTML از یک...

در بیشتر موارد، کاربران خود را به یک صفحه ثبت نام هدایت می کنید. با این حال، اگر فرآیند پرداخت شما کاملا ساده باشد، یک روش جایگزین برای جابجایی جدول قیمت گذاری است، و در همان صفحه، فرم پرداخت را نشان می دهد. این همان چیزی است که ما با قطعه امروز تلاش کردیم. صحبت کردن به اندازه کافی، بیایید به کد بچرخانیم؛) منابع: Velocity.js توسط جولیان شاپیرو. آیکون از Nucleo . ایجاد...

نوشتن رسپانسیو منو برای سایت های مگا، کار ساده ای نیست. اگر شما در حال کار بر روی یک پنل مدیریت هستید، احتمالا شما باید یک منوی عمودی را طراحی و توسعه دهید، با مقدار زیادی زیر مجموعه ها. به همین دلیل تصمیم گرفتیم قطعه امروز را به اشتراک بگذاریم! ناوبری نوار ابزار ما می تواند زندگی شما را ساده تر با ارائه یک قالب شروع ساده برای پروژه بعدی خود؛) آیکون: کتابخانه هسته...

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

ما در مورد فرآیند "اضافه به سبد خرید" به الگوهای مختلفی استفاده می کنیم. ایده اصلی این الگو، اطلاع دادن به کاربر است که یک مورد به سبد اضافه شده است و او را با یک پیوند برای ادامه به پرداخت، ارائه می دهد. ما با این ایده مخفی کردن سبد خرید به طور پیش فرض آزمایش کرده ایم و آن را زمانی که کاربر بر روی دکمه «افزودن به سبد خرید» کلیک می کند نشان می دهد. به این ترتیب کاربر می...

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

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

ساختار از دو عنصر اصلی تشکیل شده است nav.main-navبرای موارد ناوبری بالا و div.morph-dropdown-wrapperبسته بندی عناصر کرکره.  برای هر آیتم لیست در nav.main-navعنصر، a li.dropdownدر داخل ایجاد می شود .morph-dropdown-wrapper.   Open Nav About Pricing Contact     اضافی div.bg-layerدر داخل ساخته شده است div.morph-dropdown-wrapperو برای ایجاد پس زمینه morphing dropdown استفاده می شود. افزودن سبک در...

  ایجاد ساختار ساختار HTML بسیار ساده است: یک لیست مرتب از اقلام، پیچیده را به یک <nav>عنصر. <nav> <ol class="cd-breadcrumb"> <li><a href="#0">Home</a></li> <li><a href="#0">Gallery</a></li> <li><a href="#0">Web</a></li> <li class="current"><em>Project</em></li> </ol> </nav> افزودن سبک و دستورالعمل ما 2 کلاس اصلی...

هنگامی که به توسعه وب و برنامه های تلفن همراه می آید، React انتخاب نهایی برای بسیاری از توسعه دهندگان و کسب و کار است. در Cubet، اولویت ما همواره کتابخانه جاوا اسکریپت است و برای ایجاد شگفتی با رابط کاربر React می باشد. که محبوب و کارآمد به نظر می رسد، React رتبه ستاره 88،588 با 1،167 همکاران از سال انتشار خود را 2013 تا کنون است. چرا در میان تکنسین ها در عرصه توسعه نرم افزار دوست داشتنی...

ایجاد ساختار HTML در 2 اصلی ساختار <div> با کلاس ( .cd-slider-wrapperو .cd-item-info) - اولی مربوط به گالری عکس و دوم اطلاعات محصول (عنوان، دکمه عمل ..) - پیچیده در داخل یک section.cd-single-item. محتوای باقی مانده در یک .cd-contentبخش جداگانه وارد شده است . <section class="cd-single-item"> <div class="cd-slider-wrapper"> <ul class="cd-slider"> <li class="selected"><img src="img/img-1.jpg"...