# Adding the HTML
### ✍️ Objective - To display categories in homepage
Open the layout.html file
This is how a bare minimum layout.html file would look like, it has some code which is required for a theme to function properly, avoid removing any of this code.
```html
{% include './../../dukaan/common/theme-fonts.html' %}
{{ 'splide.min.css' | css | static }}
{{ 'layout.css' | css | static }}
{{ 'styles.css' | css | static }}
{% include './../../dukaan/common/seo_tags/commonSeoTags.html' %}
{% include './../../dukaan/common/theme-colors.html' %}
{% block head %}
{% endblock head %}
{{ 'head' | DukaanBlocks }}
{% include './../../dukaan/common/spinner-loader.html' %}
{% include './../../dukaan/common/hellobar.html' %}
{% block content %}
{% endblock content %}
{% include '../../dukaan/common/bxgy-sticky-footer.html' %}
{% include '../../dukaan/common/store-open-sticky.html' %}
{% block postfooter %}
{% endblock postfooter %}
{{ 'footer' | DukaanBlocks }}
{% include './product-variant-templates.html' %}
{{ 'variant-utils.js' | js | static }}
{{ 'dukaan-utils.js' | js | static }}
{{ 'layout.js' | js | static }}
{{ 'dukaan-coupons.js' | js | static({ defer: true }) }}
{{ 'dukaan-offers.js' | js | static({ defer: true }) }}
{{ 'axios.min.js' | js | static({ defer: true }) }}
{{ 'splide.min.js' | js | static }}
{{ 'common-components.css' | css | static }}
{% include './../../dukaan/common/auth.html' %}
{% include '../../dukaan/common/multilanguage.html' %}
{% include './../../dukaan/common/common-scripts.html' %}
{% include '../../dukaan/common/snackbar.html' %}
{% block script %}
{% endblock script %}
```
If we check now, our site would be completely blank. Now, we will try to display a dummy category.
We will display a category image and category name, go ahead and paste this code inside the body tag.
```html
```
This code snippet creates a simple HTML structure to display a category card within a container. The category card includes an image and the category name, for now we have hardcoded a dummy image and category name, both wrapped within a hyperlink element for navigation purposes.
\
If you save & preview the changes, you'd see something like this
Let's try to add some more dummy categories, the updated code would be
```html
```
This is how our site looks now
Now that we can display dummy data with HTML its time to flare up the tags by spicing it up with some CSS in the next chapter.
For reference - The contents of layout.html file after the above changes
```html
{% include './../../dukaan/common/theme-fonts.html' %}
{{ 'splide.min.css' | css | static }}
{{ 'layout.css' | css | static }}
{{ 'styles.css' | css | static }}
{% include './../../dukaan/common/seo_tags/commonSeoTags.html' %}
{% include './../../dukaan/common/theme-colors.html' %}
{% block head %}
{% endblock head %}
{{ 'head' | DukaanBlocks }}
{% include './../../dukaan/common/spinner-loader.html' %}
{% include './../../dukaan/common/hellobar.html' %}
{% block content %}
{% endblock content %}
{% include '../../dukaan/common/bxgy-sticky-footer.html' %}
{% include '../../dukaan/common/store-open-sticky.html' %}
{% block postfooter %}
{% endblock postfooter %}
{{ 'footer' | DukaanBlocks }}
{% include './product-variant-templates.html' %}
{{ 'variant-utils.js' | js | static }}
{{ 'dukaan-utils.js' | js | static }}
{{ 'layout.js' | js | static }}
{{ 'dukaan-coupons.js' | js | static({ defer: true }) }}
{{ 'dukaan-offers.js' | js | static({ defer: true }) }}
{{ 'axios.min.js' | js | static({ defer: true }) }}
{{ 'splide.min.js' | js | static }}
{{ 'common-components.css' | css | static }}
{% include './../../dukaan/common/auth.html' %}
{% include '../../dukaan/common/multilanguage.html' %}
{% include './../../dukaan/common/common-scripts.html' %}
{% include '../../dukaan/common/snackbar.html' %}
{% block script %}
{% endblock script %}
```
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://docs.mydukaan.io/basic-code-editing/adding-the-html.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
