آموزش HTML و CSS: ساخت وب سایت های واکنش گرا برای مبتدیان
HTML & CSS: Building Responsive Websites For Beginners
نسخه به روز شده جدیدی از این کلاس در اینجا وجود دارد:
این کلاس برای هر کسی که ایده‌ای عالی برای وب‌سایت دارد یا فقط به یادگیری نحوه کدنویسی علاقه دارد، عالی است. این یک کلاس در سطح مبتدی است، بنابراین اگر سواد کامپیوتری اولیه و اتصال به اینترنت دارید، همه چیز آماده است. با سرعت خود یاد بگیرید
شما این کلاس را با مهارت‌هایی ترک خواهید کرد که می‌توانید وب‌سایت بسیار شیک، حرفه‌ای و واکنش‌گرای خود را ایجاد کنید.
آنچه خواهید آموخت
- HTML و اصول وب. شما با اصول اولیه ویرایش متن، سرفصل ها، تصاویر و پیوند بین صفحات شروع خواهید کرد.
- جداول، فرم ها و فریم ها. پس از یادگیری موارد ضروری، یاد خواهید گرفت که چگونه عناصر بیشتری مانند جداول، فرم‌ها و Iframes را به صفحات خود اضافه کنید.
- عناصر HTML5. شما کانتینرهای معنایی، فراداده و رسانه HTML 5 را به صفحات خود اضافه خواهید کرد.
- اصول CSS. شما از CSS برای ایجاد یک شیوه نامه استفاده خواهید کرد که به شما امکان می دهد محتویات صفحات خود را به طور روان تغییر دهید.
- طرح‌بندی صفحه ساختمان. شما با ستون می سازید و از مدل جعبه استفاده می کنید.
- موقعیت یابی و جن. شما از z-index و sprites برای ایجاد ویژگی های طرح بندی پیشرفته استفاده خواهید کرد.
- چیدمان پاسخگو. شما طراحی سایت واکنشگرا ایجاد خواهید کرد که به سایت شما امکان می دهد سبک و موقعیت محتوای خود را بر اساس اندازه دستگاهی که در آن مشاهده می شود تغییر دهد.
آنچه خواهید ساخت
گسترش در طول دوره چالش کد است. چالش‌های کد فرصت‌هایی برای شما هستند تا آنچه را که آموخته‌اید با کدنویسی به تنهایی تمرین کنید. یک پروژه پیوسته از چالش‌های کد ساخته می‌شود و با هر چالش، موارد بیشتری را به پروژه سایت شما اضافه می‌کند.
جزوات و منابع
برنامه‌های گسترده و مواد مرجع پیشنهادی برای ادامه یادگیری حتی پس از دوره به شما ارائه می‌شود.
دوره های بیشتر از این مربی در:
نسخه به روز شده جدیدی از این کلاس در اینجا وجود دارد:
وب سایت خود را با استفاده از HTML و CSS بسازید
اصول HTML و وب
- به دانشجویان خوش آمدید
از اینکه در کلاس من ثبت نام کردید متشکرم. امروز همه شما در حال ساختن تاریخ شخصی هستید. فکر می کنم متوجه خواهید شد که یادگیری یک مهارت خلاقانه و بسیار کاربردی مانند این می تواند کاملاً قدرتمند باشد! یادگیری ساخت صفحات وب درها را به روی امکانات بیشتری در زندگی شما باز می کند و محدودیت های ارتباط شما با جهان را افزایش می دهد.
انگیزه
می‌خواهم همه را تشویق کنم که از کلاس لذت ببرند و از یادگیری لذت ببرند و همچنین خود را ناخدای مطمئن کشتی خود بدانند که در دریاهای رمز حرکت می‌کند. هرگز به خود اجازه ندهید که ناامید شوید زیرا همه ما روزهایی داریم که کد خراب می شود و در نهایت شما آن را دریافت خواهید کرد! دانش‌آموزانی که در کلاس‌های من دورتر بوده‌اند، همیشه بیشترین اعتماد به نفس را داشتند.
در اینجا نمونه ای از وب سایت تمرین مداوم است که به شما آموزش می دهم تا پایان کلاس بسازید:
یادگیری با سرعت
بیش از 11 ساعت ویدیوی آموزشی وجود دارد! وای؟ پیشنهاد می‌کنم در بخش‌های کوچکی مانند انجام درس 2 درس 2. HTML و Web Fundamentals و سپس درس 3. جدول، فرم‌ها، و Iframes در روز دیگر یاد بگیرید. انجام حدود 2 درس در هفته، سایت شما را تنها در 4 هفته راه اندازی می کند. اگر مشغله کاری شما این سرعت را نمی دهد، مشکلی نیست، به طور نامحدود به مطالب دوره دسترسی خواهید داشت. بنابراین شما می توانید با سرعت خود یاد بگیرید!
آیا می‌دانستید که مغز ما در واقع بعد از اینکه فکر نمی‌کنیم به یادگیری چیزها ادامه می‌دهد... این حافظه تداعی نامیده می‌شود. مهم است که به مغز خود زمان بدهید تا مطالب را جذب کند و از این رو بتواند بین موضوعات از یک روز به روز دیگر ارتباط برقرار کند. اگر احساس خستگی می کنید، استراحت کنید. همچنین پیشنهاد می کنم هر روز چند مورد از روزهای قبل را مرور کنید. تایپ کردن کد ما که از روز اول در روز پنجم یاد گرفتیم به شما کمک می کند آن را در حافظه بلند مدت ذخیره کنید.
مشاهده نکات
اگر متوجه شدید که خواندن کد هنگام تماشای ویدیوها دشوار است، می‌توانید تنظیمات کیفیت را در منوی پایین در YouTube به HD تغییر دهید. من از همه چیز با وضوح بالا عکس گرفتم، بنابراین باید وضوح عالی را حتی در تمام صفحه داشته باشید.
آرامش
لباس پیشنهادی برای این کلاس لباس خواب شماست. آزاد، گرم و راحت فکر کنید. اطمینان حاصل کنید که نوشیدنی مورد علاقه خود را در دسترس داشته باشید و سعی کنید زمانی را انتخاب کنید که احساس عجله نکنید. همچنین سعی کنید بین ویدیوها حرکت کنید.
ساعت کاری
پخش زنده ساعات اداری از این دوره در حال حاضر حذف شده است زیرا اکنون یک دوره آموزشی خودآموز است. همچنان می‌توانید کارهای ضبط شده بیش از 16 ساعت از ساعات اداری از پیش ضبط شده را از این فهرست پخش YouTube تماشا کنید:
هر چند وقت یکبار همچنان به پرسش‌ها در حوزه بحث پرسش و پاسخ پاسخ خواهم داد. دانش‌آموزان دیگر نیز می‌توانند در آنجا به سؤالات پاسخ دهند.
چالش های کد
چالش‌های کد شما را قدم به قدم به سمت ساخت یک پروژه وب‌سایت راهنمایی می‌کند. با خیال راحت کد خود را آپلود کنید (به ویدیوی 1.1.7 مراجعه کنید به انتشار سایت) و دامنه (مثلا: yoursite.com) را به عنوان پیوندی در صفحه پروژه خود برای دریافت بازخورد از همتایان خود ارائه دهید. حتماً از پروژه‌های دیگر نیز بازدید کنید تا بازخورد بدهید و ببینید همکلاسی‌های شما در حال ساختن چه چیزی هستند.
عیب یابی
در طول مسیر ممکن است کد شما در بار اول درست کار نکند. در زیر چند پیشنهاد برای حل سریع و آسان این مشکلات ارائه شده است:
مطمئن شوید که کد و CSS خود را برای بررسی اشتباهات تایپی و استفاده نادرست از زبان تأیید کرده‌اید.
سعی کنید کد خود را با کد تکمیل‌شده برای مثال‌های من که در ناحیه منبع زیر هر درس یافت می‌شود، مقایسه کنید.
منطقه پرسش و پاسخ را بررسی کنید تا ببینید آیا کسی مشکل مشابهی را پست کرده است تا ببینید چگونه حل شده است.
اگر مشکل از قبل در ناحیه پرسش و پاسخ وجود ندارد، با استفاده از عنوانی که به وضوح مشکل شما را مشخص می‌کند، مشکل خود را پست کنید. یک پاراگراف توصیفی در مورد این موضوع و آنچه قبلاً امتحان کرده‌اید اضافه کنید. مهمتر از همه، کد سایت خود را آپلود کنید و یک لینک به کد خود در پست سوال خود ارسال کنید تا من و دیگران بتوانیم کد واقعی را ببینیم و به عیب یابی کمک کنیم. بدون پیوند به کد برای دیدن کد واقعی، به جای حل مشکل شما فقط می توانم حدس بزنم. این پیوند به کد می‌تواند از دامنه شخصی شما باشد یا می‌توانید کد خود را در سایت‌هایی کپی و جای‌گذاری کنید: و آدرس اینترنتی داده‌شده را در قسمت بحث ذخیره و جای‌گذاری کنید.
برای حل مشکلات خود در خارج از این انجمن کلاسی، فرآیند 4 را در سایت بحث جهانی برای سؤالات کد تکرار کنید. همچنین سعی کنید پیام یا مشکل را google کنید. صبور باشید تا در نهایت متوجه شوید.
اکنون بیایید شروع کنیم!
- رایانه خود را راه اندازی کنید
برنامه های رایگان زیر را در رایانه خود دانلود و نصب کنید:
ویرایشگر کد:
(الزامی)
اگر به دلایلی Sublime Text با سیستم شما سازگار نیست، می توانید ویرایشگر کد دیگری مانند را دانلود کنید (فقط اگر متن sublime برای شما کار نمی کند)، ویرایشگرهای دیگری که باید به خوبی کار کنند عبارتند از: TextMate، Text Wrangler ، VIM، Notepad++، Coda و Komodo Edit.
مرورگر:
(پیشنهاد شده)
همچنین پیشنهاد می‌شود مرورگرهای دیگری مانند IE، FireFox، Opera و Safari را برای تست مرورگر بارگیری کنید. من از Chrome در نمونه های خود برای این دوره استفاده خواهم کرد.
کارخواه FTP:
(الزامی)
سایر برنامه های کاربردی FTP قابل قبول عبارتند از: Cyber Duck، Transmit، WinSCP. من از Filezilla برای همه نمونه های دوره استفاده خواهم کرد.
سرور محلی:
برای Mac (اختیاری) یا WAMP برای Windows (اختیاری) یا LAMP برای Linux (اختیاری)
من از این فقط برای یک مثال در پایان دوره استفاده می‌کنم تا یک اسکریپت ایمیل PHP و برخی تست‌های طراحی واکنشگرا را آزمایش کنم. برای اکثر توسعه‌های front-end ضروری نیست.
ویرایشگر/فشرده سازی تصویر:
(پیشنهاد شده) یا *GIMP و (پیشنهاد شده) *اکثر ساخت‌های GIMP از قبل شامل افزونه Save for Web می‌شوند.
مبدل ویدیو:
(اختیاری)
ویرایشگر ویدئو:
(اختیاری) یا MPEG Streamclip (اختیاری)
ویرایشگر/تبدیل صدا:
(اختیاری)
میزبانی دامنه و سایت:
اگر می‌خواهید در پایان کلاس وب‌سایت شخصی خود را به صورت آنلاین داشته باشید و قبلاً دامنه و میزبانی وب ندارید، می‌توانید در یکی از این ارائه‌دهندگان پیشنهادی زیر برای برخی از آنها ثبت‌نام کنید و قیمت‌ها را مقایسه کنید:
یا dreamhost.com یا (پیشنهاد شده)
اطمینان حاصل کنید که جزئیات FTP خود را مانند نشانی اینترنتی میزبان FTP، ورود به سیستم کاربر و رمز عبور برای استفاده در آینده یادداشت کنید.
کتاب‌های پیشنهادی برای تکمیل این دوره:
(اختیاری)
(اختیاری)
- دروس ویدیویی را تماشا کنید
- (همچنین در ناحیه منابع اضافی قرار دارد)
- سپس ویدیوها را در قسمت Video Lessons تماشا کنید. در صورت تمایل می توانید با استفاده از کد شروع ارائه شده همراه باشید.
- (همچنین در ناحیه منابع اضافی قرار دارد)
- وب سایت خود را راه اندازی کنید
ساخت صفحات سایت در ویدیوهای درس سرگرم کننده بود، اما اکنون زمان آن رسیده است که آنچه را که یاد گرفته اید در معرض آزمایش قرار دهید.
یک پروژه وب سایت شخصی بسازید
- ساختار فایل و پوشه مناسب
- حداقل 3 صفحه html مختلف.
- قالب بندی متن در اندازه ها و عنوان های مختلف
- حداقل 1 تصویر
- پیوندهای بین صفحات
- پروژه خود را اعتبار سنجی کنید
از وب سایت زیر برای تأیید اعتبار پروژه خود استفاده کنید:
و هر گونه خطایی را که اعتباردهنده ممکن است تا زمانی که اعتبار سنجی سپری شود برطرف کند.
- پیشرفت خود را به اشتراک بگذارید
سایت خود را آپلود کنید و آدرس اینترنتی را در صفحه پروژه خود پست کنید تا دیگران بتوانند آن را برای ارائه بازخورد مشاهده کنند.
پیامی در صفحه پروژه خود بگذارید که این چالش را تکمیل کرده اید. در مورد مشکلاتی که ممکن است داشته اید و نحوه حل آنها صحبت کنید.
موفقیت اولیه پروژه خود را به اشتراک می گذارد:
جداول، فرم‌ها و فریم‌ها
- دروس ویدیویی را تماشا کنید
- (همچنین در ناحیه منابع اضافی قرار دارد)
- سپس ویدیوها را در قسمت Video Lessons تماشا کنید. در صورت تمایل می توانید با استفاده از کد شروع ارائه شده همراه باشید.
- (همچنین در ناحیه منابع اضافی قرار دارد)
- یک جدول، فرم و iframe به پروژه خود اضافه کنید
اجازه می دهیم به پروژه وب سایت شخصی شما برگردیم و موارد زیر را اضافه کنیم:
- جدول
- فرم
- Iframe (از نقشه های گوگل یا یوتیوب)
- پروژه خود را اعتبار سنجی کنید
مطمئن شوید که صفحات هنوز اعتبار دارند* در:
*شما ممکن است در Google Map Iframe یا هر کد تعبیه شده Iframe برای وب‌سایت‌های شخص ثالث، خطاهای اعتبارسنجی را دریافت کنید. این امر رایج است و در این مرحله در کلاس جای نگرانی نیست. اگر می‌خواهید این مورد را اصلاح کنید، می‌توانید ویژگی‌های html نامعتبر ( frameborder="0" scrolling="no" marginheight="0" marginwidth="0" ) را حذف کنید و اثر آنها را با این افزونه به کد CSS خود (iframe { border) جایگزین کنید. : 0؛ حاشیه: 0؛ سرریز: پنهان؛ } ). از آنجایی که ما هنوز CSS را یاد نگرفته‌ایم، پس از تکمیل چند تمرین و چالش بعدی، این کار منطقی‌تر خواهد بود.
- پیشرفت خود را به اشتراک بگذارید
بعد از آپلود فایل‌ها، پیامی در صفحه پروژه خود بگذارید که این چالش را تکمیل کرده‌اید. پیشرفت خود را یادداشت کنید و در مورد مسائلی که باید حل می‌کردید صحبت کنید.
عناصر HTML5
- دروس ویدیویی را تماشا کنید
- (همچنین در ناحیه منابع اضافی قرار دارد)
- سپس ویدیوها را در قسمت Video Lessons تماشا کنید. در صورت تمایل می توانید با استفاده از کد شروع ارائه شده همراه باشید.
- (همچنین در ناحیه منابع اضافی قرار دارد)
- قالب بندی معنایی و رسانه اضافه کنید
عناصر زیر را به پروژه فعلی خود اضافه کنید:
- 1 عنصر ویدیویی یا صوتی HTML5 جاسازی شده
- متا کلمات کلیدی و توضیحات برای همه صفحات شما.
- پروژه خود را اعتبار سنجی کنید
مطمئن شوید که صفحات همچنان در:
اعتبارسنجی می‌شوند - پیشرفت خود را به اشتراک بگذارید
پیامی در صفحه پروژه خود بگذارید مبنی بر اینکه این مرحله را انجام داده اید. پیشرفت خود را یادداشت کنید و در مورد مشکلاتی که حل کرده اید صحبت کنید.
یک ویدیوی اسنوبورد را به صفحه خود اضافه می کند:
اصول CSS
- دروس ویدیویی را تماشا کنید
- (همچنین در ناحیه منابع اضافی قرار دارد)
- سپس ویدیوها را در قسمت Video Lessons تماشا کنید. در صورت تمایل می توانید با استفاده از کد شروع ارائه شده همراه باشید.
- (همچنین در ناحیه منابع اضافی قرار دارد)
- به سایت خود سبک دهید
با استفاده از یک شیوه نامه خارجی، به صفحات خود با استفاده از انتخابگرهای زیر استایل دهید:
- انتخابگر نوع (عنصر)
- انتخابگر کلاس
- انتخابگر شناسه
- انتخابگر نزولی
- انتخابگر کلاس Psuedo (پیوندهای سبک)
- پروژه خود را اعتبار سنجی کنید
مطمئن شوید که صفحات هنوز اعتبار دارند.
HTML را در:
بررسی کنیدCSS را در: http://jigsaw.w3.org/css-validator/
بررسی کنید - پیشرفت خود را به اشتراک بگذارید
پیامی در صفحه پروژه خود بگذارید که این چالش را تکمیل کرده اید. پیشرفت خود را یادداشت کنید و در مورد مشکلاتی که حل کرده اید صحبت کنید.
طرح‌بندی صفحه ساختمان
- دروس ویدیویی را تماشا کنید
- (همچنین در ناحیه منابع اضافی قرار دارد)
- سپس ویدیوها را در قسمت Video Lessons تماشا کنید. در صورت تمایل می توانید با استفاده از کد شروع ارائه شده همراه باشید.
- (همچنین در ناحیه منابع اضافی قرار دارد)
- محتوای صفحه خود را در موقعیت قرار دهید
فاصله عناصر را در صفحات خود تنظیم کنید و محتوای صفحه خود را با استفاده از موقعیت شناور برای ایجاد ساختار ستونی، قرار دهید.
از کلاس clear:both و clearfix برای حل مشکلات قالب بندی که با آنها برخورد می کنید استفاده کنید. بیشتر از همه صبور باشید، استفاده از موقعیت شناور برای اولین بار می تواند ناامید کننده باشد، اما آن را دریافت خواهید کرد!
- پروژه خود را اعتبار سنجی کنید
مطمئن شوید که صفحات هنوز اعتبار دارند.
HTML را در:
بررسی کنیدCSS را در: http://jigsaw.w3.org/css-validator/
بررسی کنید - پیشرفت خود را به اشتراک بگذارید
پیامی در صفحه پروژه خود بگذارید مبنی بر اینکه این مرحله را انجام داده اید. پیشرفت خود را یادداشت کنید و در مورد مشکلاتی که حل کرده اید صحبت کنید.
موقعیت یابی و اسپرایت ها
- دروس ویدیویی را تماشا کنید
- (همچنین در ناحیه منابع اضافی قرار دارد)
- سپس ویدیوها را در قسمت Video Lessons تماشا کنید. در صورت تمایل می توانید با استفاده از کد شروع ارائه شده همراه باشید.
- (همچنین در ناحیه منابع اضافی قرار دارد)
- از موقعیت یابی پیشرفته استفاده کنید
حداقل یکی از سبک‌های موقعیت‌یابی زیر را به طرح‌بندی خود اضافه کنید:
- مطلق
- نسبی
- رفع شد
به صورت اختیاری، چند تصویر rollover sprite اضافه کنید.
- پروژه خود را اعتبار سنجی کنید
مطمئن شوید که صفحات هنوز اعتبار دارند.
HTML را در:
بررسی کنیدCSS را در:
بررسی کنید - پیشرفت خود را به اشتراک بگذارید
پیامی در صفحه پروژه خود بگذارید که این چالش را تکمیل کرده اید. پیشرفت خود را یادداشت کنید و در مورد مشکلاتی که حل کرده اید صحبت کنید.
چیدمان پاسخگو
- دروس ویدیویی را تماشا کنید
- (همچنین در ناحیه منابع اضافی قرار دارد)
- سپس ویدیوها را در قسمت Video Lessons تماشا کنید. در صورت تمایل می توانید با استفاده از کد شروع ارائه شده همراه باشید.
- (همچنین در ناحیه منابع اضافی قرار دارد)
- طراحی طرح بندی پاسخگو بسازید
از پرسش‌های رسانه‌ای برای تنظیم سبک‌ها برای اندازه‌های دستگاه زیر استفاده کنید:
- رومیزی
- تبلت
- موبایل
در حین استایل‌سازی، می‌توانید نتایج خود را بررسی کرده و با استفاده از:
آن را تغییر دهیدیا بهتر از آن، روش مدرن آزمایش درخواست‌های رسانه شما، استفاده از ابزارهای برنامه‌نویس Chrome است. این ویدیو را تماشا کنید: https://www.youtube.com/watch?v=M482RhQ8i1Q
که در فهرست پخش ویدیوهای این دوره وجود ندارد. - پروژه خود را اعتبار سنجی کنید
مطمئن شوید که صفحات هنوز اعتبار دارند.
HTML را در:
بررسی کنیدCSS را در:
بررسی کنید - پیشرفت خود را به اشتراک بگذارید
پیامی در صفحه پروژه خود بگذارید که این چالش را تکمیل کرده اید. پیشرفت خود را یادداشت کنید و در مورد مشکلاتی که حل کرده اید صحبت کنید.
لمس پایانی و به بعد
- دروس ویدیویی را تماشا کنید
- ابتدا تمام دروس ویدیویی را تماشا کنید. هیچ فایل vode شروعی برای این واحد وجود ندارد.
- سپس در صورت تمایل می توانید کد تکمیل شده نهایی را بررسی کنید.
- ابتدا تمام دروس ویدیویی را تماشا کنید. هیچ فایل vode شروعی برای این واحد وجود ندارد.
- کارهای نهایی را اضافه کنید
کارهای نهایی را انجام دهید و سایت های خود را با استفاده از FTP در دامنه سرور میزبان مورد نظر خود آپلود کنید.
- پیشرفت خود را به اشتراک بگذارید
به پروژه خود در صفحه پروژه خود پیوند دهید تا دیگران بتوانند کار شما را نقد کرده و بازخورد ارائه کنند. سایت های همکلاسی های خود را بررسی کنید و در مورد حداقل سه سایت دانش آموزان دیگر بازخورد بدهید.
- جشن بگیرید
کار عالی! جشن بگیریم بالای نوشیدنی مورد علاقه خود را بریزید و به پشت خود ضربه بزنید! شما رسماً یک توسعه دهنده وب فرانت اند شده اید! تبریک می گویم!
اکنون چه باید کرد؟
منابع اضافی
-
منابع درس ویدیویی
چگونه ویندوز را از حالت فشرده خارج کنیم:
چگونه مک را از حالت فشرده خارج کنیم:
ذخیره (در ویرایشگر):
Mac: Cmd+s
Windows: Ctrl+sبارگیری مجدد (در مرورگر):
Mac: Cmd+r
Windows: Ctrl+rراهنمای SEO:
آموزش HTML:
تصاویر خود را با استفاده از ذخیره برای وب فشرده کنید
فتوشاپ:
GIMP:
دستورات تقسیم صفحه:
Mac: Command + Option + 2
Windows: Alt + Shift + 2لیست کدهای زبان ISO:
از کدهای 639-1 که فقط دو حرف هستند استفاده کنید.ویژگی charset به چه معناست:
W3C Validator:
Living Validator: http://validator.nu/FileZilla:
منابع درس ویدیویی
فرم های ویدئو
در زمان ضبط این ویژگی متغیر نگهدارنده در IE9 پشتیبانی نمی شود! دانلود کنید و به Modernizer and Placeholders.js پیوند دهید تا این کار را انجام دهید: و اینجا: http://jamesallardice.github.io/Place...
این کد را برای شما در کد نهایی تکمیل شده درج می کنم.
یا نام، ایمیل، تلفن و پیام را خارج از ورودی‌ها تایپ کنید تا کاربران در مرورگرهای قدیمی بتوانند ببینند در هر فیلد چه چیزی را تایپ کنند.
کد ارسال فرم به ایمیل در زیر پوشش داده شده است. یک ویدیوی بعدی در واحد 8: افزودن اسکریپت PHP Mailer.-
منابع درس ویدیویی
همه برچسب ها:
برچسب های معنایی:
نمای کلی HTML5:
ویدیو HTML5:
تبدیل ویدیو به هر فرمتی:
وب سایت لری هیل (از نمونه ویدیو):
OGV GUI MAC:
MP4 GUI MAC:
پخش کننده جاوا اسکریپت HTML5 Skins:
MP3 و OGG GUI MAC:
Javascript (پشتیبانی از jQuery) بازیکنان:
نرمال کردن CSS:
اطلاعات در مورد اصلاح IE HTML5: http://code.google.com/p/html5shiv/سایت اطلاعات HTML5:
راهنمای SEO Google:
اطلاعات بیشتر در مورد متا تگ ها:
منابع درس ویدیویی
انتخاب کنندگان CSS:
ویژگی CSS (مرجع):
برنامه ریزی رنگ کولر:
آموزش استفاده از فونت های خود:
فونت های وب Google:
بیشتر: http://www.freewebfonts.net/لیست بسیاری از انتخابگرهای psuedo دیگر:
تست‌های سازگاری:
آموزش ابزارهای توسعه دهنده Chrome School School:
ابزارهای توسعه دهنده Safari:
ابزارهای توسعه دهنده فایرفاکس: http://youtu.be/VcuQ2Bn5bTA
اطلاعات بیشتر در مورد ابزارهای توسعه دهنده Chrome:-
منابع درس ویدیویی
موقعیت یابی را در 10 مرحله بیاموزید:
استفاده از نمایشگر درون خطی:
اندازه جعبه CSS:
کاوش در CSS3:
سلب مسئولیت: من مسئولیتی در قبال آسیبی که با آزمایش تکنیک‌های اسکن ذکر شده در ویدئو به اسکنر شما وارد می‌شود نیستمشناور:
Moire در شناور: http://www.tizag.com/cssT/float.php
Clearfix:
کد نمونه ویدیو: http://tinker.io/cb346ویرایشگر گرادیان CSS:
منابع درس ویدیویی
CSS Positioning 101:
تصاویر Sprite:
بازگردانی اولیه اسپرایت:
-
منابع درس ویدیویی
پرسش‌های رسانه:
کتاب:
تست پاسخگو Screenfly:
سایت دیگری مانند Screenfly: http://responsinator.com/
نصب MAMP در Mac:
تعیین اینکه آیا ویندوز شما 32 یا 64 بیتی است: http://support.microsoft.com/kb/827218
نصب WAMP در ویندوز:Modernizr (مرورگرهای قدیمی را با HTML5 سازگار می کند، از جمله پشتیبانی از پرس و جو رسانه CSS):
پرسمان‌های رسانه CSS3 از Google CDN:
درباره نمای متا:
پیوند به‌روزرسانی شده به اصلاح تغییر جهت‌یابی ios:
آموزش:
منابع درس ویدیویی
عادی سازی CSS:
CSS بازنشانی:
ورق دیگ HTML5:
Bootstrap:
Modernizr:
شبکه 960:
دوره‌های بیشتر از این مربی در Code Pyjamas:
درس ها Lessons
-
قالب بندی متن Text Formatting
-
متمرکز کردن محتوا Centering Content
-
تکنیک های چیدمان پاسخگو Responsive Layout Techniques
-
جداول Tables
-
تنظیم یک برگه سبک خارجی Setting up an External Style Sheet
-
آماده سازی برای HTML5 Prep for HTML5
-
بخش های اصلی یک ظاهر طراحی شده Styling Main Sections
-
تریلر Trailer
-
اعتبار سنجی HTML Validating HTML
-
HTML را برای طرح بندی پاسخگو آماده کنید Prep HTML for Responsive Layout
-
اضافه کردن اسکریپت PHP Mailer Adding PHP Mailer Script
-
آی فریم ها Iframes
-
ساختار سند Document Structure
-
پیوندها Links
-
مخفف فونت Font Shorthand
-
بخش جزئیات استایل Styling Details Section
-
سیستم های رنگی Color Systems
-
اعمال سایه جعبه Applying Box Shadow
-
انتشارات سایت Site Publishing
-
سبک دادن به نوار رسانه های اجتماعی Styling the Social Media Bar
-
استفاده از CSS3 Media Queries Applying CSS3 Media Queries
-
تصاویر Images
-
لایه بندی Z-Index Z-Index Layering
-
سبک دادن به لوگو Styling the Logo
-
تشکیل می دهد Forms
-
اعمال ویژگی های جعبه Applying Box Properties
-
ویدیو Video
-
میزهای سبک Styling Tables
-
چیدمان آماده سازی Prep Layout
-
انتخابگر شناسه ID Selector
-
عناصر معنایی HTML5 HTML5 Semantic Elements
-
انتخابگر کلاس Class Selector
-
انتخاب کننده نسل Descendant Selector
-
ایجاد ساختار ستونی Creating Column Structure
-
ابزارهای توسعه دهنده (قسمت 2) Developer Tools (part 2)
-
سبک جلوه دادن Styling the Front-end
-
شروع شدن Getting Started
-
مدل جعبه Box Model
-
ناوبری سبک Styling Navigation
-
بازنشانی، سیستم‌های شبکه، و الگوها Resets, Grid Systems, & Templates
-
فراداده Metadata
-
اعمال گرادیان Applying Gradients
-
نمایش عنصر Element Display
-
یک ظاهر طراحی شده آی فریم Styling Iframe
-
فرم های یک ظاهر طراحی شده Styling Forms
-
شناور Floating
-
راه اندازی تست پاسخگوی محلی Setting Up Local Responsive Testing
-
تکنیک های موقعیت یابی Positioning Techniques
-
ابزارهای توسعه دهنده (قسمت 1) Developer Tools (part 1)
-
اسپرایت رولوورز Sprite Rollovers
-
فونت های وب Web Fonts
-
انتخابگر سوسوی Psuedo Selector
-
مبانی وب Web Fundamentals
-
زیبایی شناسی جعبه Box Aesthetics
-
معرفی جداول، فرم ها و فریم ها Introducing Tables, Forms, & Iframes
-
انتخابگر تایپ Type Selector
Skillshare (اسکیل شیر)
اسکیل‌شر یک پلتفرم آموزشی آنلاین است که به میلیون‌ها افراد در سراسر جهان امکان یادگیری مهارت‌های جدید را فراهم می‌کند. این پلتفرم با ارائه دوره‌های متنوع در زمینه‌هایی از جمله هنر و طراحی، فناوری، کسب و کار، و زندگی موفق، به کاربران خود این امکان را می‌دهد تا به صورت آنلاین به یادگیری بپردازند.
یکی از ویژگی‌های منحصر به فرد سکیل‌شر، ارائه دوره‌های تدریس شده توسط صاحبان مهارت‌ها و افراد موفق در زمینه‌های مختلف است. این امر باعث می‌شود که کاربران از تجربیات و دانش عملی افرادی که در حوزه‌های مورد نظرشان موفق عمل کرده‌اند، بهره‌مند شوند و بهترین اطلاعات را برای بهبود مهارت‌های خود دریافت کنند. به این ترتیب، سکیل‌شر نه تنها یک پلتفرم آموزشی است، بلکه یک جامعه آموزشی است که افراد را به اشتراک گذاری دانش و تجربیات تشویق می‌کند و به آنها کمک می‌کند تا در مسیر پیشرفت و موفقیت خود ادامه دهند.
https://donyad.com/d/903595
Jonathan Grover
توسعه دهنده/طراح/فناوری خلاق
من یک طراح وب، هنرمند دیجیتال ملی شناخته شده با بیش از پنج سال تجربه تدریس در برنامه نویسی خلاق، تعامل، توسعه وب، مدارهای الکترونیکی DIY هستم. من مدرک BFA در طراحی گرافیک از دانشگاه آکرون و MFA در فناوری طراحی از موسسه هنر سانفرانسیسکو دریافت کردم. من در مؤسسه هنر سانفرانسیسکو، مؤسسه هنر پیتسبورگ، بخش سوم و مجمع عمومی سمت های آموزشی داشته ام. در حال حاضر، من به عنوان عضو هیئت علمی در مدرسه Flatiron، یک برنامه توسعه وب سبک همهجانبه مبتنی بر نیویورک، خدمت می کنم. علایق من شامل ایجاد آثار هنری تعاملی، برنامه نویسی، ساختن اشیا، حیوانات، سفر، و غواصی است.
نمایش نظرات