Table of Content

The Document

This article contain all article slides. Slide by slide, so anyone can copy desired slide, without the need to open the Impress slide, or the PDF version.

Teaser Preview: Concept CSS

I believe, a ready to use slide, is useful to help people in the group discussion.

Original Presentation

I usually draft a presentation in a simple text based, that I can write down in any text editor.

Then I show in web based for a few moment (actually months). This give time to append any additional material freely, create necessary figure, and also correct any typo, or even dead links.

You can watch the presentation here:

This text based presentation is the most authentic version, with all the links required provided.


This presentation is made in LibreOffice Impress, using candyclone template.

You can download the Impress document from a page in here:

With this downloadable document, you can use the style of this presentation, for use with your own presentation works, either for school material, office works, homeworks, or anything else.


You can also download the exported pdf from a page in here:

The pdf version cannot contain animation. So the content might be little different, compared with the original Impress document.


The Impress pages also utilize diagram illustration made in Inkscape. I also provide the source image in SVG format, that you can download from a page in here:

Here is the preview.

Inkscape Illustration: Concept CSS: Thumbs Misc

Inkscape Illustration: Concept CSS: Thumbs Frame

Inkscape Illustration: Concept CSS: Thumbs Drops

Or better, you can get it all from candyclone illustration:

I intentionally share the source SVG image, so you can alter the content for your own personal use. I know there are already so many stock images for presentation, I just need to share, what I have, with tutorial. This way, anyone can make pretty presentation easier. Of course you still have to learn Inkscape, to suit the illustration for your own use.


What is this candyclone rubbish?

Candyclone is an Impress template that I have made for LibreOffice contest.

There are also other free templates as well in lumbung repository.

This candyclone is just an example template that you can use freely. With this candyclone example you can also learn how to make your own template. Your very own template to suit your ecosystem.


What if I do not agree?

The source is available, so you can freely make your own slide. Feel free to express your thoughts, either with text, or illustration.

The Slides

Here I represent all the slides.

Slide 01: Cover

Slide - Cover

Frameworks and Tools

Introduction to CSS for beginner

Slide 02: About The Author

Slide - About Author

I have my own blog.

Slide 03: About This Material

Slide - Preface: HTML+CSS+JS

Frontend: HTML, CSS, JS

What is this rubbish?

Slide 04: Preface: HTML Document

Slide - Preface: HTML Document

More Reference:

A page is a document consist of:

  1. HTML Tag: Structure and Formatting

    • (structure = elements in hierarcy fashioned)
  2. Stylesheet: Presentation

    • (rule = selector + declaration)
    • (box model, position)
    • (layout: flex, grid, float+calc, table)
  3. Javascript: Behaviour

  4. Content:

    • Text and Image (or other media)

Slide 05: Learning HTML Step by Step?

Slide - Preface: Learning HTML Step by Step

Learning HTML Step by Step?

  1. Basic HTML

  2. Templating Engine

    • Combine with Task Runner.
  3. Static Site Generator

    • Complete website, without complicated backend.
  4. Backend Web Framework

    • Laravel, Flask, RoR, Koa, Express.
  5. Modern Web Framework

    • Svelte, React, Vue.

Learn how to google, make a screenshot, read documentation, and english.


  • Hit the w3school book first.

  • Enjoy the journey.

Slide 06: Learning CSS Step by Step?

Slide - Preface: Learning CSS Step by Step

Learning CSS Step by Step?

  1. Basic CSS

  2. CCC Frameworks

    • Such as Bulma, Materialize CSS, or Semantic UI.
  3. CSS Preprocessors

    • To create additional custom CSS.
  4. CSS Tools

    • Task Runner, or
    • Bundler.
  5. Custom CSS

    • No Frameworks, or
    • Tailwind CSS.

Learn how to google, make a screenshot, read documentation, and english.


  • Hit the w3school book first.

  • Enjoy the journey.

Slide 07: Where to Put Stylesheet?

Slide - Preface: Placement

Where to put stylesheet?

  1. Inline,
  2. Internal, or
  3. External.

Yet another humble oldschool case.

Slide 08: Chapter Break

Slide - CSS Frameworks

Slide 09: Issue in oldschool CSS Development

Slide - CSS Frameworks: Oldschool Issue

Issue in oldschool CSS Development.

  • Reinvent the wheel.

    • Different stylesheet for each project.
    • In need of code reuse.
  • Debugging. Most of the time.

    • The horror while testing in different browser.
  • No standard for teamwork.

    • Waste of time, thinking of nice name for classes.
  • Can we have a generic one?

Slide 10: Why CSS Framework?

Slide - CSS Frameworks: Why CSS Frameworks?

