Onboarding
Day 1. Interface Basics 1
Move and Zoom Pages, Select and Add Elements, Undo/Redo Changes
Day 2. Interface Basics 2
Right Panel, Pages, Layers, Preview, and Publication
Day 3. Interface Basics 3
Code Editor, Sharing, Themes, Adaptability
Day 4. How to Create a Card
Instructions on how to create a simple card using the Text Icon and Button.
Day 5. Flexbox Tutorial
Flexbox is just 8 properties that will greatly expand your possibilities as a designer.
Day 6. Hover Effect
Change the state of the element displayed as you mouse over it.
Day 7. Adaptive Design
Instructions on how to make a design for the screens of various devices.
Day 8. Components from the Elements
How to create a component using any primitive or group of primitives.
Day 9. Project Theme
The project theme contains variables that can be reused. You can also find a list of breakpoints here.
Day 10. Code Editor
Π‘ode editor displays all the components and their props on the screen. You can also work with the components here.
Day 11. Project Settings
Here you can change the name of the project, set Favicons, adjust the Title and Description, fill in the Open Graph markup, check robots.txt and sitemap.xml, and more.
Day 12. Custom Code
Adding code to the head or body of the page comes in handy when you need to add a Google Analytics script, include a font or styles file, or add CSS to the whole project, and other similar cases.
Day 13. React.js Components
Custom React.js components extend the builder capabilities. They simplify and speed up design creation because they contain ready-made styles, content, and logics. In addition, components can be nested in other components.