Welcome
This is the first step in your prototyping journey with Nucleus. We will start from the very beginning and get you prototyping in no time!
There are no knowledge requirements, so don't worry about not knowing how to code 😉
How the tutorials work
Each tutorial comes with an interactive editor. You can edit the code and see the changes in real-time.
Do not worry if you do not understand everything. The tutorials are meant to be a starting point.
Feel free to try out the editor now (on the top right) and see what happens when you edit the code.
Try changing the world "Welcome" in the editor to your name and see what happens in the preview panel.
There are no time limits to go through all the lessons and you can come back to the tutorials whenever you need to!
What you will learn
The basics
- The anatomy of an HTML element
- How to use HTML elements and attributes
- What is a Nucleus component
- How to use Nucleus components
Your first layouts
- One-column layout (
<ns-panel>) - Content formatting
- Multiple columns layouts
Tutorials are not documentation
The tutorials are not meant to be a replacement for the documentation. The documentation is meant to be a reference for you to use when you need to know how a component and the Design System work. The tutorials are meant to be a starting point for you to learn how to write markup with the components.
Read our documentation for more information at https://nucleus.design/docs/.
What next?
Now that you have learned how to use the tutorials, you can start the first tutorial by clicking next at the bottom of the page.