Setting up Reactjs using Webpack 4 and Babel 7

Setting up Reactjs using Webpack 4 and Babel 7

In this tutorial we will be setting up our very own reactjs from scratch using webpack and babel, so grab your pen and paper lets spin the learning wheel.

In this tutorial we will be setting up our very own reactjs from scratch using webpack and babel, so grab your pen and paper lets spin the learning wheel.

Almost everyone who started out to learn reactjs was introduced to create-react-app, which is an awesome way to bootstrap any reactjs project. We were happy with it since you can just run a simple command, then boom your reactjs app development is ready. But at some point in your career you'd want to configure everything from scratch to fit a particular purpose.

Table of Contents

  • Setting up the Project
  • Setting up Webpack
  • Setting up Babel
  • Setting up React
  • Connecting React Component to the DOM
  • Finishing Touches
  • Conclusion
Setting up the Project

Before you can get started, you should make sure to have an installed editor and terminal on your machine. In addition, you will need an installed version of node with npm. Make sure to have setup everything of it before you continue to read.

Before we start writing any code, lets create a new directory where our project will stay. In any location on your computer, run the following in your terminal

mkdir webpack-babel-react-starter
cd webpack-babel-react-starter

We need to initialise our project with a package.json file, since we are going to install some packages that is vital for the setup. Simply run yarn init -y

For this tutorial i will be making use of yarn as my package manager, if you are using npm, make sure you run the corresponding command, it should work as expected.

Setting up Webpack

Webpack is one of the most popular bundler out there. It internally builds a dependency graph when it processes your application, this graph maps every module your project needs and generates one or more bundles. Since version 4.0.0, webpack does not require a configuration file to bundle your project, nevertheless it is incredibly configurable to better fit your needs.

let's install it by running:

yarn add webpack --dev

We also need to install the webpack cli

yarn add webpack-cli --dev

After installing this two packages, you will notice a new addition in our project, the node_modules and devDependencies section in our package.json file. Next thing to do is to add the webpack you just install into the package.json file.

"scripts": {
  "build": "webpack --mode production"
}

At this point you don't really need a configuration file to get started, which is a cool addition to webpack 4

Setting up Babel

Modern javascript is written in ES6 or ES7, but not every browser understands this modern javascript, it's at this juncture we need babel to do the heavy lighting for us. Babel is a tool-chain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments. Checkout there docs for more info about what they can do for you.

React components are mostly written in ES6, with the concept of imports, class and other ES6+ features, which older browsers do not understand. Webpack on it's own does not know how to transform or better still transpile the ES6 code to ES5 code. But their is hope for us, webpack have this concept of loaders, a webpack loader takes something as the input and produces something else as the output.

For our setup, we will use babel-loader which is webpack loader that will transpile our ES6 code for us. Before we start using babel-loader, we need to install some packages and setup babel preset env which will target the particular javascript version we want to transpile to.

let's install all the dependencies:

yarn add @babel/core @babel/preset-env @babel/preset-react babel-loader --dev

We also need to setup our babel config file, create a new file in the root directory called .babelrc and write the following configuration to it

{
  "presets": ["@babel/env", "@babel/react"]
}

The above configuration will ensure that babel transpiles our react code, which is JSX and any other ES6+ code we have to ES5 code.

Now is the perfect time to create a minimal webpack configuration for our project. Create a webpack.config.js file in the root directory and write the following configuration for it

module.exports = {
  module: {
    rules: [
      {
        test: /.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      }
    ]
  }
}

What the above configuration does is that for every file with a js or jsx extension, excluding the node_modules folder and it's content, webpack uses babel-loader to transpile the ES6 code to ES5. With this done, lets head over to writing our react component.

Setting up React

We will be creating a very simple react component, that renders a text and a button, but in order to make use of react we need to install some dependencies, react and react-dom .

yarn add react react-dom

After installing those, create a new folder in the root directory, let's call it src inside it create index.js file

In the index.js file write the following code:

