The history of all the iterations of my personal site I have created.

A Visual Gallery of My Personal Sites


_This was the [first website](http://shabazbadshah.com/KodeabilityWebsite/) I ever created in order to teach myself the basics of static web development (HTML, CSS) and basics of design (Typography, Images, Color Theory, Layouts); this site took me about 3 weeks to complete. It was initially made for an android app I was working on at the time, but the app sadly never saw the light of day. The links were not implemented, feel free to download and use the project as a template (attribution would be appreciated). (:_

# Tools, Technologies, and Skills

- Atom Text Editor for website creation
- Photoshop for app design/mockups, and other graphics
- Bootstrap CSS for responsive website design (I just thought this would be a cool little addition to implement and learn)
- General Design (Responsive Design, Basic Color Theory, Typography, and Layouts)

# Challenges, Issues, and their Resolutions

Making things look awesome and appealing is difficult, it becomes an even greater challenge when you have to use markup to style everything. Oh boy, was it frustrating at some points when I was trying to lay-out a specific item in a very distinct manner and it just wouldn't work; I definitely wanted to give up at those points. Regardless of the fact, CSS was the most difficult part of the website despite the site's simplicity. In particular, making a website responsive was at times very infuriating because of the inconsistency between devices. Such inconsistencies included things such as images being centered on one device but not another.

My first attempt at a solution was using media queries for popular devices such as iPhones, iPads, Nexus phones, Galaxy S7, etc; this of course was a VERY BAD choice. This attempt was missing all the devices in between the popular ones (I realized later how bad of a design decision this was). The availability of media queries for the mainstream devices made this attempt relatively quick to implement (about 3 days). My second attempt was more sensible, it was to try to use a framework to help me solve all my consistency problems. Using a framework came with many advantages such as making the site easier to maintain, and also easily understandable by other developers. Implementing the Bootstrap CSS framework quickly solved my problem and I was able to finish the website within 3 weeks; not bad for a complete newbie I suppose :P.

![Kodeability site mockup](kodeability-website.webp)

# What did I Learn

Other than improving my web development and design skills to a competent level, after much needed reflection I came to the obvious conclusion that I needed to think out my problems! Don't go brainlessly attempting solutions because you just end up wasting more time. In my case iterating and hard coding all mainstream devices wasn't really a smart idea in the long term and was really poor design. I could've saved about 3 days if I thought through the implementation of my CSS architecture and possibly reached the conclusion of using a framework more quickly. In addition, creating some sort of mockups and pre-planning would've also saved time since it would allow me to really think through the project from a design and architecture point of view. In the future, more planning will be essential in a timely and successful completion of a project.

# Links

- [Source Code](https://github.com/ShabazBadshah/SpaceWars)
- [Demo](http://shabazbadshah.github.io/KodeabilityWebsite/)


This was the first website I ever created to teach myself the basics of static web development (HTML, CSS) and basics of design (Typography, Images, Color Theory, Layouts).

The Kodeability App Website


# Site 1.0

![Personal site v1 homepage](personal-site-v1.png)
![Personal site v1 projects page](personal-site-v1-projects.png)

# Site 2.0

![Personal site v2 main page](mockup_1.png)

![Personal site v2 projects page](mockup_2.png)

# Site 3.0

![Personal site 2.5 about page](personal-site-v2.5-about-v1.jpg)

![Personal site 2.5 projects page](personal-site-v2.5-projects-v1.jpg)

# Site 4.0

![Personal site v3 about page](personal-site-v3-about.png)
![Personal site v3 projects page](personal-site-v3-projects.png)
![Personal site v3 blog article page](personal-site-v3-article.png)


More Stories

Let's connect

A Visual Gallery of My Personal Sites

The history of all the iterations of my personal site I have created.

Site 1.0

Site 2.0

Site 3.0

Site 4.0