2. HTML
Tags: aws, html
Published: 2020-12-30 10:41:05

I would have been more than happy only to see the raw functional [HTML](https://en.wikipedia.org/wiki/HTML) pop up on my [bio](http://blog.komlalebu.com/), however things changed once I saw the possibilities of HTML combined with CSS and JavaScript and it sparked my curiosity into this rabbit hole. I did not use any pre-built Bootstrap templates for this site, and choose to build it from  scratch with vanilla [HTML](https://en.wikipedia.org/wiki/HTML), [CSS](https://en.wikipedia.org/wiki/CSS) & [JS](https://en.wikipedia.org/wiki/JavaScript).

Git: https://github.com/jicoing/git-komlalebu
 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/tffw7jcb0zldys9ejx1o.gif)

#[Structure](https://www.w3schools.com/html/html_intro.asp)
[index.html](https://github.com/jicoing/git-komlalebu/blob/master/index.html)

The [bio](http://blog.komlalebu.com/) has a simple structure with the two  sections marked as
`resume_right` - has some basic information about me and work.
`resume_left` - has the website animated logo, the skill and social information, QR and the blog content catalog.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/79yp5mmq6pzylsfy5lj5.PNG)

`resume_about` - has the introduction.
`resume_work` - has work related information.
`resume_education` - has education related information
 
#[Responsive](https://www.w3schools.com/html/html_responsive.asp)

After building the basic structure of the webpage, it looked like this.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/eu6npp62l82qg5dtudr4.PNG)

There was one problem, it is not the 90's anymore. I had to optimize it for todays smartphone and tablet screens. I researched [responsive](https://www.w3schools.com/html/html_responsive.asp) web design and implemented it.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/4cte2zsg0n3oltma4k19.jpg)

* I added the below `meta-tag` to the HTML.

>HTML

              <meta name="viewport" content="width=device-width, 
              initial-scale=1.0">

>CSS 

* Everything inside `@media only screen and (min-width: 1000px)` clause is styling for PC's and everyting outside is for smartphones.
* Below code has the styling information for just the `profile picture` on the webpage which helps it to adjust according to the browser's screen size. Other elements were styled similarly.


/*Mobile view*/
             

               * {
                  margin: 0;
                  padding: 0;
                  box-sizing: border-box;
                  list-style: none;
                  font-family: 'Verdana', sans-serif;
                  }

                  body {
                  background: #fff;
                  font-size: 14px;
                  line-height: 22px;
                  color: #555555;
                  }
                  .resume .resume_left .resume_profile img {
                  width: 50%;
                  height: 50%;
                  margin-top: 0;
                  margin-left: 70px;
                 }

/*PC and tablet view*/

               @media only screen and (min-width: 1000px){
               * {
                  margin: 0;
                  padding: 0;
                  box-sizing: border-box;
                  list-style: none;
                  font-family: 'Verdana', sans-serif;
                  }

                  body {
                  background: #fff;
                  font-size: 14px;
                  line-height: 22px;
                  color: #555555;
                  }

                 .resume .resume_left .resume_profile img {
                  width: 105%;
                  height: 105%;
                  margin-top: -5px;
                  margin-left: -5px;
  
                  }
                  }


* Responsive images and content - The images now scale and the text content auto-wrap based on browser width with the help of CSS `width` property.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/i1n1h9kr1hqt05hqq20q.PNG)


#[Accordion](https://www.w3schools.com/howto/howto_js_accordion.asp)

However, then was now one more problem, I had to scroll infinitely to get the basic information and the website was looking cluttered on mobile. So I decided to collapse portions of it. (Highlighted in red).

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/g7ti9k3lfw7cxdrp73ks.PNG)

* The [div tag](https://www.w3schools.com/Tags/tag_div.asp) `acccordion` helps to expand and contract the contents of `DETAIL` and `CONTENT` sections, that was later styled with CSS.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/vsk1uj0xca0mk4omxniu.gif)

>HTML

                <button class="accordion">Section 1</button>
                    <div class="panel">
                      <p>Lorem ipsum...</p>
                         </div>

>CSS

                       .accordion {
                           background-color: #ccc;
                           color: #555555;
                           cursor: pointer;
                           padding: 0px;
                           width: 100%;
                           border: 2px solid #e1e1e1;
                           text-align: center;
                           outline: none;
                           font-size: 0px;
                           transition: 0.4s;
                            }

                          .active, .accordion:hover {
                           background-color: #e1e1e1;
                           }

                          .panel {
                           padding: 0 0;
                           background-color: #e1e1e1;
                           max-height: 0;
                           overflow: hidden;
                           transition: max-height 0.2s ease-out;
                           }
#[Images](https://www.w3schools.com/html/html_images.asp)

All the  images have been drawn in `MS - Paint` and animated into .gif format using `iOS Shortcuts` app.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/yo7hhkor6ofyapcf3rgm.jpg)

 
#[QR support](https://www.the-qrcode-generator.com/)

I finally added `QR support` for the website from https://www.the-qrcode-generator.com and added the `QR image` to `index.html`.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/bvagmvjex8v0g1z9zcv2.png)

#[S3 image URL](https://aws.amazon.com/s3/)

All the object in this website are stored in my AWS S3 bucket `blog.komlalebu.com` and the S3 object URL is referenced in the `index.html`

>Example -`index.html` fetches profile image from bucket using S3 URL.

               <div class="resume">
                 <div class="resume_left">
                   <div class="resume_profile">
                    <img id="image"
                 src="https://s3.amazonaws.com/blog.komlalebu.com/
                  Komlalebu_logo_animated.gif" alt="profile_pic">
	           </div>

 
#[Visit counter](https://countapi.xyz/)

There is a visitor couter on the left which is a `CountAPI` JavaScript that gets updated for every visit.

>
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/67j8efgio8aqwx4opmna.PNG)

Simultaneously, the visitor count data is stored in a backend `dynamoDB` table with the combination of AWS services (API Gateway, Lambda and DynamoDB), which we will explore in later sections.

>DynamoDB
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/dv1cb0vk13a17i4ga69k.PNG)

>CountAPI JS

  
            <script> 
            function cb(response) {
	    document.getElementById('visits').innerText = 
            response.value; 
	
            }
	    </script>

           <script async 
            src="https://api.countapi.xyz/hit/
            blog.komlalebu.com/visits?callback=cb"></script> 
# [HTML Table](https://www.w3schools.com/html/html_tables.asp)
I also setup a visitor stats HTML table, combining stats for visitor counter, likes, dislikes. ([Read more](https://dev.to/jicoing/10-python-2m0o))
>
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/pcxrky1puawhzz9trptw.PNG)
>

           <table style="width:100%">
              <tr>
                  <th>Count</th> <th>Likes</th> <th>Dislikes</th>
                    <tr>
                      <td><div id="visits">...</div></td>

                      <td><div id="visitlike">...</div></td>
                      <td><div id="visitdislike">...</div></td>
                    </tr>
                  
              </tr>

           </table>

# [HTML Video](https://www.w3schools.com/tags/tag_video.asp)

There is a HTML video element which loads the video file hosted in my S3 bucket.

>
 ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5d5ljjynod82w8bi0pfd.PNG)
>

                            <div align="center">
                                 <video controls width="240" height="160">
                                      <source src="https://s3.amazonaws.com/blog.komlalebu.com/cicd.mp4" type="video/mp4">
                                   </video> 
                               </div>

And the basic structure of the page was done.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/0vobgcej8t0ytnl5d9l4.gif)