import React from "react";
import ReactDOM from "react-dom";

const Index = () => {
  return (
    
      
        
          React Page {" "}
        
        

        <a
          className="button-line"
          href="https://github.com/deityhub"
          target="_blank"
        >
          Know more
        
      
    
  );
};

export default Index;

It's time to test things out and see how powerful webpack is. Open up your terminal once again and run

yarn run build

If it's successful you should see a dist folder created for us by webpack, and inside it is an index.js file which have minified version of our ES5 code. Why is the code minified, if you remember in our build script in package.json we specified a --mode production flag after the webpack command, under the hood, webpack will generate a minified version of our ES5 code. To see a readable format of the transpiled code, you can swap the --mode production with --mode development

Yay!, the output was great but that's not what we really want for our react app, we want our transpiled code to be visible in our browser. So let's setup html and also css(scss) to work with our webpack.

Connecting React Component to the DOM

We need to setup an html file so that our react component can be rendered on the dom, but we can't just create a random html file and hook up our react to it using react dom. So to achieve this we need to install the package html-webpack-plugin

yarn add html-webpack-plugin --dev

Adjust your webpack.config.js file to look like this

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: path.join(__dirname, "src", "index.js"),
  output: {
    path: path.join(__dirname, "build"),
    filename: "bundle.js"
  },
  module: {
    rules: [
      {
        test: /.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: "index.html",
      template: path.join(__dirname, "src", "index.html")
    })
  ]
};

If you notice, we are adjusting the input and output so we have a bit more control over the naming and target of our files.

Nextup is to create an html file inside src folder, let's call it index.html and then paste the following code into it



  
    
    
    React, Webpack, Babel Starter Pack
    
  
  
     You need to enable JavaScript to run this app. 
    
    

  

Since we are in the src let's make some adjustments to our react component, first we create a new folder components then inside this folder a two files app.js and app.scss then make this following adjustments to our code:

In ./src/index.js

import React from "react";
import ReactDOM from "react-dom";
import App from "./components/app";

ReactDOM.render(, document.getElementById("app"));

In ./src/components/app.js

import React from "react";
import "./app.scss";

const App = () => {
  return (
    
      
        
          React Page {" "}
        
        

        <a
          className="button-line"
          href="https://github.com/deityhub"
          target="_blank"
        >
          Know more now
        
      
    
  );
};

export default App;

In ./src/components/app.scss

