DEV Community: Khaled Garbaya

An introduction to start using Eleventy

Khaled Garbaya — Sun, 07 Feb 2021 00:00:00 +0000

Update: I released a Course on 11ty and the jamstack. You can get it now by clicking here.

Eleventy, or 11ty, is a powerful yet straightforward static site generator. It does not require any config to get started. This what it will take you to get an 11ty project running:

npm install -g @11ty/eleventy
echo '# Page header' > README.md 
eleventy

Bootstrap an eleventy project

We'll start from an empty directory, initialize it as an npm package by calling npm init -y. Install @11ty/eleventy, npm i -D @11ty/eleventy, package and create the website entry point. Eleventy can compile multiple file formats, HTML, markdown, liquid, and njk.

Eleventy Layouts

Eleventy Layouts are special templates that you can use to wrap other content. For more information, check the layouts docs.

Layouts will live in an _includes folder at the root of your project. For example, if you want to share a standard structure through all your blog posts page first, you need to create a file inside the _includes folder and give it a name; let's call it mylayout.njk.

Add the wrapping HTML code.

--------
title: My Website
--------
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ title }}</title>
  </head>
  <body>
    <!-- any page content that uses this layout goes here--> 
    {{ content | safe}}
  </body>
</html>

To use a layout, you need to specify the frontmatter layout property inside the desired file. In this case, it will post.md at the root level of the project.

--------
layout: mainlayout.njk
title: My First Post
tags: post
--------

## My First Post

Layouts in eleventy can use other layouts. You can also use a different template engine across layouts. This feature is convenient if we want to wrap some pages with extra markup but not all the pages.

Create pages from data in Eleventy

Eleventy supports a few data sources, JSON, and js files. Let's take the example of creating pages from a list of pokemon in a JSON file.

First, create a _data folder at the root of your project, then create a pokemons.json file inside the newly created folder.

[
  {
    "name": "Pikachu",
    "power": "Static"
  },
  {
    "name": "Charizard",
    "power": "fire"
  }
]

Now create a file pokemon-page.njk at the root of your project. To make use of the data, you can use the frontmatter property pagination. Pagination has some sub-props:

data this can the name of the file inside the _data directory; in your case, it should be pokemons
size where you can specify the size of the page it is usually 1
alias, which will be the name of a current item in the list.

Every page will need a unique slug to construct the final URL. You can achieve that by using the permalink property. You can use the pokemon.name and pass it through the slug eleventy filter.

--------
pagination:
  data: pokemons
  size: 1
  alias: pokemon
permalink: "pokemons/{{ pokemon.name | slug}}/"
tags: pokemonPage
title: {{ pokemon.name }}
--------
<p> Name: {{ pokemon.name }} </p>
<p> Power: {{ pokemon.power }} </p>

Where to go from here

Make sure to check the 11ty documentation
Eghead.io 11ty playlist
realworldjamstack course

4 ways to use Axios interceptors

Khaled Garbaya — Sun, 31 Jan 2021 10:02:36 +0000

What is Axios?

Axios is a promise-based HTTP client for the browser and node.js. It comes with many useful defaults like automatically detecting JSON responses and returning an object instead of plain text, throwing an error if the response status code is greater than 400.

What is an axios interceptor?

An Axios interceptor is a function that the library calls every time it sends or receives the request. You can intercept requests or responses before they are handled by “then” or “catch”.

Example:

// Add a request interceptor
axios.interceptors.request.use(function (config) {
    // Do something before request is sent
    return config;
  }, function (error) {
    // Do something with request error
    return Promise.reject(error);
  });

// Add a response interceptor
axios.interceptors.response.use(function (response) {
    // Any status code that lie within the range of 2xx cause this function to trigger
    // Do something with response data
    return response;
  }, function (error) {
    // Any status codes that falls outside the range of 2xx cause this function to trigger
    // Do something with response error
    return Promise.reject(error);
  });

You can also remove the interceptor from Axios.

