creating a page in HTML and CSS in Wordpress

I did a Wordpress course last year, but I just started using the platform now.

To have the following difficulty:

I'm doing maintenance on an informative site, but on this site I created a blog page, but as I created the html and css and threw it on a page, to maintain and update the posts it gets very manual and How long will it take for me to play this on the Wordpress system and automate?

I add this code;

<?php
/**
 *Template Name: Blog
 *
 * 
 */
?>

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    <header class="entry-header page-header newheader">
        <h1 class="entry-title"><?php the_title(); ?></h1>
    </header><!-- .entry-header -->
        <section class="wrapper post-highlight">
        <div class="container">
            <div class="row text-left">
                <div class="col-xs-12">
                    <h5 class="pull-left">Novos</h5>
                    <p>                     <a href="javascript:void(0);" class="pull-right hidden-xs" data-anchor="#post-list" data-toggle="btn-scroll">Ver todos os posts</a>
                </div>
                <div class="col-md-6 col-sm-12 high">
                    <div class="row">
                        <div class="col-xs-12 figure">
                            <a href="http://empresa.tintasverginia.com.br/2018/04/saiba-qual-pincel-usar/"></p>
                                <figure>
                                    <img src="http://empresa.tintasverginia.com.br/app/uploads/2018/04/qual-pincel-2-post1.jpg"alt="Você sabe as diferenças entre os pincéis?"></p>
                                </figure>
                                <p>                                 </a>
                        </div>
                        <div class="col-xs-12 summary">
                            <article>
                                <p>                                                 <a href="http://empresa.tintasverginia.com.br/2018/04/saiba-qual-pincel-usar/" class="btn btn-topic">Acessar</a></p>
                                <p>                                     <a href="" title="Você sabe as diferenças entre os pincéis?"></p>
                                <h3>Você sabe as diferenças entre os pincéis?</h3>
                                <p></a></p>
                                <ul class="list-inline post-meta">
                                    <li>26/03/2018</li>
                                    <li>6 min de leitura</li>
                                </ul>
                            </article>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-sm-12 low">
                    <div class="row">
                        <div class="col-sm-6 figure">
                            <a href=""></p>
                                <figure>
                                    <img src="http://empresa.tintasverginia.com.br/app/uploads/2018/05/especialista-1.jpg"alt="Látex ou acrílico"></p>
                                </figure>
                                <p>                                 </a>
                        </div>
                        <div class="col-sm-6 summary">
                            <article>
                                <p>                                                 <a href="http://empresa.tintasverginia.com.br/2018/04/hello01/" class="btn btn-topic">Acessar</a></p>
                                <p>                                     <a href="http://empresa.tintasverginia.com.br/2018/04/hello01/" title="Látex ou Acrílica? Tudo que devo saber antes de escolher a tinta certa!"></p>
                                <h3>Látex ou Acrílica? Tudo que devo saber antes de escolher a tinta certa!</h3>
                                <p></a></p>
                                <ul class="list-inline post-meta">
                                    <li>06/04/2018</li>
                                    <li>4 min de leitura</li>
                                </ul>
                            </article>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-6 figure">
                            <a href="http://empresa.tintasverginia.com.br/2018/04/hello01/"></p>
                                <figure>
                                    <img src="http://empresa.tintasverginia.com.br/app/uploads/2018/04/sobra-de-tinta-2.jpg"alt="Nulla bibendum nisl metus, vitae consequat sapien mattis ac."></p>
                                </figure>
                                <p>                                 </a>
                        </div>
                        <div class="col-sm-6 summary">
                            <article>
                                <p>                                                 <a href="http://empresa.tintasverginia.com.br/2018/04/hello01/" class="btn btn-topic">Acessar</a></p>
                                <p>                                     <a href="" title="Nulla bibendum nisl metus, vitae consequat sapien mattis ac."></p>
                                <h3>Nulla bibendum nisl metus, vitae consequat sapien mattis ac.</h3>
                                <p></a></p>
                                <ul class="list-inline post-meta">
                                    <li>26/04/2018</li>
                                    <li>4 min de leitura</li>
                                </ul>
                            </article>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="wrapper post-highlight">
        <div class="container">
            <div class="row text-left">
                <div class="col-xs-12">
                    <h5>Destaque</h5>
                </div>
                <div class="col-md-6 col-sm-12 high">
                    <div class="row">
                        <div class="col-xs-12 figure">
                            <a href=""></p>
                                <figure>
                                    <img src="http://empresa.tintasverginia.com.br/app/uploads/2018/04/parede-suja.jpg"alt="[Acessesar]"></p>
                                </figure>
                                <p>                                 </a>
                        </div>
                        <div class="col-xs-12 summary">
                            <article>
                                <p>                                                 <a href="http://empresa.tintasverginia.com.br/2018/04/meu-filho-sujou-parede-e-agora/" class="btn btn-topic">Acessar</a></p>
                                <p>                                     <a href="http://empresa.tintasverginia.com.br/2018/04/meu-filho-sujou-parede-e-agora/" title="Parede suja"></p>
                                <h3>Meu filho sujou a parede.E agora?</h3>
                                <p></a></p>
                                <ul class="list-inline post-meta">
                                    <li>13/07/2017</li>
                                    <li>2 min de leitura</li>
                                </ul>
                            </article>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-sm-12 low">
                    <div class="row">
                        <div class="col-sm-6 figure">
                            <a href="http://empresa.tintasverginia.com.br/calculadora-de-tintas/"></p>
                                <figure>
                                    <img src="http://empresa.tintasverginia.com.br/app/uploads/2018/04/calculadora.jpg"alt="Calculadora"></p>
                                </figure>
                                <p>                                 </a>
                        </div>
                        <div class="col-sm-6 summary">
                            <article>
                                <p>                                                 <a href="http://empresa.tintasverginia.com.br/calculadora-de-tintas/" class="btn btn-topic">Acessar</a></p>
                                <p>                                     <a href="" title="calculadora"></p>
                                <h3>Vai pintar e não sabe a quantidade de tinta que precisa comprar? Confira nossa calculadora de tintas!</h3>
                                <p></a></p>
                                <ul class="list-inline post-meta">
                                    <li>10/10/2017</li>
                                    <li>4 min de leitura</li>
                                </ul>
                            </article>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-6 figure">
                            <a href="http://empresa.tintasverginia.com.br/cores/off-whites/"></p>
                                <figure>
                                    <img src="http://empresa.tintasverginia.com.br/app/uploads/2018/04/cor-1.jpg"alt="Bolha de sabao"></p>
                                </figure>
                                <p>                                 </a>
                        </div>
                        <div class="col-sm-6 summary">
                            <article>
                                <a href="http://empresa.tintasverginia.com.br/cores/off-whites/" class="btn btn-topic">Acessar</a></p>
                                <p>                                     <a href="" title="Suvinil"></p>
                                <h3>Dúvida em qual cor escolher?</h3>
                                <p></a></p>
                                <ul class="list-inline post-meta">
                                    <li>13/02/2018</li>
                                    <li>10 min de leitura</li>
                                </ul>
                            </article>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <hr>
    <section class="wrapper post-list">
        <div class="container">
            <div class="row text-left">
                <div class="col-xs-12">
                    <h5>Todos os posts</h5>
                </div>
                <div class="clearfix"></div>
                <div class="col-sm-4">
                    <a href=""><img class="img-responsive" src="http://empresa.tintasverginia.com.br/app/uploads/2016/12/dp3.png"alt="Fusce consequat placerat sem. Nam lobortis"></a></p>
                    <p>                                         <a href="" class="btn btn-topic">Acessar</a></p>
                    <p>                             <a href=""></p>
                    <h3>Fusce consequat placerat sem. Nam lobortis</h3>
                    <p></a></p>
                    <ul class="list-inline post-meta">
                        <li>07/03/2018</li>
                        <li>5 min de leitura</li>
                    </ul>
                </div>
                <div class="col-sm-4">
                    <a href=""><img class="img-responsive" src="http://empresa.tintasverginia.com.br/app/uploads/2016/12/dp3.png"alt="Fusce rhoncus massa sed lectus cursus accumsan."></a></p>
                    <p>                                         <a href="" class="btn btn-topic">Acessar</a></p>
                    <p>                             <a href=""></p>
                    <h3>Fusce rhoncus massa sed lectus cursus accumsan.</h3>
                    <p></a></p>
                    <ul class="list-inline post-meta">
                        <li>06/03/2018</li>
                        <li>9 min de leitura</li>
                    </ul>
                </div>
                <div class="col-sm-4">
                    <a href=""><img class="img-responsive" src="http://empresa.tintasverginia.com.br/app/uploads/2016/12/dp3.png"alt="Curabitur quis quam et est volutpat ullamcorper eget quis erat."></a></p>
                    <p>                                         <a href="" class="btn btn-topic">acessar</a></p>
                    <p>                             <a href=""></p>
                    <h3>Curabitur quis quam et est volutpat ullamcorper eget quis erat.</h3>
                    <p></a></p>
                    <ul class="list-inline post-meta">
                        <li>02/03/2018</li>
                        <li>5 min de leitura</li>
                    </ul>
                </div>
                <div class="clearfix"></div>
                <div class="col-sm-4">
                    <a href=""><img class="img-responsive" src="http://empresa.tintasverginia.com.br/app/uploads/2016/12/dp3.png"alt="Fusce consequat placerat sem. Nam lobortis"></a></p>
                    <p>                                         <a href="" class="btn btn-topic">acessar</a></p>
                    <p>                             <a href=""></p>
                    <h3>Fusce consequat placerat sem. Nam lobortis</h3>
                    <p></a></p>
                    <ul class="list-inline post-meta">
                        <li>07/03/2018</li>
                        <li>5 min de leitura</li>
                    </ul>
                </div>
                <div class="col-sm-4">
                    <a href=""><img class="img-responsive" src="http://empresa.tintasverginia.com.br/app/uploads/2016/12/dp3.png"alt="Fusce rhoncus massa sed lectus cursus accumsan."></a></p>
                    <p>                                         <a href="" class="btn btn-topic">Acessar</a></p>
                    <p>                             <a href=""></p>
                    <h3>Fusce rhoncus massa sed lectus cursus accumsan.</h3>
                    <p></a></p>
                    <ul class="list-inline post-meta">
                        <li>06/03/2018</li>
                        <li>9 min de leitura</li>
                    </ul>
                </div>
                <div class="col-sm-4">
                    <a href=""><img class="img-responsive" src="http://empresa.tintasverginia.com.br/app/uploads/2018/04/saiba-como-acabar-com-mofo-1.jpg"alt="Saiba como acabar com o mofo"></a></p>
                    <p>                                         <a href="" class="btn btn-topic">acessar</a></p>
                    <p>                             <a href=""></p>
                    <h3>Saiba como acabar com o mofo.</h3>
                    <p></a></p>
                    <ul class="list-inline post-meta">
                        <li>06/04/2018</li>
                        <li>3 min de leitura</li>
                    </ul>
                </div>
                <div class="clearfix"></div>
                <div class="col-sm-4">
                    <a href=""><img class="img-responsive" src="http://empresa.tintasverginia.com.br/app/uploads/2016/12/dp3.png"alt="Fusce consequat placerat sem. Nam lobortis"></a></p>
                    <p>                                         <a href="" class="btn btn-topic">acessar</a></p>
                    <p>                             <a href=""></p>
                    <h3>Fusce consequat placerat sem. Nam lobortis</h3>
                    <p></a></p>
                    <ul class="list-inline post-meta">
                        <li>07/03/2018</li>
                        <li>5 min de leitura</li>
                    </ul>
                </div>
                <div class="col-sm-4">
                    <a href=""><img class="img-responsive" src="http://empresa.tintasverginia.com.br/app/uploads/2016/12/dp3.png"alt="Fusce rhoncus massa sed lectus cursus accumsan."></a></p>
                    <p>                                         <a href="" class="btn btn-topic">Acessar</a></p>
                    <p>                             <a href=""></p>
                    <h3>Fusce rhoncus massa sed lectus cursus accumsan.</h3>
                    <p></a></p>
                    <ul class="list-inline post-meta">
                        <li>06/03/2018</li>
                        <li>9 min de leitura</li>
                    </ul>
                </div>
                <div class="col-sm-4">
                    <a href=""><img class="img-responsive" src="http://empresa.tintasverginia.com.br/app/uploads/2016/12/dp3.png"alt="Curabitur quis quam et est volutpat ullamcorper eget quis erat."></a></p>
                    <p>                                         <a href="" class="btn btn-topic">acessar</a></p>
                    <p>                             <a href=""></p>
                    <h3>Curabitur quis quam et est volutpat ullamcorper eget quis erat.</h3>
                    <p></a></p>
                    <ul class="list-inline post-meta">
                        <li>02/04/2018</li>
                        <li>5 min de leitura</li>
                    </ul>
                </div>
                <div class="clearfix"></div>3
    </div><!-- .entry-content -->
</article><!-- #post-## -->