body {
  background: linear-gradient(253deg, #0cc898, #1797d2, #864fe1);
  background-size: 300% 300%;
  -webkit-animation: Background 25s ease infinite;
  -moz-animation: Background 25s ease infinite;
  animation: Background 25s ease infinite;
}

.full-screen {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
//you need to setup file-loader in webpack before you can use images
  background: url("../../assests/image/background.png");
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 100%;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  //_ works with row or column_

  flex-direction: column;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  text-align: center;
}

h1 {
  color: #fff;
  font-family: "Open Sans", sans-serif;
  font-weight: 800;
  font-size: 4em;
  letter-spacing: -2px;
  text-align: center;
  text-shadow: 1px 2px 1px rgba(0, 0, 0, 0.6);

  &:after {
    display: block;
    color: #fff;
    letter-spacing: 1px;
    font-family: "Poiret One", sans-serif;
    content: "React project powered by webpack and babel with support for sass";
    font-size: 0.4em;
    text-align: center;
  }
}

.button-line {
  font-family: "Open Sans", sans-serif;
  text-transform: uppercase;
  letter-spacing: 2px;
  background: transparent;
  border: 1px solid #fff;
  color: #fff;
  text-align: center;
  font-size: 1.4em;
  opacity: 0.8;
  padding: 20px 40px;
  text-decoration: none;
  transition: all 0.5s ease;
  margin: 0 auto;
  display: block;

  &:hover {
    opacity: 1;
    background-color: #fff;
    color: grey;
  }
}

@-webkit-keyframes Background {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@-moz-keyframes Background {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes Background {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

We will be adding some styling in addition to the html and react component that we will render in the dom. So before we run our code to test it, we need to configure our webpack so it will know how to handle any .css or .scss file being passed through it.

yarn add css-loader sass-loader mini-css-extract-plugin node-sass --dev

sass-loader being installed here is used by webpack to convert our .scss to a .css file that the browser understands, and under the hood it makes use of node-sass to achieve this. Then mini-css-extract-plugin as the name suggests, abstract all our css files into a single css file, instead of the normal behaviour that webpack offers, which is to bundle your css file with the final .js output file which then injects the css into your rendered html output when you run the code.

Open up your webpack config file and adjust your code to look like this

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  entry: path.join(__dirname, "src", "index.js"),
  output: {
    path: path.join(__dirname, "build"),
    filename: "bundle.js"
  },
  module: {
    rules: [
      {
        test: /.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /.(css|scss)$/,
        use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: "index.html",
      template: path.join(__dirname, "src", "index.html")
    }),
    new MiniCssExtractPlugin({
      filename: "[name].css",
      chunkFilename: "[id].css"
    })
  ]
};

There is a point to note here, the order of your loaders in the webpack config file matters a lot, because webpack processes the loaders from right to left. So using the test for css files for example, it will run sass-loader first, then css-loader and finally MiniCssExtractPlugin.

There is one more thing to do, let's install webpack dev server, this will create a development server for us and monitor our files for any changes during development.

yarn add webpack-dev-server --dev

Then open your package.json file and make the following adjustments in your scripts tag

"scripts": {
    "start": "webpack --mode development",
    "dev": "webpack-dev-server --mode development --open",
    "build": "webpack --mode production"
  }

That's to much code right?, so let's test our code by running yarn run dev

if everything went well, you should see something like this on your browser.

Finishing Touches

If you followed this tutorial step by step, I'm quite confident that you will end up knowing and mastering the usage of webpack and babel. Going forward i want us to add two more features to this project, just to demonstrate that you can extend or add more features tomorrow when working on a more advanced react project than this.

Open your terminal and install this packages

yarn add file-loader @babel/plugin-proposal-class-properties --dev

file-loader will handle all the scenario where we want to import an image or an svg or even a gif while @babel/plugin-proposal-class-properties will handle react class components and static class properties.

In webpack.config.js adjust it to look like this

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  entry: path.join(__dirname, "src", "index.js"),
  output: {
    path: path.join(__dirname, "build"),
    filename: "bundle.js"
  },
  module: {
    rules: [
      {
        test: /.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /.(css|scss)$/,
        use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"]
      },
      {
        test: /.(jpg|jpeg|png|gif|mp3|svg)$/,
        use: [
          {
            loader: "file-loader",
            options: {
              name: "[path][name]-[hash:8].[ext]"
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: "index.html",
      template: path.join(__dirname, "src", "index.html")
    }),
    new MiniCssExtractPlugin({
      filename: "[name].css",
      chunkFilename: "[id].css"
    })
  ]
};

In .babelrc file, also adjust it to look like this

{
  "presets": ["@babel/env", "@babel/react"],
  "plugins": ["@babel/plugin-proposal-class-properties"]
}

Finally run yarn run dev to make sure everything is stile working.

Conclusion

If you made it thus far, congratulation you deserve a pizza, because not everybody that started out to learn something new eventually completes it. I want you to work on what you've learnt in this tutorial, extend the configuration and build something awesome from it. You can checkout the github link to the complete code.

Thanks for reading

If you liked this post, share it with all of your programming buddies!

Follow us on Facebook | Twitter

Learn ReactJS with Webpack 4, Babel 7, and Material Design

Learn ReactJS with Webpack 4, Babel 7, and Material Design

Quick and simple, fast guide on integrating ReactJS with Webpack, Babel and Material Design. This is a short tutorial which will get your ReactJS app running with Webpack and Babel.

Quick and simple, fast guide on integrating ReactJS with Webpack, Babel and Material Design. This is a short tutorial which will get your ReactJS app running with Webpack and Babel.

**React **is a JavaScript library for building user interfaces and it has three main characteristics:

  • Declarative
  • Component-Based
  • Learn Once, Write Anywhere

**Webpack **is an open source JavaScript module bundler. Its main purpose is to bundle **JavaScript **files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset. **Webpack **takes modules with dependencies and generates static assets representing those modules.

Babel is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of **JavaScript **in current and older browsers or environments. Here are the main things **Babel **can do for you:

  • Declarative
  • Component-Based
  • Learn Once, Write Anywhere

Top 10 Time-Saving CSS Tips When using Sass

Top 10 Time-Saving CSS Tips When using Sass

These top 10 CSS best practices will help you save time and collaborate better with your team.

These top 10 CSS best practices will help you save time and collaborate better with your team.

We sometimes think that we know all we need to know about SCSS and that we can give that extra time to get ahead on JavaScript.

I’m sorry to be the one breaking this to you, but you should pay more attention to your stylesheets. I’ve worked in projects where the code turned into spaghetti just because a few simple best practices weren’t applied. I quickly learned how precious some good tips can be when working with other people on a code base that can become quite large in no time.

That’s why, today, I’m sharing with you 10 SCSS best practices that will help you and your team.

Start using them, your teammates and the people who’ll later take over your code will thank you. (By the way… that’s one of the few ways you get extra points in the good place.)

Tip 1: Adopt the BEM Convention

Have you ever gotten into a project and didn’t know how to start reading or making sense of the CSS classes naming?

Yeah ♀️we’ve all been there. That’s why whenever I start a new project or join one, one of my first code style optimizations is implementing BEM and making sure that everyone follows it.

BEM stands for Block, Element, Modifiers. The added value that this CSS classes naming convention brings to the table is simple: it allows you to visualize how your template is styled in a structured way.

How it works is even simpler:

  1. You name the main blocks of your page like this for instance: class="button".

  2. Then, name the elements inside each block using two underscores (to show that it’s part of the block): class="button__icon".

  3. And in case you have a variant of that block, use two dashes to name a modifier: class="button button--red".

So in your template, it will look like this:

<button class="button button--blue">
	<img class="button__icon" src="http://www.bem-br.org/img/logo.png" alt="icon-blue"/>
	<p class="button__label">Use BEM</p>
</button>

<button class="button button--red">
	<img class="button__icon" src="http://www.bem-br.org/img/logo.png" alt="icon-red"/>
	<p class="button__label">Please use BEM</p>
</button>

Editing your styles will become much easier, because you’ll be able to visualize the structure of your code:

.button {
	border: none;
	margin: 20px;
	cursor: pointer;

	.button__icon {
		width: 20px;
		height: 20px;
	}

	.button__label {
		color: white;
		padding: 20px 40px;
		text-align: center;
		text-transform: uppercase;
		font-size: 16px;
	}

	// --> MODIFIERS: COLORS <--

	&--blue {
		background-color: blue;
	}

	&--red {
		background-color: red;
	}
}
Tip 2: Don’t Repeat Yourself, Use Variable Extrapolation for Your Block Class Names

If you follow the BEM convention (or are going to), here is another good practice you can follow to speed up your development time: using variable extrapolation. This way, you will not repeat yourself.

It’s pretty simple — you just define your block class in a variable (in the example above it was .button) and replace it using #{$c} in your CSS code.

Let’s use the example above, to see how it works:

$c: “.button” 

#{$c} {
	border: none;
	margin: 20px;
	cursor: pointer;

	&--blue {
		background-color: blue;
	}

	&--red {
		background-color: red;
	}

	#{$c}__icon {
		width: 20px;
		height: 20px;
	}

	#{$c}__label {
		color: white;
		padding: 20px 40px;
		text-align: center;
		text-transform: uppercase;
		font-size: 16px;
	}
}

It’s a small and simple improvement, but not having to rewrite your block class name every time (or just being able to update it in a single spot) speeds things up, improves code readability and makes the structure of your CSS code pop out.

Tip 3: Structure Your Project With InuitCSS

You can think of InuitCSS as a CSS framework. Even though it does not provide you with UI components or anything like that.

Instead, InuitCSS helps you normalize, configure, homogenize and structure your stylesheets.

Sounds abstract? Okay, let’s see how it does that.

First, go ahead and install InuitCSS using npm install inuitcss --save. Now all you have to do is get to know the InuitCSS-specific CSS directory structure that it provides and follow it to set structure you project’s assets:

  • /settings: This is where all your global variables, site-wide settings and configs go. For example, instead of declaring colors variables in every one of my stylesheets, I just put them and organize them in one single file under this folder.

  • /tools: The tools folder is where you define your project mixins and functions, most of the time, I use it to store the Sass mixin I use for responsive media queries.

  • /generic: Here, you can specify low-specificity CSS rules, like normalize.css and reset rulesets.

  • /elements: When you need to style unclassed HTML elements like links, pages, images, tables, and so on, you can simply create a stylesheet in this folder for that.

  • /objects: The objects folder is where you put your objects, abstractions, and design patterns like your layouts.

  • /components: This is where the style of specific UI components goes. Honestly, I never use it, simply because I code my projects with Vue.js and it uses single file components.

  • /utilities: The utilities folder is for all the high-specificity, very explicit selectors like the animations you need to use in your project.

It’s pretty neat, I know!

Tip 4: Use Datasets to Group Your Colors

If you’re using Sass loops, I definitely recommend using datasets, especially if it involves defining colors.

Let’s check this one in play by taking the example of social buttons. As you can probably guess, social buttons (Facebook, Twitter, etc.) have different colors.

So instead of having to write this:

// VARIABLES
$c: ".c-social-button";

#{$c} {
	border: none;
	border-radius: 4px;
	color: $white;
	user-select: none;
	cursor: pointer;

	// --> NETWORKS <--

	&--facebook {
		background: #3b5998;
	}

	&--google {
		background: #db4437;
	}

	&--messenger {
		background: #0084ff;
	}  

	&--twitter {
		background: #1da1f2;
	}
}

You can choose a more elegant way:

// VARIABLES
$c: ".c-social-button";
$networks: facebook, google, messenger, twitter;

// THE DATASET FOR SOCIAL COLORS
$socialColors: (
	facebook: #3b5998,
	google: #db4437,
	messenger: #db4437,
	twitter: #1da1f2
);

#{$c} {
	border: none;
	border-radius: 4px;
	color: $white;
	user-select: none;
	cursor: pointer;

	// --> NETWORKS <--
	@each $network in $networks {
		&--#{network} {
			background: map-get($socialColors, $network);
		}
	}
}
Tip #5: Adopt Veli’s Colorpedia Naming Convention

