Lynda_Building_a_Responsive_Single-Page_Design_with_PostCS

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

این دوره ساخت وب سایت تک صفحه ای واکنش گرا را با PostCS آموزش می دهد. در این آموزش تصویری کار با HTML و Sass ، ایجاد متغیرها ، ایجاد سربرگ با Flexbox و متحرک سازی عناصر صفحه را با PostCSS می آموزید.

این دوره آموزشی محصول موسسهLynda است.

سرفصل های این دوره:

  • نگاهی به طراحی تک صفحه ای واکنشگرا
  • نشانه گذاری HTML برای طراحی تک صفحه
  • کار با Gulp.js
  • ایجاد سبک های پایه
  • ماژول یک ظاهر طراحی شده
  • استفاده از Flexbox برای ایجاد یک طرح برای هدر و یا ناوبری
  • یک ناوبری پاسخگو
  • ایجاد سبک های بخش به اشتراک گذاشتن صفحه
  • پس زمینه کنترل و طرح بندی صفحه
  • استفاده از انیمیشن های CSS به طور منظم برای ایجاد یک اسلاید تاثیر گذار
  • استفاده از تحولات زوم در عناصر
  • ایجاد انیمیشن های مبتنی بر فریم کلیدی با استفاده از کتابخانه Animate.css
  • و …

عنوان دوره: Lynda Building a Responsive Single-Page Design with PostCS

مدت دوره: 2 ساعت و 23 دقیقه

نویسنده: Ray Villalobos


توضیحات:

Lynda Building a Responsive Single-Page Design with PostCS

Ray Villalobos
2h 23m
Intermediate

Learn how to create responsive single-page websites with PostCSS, the CSS post-processor engine that extends the power of CSS through JavaScript. These step-by-step instructions take existing HTML markup and add style, animation, and responsive navigation. This combination allows for dynamic one-page sites'a popular design that's now even faster and easier to create with PostCSS. Along the way, Ray Villalobos introduces some handy plugins, tips for integrating PostCSS into a Gulp-based workflow, and techniques for making layouts more responsive with Flexbox.
Topics include:
Structuring the HTML markup for a single-page design
Using PreCSS Sass-like imports in PostCSS
Creating Sass-like variables with PreCSS
Building styles
Creating a layout for the header and navigation with Flexbox
Creating and styling sections
Animating page elements with PostCSS

Introduction
7m 6s
Welcome
1m 17s
What you should know before watching this course
1m 3s
Using the exercises for this course
4m 46s
1. Getting Started
19m 2s
Looking at our single-page responsive design
3m 13s
HTML markup for the single-page design
8m 11s
Learn to work with a Gulp.js workflow
7m 38s
2. Creating Base Styles
25m 30s
Use PreCSS Sass-like imports in PostCSS
3m 21s
Create Sass-like variables with PreCSS
6m 26s
Build the most important CSS styles
7m 43s
How mixins are different with PreCSS than with Sass
8m 0s
3. Styling Modules
31m 28s
Use Flexbox to create a layout for our header or navigation
7m 58s
Make a navigation responsive
8m 49s
Use color functions to help create a footer
7m 36s
Create shared section styles
7m 5s
4. Creating Sections
42m 27s
Create fullscreen backgrounds and controlling layouts
7m 58s
Use calc() function for simple calculations in CSS
13m 22s
When to create custom variables for your colors with PostCSS
5m 39s
Create the sections styles
15m 28s
5. Animating with PostCSS
16m 12s
Use regular CSS animations to create an slide-in effect
7m 37s
Use transformations to zoom in elements
2m 41s
Make keyframe-based animations using the Animate.css library
5m 54s
Goodbye
1m 22s
Next steps