لطفا جهت اطلاع از آخرین دوره ها و اخبار سایت در
کانال تلگرام
عضو شوید.
آموزش ساخت یک سایت نمونه کارها Responsive
Building a Responsive Portfolio Site
نکته:
آخرین آپدیت رو دریافت میکنید حتی اگر این محتوا بروز نباشد.
نمونه ویدیوها:
توضیحات دوره:
نمونه کارهای عالی می تواند تفاوت بین فرود کار و واگذار شدن را ایجاد کند. این دوره مبتنی بر پروژه سریع و سرگرم کننده به شما نشان می دهد که چگونه از ابتدا تا انتها یک سایت نمونه کارها پاسخگو بسازید. نویسنده هیات مدیره جاستین سیلی نحوه برنامه ریزی وب سایت در فتوشاپ و تبدیل برنامه به یک سایت تک صفحه ای را نشان می دهد. ستون فقرات محرک نمونه کارها Skeleton خواهد بود ، یک چارچوب CSS بصری که شما خواهید آموخت چگونه از آن برای پروژه های خود استفاده کنید. در این راه ، نحوه کار با فونت های وب مانند فونت های Google و فونت های آیکون ، نحوه شروع قرار دادن محتوا در ظروف و نحوه سبک جلوه دادن سرصفحه ها ، تصاویر ، تایپوگرافی و حتی دکمه های شبکه های اجتماعی با برخی موارد را خواهید فهمید. CSS سفارشی ساده برای اطمینان از اینکه سایت شما برای موبایل آماده است ، یک جلوه سبک پاسخگو و برخی پرسشهای رسانه را اضافه کنید و یک بستر کامل و با کیفیت بالا برای به نمایش گذاشتن کارهای خود خواهید داشت.
موضوعات شامل:
برنامه ریزی و تنظیم طرح HTML li>
ایجاد شبکه های CSS پاسخگو li>
ترکیب فونت های وب و آیکون li>
ساخت یک طرح با شبکه اسکلت li>
یک ظاهر طراحی وب سایت li>
استفاده از jQuery برای جلوه های ساده جعبه سبک li>
تست پاسخگویی وب سایت li>
تنظیم درخواستهای رسانه li>
سرفصل ها و درس ها
مقدمه
Introduction
خوش آمدی
Welcome
نحوه استفاده از فایل های تمرینی
How to use exercise files
آنچه باید قبل از شروع بدانید
What you need to know before you begin
1. شروع کار
1. Getting Started
پروژه خود را برنامه ریزی کنید
Planning your project
چارچوب اسکلت را بارگیری کنید
Downloading the Skeleton framework
تنظیم سند HTML خود
Setting up your HTML document
اسناد CSS خود را تنظیم و پیوند دهید
Setting up and linking your CSS documents
فونت های Google را به پروژه خود اضافه کنید
Adding Google fonts to your project
فونت عالی را به پروژه خود اضافه کنید
Adding Font Awesome to your project
2. تخمگذار کار زمینی
2. Laying the Groundwork
درک چارچوب اسکلت
Understanding the Skeleton framework
طرح خود را با استفاده از شبکه Skeleton بسازید
Building your layout using the Skeleton grid
درج محتوا در ظروف خود
Inserting content into your containers
3. طراحی وب سایت شما
3. Styling Your Website
ساختن فهرست محتویات CSS
Building a CSS table of contents
عنوان سایت خود را طراحی کنید
Styling the header of your site
تعریف سبک های تایپوگرافی خود
Defining your typography styles
تنظیم سبک های خاص تصویر
Setting image-specific styles
ایجاد یک عنصر آرم CSS
Creating a CSS logo element
نمادهای آیکون رسانه های اجتماعی
Styling social media icons
پاورقی
Styling the footer
4- اضافه کردن جلوه Lightbox
4. Adding a Lightbox Effect
بارگیری با شکوه
Downloading Magnific Popup
پیوند دادن پرونده های سبد CSS و JavaScript
Linking the lightbox CSS and JavaScript files
افکت سبد را به HTML خود اضافه کنید
Adding the lightbox effect to your HTML
یک اثر بزرگنمایی به سبد اضافه می شود
Adding a zoom effect to the lightbox
5- پاسخگویی نهایی
5. Finalizing Responsiveness
پاسخگویی وب سایت خود را آزمایش کنید
Testing your website's responsiveness
جاستین سیلی بیش از 15 سال است که در زمینه های گرافیک و طراحی وب کار می کند و علاقه زیادی به آموزش و دسترسی آموزش به مردم در سراسر جهان دارد. تا به امروز بیش از 80 دوره آنلاین نویسنده است و تقریباً 250 ساعت مطالب را در بر می گیرد. جاستین سخنران عادی رویدادهایی مانند HOW Design LIVE ، NAB ، AIGA Design ، Creative Pro Week و Adobe MAX است.
نمایش نظرات