Responsive Web Design
In this course you will learn to create mobile first web interfaces and responsive pages that adapt their layout and look great in any device.
Learn how to build your own cross browser CSS libraries for your web projects working with the most up-to-date standards, tools and practices. Write modular reusable CSS and create a custom build workflow to produce minified, high-performing reusable and scalable solutions through good assets management and CSS processing and modularization using Flexbox, Post-CSS, Sass syntax, the BEM methodology and CSS-Modules.
This course has a lot of emphasis on hands-on approach with a close accompanying labs.
- Understand the use of responsive design
- Design responsive websites for Web & Mobile
- Get familiar with existing CSS Frameworks Grids like Bootstrap
- Learn CSS latest responsive standards like Flexbox
- Create a solid assets management strategy
- Create a custom build workflow using Webpack
- Get familiar with Sass syntax, Post-CSS and CSS-Modules
- Web Developers
- Web Designers
- Good working knowledge and experience with HTML, CSS and some JavaScript
- Knowledge of HTML5 & CSS3 Features
Mobile First Responsive Design
- Understanding the Mobile First paradigm
- Responsive navigation and design patterns
- Working with multiple devices resolution and densities
- Measure units
The BEM naming convention
- Reasons & background
- Rules, guidelines & conventions
- Real-worlds examples
Flexbox – the CSS native solution for responsive layouts
- Introduction to Flexbox
- Flex-Direction, Alignment & wrapping
- Flexbox ordering – completely reorder your layout for different screens
- Nesting hierarchies
- Hands on exercises ( many of those!! )
Media Types and Queries
- Introducing CSS3 media queries
- Handling multi-device specifics
- Syntax and real world examples
Webpack builds workflow
- Introduction to front-end automation build systems
- Webpack features
- Setting up a project build workflow
- Minimizing, optimizing and reducing header requests
CSS Modules
- The end of global CSS nightmare!
- Project setup
- CSS Modules features
- Syntax and examples
Post-CSS
- Post CSS overview – A tool for transforming CSS with JavaScript
- Autoprefixer
- Responsive font sizes
- Setting up Sass support
- The growing plugins eco-system of Post-CSS
Sass Syntax
- Nested Selectors
- Parent References
- Sass Variables and Variable scope
- Reusable SASS programing with Mixins
- CSS Imports and partials

- על פי דרישה מועד פתיחה
- 9:00-16:30
ימים ושעות
- 40
שעות אקדמיות
- מתקדם
רמת הקורס
- עברית/English
שפת הדרכה
לבדיקת התאמה לקורס
ממליצים
לפתיחה והורדת סילבוס