The default web view that is generated is pretty barebones and serves only as a starting point for us to customize it. When we made Article a web view, two HTML files were created namely: article.html and article_row.html

Let's edit article.html first. Frappe uses Bootstrap 4 by default for it's web views. So, you can use any valid Bootstrap 4 markup to style your pages. Add the following HTML to article.html.

{% raw %}

{%  extends 'templates/web.html' %}

{% block page_content %}
<div class='py-20 row'>
    <div class='col-sm-2'>
        <img alt='{{ title }}' src='{{ image }}'>
    </div>
    <div class='col'>
        <h1>{{ title }}</h1>
        <p class='lead'>By {{ author }}</p>
        <div>
            {%- if status == 'Available' -%}
            <span class='badge badge-success'>Available</span>
            {%- elif status == 'Issued' -%}
            <span class='badge badge-primary'>Issued</span>
            {%- endif -%}
        </div>
        <div class='mt-4'>
            <div>Publisher: <strong>{{ publisher }}</strong></div>
            <div>ISBN: <strong>{{ isbn }}</strong></div>
        </div>
        <p>{{ description }}</p>
    </div>
</div>
{% endblock %}

{% endraw %}

Now, go to any Article and click on See on Website. If you have filled in all fields of your Article, you should see a page like this:

Now, open http://library.test:8000/articles. This should show the list of articles, but it is also pretty barebones. Let's customize the HTML.

Edit the article_row.html and add the following HTML:

{% raw %}

<div class='py-8 row'>
    <div class='col-sm-1'>
        <img alt='{{ doc.name }}' src='{{ doc.image }}'>
    </div>
    <div class='col'>
        <a class='font-size-lg' href='{{ doc.route }}'>{{ doc.name }}</a>
        <p class='text-muted'>By {{ doc.author }}</p>
    </div>
</div>

{% endraw %}

Now, the articles list should look prettier. You can click on any article to view it's details.

Good job on following the tutorial so far.