DEV Community

Cover image for 2. HTML
jicoing
jicoing

Posted on • Edited on

2. HTML

#aws #html

I would have been more than happy only to see the raw functional HTML pop up on my bio, 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, CSS & JS.

Git: https://github.com/jicoing/git-komlalebu

Alt Text

Structure

index.html

The bio 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

resume_about - has the introduction.
resume_work - has work related information.
resume_education - has education related information

Responsive

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

Alt Text

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 web design and implemented it.

Alt Text

  • I added the below meta-tag to the HTML.

HTML

          <meta name="viewport" content="width=device-width, 
          initial-scale=1.0">
Enter fullscreen mode Exit fullscreen mode

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;
             }
Enter fullscreen mode Exit fullscreen mode

/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;

              }
              }
Enter fullscreen mode Exit fullscreen mode
  • 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

Accordion

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

  • The div tag acccordion helps to expand and contract the contents of DETAIL and CONTENT sections, that was later styled with CSS.

Alt Text

HTML

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

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;
                       }
Enter fullscreen mode Exit fullscreen mode

Images

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

Alt Text

QR support

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

S3 image URL

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>
Enter fullscreen mode Exit fullscreen mode

Visit counter

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

Alt Text

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

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>
Enter fullscreen mode Exit fullscreen mode

HTML Table

I also setup a visitor stats HTML table, combining stats for visitor counter, likes, dislikes. (Read more)

Alt Text

       <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>
Enter fullscreen mode Exit fullscreen mode

HTML Video

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

Alt Text

                        <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>
Enter fullscreen mode Exit fullscreen mode

And the basic structure of the page was done.
Alt Text

Top comments (0)