Okay, you get it and you know it: using terms like light, dark, medium and so on as a naming convention for your project colors is very limiting, simply because there are some projects where you’ll have a lot of color and this is not going to take you very far.

Instead of scratching my head about this one every time, I simply use Veli’s colorpedia. This way you’ll get to give your colors names that a human can understand while not being limited by the light/medium/dark spectrum.

Additional perks come with using Veli’s colorpedia Veli’s colorpedia — it provides you with matching colors and even tells you how a colorblind person sees it.

Some designers are just angels sent from heaven.

Tip 6: Avoid Using Mixins Everywhere

When you don’t have to use mixins, just don’t do it! Why?

Because when you use mixins, they have to be well-structured and maintained in a rigorous way. Using mixins for no good reason is the best way to get lost when the project grows. They can cause side effects and become hard to update when they are used in many places. So use them carefully.

If you don’t know whether and when to use a mixin, remember this one rule: Mixins are here to avoid repeating yourself by keeping a Single Source of Truth.

Also, as of today for example, we don’t have to use mixins to prefix CSS properties because we have plugins like PostCSS Autoprefixer that exist and do the heavy lifting for you.

Tip 7: Supercharge Your Media Queries with SASS MQ

Sass MQ is an open-source mixin crafted by developers working at The Guardian (fancy!). It’s amazing for two reasons:

  • It compiles keywords and px/em values to em-based queries, so when users zoom on your page, the content doesn’t get all scrambled up.

  • It provides fallbacks for older browsers like IE8.

