Responsive Web Design

Description:

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
אייל ורדי מרצהאייל הינו אושיה ישראלית בסצנת ה-AngularJS – מתמחה בתחום בארבע שנים אחרונות ומעביר קורסים למתחילים ולמתקדמים.
  • על פי דרישה מועד פתיחה
  • 9:00-16:30daysימים ושעות
  • 40academic hours שעות אקדמיות
  • מתקדםcourse levelרמת הקורס
  • עברית/Englishlanguageשפת הדרכה
  • לבדיקת התאמה לקורס
  • [current_url]

    השאירו פרטים ונחזור אליכם בהקדם!