Salma Alam-Naylor  
Head of Developer Education

### Speed Run Nordcraft  
Course details  
**Level**  
Experienced  
**Lessons**  
16  
**Time**  
15m

### Contents  
1. [HTML and Components](/content/learn/speed-run#html-and-components/index.html)  
2. [CSS and Styling](/content/learn/speed-run#css-and-styling/index.html)  
3. [Events and interactivity](/content/learn/speed-run#events-and-interactivity/index.html)  
4. [State, logic and APIs](/content/learn/speed-run#state,-logic-and-apis/index.html)

# Speed Run Nordcraft  
Already know HTML, CSS and JavaScript? Speed through this course to understand how web development concepts translate to working inside the Nordcraft editor.

Salma Alam-Naylor  
Head of Developer Education

**Level**  
Experienced  
**Duration**  
16 lessons (15m)

## 1. HTML and Components  
Learn about how pages, HTML elements and components work in Nordcraft.

1. ### The Editor  
   
   Get a quick overview of the Nordcraft Editor including project sidebar, various panels, canvas resizing, test mode, and the AI Assistant.  
   
   Enable YouTube videos [Privacy policy](/content/privacy/index.html)

2. ### Pages  
3. ### Components  
4. ### Attributes

## 2. CSS and Styling  
Understand how to style your elements and components using the Nordcraft style panel and animation editor.

1. ### Style panel  
2. ### Animation editor  
3. ### CSS variables

## 3. Events and interactivity  
Learn how to add JavaScript-based interactivity to your web pages using events, workflows and custom JavaScript when you need to.

1. ### Events  
2. ### Workflows  
3. ### Custom actions

## 4. State, logic and APIs  
Understand how you can manage state in your Nordcraft project, create reusable functions as formulas, and connect to any back-end API.

1. ### Variables  
2. ### The formula editor  
3. ### Project formulas  
4. ### The show/hide formula  
5. ### The repeat formula  
6. ### The API panel

.jpeg/public)  
Chat with Nordcraft  
Chat with the Nordcraft team](https://discord.gg/svBKYZf3UR)  
  
Call our CEO  
Plan a video call with Andreas](/content/callourceo/index.html)  
[Hi Nordcraft!  
Write Nordcraft  
Send us an email](/content/contact/index.html)

[Blog](https://blog.nordcraft.com/) [Pricing](/content/pricing/index.html) [Documentation](https://docs.nordcraft.com/) [hello@nordcraft.com](mailto:hello@nordcraft.com)

[Roadmap](https://github.com/orgs/nordcraftengine/projects/17/views/4) [Press Kit](/content/press/index.html) [Terms & Conditions](/content/terms/index.html) [Privacy Policy](/content/privacy/index.html) [Affiliate](/content/refer/index.html) [For LLMS](/content/for-llms/index.html)

[Nordcraft on YouTube](https://www.youtube.com/@nordcraftengine)[Nordcraft on LinkedIn](https://www.linkedin.com/company/nordcraft)[nordcraft.com on bsky.app](https://bsky.app/profile/nordcraft.com)[Nordcraft on Discord](https://discord.gg/nordcraft)