It simply works by compiling this code:

$mq-breakpoints: (
	mobile: 320px,
	tablet: 740px,
	desktop: 980px,
	wide: 1300px
);

@import 'mq';

.foo {
	@include mq($from: mobile, $until: tablet) {
	background: red;
}

@include mq($from: tablet) {
	background: green;
	}
}

Into this:

@media (min-width: 20em) and (max-width: 46.24em) {
	.foo {
		background: red;
	}
}

@media (min-width: 46.25em) {
	.foo {
		background: green;
	}
}

Elegant, simple and useful. What’s not to like?

To start using it, just go ahead and follow the instructions on their GitHub page.

Tip 8: Use CSSComb

One more final thing to get you a clean CSS code. I know that each one of us has our own way of writing CSS code, but doing so will leave you steps behind when working with somebody else or a team on a project.

That’s why I use CSS Comb. I installed the extension on VSCode, and every time I start a new project I set a .csscomb.json file in its root.

This .csscomb.json file includes a configuration that transforms your CSS code and your teammate’s into one single format whenever you run the extension.

You can use my own CSS Comb configuration below, or configure your own just by choosing the way you want your CSS code to look.

Tip 9: Using Placeholders Can Often Be a Great Tool

In a project, I have a set of properties that define a dark background. I very often find myself having to type them over and over again. Here is how using a placeholder can come very handy:

