پیشنهاد فرادرس

ساخت طرح تک صفحه ای واکنش گرا با HTML و CSS و JavaScript

دسته بندی ها: آموزش طراحی وب ، آموزش HTML ، آموزش جی کوئری (JQuery) ، آموزش های لیندا (Lynda) ، آموزش Sass ، آموزش گیت

ساخت-طرح-تک-صفحه-ای-واکنش-گرا-با-html-و-css-و-javascript

دو مورد از مباحث مهمی که در در سال جاری در زمینه طراحی وب اهمیت زیادی پیدا کرده است طراحی واکنشگرا و طراحی تک صفحه ای می باشد.

در این دوره آموزشی از موسسه Lynda با نحوه ساخت یک وب سایت تک صفحه ای واکنشگرا با استفاده از HTML5 و CSS3 و JavaScript آشنا می شوید.

سرفصل های دوره آموزشی:

  • تجزیه و تحلیل پروژه
  • نصب و راه اندازی Git در Mac
  • نصب و راه اندازی به Git در PC
  • نصب و به روز رسانی Ruby
  • بررسی HTML
  • کار با قالب های Github
  • کار با Sass
  • ساختمان mixin ها
  • آماده سر صفحه
  • ایجاد شبکه های واکنش گرا با Susy
  • کار با عناصر Susy
  • استفاده از jQuery
  • اضافه کردن پاورقی
  • ایجاد یک انیمیشن Tween
  • برجسته آیتم های منو

سطح: متوسط مدت زمان: 4 ساعت و 58 دقیقه نویسنده: Ray Villalobosلیست سرفصل های دوره آموزشی:

Learn how to build dynamic, responsive single-page designs with HTML, JavaScript, and CSS. The website featured in this course combines docking navigation, columns that adjust without cluttering your site layout or HTML markup, and animated scrolling effects that respond to user direction. Author Ray Villalobos shows you how to build it. He starts with a lean, easy-to-read template, and then explains how to add the features that make single-page designs so great, with these four frameworks:

Compass, whose Sass mixins help you leverage CSS3 features like Flexbox Susy 2, the framework that "subtracts" the math from responsive grid design ScrollMagic, for adding "magical" scroll effects Breakpoint, which makes writing media queries in Sass a snap

But this course isn't just about the tools. It's a realistic project that epitomizes many of the design challenges website developers face in the real world. Start watching now and learn how to use HTML, jQuery, and CSS to build your own dynamic, deeply responsive designs.

Topics include:

Analyzing the project before you begin Creating basic styles Building your own Sass mixins Coding the navigation Making the navigation responsive, with grids Using a split layout Creating tween animations Controlling scenes with scrolling

Introduction 9m 19s

Welcome 1m 25s

What you should know before watching this course 1m 19s

Using the exercise files 6m 35s

1. Getting Started 54m 24s

Analyzing our project 7m 13s

Installing Git and Node on a Mac 2m 12s

Installing Git and Node on a PC 3m 3s

Installing and updating Ruby 3m 41s

Downloading dependencies 11m 50s

Analyzing our workflow 11m 49s

Examining your HTML 14m 36s

2. Organizing Your Sass 1h 10m

Working with Github templates 6m 55s

Organizing your Sass 7m 47s

Preparing your variables 11m 50s

Creating basic styles 9m 58s

Building your own mixins 7m 8s

Preparing your header 11m 34s

Coding the navigation 15m 47s

3. Creating Responsive Grids with Susy 1h 53m

Making your navigation responsive 11m 46s

Controlling media queries with Breakpoint 11m 2s

Using the Susy Gallery mixin 14m 26s

Designing a complex layout 8m 8s

Adjusting your layouts 8m 44s

Padding elements with Susy 10m 42s

Using jQuery for full screen and Compass flexbox features 7m 56s

Creating media queries outside your elements 9m 25s

Adding defaults to your background mixing 12m 49s

Using a split layout 7m 36s

Finishing your layouts 6m 16s

Adding a footer 4m 12s

4. Animating Your Layouts 48m 48s

Creating a tween animation 15m 17s

Pinning your navigation and smoothing scrolling 7m 43s

Highlighting menu items on scroll 8m 30s

Controlling scenes by scrolling 10m 52s

Adjusting for touch devices 3m 43s

Deploying to production 2m 43s

Conclusion 1m 38s

Next steps 1m 38s

عنوان دوره: Lynda - Building a Responsive Single-Page Design حجم فایل: 986MB

Lynda Building a Responsive Single-Page Design

پیشنهاد فرادرس

hamed در 1393/11/06 ساعت 17:57

سلام احسان جان، سایتت بی نهایت برای من مفید بوده
این آموزش کلا دانلود نمیشه، خطای پیدا نکردن سرور رو میده، یه نگاه می ندازی اوکیه من دانلودش کنم؟
ممنون ;)

مدیر در 1393/11/06 ساعت 18:42

لینک ها تست شد و مشکلی ندارند.