Work with templates as frontend developer - html

Question

I have accepted a job, in which I have to work on some html and css in frontend. However, the files I was given to work with seem to be interpreted by some kind of interpreter (I think Flask with Jinja2). All I have however are frontend files and I cannot figure out, how to debug my code without any interpreter.
F:.
├───static
│ ├───css
│ └───images
│ └───navigation
└───templates
├───admin
├───cart
├───home
├───order
├───partials
├───payment
├───product
├───ticket
└───user
above I have listed the folders I have to work with. Each folder only contains html files, that look like this for example:
<input id="navi-open" type="checkbox" name="" class="ct" />
<div id="navigation" class="column">
<label for="navi-open" class="navi-button">
<img src="{{ url_for('static', filename='images/cancel.png') }}" alt="" />
</label>
<div id="navigation-items" class="column h-sb">
<div class="category">
<a href="{{ url_for('home.home') }}" style="opacity:1"
class="navigation-item light {{ 'active' if current_page == 'homepage' else '' }}">
<div style="opacity:1" class="icon">
<img src="{{ url_for('static', filename='images/karma_blackwhite.png') }}" alt=""
style="filter: invert(0);" />
</div>
<div class="label">Homepage</div>
<div class="tooltip">Homepage</div>
<div class="indicator"></div>
</a>
<a href="{{ url_for('home.news') }}" class="navigation-item {{ 'active' if current_page == 'news' else '' }}">
<div class="icon">
<img src="{{ url_for('static', filename='images/navigation/newspaper.png') }}" alt="" />
</div>
<div class="label">News</div>
<div class="tooltip">News</div>
<div class="indicator"></div>
</a>
<a href="{{ url_for('home.about') }}" class="navigation-item {{ 'active' if current_page == 'about' else '' }}">
<div class="icon">
<img src="{{ url_for('static', filename='images/navigation/information.png') }}" alt="" />
</div>
<div class="label">About</div>
<div class="tooltip">About</div>
<div class="indicator"></div>
</a>
<a href="{{ url_for('home.reviews') }}"
class="navigation-item {{ 'active' if current_page == 'reviews' else '' }}">
<div class="icon">
<img src="{{ url_for('static', filename='images/navigation/feedback.png') }}" alt="" />
</div>
<div class="label">Reviews</div>
<div class="tooltip">Reviews</div>
<div class="indicator"></div>
</a>
</div>
{% if current_user.is_authenticated %}
<div class="category">
<a href="{{ url_for('cart.cart') }}" class="navigation-item {{ 'active' if current_page == 'cart' else '' }}">
<div class="icon">
<img src="{{ url_for('static', filename='images/navigation/shopping-cart.png') }}" alt="" />
</div>
<div class="label">Cart</div>
<div class="tooltip">Cart</div>
<div class="indicator"></div>
</a>
<a href="{{ url_for('ticket.view_all_tickets') }}"
class="navigation-item {{ 'active' if current_page == 'tickets' else '' }}">
<div class="icon">
<img src="{{ url_for('static', filename='images/navigation/envelope.png') }}" alt="" />
</div>
<div class="label">Tickets</div>
<div class="tooltip">Tickets</div>
<div class="indicator"></div>
</a>
<a href="{{ url_for('user.notifications') }}" num="{{ current_user.notifications|length }}"
class="navigation-item {{ 'active' if current_page == 'notifications' else '' }}">
<div class="icon">
<img src="{{ url_for('static', filename='images/navigation/chat-2.png') }}" alt="" />
</div>
<div class="label">Notifications</div>
<div class="tooltip">Notifications</div>
<div class="indicator"></div>
</a>
<a href="{{ url_for('order.view_all_orders') }}"
class="navigation-item {{ 'active' if current_page == 'orders' else '' }}">
<div class="icon">
<img src="{{ url_for('static', filename='images/navigation/package-6.png') }}" alt="" />
</div>
<div class="label">Orders</div>
<div class="tooltip">Orders</div>
<div class="indicator"></div>
</a>
</div>
<div class="category">
<a href="{{ url_for('user.profile') }}"
class="navigation-item {{ 'active' if current_page == 'settings' else '' }}">
<div class="icon">
<img src="{{ url_for('static', filename='images/navigation/settings.png') }}" alt="" />
</div>
<div class="label">Settings</div>
<div class="tooltip">Settings</div>
<div class="indicator"></div>
</a>
<a href="{{ url_for('user.logout') }}" class="navigation-item">
<div class="icon">
<img src="{{ url_for('static', filename='images/navigation/logout.png') }}" alt="" />
</div>
<div class="label">Logout</div>
<div class="tooltip">Logout</div>
<div class="indicator"></div>
</a>
</div>
{% else %}
<label for="login" class="navigation-item">
<div class="icon">
<img src="{{ url_for('static', filename='images/navigation/login.png') }}" alt="" />
</div>
<div class="label">Login</div>
<div class="tooltip">Login</div>
<div class="indicator"></div>
</label>
{% endif %}
</div>
<input id="login" type="checkbox" name="" class="popup-controller" />
<div class="popup-wrapper">
<label for="login" class="popup-bg"></label>
<div class="popup">
<div class="popup-content">
<form id="auth-container" action="{{ url_for('user.login') }}" method="post">
{{ g.login_form.csrf_token }}
<div class="title-big">Log in to your account</div>
<div class="input-group">
<div class="input-wrapper">
<div class="input-field column"><input type="text" name="username" required="required"
placeholder="Username" />
<div class="input-label required">Username</div>
<div class="input-status"></div>
</div>
</div>
<div class="input-wrapper">
<div class="input-field column"><input type="password" name="password" required="required"
placeholder="Password" />
<div class="input-label required">Password</div>
<div class="input-status"></div>
</div>
</div>
</div>
<div class="action-btns btns row">
<button type="submit" class="button submit">Log in</button>
</div>
<div class="infos row h-sb">
Restore password
Create an account
</div>
</form>
</div>
</div>
</div>
</div>
I don't know how to work with this, if I just need to change frontend code...
Thanks

Answer 1

First of all, congratulations on your new job!
Did you try debugging the company's code using VScode? they have a great tutorial on how to debug python codes, and specifically Django code; Check https://code.visualstudio.com/docs/python/tutorial-django