// The placeholder selector
%darkbg {
	border: 1px  solid  #000000;
	background: #101010;
	box-shadow: 0  1px  5px  0  rgba(#404040, 0.6);
}

.my-dark-block-for-errors {
	@extend %darkbg;
	// Some other properties for errors
}

.my-dark-block-for-success {
	@extend %darkbg;
	// Some other properties for success
}

This will compile into the following css code:

.my-dark-block-for-errors, .my-dark-block-for-success {
	border: 1px  solid  #000000;
	background: #101010;
	box-shadow: 0  1px  5px  0  rgba(#404040, 0.6);
}

.my-dark-block-for-errors {
	// Some other properties for errors
}

.my-dark-block-for-success {
	// Some other properties for success
}

Notice how it made our two blocks extend the placeholder? No need to repeat ourselves now and to remember these properties anymore.

Tip 10: Take a Few Minutes to Browse Awesome-Sass.

Awesome-Sass is a curated list of awesome Sass and SCSS frameworks, libraries, style guides and articles. It is a fantastic resource that keeps getting updates as of today. It includes so many interesting resources and it will deepen your Sass skills just by browsing it for a few hours.

For instance, this is where I discovered the Sass Guidelines or Sassline.

I hope this article was useful. Sass will definitely save you time,

Thank you!

Teaching CSS to JavaScripters

Teaching CSS to JavaScripters

Teaching CSS to JavaScripters. Some JavaScript professionals do not know CSS as well as they’d like to. In order to help them, PPK decided to write a book “CDD for JavaScripters”, where he will explain CSS in terms that JavaScripters will understand. But what are those terms? What kind of teaching would JavaScripters expect? Is there a CSS mental model that is different from a JavaScript mental model? Is CSS a programming language? Does that matter for teaching or learning CSS?

But what are those terms? What kind of teaching would JavaScripters expect? Is there a CSS mental model that is different from a JavaScript mental model? Is CSS a programming language? Does that matter for teaching or learning CSS?

PPK will give a brief outline of where he’s standing right now on these questions. The majority of the session will be used for a discussion with the audience. How should he teach CSS? Why is it so hard for some to understand it? What are the least-understood parts of CSS? We hope this discussion will yield valuable feedback.