Codux Help Center
Browse our articles to find the answers you need
Codux Tutorial Project
We created a tutorial project to showcase some capabilities of Codux and to teach basic concepts through fun and interactive lessons. It includes 10 boards that each cover a basic concept of Codux. Once completed, you should have a better understanding of Codux and be able to apply what you learned to create your own projects.
To open the tutorial project, choose the option from the Projects screen and then enter a name and path on your computer to save it to. Enjoy the lessons!
LessonsĀ
This table lists the various lessons included in this project along with their corresponding concepts and relevant reading material to help the reader understand and apply the concepts with real-world examples.
Lesson | Concept | Reading Material |
|---|---|---|
1: Let's Start! | This tutorial lesson is about visually editing and interacting with components in Codux. Preview mode lets you interact with your components, while Select allows you to select elements to edit them. | |
2: Elements Panel | This tutorial lesson is about the Elements Panel and how it can be used to rearrange the contents of a component. The panel contains both HTML elements and components, which can be dragged to change the structure of the component. | |
3: Add Elements | This tutorial lesson is about adding new HTML elements and other components to the design using the Add Elements Panel. | Elements Panel (Adding Elements to Components and Boards) |
4: Computed Styles | This tutorial lesson is about how to use the Computed Styles Panel to view the styles applied to an element, and how to edit those styles on the Styles Panel. | |
5: Styles Panel | This tutorial lesson is about using selectors to apply styles to one or more elements. | |
6: Create Class | This tutorial lesson is about classes, namely creating a new style class to use for adding styling to elements. | |
7: Components | This lesson is about how to use component properties to create a path between two hearts. | |
8: Flex Layout | This tutorial lesson is about using Flex Layout to align and stack elements inside another element. | Style Properties (Self Layout) |
9: Grid Layout | This tutorial lesson is about how to use grid layout to create a heart shape tile puzzle. | Style Properties (Self Layout) |
10: Work with Git | In this tutorial lesson, you will learn how to use Git for version control in your projects. You will learn how to commit changes to your current branch, and how to revert changes if necessary. You will also learn how to switch branches, and how to sync your project with a GitHub account. |
Was this article helpful?
