Everyone desires to have a wonderful house. I wanted to have a wonderful website. A few years back there was a sudden crop of beautiful websites on the web. I used to be fascinated more by the looks of the websites than their content! I, too, wanted to have all the beautiful things and all my notes in one place. But having a website was a far-fetched dream for me. For someone like me,
who took years to learn the basic elements of Microsoft Word or Excel and took an eternity to decide which is the right key among tab-Enter-Shift-Ctrl, it was certainly an uphill task. What should be done? I caught hold of one of my friends whose typing speed used to fascinate me! He ran me through some basic elements of website building, but that was that. All that he taught evaporated the same day.


   I decided to build a website from scratch, I mean, I was literally scratching my head as to how to do that from available resources.


   Searching for the exact information on the web is easier nowadays than searching for the lost plane in the sea. One day, I landed on Yola tutorials. I liked them instantly. Yola tutorials explained all the basics of  website-building in simple terms and great style. I read and re-read each tutorial in great depths until I understood it thoroughly. I interacted with Yola people and their support was unbelievably prompt and useful. They didn’t ridicule my childish questions (yea, now I understand how childish they were!). I used to ask questions like: What is a browser (!), what is a URL, what is a username and a password for (please don’t laugh smile ), the difference between signing in and signing up, the difference between a website and a blog and so on. All said and done, I got familiar with all basic terminologies like – domain and subdomain, encryption, header, footer, widgets, navigation menu bar, responsive templates, a link, SEO, SSL, and also things like spamming and hacking! This was all theoretical knowledge. Yola also had a few ready-made templates in their gallery but none of them appealed to me. After going thoroughly through Yola tutorials, I wanted to learn more about HTML and CSS. HTML means changing the structure of your house and CSS means adding more furniture and interior decoration.


  After completing my kindergarten, I decided to join the school. The name of my school was w3schools. It was fun going through their HTML and CSS tutorials and seeing the changes reflected in real time on the screen. Studying various HTML tags, attributes and elements was just fun. HTML determines various styles of headings, links, text formatting, paragraphs, comments, layouts etc. I loved hex color codes. A combination of a particular hue, saturation and luminosity creates a definite and unique color. TV companies don’t lie when they say that their TV contains 16 million colors! Then various CSS properties like borders, backgrounds, transparency, gradients, corners, text and image alignments, padding add spice to your web page. When you get involved with a certain thing with your souminhearbrain, you start dreaming it, imagining it, living it. I was studying CSS borders. When I looked at the moon I imagined border: 3px solid #GG66GG . The moon would look so lovely with a border! Although HTML5 is a great enhancement in terms of replacing a flash player, it is better to stick to HTML or XHTML. HTML5 can cause errors in the code and could crash the web page. Browser idiosyncrasies add to this inconvenience. HTML APIs like drag and drop or geolocation is a revolution. I studied HTML audio in depth as I wanted to implement mp3 files on my website.


   Having studied all these intricacies, I decided to give it a practical trial. Out of the three major blog web platforms – WordPress. Tumblr and Blogger, I decided to mess around with a blogger template. There are innumerable blogger templates available, both free and paid. I chose one and uploaded it. What fun it was to tweak it around! Just change the hex code and the appearance will change, similar to many element styles like text alignment, padding, opacity, text shadows, font sizes and font families. I am still confused between margin and padding. There is a useful Firefox add-on called Firebug which makes these things very easy. Main wrapper, sidebar wrapper and widget content are the three main areas one frequently encounters. I played with the template for a few weeks and possibly, a few months; still, I lacked confidence. There were 3-4 things which drove me up the wall; I couldn’t customize them the way I wanted to. Some of them I still remember were: 1. Converting four-widget footer into three-widget footer. 2. Writing a CSS that will target a particular widget only and not affect others 3. Loading an iframe JavaScript at the given width and height of a widget.


  These things gave me a tough time. Converting a four-widget footer into a three-widget footer was just two clicks away when I learned that instead of changing the pixels of the widgets I had to change the percentage or proportion! There are certain fields where changes could be implemented by changing pixel count, certain fields could be changed by changing em values while there are fields which could be altered by changing percentage. I lost so much time learning this fact; at last, it paid off. Targeting certain changes in a particular widget wasn’t easy either. Once you understand the interrelation between a div id and div class, things become easy to modify. When it came to fitting a given Iframe JavaScript in fixed width and height of a widget, I had to encounter a lot of failures after innumerable trials and errors. I went through many discussion forums and after long hours of chronic neck pain, I could, at last, secure the Iframe syntax. Here also, a combination of percentage of width and CSS overflow attributes is required to achieve the desired result. No one can describe the feelings when you find your ‘ouch’ moments suddenly changing to ‘aha’ moments! It is worth digging down a whole mountain if you are to find a speck of gold at the end.


   An interesting problem clocked in one day. I was working on the layout page of Blogger but couldn’t access the extreme right portion of the page. Around 20% of the right page was inaccessible even after pulling the scroll bar to the right end. That part contained links to widgets and other gizmos which I couldn’t click. Although the actual links were big enough, the link text was just one word – edit! I searched Google for such a problem but couldn’t find any solution. I asked some of my friends who are computer adroits but the solutions they provided proved ineffective. Who in the world would get me off the hook? I had never encountered this problem before. All the other pages were visible perfectly well, except this one. Moments of frustration. Suddenly, out of the blue, an idea hit my brain. I did Ctrl+F, typed ‘edit’ and hit Enter. And all the links came into view in a flash! Such moments are rare but they make you feel as if one is walking on the top of the rainbow. (Like a dog who eventually succeeds stealing a piece loaf from a baker’s shop after hours of striving….☺). Within 24 hours, I landed upon another solution to this problem. Right click > View page source. You can see the full HTML. But maneuvering this way is awfully tricky, complicated and may lead to errors as you can’t see the actual page design.



   Contd in Part-II