A Journey in Learning

CSS, HTML, and Javascript

Abdul Bhatti

I have been working on my landing page for my portfolio, I wanted to create a CSS stylized landing page in which each visit would invoke my Website counter API. I also wanted to keep my HTML lean so I created separate files to handle my CSS and my Javascript, currently my Js file is empty but that will change once I figure out how to query Dyanmodb externally while being secure. To link my external files I used the following in my HTML header:

    <!-- Stylesheet for main page -->
    <link rel="stylesheet" href="StyleSheetAlkisnarIO.CSS">

    <!-- JavaScript for main page -->
    <script src="AlkisnarIO.js"></script>
    <!--trigger Counter-->
    <script src='https://b7kwlfbchk.execute-api.us-east-1.amazonaws.com/Version1/WebsiteHitCounterDynamoDBupdate'></script>

Running a script in the header to call out to a URL will consistently invoke my lambda function through my API. I would like a more involved method in doing so because I understand in the future my method request will also be able to query DynamoDB, but today this is sufficient.

I revamped my landing page with some fancy CSS, I wanted to create a page that could direct users into three different locations; one being this blog, another being linked-in, and the last being my HTML Resume. I wanted to showcase my ability to adapt and learn… boy did I learn a lot about CSS today.

What I learned:

  1. div is the backbone of CSS, div is used to break-up your page into different sections, throwing div around allowed me to create three cards and banner, I will be adding a website counter in the future
  2. to reference a specific div in my external CSS sheet, I would need to add an identifier, for example in my CSS sheet I would add information on how a specific class of object needs to be stylized, as seen below:
.card {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  border-radius: 10px;
}

to properly reference this you will need to use the <div class="card"> identifier, see below:

<div class="card" style="max-width: 30%; display: inline-block; vertical-align: middle">
        <a href=https://blog.alkisnar.io/>
        <img src="casual.jpg" style="width:100%">
        </a>
        <div class="container">
        <h1><b>Development Blog</b></h4>  
        </div>
      </div>

3. when developing CSS its always best to make sure you use a relative size rather than absolute, I always preview my work on mobile as well as desktop, also I cycle through most normal zoom settings to get a feel on how others see my pages.

So far, I am pleased with my work, I will continue to work on the resume next but for now the landing page is lean and aesthetically acceptable.