Salma Alam-Naylor
Head of Developer Education

Nordcraft Fundamentals

Course details

• Level: Beginner
• Lessons: 46
• Time: 2h

Contents

1. Welcome
2. HTML
3. CSS
4. CSS animations
5. Events
6. Formulas
7. APIs and data
8. Workflows
9. Components
10. Pages
11. Packages
12. Media management
13. Publishing

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

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.

1. Get to know the Nordcraft style panel

2. 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!