There are two very useful properties in CSS i.e. position and box-sizing. You must have good understanding how both of these work. Below I have explained two tasks that should help you to understand them. Position and Opacity Before doing this task, I suggest you read basics of different values of position e.g. static, relative, fixed, and absolute. Then do the below task to see how position of one element can effect others. Using position property you can change the default position of an element on HTML page. From below screen you can see, the element with text is placed at top of image. A container div contains img and text (in span element). The text has property postion:absolute & bottom:0px and the container div has the property postion:relative. Below is how it looks like. You can clearly see, the text element is placed at top of the image. If we change the text span to div and apply width property, it shall look like this: Though the text div is placed on image but

I'm exploring Blogger theme structure to customize it. I want to write learning notes along the way. So, this post is work-in-progress, so don't consider it complete. To understand this tutorial, you shall know Blogger basic usage e.g. adding new posts in Blogger blog, creating new pages, assigning labels, etc. and you shall have basic knowledge of HTML, CSS and programming e.g. variables, if/else, loops etc. My objective is to explain basic concepts and building blocks of blogger theme, I do not intend to build a professional looking theme. There are following points, you must understand to work on Blogger templates: Basic Concepts Style Variables Data Tags Widget Tags Structure of Theme Basic Blogger Template Concepts Its important to understand different types of web pages that blogger offer. Understanding page type is important as in custom theme you need to embed different contents based on the type of page e.g. images slider at home page only, specific backgrou