More Related Content


CSS 101 - G1 conference Gurzu.pptx

  1. CSS 101 Make things beautiful - Pratik Sangami
  2. Gurzu Confidential
  3. Gurzu Confidential
  4. Gurzu Confidential
  5. Gurzu Confidential
  6. Gurzu Confidential
  7. Gurzu Confidential
  8. Gurzu Confidential
  9. Gurzu Confidential CASCADING STYLE SHEETS ( CSS )
  10. Gurzu Confidential 1 0 What is CSS? ● CSS stands for Cascading Style Sheets. ● Define the look and formatting of web pages ● Used to describe how HTML elements should be displayed on a screen, paper, or other media. ● With CSS, web developers can control the layout, color, fonts, and other design elements of a web page, separate from the content itself. ● This allows for greater flexibility and consistency across a website, making it easier to maintain and update.
  11. Gurzu Confidential How your website is displayed
  12. Gurzu Confidential
  13. Gurzu Confidential
  14. Gurzu Confidential
  15. Gurzu Confidential
  16. Gurzu Confidential
  17. Gurzu Confidential How familiar are you with CSS?
  18. Gurzu Confidential CSS has been used as a presentational layer styling language. It can be found used for: ● CSS for Websites ● CSS for Print ● CSS for Speech ● CSS for Digital Ads, like ads in youtube. ● Gives an engineer artistic skills ● Cross functional team ● CSS business market ( Eg: foundation, bootstrap, tailwind ) 1 8 Significances of CSS
  19. Gurzu Confidential
  20. Gurzu Confidential Present state of CSS
  21. Gurzu Confidential • Selectors • Responsive Design • Transitions and Animations • Box Model • Fonts • Layout • Colors 2 1 CSS #3
  22. Gurzu Confidential ● Comparison function ● Multi-column Layout and Auto layout ● CSS Houdini ● CSS variables ● Container queries ● :has() selector ● @when / @else ● Accent-color ● and many other beautiful features 2 2 New features of CSS
  23. Gurzu Confidential Power of CSS
  24. Gurzu Confidential • SEO • Performance of app/site. Can it be affected by CSS ? • UI/UX • Example on: National Election Florida (2000) 2 4 CSS
  25. Gurzu Confidential Florida Election 2000
  26. Gurzu Confidential SASS, SCSS, LESS, Styled Components, Tailwind, Bootstrap
  27. Gurzu Confidential • Preprocessors are software tools that extend the functionality of CSS by adding features that are not available in standard CSS. • Preprocessors allow developers to write CSS in a more organized and efficient way, by providing additional functionality such as variables, mixins, functions, and nesting. 2 7 CSS pre processors
  28. Gurzu Confidential
  29. Gurzu Confidential ★ CSS frameworks are pre-written, standardized libraries of CSS code that provide a set of predefined styles and layout templates that can be used to develop websites more efficiently. ★ CSS frameworks can save time and effort by providing a consistent set of styles and layouts that can be easily customized and reused across different projects. 2 9 CSS frameworks
  30. Gurzu Confidential ★ CSS architecture refers to how CSS code is organized, structured, and maintained in a project. ★ CSS architecture is important for creating scalable, maintainable, and reusable CSS code BEM (Block Element Modifier) SMACSS (Scalable and Modular Architecture for CSS) OOCSS (Object-Oriented CSS) Atomic Design 3 0 CSS Architectures
  31. Gurzu Confidential
  32. Gurzu Confidential ( OG: Web Designer )
  33. Gurzu Confidential Ethics as a Web Engineer
  34. Gurzu Confidential ● End user-centric ethics ○ Visually impaired users ○ Usage devices ● Environment centric ethics ○ Carbon footprint 3 4 Web ethics
  35. Gurzu Confidential v Lets calculate carbon footprint of some sites
  36. Gurzu Confidential Future of CSS ?
  37. Any Questions ??