> For the complete documentation index, see [llms.txt](https://docs.mydukaan.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.mydukaan.io/basic-code-editing.md).

# Basic code editing

We shall now move into learning how to make edits into our theme to change the structure, looks and functionality.

### ✍️ Objective - To show list of categories in a carousel in layout.html page

We will divide it into 4 parts

1. [Adding the HTML](/basic-code-editing/adding-the-html.md) for the product card to display (If we were building a house, this step would be building the structure of the house using cement, wood, bricks)
2. [Adding the CSS](/basic-code-editing/adding-the-css.md) i.e. color, shadow and other visual elements to make it look appealing (painting the building, adding flooring, furniture, etc.)
3. [Adding the Javascript](/basic-code-editing/adding-the-javascript.md) i.e. functionality to the product card, like, what happens when someone clicks on a product, or hovers on it (Adding fans, lights, electric wiring, etc)
4. [Adding Nunjucks](/basic-code-editing/adding-nunjucks.md) for fetching real data and using it to display the products (Inviting people to live in the house)