SASS & Responsive CSS for Modern Apps

Seminar for Application Developers

Main Speaker

Learning Tracks

Course ID

42598

Date

24/11/2024

Time

Daily seminar
9:00-16:30

Location

Daniel Hotel, 60 Ramat Yam st. Herzliya

Overview

As single page applications became common, many infrastructures emerged that provide frameworks for java-script and html-based development. But while these frameworks, such as Angular and React, simplify DOM manipulation and data binding, it is still left for CSS and ScSS to manage the styling. And while you could take advantage of well tested and well styled sets of components, there is still some styling left for the developer to combine them together into a well formed, properly laid out, and responsive application design. For many developers that become proficient in these infrastructures, CSS still remains a mystery, a guess work, of trial and mostly errors. You can create a high quality application with perfect performance, but if the styling is not done properly, the application will always look unprofessional. In this seminar, we will touch lightly on some techniques that will improve your work with CSS. We will demystify layout and remove some of the mystery behind “Flex”, “Grid” and position. We will also see how to take advantage of custom CSS properties to better organize your application and make it easily theme able. Finally, we will take advantage of ScSS to better organize our reusable code. While we cannot cover the entire topic, the demos you will see in this seminar will provide you with instant benefits for your own projects.

Who Should Attend

  • Web developers – especially single page apps but not just
  • Mobile applications developers using HTML and CSS
  • Basically, anybody who needs to use CSS and struggles…

Prerequisites

  • Experience with HTML and JS
  • Some Experience with simple CSS
  • A little Angular or React – Recommended but optional

Course Contents

  • Part 1 – CSS Tricks
    • Advanced Selectors
    • Short intro to Flex containers
    • Short intro to Grid containers
  • Part 2 – CSS Custom properties
    • What are custom properties
    • Using them for Themes
    • Using them to customize angular components
    • Using them for responsiveness
  • Path 3 – ScSS preprocessor
    • Understanding Style preprocessor
    • Variables and functions
    • Sass mixins
    • Hierarchies
    • @use and Partials
  • If time permits: Part 4 – Putting it all together – Themeing Components
    • How to arrange my styles when using component framework (such as angular, react, and vue)
    • How to reuse resources
    • How to create themes
    • How to switch themes in runtime

The conference starts in

Days
Hours
Minutes
Seconds