_edited.png)
Website Link: https://krishbavana.com/
It’s been more than a year since I started writing blogs, and so far, many of my close friends have asked me only one question. “When will you get your own domain?” I was waiting for the right moment to get my own domain and website, even though I have been waiting for a long time. I promised myself that if I ever got one, I would code the entire website by myself. That finally happened earlier this summer. From the planning stage to the website going live, it took a full two months of my summer break. In the beginning, I wasn’t exactly the greatest at CSS and I had absolutely zero understanding or experience with JavaScript, but i knew that if I wanted to achieve everything I planned for this summer, I had to finish the website by July 31st, at the latest. To do this, I broke down the website development into four steps: Design, Code, Host and Debug.
The first part of the website was designing. I took almost five days to draw all the sketches of the website. I used to look at so many websites and just take note of all the elements I liked and disliked, so I knew exactly what I wanted to incorporate into my website, and everything I wanted to avoid. One of the biggest goals for my website was to give the best visual experience to my readers, and make a great portfolio for myself. I found that the most challenging parts of the design were the homepage and blog landing page. As I have so many audiences who read my blogs, I don’t want to disturb their visual experience because all of them were adjusted to the old interface. Therefore, I designed it by making some tiny tweaks to the original blog landing page. The challenge for the homepage was branding myself as a programmer, blogger and YouTuber. I wanted the homepage to stand out, so people would navigate the page and see my About page, and all my skills would stand out. After five days of visualization, I was happy with the design and started working on the coding part.
A major chunk of the website is gone to coding. I broke the coding part again into subsections. The first week was for the homepage, I started to add the header and the navigation menu. Everything went smoothly for the first day, but the biggest challenge began when I started to work on the slider. I was simultaneously learning web design and JavaScript on LinkedIn learning and I was not really sure how to implement that slider with navigation bars. I wrote almost 10-11 versions of the code and was not satisfied with anything I wrote because either the look was really bad, or it was not working properly. I think it took me way longer because I was not keen on using frameworks. Some people suggested I use bootstrap, slidr.js, and some very out of the box ones like spring but I wanted to stay with JavaScript and write it from scratch. I designed the other module of the page in two days and left the homepage temporarily unfinished. I later designed the ‘About Me’ page in less than 5 days and completed it exactly how I wanted it.
The best part about it was using jQuery (typed .js). It was my first experience using libraries in Javascript and because of the library, I saved a lot of time and energy on the page. The biggest benefit of using the library was being able to tweak it quickly and match the expectation I had for the visual appeal. The real challenge started when I started to design the blog page. I had already made a more appealing visual look and because I will share those pages with everyone. Somehow while designing it I didn’t feel it would be too difficult, but when I decided to move all the old blogs to a new site, it took me almost 10 days because I needed to make sure that they were formatted well and they all look great without any problems. Once I was done with moving the blogs to a new website, I really didn’t face any big problems with the blog landing page.
I made sure the blog landing page was simple, so I just used HTML and CSS (hamburger menu not included). Once I was done with the blog landing page, I focused on the project landing page and completed it in a few hours because I followed the same template as the blog page. Before jumping into the resume page, I decided to work on media queries. I was adding them while working the pages, but once I was done with the project page, I added the media query to make sure my website looks great on devices. Now anyone in the world with any device can look at the website and still get the same feel. Then I took a serious decision of hosting on the website and debugging. That is where the story changed and where the testing of the site went extreme, and when I realized to see all new bugs which were never existed offline.
To be continued…
Comments