Slides - Concept CSS

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.

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:

• Presentation - Concept CSS

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

Impress

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

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

• presentation-concept-css-diagram.odp

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.

PDF

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

• presentation-concept-css-diagram.pdf

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

Inkscape

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:

• presentation-concept-css-content.svg

Here is the preview.

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

• template-candyclone-content.svg

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.

Template

What is this candyclone rubbish?

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

• LibreOffice Impress Template Contest by the Indonesian Community

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

• Lumbung LibreOffice Indonesia 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.

Disagreement

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

Frameworks and Tools

Introduction to CSS for beginner

Slide 02: About The Author

I have my own blog.

Slide 03: About This Material

Frontend: HTML, CSS, JS

What is this rubbish?

Slide 04: Preface: HTML Document

More Reference:

• va_lesson4.pdf

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?

Learning HTML Step by Step?

1. Basic HTML

   • w3schools.com/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.

Tips:

• Hit the w3school book first.

• Enjoy the journey.

Slide 06: Learning CSS Step by Step?

Learning CSS Step by Step?

1. Basic CSS

   • w3schools.com/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.

Tips:

• Hit the w3school book first.

• Enjoy the journey.

Slide 07: Where to Put Stylesheet?

Where to put stylesheet?

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

Yet another humble oldschool case.

• HTML - Stylesheet

Slide 08: Chapter Break

Slide 09: Issue in oldschool CSS Development

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?

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

Direct advantage to developer

• Easy to layout

• Ready to use:

  • reset, element, component, helper

• Predefined properties:

  • color, and such

Slide 12: Disadvantage

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?

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?

Step by Step Examples?

• Bulma:

  • Bulma + SASS
  • Bulma + Custom SASS (Material Design)

• Materialize CSS

  • Materialize CSS + SCSS

• Semantic UI

  • Semantic UI + Custom LESS (Material Design)

• Bootstrap

  • Bootstrap + Custom SASS (Open Color)

• Custom

  • Make your own case, and share!

Slide 15: Chapter Break: Tool: Preprocessor!

What is this CSS prepocessor rubbish?

In short: CSS with superpowers!

Just the tool we desire.

Slide 16: 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

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 19: When not Using CSS Preprocessor?

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

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?

Learning:

• @html_css_id

Which One?

• Choose what works for you!

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

• Learning:

  • @html_css_id

Slide 22: Preprocessor Coding Examples?

CSS Preprocessor Examples

• Custom SASS

  • SASS: Loop - Spacing Class

• Custom LESS

  • LESS: Loop - Spacing
  • LESS: Conditional - Color Class

• Custom PostCSS

  • PostCSS: Loop - Spacing Class

Slide 23: Respect!

Respect!

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

Slide 24: Chapter Break

Slide 25: Supporting Technologies

CSS supporting Technologies

• Task Runner

  • Grunt
  • Gulp
  • Brunch
  • Broccolli

• Bundler

  • Webpack
  • Rollup
  • Parcel

Just like you. I’m still learning.

Slide 26: 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 28: Summary

Summary: Along with Local Communities

• CSS Framework

  • Bootstrap, Bulma, Materialize CSS, Semantic UI, Tailwind CSS, Custom CSS,
  • Local Communities: belajarhtmlcss, FrontEndID

• CSS Preprocessor

  • SASS, LESS, PreCSS (via PostCSS)
  • Local Community: html_css_id

• Useful Tools

  • Task Runner: Gulp, Grunt
  • Bundler: Webpack, Parcel, Roller
  • Local Community: html_css_id

Slide 29: What’s Next?

Leverage to SSG!

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

• Introduction to SSG for beginner

Slide 30: Questions

Don’t be shy!

Slide 31: Thank You

Thank you for your time.