My name is Rachit Khurana
``` Now, we will return this template when the user goes to the index page. For that, we will navigate to `views.py` where we defined a hello function that gets called when the user goes to the index page. We will then use `render` function from `django.shortcuts` to render this template. The `render` function simplifies the process of rendering templates by handling the template loading and rendering process automatically. It takes the request, the template file path, and an optional context as arguments and returns an HTTP response with the rendered template. The `views.py` code will look like this ```python from django.shortcuts import render, HttpResponse # Create your views here. def hello(request): return render(request, 'hello.html') ``` Now if we run the server & go to [http://127.0.0.1:8000/](http://127.0.0.1:8000/), we will be able to see this as an HTML-rendered page. Awesome right? However, do note that you won't be able to create CSS or JS files in the templates folder & use those in the HTML file. This is because Django only takes the HTML file, & returns the rendered file directly. It doesn't take the CSS & JS files. To use separate CSS & JS files, we need to serve them as static files. We will now see how to serve static files. ## Static Files Static files include CSS, JavaScript, images, and other files that remain constant for all users visiting your website. These files are served directly to the client's browser and contribute to the visual and interactive aspects of your web pages. To set up static files, we will create a new folder named `static`. Now we need to tell Django to use this folder for serving static files. For that, we will add the following line to the `settings.py` file: ```python STATICFILES_DIRS = [ BASE_DIR / "static" ] ``` `STATICFILES_DIRS` is a list where you specify the directory paths where Django should look for static files. That's it. Now whatever file we store in the static folder will be available at http://127.0.0.1:8000/static/<filename>. ### Using static files inside templates Now, let's create a simple CSS file with the name `style.css`. I will be using a pretty simple CSS file for demonstration. ```css body{ background-color: #ca1c1c; color: aqua; } ``` Now, we will use this in our `hello.html` file by making use of the static tag. First, we will import it & then use it as shown below: ```xml {% load static %}My name is Rachit Khurana
``` Now when we run the server & go to [http://127.0.0.1:8000/](http://127.0.0.1:8000/) we will see the new HTML page with the CSS. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1686997678145/76fe5f0e-bef4-4d63-ac65-22fb3ea6cd09.png align="center") Congratulations, you know know how to render an HTML template & use static files. But what if we need to pass an argument from the code to the template? We can also do that easily. Let's take a look at how to do that. ### Passing arguments to the template We can easily pass variables to the template to render. For eg, I want to pass my name & age to the template. We will go to the `views.py` file & declare these variables in the function. We then need to pass another argument to the render function with all the variables we need to pass to the template as a dictionary. The final code will look like this: ```python from django.shortcuts import render, HttpResponse # Create your views here. def hello(request): name="Rachit Khurana" age=19 return render(request, 'hello.html', {'name':name, 'age':age}) ``` Now we can use these variables in the template `hello.html` by wrapping them with double curly brackets like this: ```xml {% load static %}My name is {{name}}
My age is {{age}}
``` Here `{{name}}` will get replaced by the value of `name` we have passed to the template. Now if we try to run the server & go to [http://127.0.0.1:8000/](http://127.0.0.1:8000/) we can see the new rendered HTML page with those variables. Like this: ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1686998271696/d587636e-1ade-43d3-a06c-e7c100ef5a3c.png align="center") We can not only pass string or int values, but we can also pass lists, tuples, dictionaries etc. Congratulations, you now know how to render templates, serve static files & pass variables to the template. But that's not all, Django templating is way more powerful than this. We will explore more about it in the next blog.