Box model + Content-Card Project📦

Today I struggled to concentrate ..there were distractions..it took me the whole day to finish this module. But hopefully, I will push myself to complete soon.

Today's Learning:
1. Started with CSS colors. Hex colors and RGB way of defining colors in Css. 
2. Learnt to incorporate google fonts into my website .
3. Inspection of CSS. CSS overview tool is very helpful to understand the styling of the page. 
4. The css units:  px..pt..em and rem. 
em - width of the letter 'm' and it is relative to its parent. 
rem - relative to the root (html)
5. The Box model: played with multiple nested <div> elements and understood the padding, margin and the border concept. And also the border-box concept. 

With all this, I managed to replicate a card which was randomly picked from google. Initially, I was about to create a tribute page but.. it requires positioning so.. I built this project to apply my learning today. 

*This is not responsive. Kindly open in desktop-view*



Popular posts from this blog

The third parameter - Event bubbling and Event capturing

I have been learning about events in JavaScript lately. I stumbled upon a very popular topic and learned something new that I wanted to share. It's about event bubbling and event capturing. As you can see, I have created a ul element with 5 images listed under it, each inside li elements. I've also added corresponding IDs to target each image and the ul element. __________________________________________ In the above code, one event listener targets the ul element as a whole. Whenever an image inside the ul element is clicked, the event fires, and it is logged in the console. Notice that the third parameter is set to false. Secondly, there's another event listener that gets triggered when the specific target sheep image inside the ul element is clicked, logging the corresponding message. Now, note that the third parameter in both events is false, leading to two consequences: Case 1: Event Bubbling (3rd parameter: false) When an image inside the ul element is clicked (other ...
Read more

Binary Sreach Algorithm : Optimized way to get the index of the mid element

The classical way to find the mid element in an array would be (start+end)/2.  But integershave a limited range and what if the size of the array is too large and (start+end) exceeds the range of integers in java?? Hence, inorder to make optimize it I learnt a new way to find the mid element which is  start + (end-start)/2 in this way, even if the size of the array exceeds the integer range, the end-start would make it smaller. 
Read more

Abstract classes

I have been learning the most important concepts of java which is the object oriented programming and today I learnt about the abstract classes and method and wanted to share my thoughts on them.  Abstract method : Method which doesn't have a body is said to be an abstract method and also it is declared using an abstract keyword.  Abstract class : If a class contains an abstract method, then it is termed as an abstract class and it should also be declared with the abstract keyword.  The fun part :  Abstract classes are like a template or a thought. It has abstract methods but no definition. When a child class extends (inherits) this abstract class, the abstract class allows the child class to over ride it in its own way.  For example, if an abstract class has an abstract method known as greet(), then the child class can override it in its own way like greet() can now say good mrng or good afternoon.  Note :  1. Objects of abstract class cannot be insta...
Read more