Salma Alam-Naylor  
Head of Developer Education

### Nordcraft Fundamentals

Course details

- **Level**: Beginner  
- **Lessons**: 46  
- **Time**: 2h

### Contents

1. [Welcome](/content/learn/fundamentals#welcome/index.html)  
2. [HTML](/content/learn/fundamentals#html/index.html)  
3. [CSS](/content/learn/fundamentals#css/index.html)  
4. [CSS animations](/content/learn/fundamentals#css-animations/index.html)  
5. [Events](/content/learn/fundamentals#events/index.html)  
6. [Formulas](/content/learn/fundamentals#formulas/index.html)  
7. [APIs and data](/content/learn/fundamentals#apis-and-data/index.html)  
8. [Workflows](/content/learn/fundamentals#workflows/index.html)  
9. [Components](/content/learn/fundamentals#components/index.html)  
10. [Pages](/content/learn/fundamentals#pages/index.html)  
11. [Packages](/content/learn/fundamentals#packages/index.html)  
12. [Media management](/content/learn/fundamentals#media-management/index.html)  
13. [Publishing](/content/learn/fundamentals#publishing/index.html)

# Nordcraft Fundamentals

Learn web development with Nordcraft. Learn HTML, CSS, and Nordcraft's approach to JavaScript-based interactivity so you can bring your ideas to life.

Pro tip! Keep the Nordcraft editor open so you can try out each feature.

Salma Alam-Naylor  
Head of Developer Education

### 1. Welcome

Course introduction, in-depth tour of the Nordcraft editor, and tips on working with Nordcraft's AI.

1. ### Building for The Web in Nordcraft
   
   Learn about what's covered in the Nordcraft Fundamentals course, who the course is for, and how to use it.
   
   Enable YouTube videos [Privacy policy](/content/privacy/index.html)

2. ### Get to know the Nordcraft editor
3. ### Making the most of the AI assistant

## 2. HTML

Learn about HTML and how it powers the structure of content on The Web.

1. ### Adding HTML elements
2. ### Using HTML element attributes
3. ### HTML for accessibility  
   **Coming soon!**

## 3. CSS

Learn about modern CSS and its powerful capabilities in styling content on The Web.

01. ### Get to know the Nordcraft style panel  
02. ### Default user agent styles vs the CSS reset  
   **Coming soon!**
03. ### Adding style variants
04. ### Layouts: the box model
05. ### Layouts: the display property
06. ### Layouts: responsive design and fluid layouts  
   **Coming soon!**
07. ### Layouts: positioning and stacking
08. ### Fluid typography  
   **Coming soon!**
09. ### The Nordcraft color picker  
   **Coming soon!**
10. ### Creating beautiful gradients  
   **Coming soon!**
11. ### Using CSS variables  
   **Coming soon!**
12. ### Advanced CSS properties  
   **Coming soon!**

## 4. CSS animations

Learn how to create beautiful animations and interactions using the power of modern CSS and a visual animation editor.

1. ### Get to know the Nordcraft animation editor
2. ### Combining animations  
   **Coming soon!**

## 5. Events

Learn about HTML interactivity and how to make your websites interactive using events.

1. ### Making your website interactive
2. ### Adding events to HTML elements

## 6. Formulas

Learn how to transform data, perform calculations, and create conditional logic in your projects using the formula editor.

1. ### Get to know the Nordcraft formula editor
2. ### Using variables to manage state
3. ### The show/hide formula
4. ### The repeat formula
5. ### Building reusable formulas
6. ### Using formulas for CSS  
   **Coming soon!**
7. ### Creating custom actions using JavaScript  
   **Coming soon!**
8. ### Using context to share state  
   **Coming soon!**

## 7. APIs and data

Learn how to connect to any back-end API to fetch data for your website.

1. ### Connect to any API
2. ### Getting data from a REST API
3. ### Getting data from a GraphQL API
4. ### Use API data anywhere in the Nordcraft editor

## 8. Workflows

Learn how to use workflows to trigger a series of actions in response to user events, API calls, and other triggers.

1. ### Using workflows to react to events  
   **Coming soon!**

## 9. Components

Learn about creating reusable components for your websites as your project grows.

1. ### Why use components?
2. ### Creating and using components
3. ### Using component attributes
4. ### Using component events

## 10. Pages

Understand how to create pages, configure URLs, and add page meta data.

1. ### Pages in Nordcraft

## 11. Packages

Learn about the growing package ecosystem in Nordcraft.

1. ### Installing and using packages  
   **Coming soon!**

## 12. Media management

Understand how to upload, manage and use images in your projects.

1. ### Uploading and using images

## 13. Publishing

Learn how to publish your website to The Web, and how Nordcraft's powerful version control and branching system allows for easy collaboration and parallel feature development.

1. ### Version control and branching
2. ### Publish your project to The Web
3. ### Configure a custom domain  
   **Coming soon!**
4. ### Choosing the right Nordcraft plan for your website  
   **Coming soon!**