Stackbit can teach you web development
Tags: jamstack, webdev
Published: 2021-03-09 16:12:36

---
title: Stackbit can teach you web development
description:  "Teach & learn with Stackbit's new tooling"
published: true
date: 2021-03-09 15:00:00 UTC
tags: jamstack, webdev
cover_image: https://res.cloudinary.com/kkcl/image/upload/t_kkogfbk/w_750,h_380,c_fit,co_white,g_north_west,x_80,y_190,l_text:Inter-bold.otf_80_bold:Stackbit%20can%20teach%20you%20web%20development/t_wKK/kk-og-bg-roomier.jpg
canonical_url: https://katiekodes.com/stackbit-learn-web-development/
---

Have you seen [Stackbit](https://www.stackbit.com/)’s new “Code” & “Content” editors? I’m not sure what more a person needs in life to learn or teach [static site generator](https://dev.to/katiekodes/what-is-a-static-site-generator-350o) HTML templating & front-matter data modeling practices.  
  
I wish this had been around a year ago when I started my Jamstack journey.

## Templating

Check this out: once I [spin it up](https://app.stackbit.com/create), I can see that the in Stackbit’s new [Agency theme](https://themes.stackbit.com/demos/agency/), the body text of a hero section is created with the following code, and that it lives in a file called `hero_section.html`:

```liquid
{% assign content_is_not_empty = section.content | is_not_empty %}
{% if content_is_not_empty %}
  <div class="hero__body text-block">
    {{ section.content | markdownify }}
  </div>
{% endif %}

```

…just by clicking “code” when hovering over the text within my visual preview/editing panel.

![Screenshot of Stackbit's code panel](https://katiekodes.com/images/screenshot-stackbit-20210309-code.png)

## Data model

I can also tell that the data is stored in front matter like this:

```yaml
...
sections:
  - type: hero_section
    ...
    content: >-
      We are a brand and design practice. We work closely with you, your team to
      deliver inspiring work, which enables your organization to grow. [Let's
      talk](/contact/).
...

```

…just by clicking “content” when hovering over the text within my visual preview/editing panel.

![Screenshot of Stackbit's content panel](https://katiekodes.com/images/screenshot-stackbit-20210309-content.png)

## Time saver

I can’t begin to tell you how many **months** of weekends I lost combing through the Git codebases of all of Stackbit’s themes to figure out that [this is how good page builder themes are designed and implemented in data models & templates](https://dev.to/katiekodes/gatsby-react-wsyiwyg-cms-friendly-markdown-1npm/#page-data-structure), trying to connect the dots about what back-end code made what front-end visual effects happen.

{% link https://dev.to/katiekodes/gatsby-react-wsyiwyg-cms-friendly-markdown-1npm %}

_(Tip: Stackbit writes **really** well-architected themes that are worth poring over.)_

1. Being able to just click “code” or “content” and jump straight to part of an experienced web developer’s work that you’d like to dissect _(so as to better understand it)_ is _incredibly_ educational if you’re **learning** web development in the Jamstack.
2. It’s a great tool for **teaching** , too, if you want to show others how you made something.

I’m super impressed, Stackbit.  Keep it coming.