Why CSS Framework?

  • Save man hours.

    • Deliver preview quickly.
  • Reduce debugging and test.

    • Already well tested. Hence reduce bug.
  • Ready to read, official documentation

  • Community Friendly

    • Known solution for recurring case.
  • Modularity

    • Built on top of CSS preprocessor: Sass, Less, or Stylus,
    • Tailwind on top of PostCSS even more modular.

Slide 11: Direct Advantage to Developer

Slide - CSS Frameworks: Direct Advantage

Direct advantage to developer

  • Easy to layout

  • Ready to use:

    • reset, element, component, helper
  • Predefined properties:

    • color, and such

Slide 12: Disadvantage

Slide - CSS Frameworks: Disadvantage


  • Another learning time

  • Bloated

    • unless utilize modular feature.
    • exclude unneeded artefact.
  • Feels like witchery.

    • This things work, and nobody knows why.

Disadvantage for beginner

  • Basic Design Provided:
    • Every site made, will have similar looks.

Slide 13: When not Using CSS Framework?

Slide - CSS Frameworks: When not Using

When not Using CSS Framework?

  • You want to write your own

    • This is technically make sense, for custom design.
    • To make something that suitable for your need.
  • You step into a team with legacy project.

  • AMP:

    • that require embedded stylesheet.

Slide 14: Step by Step Examples?

Slide - CSS Frameworks: Step by Step Examples

Step by Step Examples?

Slide 15: Chapter Break: Tool: Preprocessor!

Slide - CSS Preprocessor

What is this CSS prepocessor rubbish?

In short: CSS with superpowers!

Just the tool we desire.

Slide 16: The CSS Frustration

Slide - CSS Preprocessor: The CSS Frustration

The CSS Frustration

  • CSS code get ugly from time to time.

    • Nomore clean code.
    • Hard to read.
    • Hard to maintain.
  • Always rewrite, for any changes

    • No variables in old browser.
  • Modularization affect HTTP perfomance.

    • Multiple files require more HTTP requests.

In short: Developing with CSS without tools is not scalable for large project.

Slide 17: Direct Advantage to Developer

Slide - CSS Preprocessor: Direct Advantage

Direct advantage to developer

  • Modify custom properties:

    • color, and such
  • Ready to alter:

    • reset, element, component
  • You can claim yourself as a coder.

    • This is a joke.
    • Yes, there is a compilation process.

Slide 18: Why CSS Preprocessor?

Sass, Less or Stylus

Slide - CSS Preprocessor: Why CSS Preprocessor

Slide 19: When not Using CSS Preprocessor?

Slide - CSS Preprocessor: When not Using

When not Using CSS Preprocessor?

  • You want to use unmodifed version CSS Frameworks.

    • Such as using CDN.
  • Else, I’m still thinking…

Slide 20: Last 2019 State

Slide - CSS Preprocessor: Current 2019 State

Current 2019 State

  • SASS has wide implementation in many language

    • Most common are: dart-sass, node-sass, and deprecated ruby-sass
    • Supported in both Gulp and Grunt.
    • And bundler: webpack, rollup, and parcel.
  • PostCSS with Tailwind CSS is a rising star.

    • PostCSS itself is more than just Preprocessor.
  • LESS is less used.

  • I do not know about this one:

    • Stylus

Slide 21: Which One Should I Choose?

Slide - CSS Preprocessor: Which One


Which One?

  • Choose what works for you!

  • I don’t know. I’m just a blogger.

  • Learning:

Slide 22: Preprocessor Coding Examples?

Slide - CSS Preprocessor: Examples

CSS Preprocessor Examples

Slide 23: Respect!

Slide - CSS Preprocessor: Respect


Special thank you for the smart guys/girls, behind these CSS preprocessor project.

Slide 24: Chapter Break

Slide - Supporting Technologies

Slide 25: Supporting Technologies

Slide - Technologies: Task Runner and Bundlers

CSS supporting Technologies

Just like you. I’m still learning.

Slide 26: Not Covered Yet?

Slide - Technologies: Not Covered Yet

More about CSS supporting Technologies

  • PostCSS:

    • Along with their plugins.
  • Custom CSS without Framework:

    • Along with repository example.
  • Tailwind:

    • Along with repository example.

This presentation will likely to change. Depend on my knowledge growth.

Slide 27: Chapter Break

Slide - Summary

Slide 28: Summary

Slide - Summary: Along with Local Communities

Summary: Along with Local Communities

Slide 29: What’s Next?

Slide - What’s Next

Leverage to SSG!

Learn to make a fully mature website, without the burden of complicated backend.

Slide 30: Questions

Slide - Questions

Don’t be shy!

Slide 31: Thank You

Slide - Thank You

Thank you for your time.