(Lynda.com) Создание адаптивного дизайна одностраничного сайта c PostCSS на русском
Building a Responsive Single-Page Design with PostCSS
with Ray Villalobos
Научитесь создавать адаптивные одностраничные сайты с CSS пост-процессором - PostCSS, который расширяет возможности CSS посредством JavaScript. Шаг за шагом в этом курсе, взяв готовую разметку - добавим стили, анимацию и адаптивную навигацию. Такую комбинацию, существующую в большинстве одностраничных динамических сайтов, стало намного быстрее и проще реализовать с PostCSS. По ходу курса Ray Villalobos расскажет о применении некоторых полезных плагинов, как правильно внедрить PostCSS в рабочий процесс на основе Gulp и покажет техники создания более отзывчивых макетов с использованием Flexbox
Продолжительность курса 2ч 23м
Уровень Intermediate
Скрытое содержимое.
Building a Responsive Single-Page Design with PostCSS
with Ray Villalobos
Научитесь создавать адаптивные одностраничные сайты с CSS пост-процессором - PostCSS, который расширяет возможности CSS посредством JavaScript. Шаг за шагом в этом курсе, взяв готовую разметку - добавим стили, анимацию и адаптивную навигацию. Такую комбинацию, существующую в большинстве одностраничных динамических сайтов, стало намного быстрее и проще реализовать с PostCSS. По ходу курса Ray Villalobos расскажет о применении некоторых полезных плагинов, как правильно внедрить PostCSS в рабочий процесс на основе Gulp и покажет техники создания более отзывчивых макетов с использованием Flexbox
Продолжительность курса 2ч 23м
Уровень Intermediate
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
1m 22s
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
1m 22s
Скрытое содержимое.