const myInterceptor = axios.interceptors.request.use(function ({/*...*/});
axios.interceptors.request.eject(myInterceptor);

Inject auth token header in every request using interceptors

There is a big chance when building an app that you will use an API that requires some credentials like api_token or a user Auth token. Usually, you will have to append the required headers with every HTTP request you make. Using Axios interceptors, you can set this up once, and anywhere you call your Axios instance, you are sure that the token is there.

axios.interceptors.request.use(req => {
  // `req` is the Axios request config, so you can modify
  // the `headers`.
  req.headers.authorization = ‘Bearer mytoken’;
  return req;
});

// Automatically sets the authorization header because
// of the request interceptor
const res = await axios.get(‘https://api.example.com’);

Log every request and response using interceptors.

Logging requests can be beneficial, especially when you have a large app and you don’t know where all your requests are triggered. Using an Axios interceptor, you can log every request and response quickly.

const axios = require(‘axios’);

axios.interceptors.request.use(req => {
  console.log(`${JSON.stringify(req, null, 2)}`);
  // you must return the request object after you are done
  return req;
});

axios.interceptors.response.use(res => {
  console.log(res.data.json);
  // you must return the response object after you are done
  return res;
});

await axios.post(‘https://example.com/‘);

Error handling using Axios interceptors

You can use An Axios interceptor to capture all errors and enhance them before reaching your end user. If you use multiple APIs with different error object shapes, you can use an interceptor to transform them into a standard structure.

const axios = require(‘axios’);
axios.interceptors.response.use(
  res => res,
  err => {
    throw new Error(err.response.data.message);
  }
)
const err = await axios.get(‘http://example.com/notfound’).
  catch(err => err);
// “Could not find page /notfound”
err.message;

Add rate limiting to requests using interceptors.

Backend resources are limited and can cost a lot of money. As a client, you help reduce the load on your server by rate-limiting your HTTP calls. Here’s how you can do it using an Axios interceptor.

const axios = require(‘axios’);
const debounce = require('lodash.debounce');
axios.interceptors.request.use(
  res => {
return new Promise((resolve) => {
// only fire a request every 2 sec
       debounce(
          () => resolve(config),2000);
       });
    });
  }
)

My new mac setup for web development in 2021

Khaled Garbaya — Tue, 19 Jan 2021 00:00:00 +0000

I recently got a new mac and decided to set it up from scratch. In this blog post, you get a detailed list of all the tools I installed to help me with my day to day web development tasks.

Don't you have a dotfile?

I do have two dotfiles repo, but they kind of fall behind and are outdated. Also, I was not 100% satisfied with my setup, so I decide to start with a clean slate.

Setting up the foundation

First thing, you will need a password manager. With a new computer, you will need to log in to many services, like Github, email, etc., so it is better to set up your password manager first. I use 1Password as my primary password manager.

Second, to make your life easier, get a package manager for your mac; I am talking about brew. It will allow you to install 90% of your tools through the terminal.

The Terminal setup

Now iTerm2, a terminal emulator, this a personal choice, and feel free to install anything else you want or use the default mac terminal, which I did btw for over two years.

brew install --cask iterm2

Continuing with iterm2, I love the night owl theme for both my terminal and my code editor.

Another setting you might want to change is to set the appearance to minimal.

Even more terminal goodness, let's install zsh oh-my-zsh this will help you take your terminal to the next level with things like history and autocomplete. So no more "what was that command again".

Setting up the Node environment

For Node js, I use a node version manager, nvm. This allows me to install different versions of nodejs and switch between them from the terminal. to install nvm, you can use brew

sh brew install nvm mkdir ~/.nvm nvm install stable

For the node package manager, npm already comes bundled with nodejs, but sometimes I might need yarn so let's install it using brew.

brew install yarn

Setup git and source control

I use Github to host all my repositories if you follow this tutorial to set up an ssh key.

Another important thing is to tell git who you are instead of getting random author details on your commit like khaled@MBP.

git config —global user.name "FIRST_NAME LAST_NAME."
git config —global user.email "you@domain.com."

You might want to install Github hub. Github hub will add some excellent features on top of git, like creating a repository from your terminal and starting a pull request directly from the terminal.

Code editors and workflow

For coding, I use mostly nvim and tmux because I love seeing everything in one window, something like this:

And I know I know vscode has an integrated terminal. With tmux, you can do more like zooming in on panel quickly do a task and zoom back and switch between multiple projects quickly using sessions inside the same terminal window.

You can find all my nvim, tmux and coc configs here there should be enough comments to explain things.

Extras

If you have an external monitor that is not supported officially by Apple, you can't control your monitor's brightness, contrast, or volume. Luckily there is a utility that you can install to fix that.

brew install --cask monitorcontrol

I also use Alfred, a productivity App for mac. You can keepo your Alfred settings in sync between multiple computer using Dropbox, here's how to do it

2020 A year in review

Khaled Garbaya — Sat, 19 Dec 2020 00:00:00 +0000

This year, 2020, was crazy, unusual, and maybe we will talk about it for years to come. I am very grateful that my family and I are safe. 2020 is also the year that we had our first baby, a lovely baby girl. Throughout the year, I’ve released a decent amount of educational content focusing more on the JAMstack.

TLDR;

Videos: 45 YouTube videos
Blog posts: 3 blog posts
Courses: 1 big course and four mini-courses/collections, a total of 28 videos
Side Projects: https://tldreact.dev, https://learnjamstack.com
Twitch Streams: around 40+ stream

Content I released

My main focus was JAMstack and building a complete project from start to finish. Not the classic blog post or todo app but real-world saas Apps using Gatsbyjs, Netlify, Contentful, and the JAMstack friends.

Most of the content was in the form of videos. I started the year with a challenge, pushing the JAMstack to its limit, so I started building a Saas App called rubbergoose.dev . Throughout 23 streams, I created a complete App that uses Netlify Identity, Stripe, Twillio videos, and much more hot new tech. You can find all the videos in this YouTube playlist . The code is also opensource over at Github .

Continuing with the live stream, I also did 13 random ones covering different topics like working on my website , Setting up my dev environment, exploring other frameworks/tools like eleventy, Gatsby recipes, and answering some people’s questions about Contentful.

Compared to video production, I did very poorly in writing blog posts, which I will try to improve in 2021 (famous last word). I wrote a piece about how to use Gatsby as a replacement for create-react-app . The goal was not to talk about this vs. that but to showcase Gatsby’s power and how you can build real-world apps with it. The second blog post I wrote is a deep dive into Gatsby recipes and how you can create your own. Consider it the written version of my egghead mini-course .

Now courses, With the help of egghead.io , I produced the following:

Side projects

I probably start 34897 side projects, but I will talk only about the ones I released.

I released learnjamstack , a curated list of courses, articles, and tips about JAMstack.The main thing you get from this project is a weekly email with great jamstack resources, or what I thought is cool.

I released tldreact.dev , quick and easy React snippets that you’re always looking for but never find. Most of the time, when working with React, I find myself scanning a tutorial directly for the code and skipping all the explanations and fluff because I don’t need it, so I made tldreact.dev just for that use case.

Where to go from here

Do you want to keep an eye on what I will release next? Subscribe to my newsletter and subscribe to my YouTube channel .

Getting Started with Gatsbyjs recipes

Khaled Garbaya — Sat, 02 May 2020 00:00:00 +0000

The Gatsby ecosystem is prosperous with plugins and themes, which I love, but sometimes it becomes a problem when trying to assemble all the pieces to achieve your goal.

For a long time, proper documentation was the solution, but it is hard to keep up to date and copy-pasting commands into your terminal without understanding what they do. It becomes a tedious process.

Wouldn't it be nice if you could make the setup instructions more interactive? Where people can read through it and set up their projects at the same time.

Enter: Gatsbyjs Recipes

Gatsbyjs Recipes are run from the CLI and automate common tasks like creating pages and layouts, installing and setting up plugins, adding a blog to a site, setting up Typescript, and many more.With the release of this new feature, Gatsby has created 11 official recipes that you can explore, including ThemeUI, Sass, Cypress, animated page transitions, and persistent layout components.

What is a Gatsby recipe?

Recipes are written in MDX—a combination of Markdown and React components—readable by both humans and machines. (Other "infrastructure as code" automation, like AWS CloudFormation, use kinda-sorta legible YAML templates that favor the machines).

MDX is a great choice here because it makes Gatsby Recipes instructions and explanations easily readable for humans while using React components syntax to declare to Gatsby Recipes the desired state of the world.

Set up Gatsby to use Recipes

To be able to use recipes, you need to install the latest gatsby-cli yarn global add gatsby-cli@latest. Also, make sure to upgrade your project to use the latest gatsby by running the command yarn upgrade --latest.

To test if everything is working as expected, run gatsby recipes, and you should see a list of the official recipes.

Install NPM packages Using a Gatsby Recipe

To create a recipe, we need first to create an MDX file. You can create it anywhere. It doesn't need to be part of a Gatsby project.Let's take setting up tailwindcss with Gatsby as an example.Create a file called tailwindcss.mdx

# Setup Gatsby with tailwindcss

[Tailwindcss](https://tailwindcss.com/) Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override.

--------

Install npm packages

<NPMPackage name="tailwindcss"/>

We started with a Head and some text to explain what the recipe does and using --- we mark the beginning of a new Step.Using the NPMPackage block, we tell Gatsby that it's time to install a dependency.

Add a Gatsby Plugin using a Gatsbyjs Recipe

To add a gatsby plugin using a recipe, you need to use both the NPMPackage block with the GatsbyPlugin block.Our tailwindcss.mdx file looks like this.

# Setup Gatsby with tailwind

[Tailwindcss](https://tailwindcss.com/) Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override.

--------

Install npm packages

<NPMPackage name="tailwindcss"/>

--------

Add a Gatsby Plugin

<NPMPackage name="gatsby-plugin-postcss" />
<GatsbyPlugin name="gatsby-plugin-postcss" />

Add Files using a Gatsby Recipe.

You can also create files in your Gatsby project using recipes.In my case, I need to create 3 files:postcss.config.js to pass some configuration to postcsstailwind.css to import the tailwindcss componentsusingtailwind.js, a gatsby page to test if everything is workingUsing the File block, you can specify the path, where you want to create the file, and the content, which is usually a link to a gist with some text content.

Our tailwindcss.mdx file looks like this now.

# Setup Gatsby with tailwind

[Tailwindcss](https://tailwindcss.com/) Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override.

--------

Install npm packages

<NPMPackage name="tailwindcss"/>

--------

Add a Gatsby Plugin

<NPMPackage name="gatsby-plugin-postcss" />
<GatsbyPlugin name="gatsby-plugin-postcss" />

--------

Add some files

<File path="postcss.config.js" content="https://raw.githubusercontent.com/Khaledgarbaya/gatsby-tailwindcss-recipe/master/postcss.config.js"/>

<File
  path="tailwind.config.js"
  content="https://raw.githubusercontent.com/Khaledgarbaya/gatsby-tailwindcss-recipe/master/tailwind.config.js"
/>

<File
  path="src/styles/tailwind.css"
  content="https://raw.githubusercontent.com/Khaledgarbaya/gatsby-tailwindcss-recipe/master/src/styles/tailwind.css"
/>

<File
  path="src/pages/usingtailwind.js"
  content="https://raw.githubusercontent.com/Khaledgarbaya/gatsby-tailwindcss-recipe/master/src/pages/tailwind.js"
/>

--------

Done

Where to go from here

Make sure to check out the official blog post by Gatsby and visit the Umbrella issue if you want to contribute

Gatsby As a Replacement for Create-react-app

Khaled Garbaya — Wed, 01 Jan 2020 00:00:00 +0000

Gatsbyjs and create-react-app are similar in that can help you set up application and removes much of the configuration headache. However, Gatsby offers more like backed in performance optimizations and static rendering without the need for a server and a thriving ecosystem of plugins.

You might ask me "Isn't Gatsby a static site generator?".

The Answer is Yes But it offers more than that. It gives you HTML to start with then, rehydrates it into a fully-fledged React app

CRA VS Gatsby

They are similar, they work perfectly with React, they help you setup an application and they remove the configuration headache.

However...Gatsby Offers More

Zero config performance optimazations

GatsbyJS provides code and data splitting out-of-the-box. It loads your critical HTML and CSS, then prefetches resources for other pages. That way, clicking around feels so fast. Additionally, it offers things like:

gatsby-link uses an intersection observer to preload linked pages when they appear in the viewport, making them feel like they load instantlygatsby-image creates optimized versions of your images in Different sizes, loading a smaller, optimized version of an image and replacing it with a higher resolution version when loading has finished. It also uses an intersection observer to cheaply lazy load images.

Server side rendering without a serverAt build time, GatsbyJS takes all your react component with all the needed data and generates static HTML, JavaScript, and CSS files. Once the website is fully loaded it rehydrates it into a fully fledge React PWA

A Unified GraphQL Data Layer

GatsbyJS unifies all data sources into one layer using GraphQL

A rich plugin ecosystem

With GatsbyJS's flexible plugin system, it lets you bring your data source. From anywhere like CMS, database, or filesystem and makes it queriable through GraphQL.

A few Gotcha

The window ObjectIf one of your react components relies on the window object it will cause a problem when you are building the Gatsby app because the ssr step runs on a node environment. Luckily you can workaround that using the following check

  const isBrowser = typeof window !== "undefined"

exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
  if (stage === "build-html") {
    actions.setWebpackConfig({
      module: {
        rules: [
          {
            test: /bad-module/,
            use: loaders.null(),
          },
        ],
      },
    })
  }
}

You can use Gatsby without Graphql

Although Gatsby marries React and Graphql nicely you don't have to use GraphQL if you don't want to.

Here is an example

exports.createPages = async ({ actions: { createPage } }) => {
  // `getPokemonData` is a function that fetches our data
  const allPokemon = await getPokemonData(["pikachu", "charizard", "squirtle"])
  // Create a page that lists all Pokémon.
  createPage({
    path: `/`,
    component: require.resolve("./src/templates/all-pokemon.js"),
    context: { allPokemon },
  })
  // Create a page for each Pokémon.
  allPokemon.forEach(pokemon => {
    createPage({
      path: `/pokemon/${pokemon.name}/`,
      component: require.resolve("./src/templates/pokemon.js"),
      context: { pokemon },
    })
  })
}

Where to go from here

I did a talk about the topic at Gatsby days London

You can find the slides also here

I am about to launch my course "migrate a create-react-app project to Gatsby" which will go a lot deeper in the topic and provide a step by step Guide on how you can take your existing CRA project and turn it into a Gatsby App. You can check it out here.

Cheers,

Khaled

Tl;Dr GraphQL

Khaled Garbaya — Sun, 12 May 2019 00:00:00 +0000

What is GraphQL?

GraphQL is a query language for Your API, and a server-side runtime for executing your queries.It is not tied to any specific database engine it is up to you to resolve the query. To create a GraphQL service you define types and their fields, then provide functions for each field on each type.

GraphQL query language

A GraphQL query looks like this:

[query][query name]{
     typeName {
        fieldName
    }
}

Everything inside the square brackets, [ and ] is optional.

Example query:

query getUserName{
    person {
       name 
   }
}

The return result will be something like this

{
  data: {
    person: {
       name: 'Jhon Snow' 
    }
}

Fields

GraphQL is about asking your service for specific fields from specific objects. For example: getting the name field from a user. The nice thing about GraphQL is the data you get is shaped exactly as the query.

change this to table side by side

{
     person {
        name 
    }
}

{
  data: {
    person: {
       name: 'Jhon Snow' 
    }
}

A field can also refer an Object or a collection of Objects, for example let say every person in the database can have a pet. The query will look like this:change this to table side by side

{
     person {
        name 
        pet {
          name
       }
    }
}

{
  data: {
    person: {
       name: 'Jhon Snow',
       path: {
          name: 'Doge'
       }
    }
}

Arguments

In GraphQL every field and nested object can get its own set of arguments, this is very powerful, and sets GraphQL from REST apart.

So let's evolve our previous query a bit

{
  person(id:'kdlhh123hf3tzf') {
    name
    height (unit: METER)
    pet{
      name
      age(format: DOG_YEARS)
    }
  }
}

{
  data: {
    person: {
       name: 'Jhon Snow',
       # 183 cm
       height: 183
       pet: {
          name: 'Doge',
          age: 7
       }
    }
}

Let me explain the previous query.I told my service to get the user with the id kdlhh123hf3tzf with the fields name and the height in meter. Using arguments you can specify things like the format of the field.

Aliases

Let's take this example query

query getUsers {
  users(role: admin) {
    id
    firstName
    lastName
    phone
    username
  }
  users(role: accountant) {
    id
    firstName
    lastName
      phone
    username
  }
}

Graphql will give us an error

{
  "errors": [
    {
      "message": "Fields \"users\" conflict because they have differing arguments. Use different aliases on the fields to fetch both if this was intentional.",
      "locations": [
        {
          "line": 2,
          "column": 3
        },
        {
          "line": 9,
          "column": 3
        }
      ]
    }
  ]
}

That's because we can't use the same node name twice similar to json. To solve that we can use GraphQL Aliases.

query getUsers {
  admins: users(role: admin) {
    id
    firstName
    lastName
    phone
    username
  }
  accountants: users(role: accountant) {
    id
    firstName
    lastName
    phone
    username
  }
}

the result of this query will be

{
  data: {
    admins: [
      {
        id
        firstName: 'Will'
        lastName: 'Smith'
        phone: '+0912323132'
        username: 'willy'
      }
    ],
    accountants: [
      {
        id
        firstName: 'Hannah'
        lastName: 'Smith'
        phone: '+0912323132'
        username: 'hannah'
      }
    ],

  }
}

Fragments

A graphql auery can get very verbose and Mainly because you need to provide every field you want to pull from your graphql endpoint.Using Graphql Fragment you can reuse pieces of query logic accross multiple queries.We can improve our previous query using fragment like this

fragment UserInfo on User {
   id
   firstName
   lastName
   phone
   username
}

query getUsers {
  admins: users(role: admin) {
    ...UserInfo
  }
  accountants: users(role: accountant) {
    ...UserInfo
  }
}

What happened here is that we groupped the common fields on the User Object in a Fragment and we used it everytime we query for a user instead of writing the field names over and over again.

Where to go from here

Introduction to GraphQL graphql.org
WTF is GraphQL egghead.io

How to style text with CSS | Couple Code Therapy

Khaled Garbaya — Tue, 16 Oct 2018 20:11:26 +0000

Hey Friends!

We're back

This is exciting, In Couple Code Therapy Episode Six

My Lovely partner continues using CSS to improve her website look and feel, We'll cover how to style text in detail

Including :

Mastering text styling with CSS.
We'll go through all the basic fundamentals of text/font styling in detail, like setting font weight, family and style, text alignment, and other effects, and line and letter spacing.

Check out the show notes for more details.

Please let us know how we can improve to better teach basic web development

About the show:

Couple Code Therapy! A new twist on learning web development…Where our brave coding expert host, tries to teach his beautiful, lovely, intelligent, and immaculate wife how to update her own website.
It’s learning the basics of web development & coding – without being overwhelmed.

How to style navigations and center containers in CSS | Couple Code Therapy

Khaled Garbaya — Wed, 12 Sep 2018 11:15:34 +0000

Hey Friends!

This is exciting, In Couple Code Therapy Episode Five

My Lovely partner continues using CSS to improve her website look and feel, We'll cover how to style navigations in a website and some layout techniques to center containers

Here's a preview of the progress

We'll cover :

How to style navigations in CSS
CSS layout techniques
Make responsive containers

Check out the show notes for more details.

Please let us know how we can improve to better teach basic web development

About the show:

TLDR GraphQL?

Khaled Garbaya — Mon, 10 Sep 2018 09:14:31 +0000

Hey Friends, I am writing a Tl;Dr (Too long; Didn't read) blog post about Using GraphQL on the client side.
Mainly for folks to get the information they want without getting overwhelmed with long documentation.

I have a lot in mind to write about already, like basic querying, Fragments, arguments etc... and I would like you to help me with more information.

What was the information you wished you knew when working with GraphQL and or you wished there was a better explanation for it?

I am planning to post the blog post in the next 2 days

Cheers,
Khaled

The state of javascript Survey

Khaled Garbaya — Fri, 07 Sep 2018 20:27:40 +0000

Hey Friends,

Please help fill in the survey about the state of javascript 2018.

If you’re not familiar, the survey covers all things JavaScript and tries to answer two main questions:

Which up-and-coming tools are developers most excited about?
Which tried-and-true technologies are developers most happy with?

Getting Started With CSS | Couple Code Therapy

Khaled Garbaya — Wed, 05 Sep 2018 07:49:33 +0000

Hey Friends!

This is exciting, In Couple Code Therapy Episode Four

My Lovely partner Starts using CSS to style some HTML elements, She was so happy that she can finally make her Website more colorful.

We'll cover :

How to include CSS in your page
CSS Selector
CSS specificities

Check out the show notes for more details.

Please let us know how we can improve to better teach basic web development