So I just rolled down my sleeves which has been up for almost a week now in building my personal website. Today, I’ll be writing about the processes and steps I took in actualizing this long time goal.

This will be the very first post on the blog section of the site. Though I’m not a badass writer (always having fights with the comma), I will try my possible best to make this post typo error free as well as putting to good use some old time vocabularies that books like “Eze Goes to School”, “College days of John Ojo” taught me while in Secondary School (you should know them, if you’re a Nigerian).

In the lines to follow, I’ll be discussing about how I built this site, the tools used, timeframe, and my files structure.



The Goal

Ever since I stumbled on the web, it has always been a dream to have my own little space to brag and rant about myself, talk about career and life as well as help others to learn how to code too.

In furtherance of this goal, I started using free CMS platforms like amongst others to build my personal and my client’s websites. Sadly, I couldn’t really achieve much with them due to my limited knowledge in using technologies such as PHP, JavaScript and the like (Apologies to those clients I did those shitty sites for. I had to eat. Shey you grab?). Huh! I had no choice than to learn and learn what I had to learn.

So I wore my learning gloves and dived straight to learning. Of course I had set the goal to build my personal site once I’m comfortable with what is needed. But did this really happen as expected? Surprisingly I was almost not going to have a personal website even after mastering a whole lot of skills. But why, you may ask?

The reason for this which I think many developers also faces today too for not having a personal brand is due to handling of client’s projects (of course to make ends meet) and predominantly, laziness. Truth is, this is no trivial matter because I have times without number seen the need for one to have a personal web space. (Topic for another day). After procrastinating for almost 5 years, I was resolute to grow up and own a professional, minimalistic personal website.

As e dey hot now, I will just quickly end all these religious talks and dive straight to the thrust of this article.



First things first

To get started, I wandered into the web to browse through several personal websites to get some inspiration on layouts, design and best practices (I do this all the time). While I was doing this, my HB pencil and an A4 paper was already handy to note salient points and hints.

The result of this search helped me in sketching a simple wireframe on how elements on my homepage and some other pages should be laid out. For instance, I decided that I was going to use a vertical fixed sidebar as the site’s menu. This saves me the stress of visualizing the whole project with just my mind’s eyes as well as having a well-defined blueprint to work on. At this time, I was already thinking of colors, typography, images, etc. So I will say I was gradually switching to Design mode. But before I visit the almighty HTML and CSS, I had to organize my files nicely.

At this point, I had already decided on building the site from scratch so I quickly arranged my files as follows;

1. Main Folder – this will house all the files and folders so I named this “joelamawhe” . Files like index.php, .htaccess, blog and others are placed here.

2. CSS Folder – here I created two CSS documents which I named “custom.css” and “responsive.css” in which I will write the rules for my site’s design.

I was going to use the Bootstrap CDN so I didn’t bother to download it else I usually place it inside this folder too.

3. Includes Folder - global files like my header and footer documents were added here.

4. Classes’ folder – Since I’ll be coding the OOP way in PHP I added all the needed classes here.

5. Images folder - Of course nice collection of images tends to make website very sexy and so I added some here.



Design and Development

Without further much ado, with my Monaki Bright Themed Sublime Text Editor that makes me feel like a coding Ninja, I went ahead to start the front end coding with HTML, CSS and the Bootstrap Framework. I decided I was going to use cool headed colors hence the choice of the colors you see on the site. So rule by rule and tag by tag, a simple and elegant design was born with just my tiny fingers. All of these took me almost 4 hours of non-stop coding.

Now, the main job starts. No more friendly CSS and HTML, the master PHP which I had resolved to use just arrived. As an immediate OOP guy, I knew I was going to face some hurdles but I was resolute to get it right (Shey you feel my moral?). With the principle of DRY (Don’t Repeat yourself) in mind I wore another set of coding gloves and off I went. I created my very first class which will help in displaying blog posts from my already created DB, implemented pagination the OOP way for the first time, moved to building my dashboard, did some other stuffs I can’t even remember any more and finally all was set. Hmmm, I wish it happened so easily just as written, I could have finished up within the same time it took you to read all of this. But Thursday, Friday and almost the whole of Saturday would better explain how long it took me.



Finally

I picked up my card, opened up namecheap.com, purchased some web space, quickly made haste to 1and1, bought a brand new domain (perhaps yours is old) and with the burning desire and ecstasy in me to finally put up my website, I quickly fired up Filezilla, and started uploading right away.

After all the necessary testing was done, with great feelings of accomplishment, I began to text, mail and share my brand new website to as many persons as possible.

And just like in the Disney cartoons, my site and I lived happily ever after.

P.S. This post first appeared here http://joelamawhe.com/blog?post=how-i-created-my-personal-website&id=1

Nice.. Looking forward to be like you. *chuckles*

Generalmac:
Nice.. Looking forward to be like you. *chuckles*

You can even become more. Thanks for reading.

Nice

JoelAmawhe:

So I just rolled down my sleeves which has been up for almost a week now in building my personal website. Today, I’ll be writing about the processes and steps I took in actualizing this long time goal.



And just like in the Disney cartoons, my site and I lived happily ever after.

I am really happy for you...

Kudos and keep it up....

You ARE Great...

Did you have 0 knowledge in this web development prior to starting?

joey150:
Did you have 0 knowledge in this web development prior to starting?

Of course not. Every Pro today was once a learner. Infact when I started learning how to code, I couldn't even use the computer system to achieve very simple tasks efficiently.

I was a total novice, but I knew i had to learn.

Howmon:
Nice

Thanks champ!

Following

You said it all. I must say what keeps me back from owning my personal website is indeed "Laziness " and "Procrastination ". Thanks for inspiring and encouraging.

ugnoble:
You said it all. I must say what keeps me back from owning my personal website is indeed "Laziness " and "Procrastination ". Thanks for inspiring and encouraging.

True. I'm happy you found this useful

Nice one @OP
meanwhile hoping to have my personal website someday, after am done learning this PHP sh+t

Hosting.....

Generalmac:
Nice.. Looking forward to be like you. *chuckles*

For your programming related questions post them at:www.nct.com.ng related and get almost instant reply from real G33ks

Nice one, kudos dear

Toroze:
Hosting.....

Sorry I didn't get you please

Jamesugbes:
Nice one, kudos dear

Thanks a bunch

Skykid1208:
Nice one @OP
meanwhile hoping to have my personal website someday, after am done learning this PHP sh+t

LOL! PHP is not shit. Besides you could pick your personal website as a project to hasten up your learning process you know.

JoelAmawhe:


Sorry I didn't get you please

How did you host or why hosting service did u use

Toroze:
How did you host or why hosting service did u use

I used namecheap

It is raining offers at mythemeshop right now...

You can get a premium theme or any plugin for $9 right now.

check this thread for more information

Thumps up!! You did a great job

Great job

seunoni34:
Great job

Thanks

cshortz:
Thumps up!! You did a great job

Thanks

Nice layout.
One question, how did you get that screen shoot? Would like to do something like that.

ukorsimplicity:

One question, how did you get that screen shoot? Would like to do something like that.

Can you explain further ?

JoelAmawhe:
Can you explain further ?

The image at the end of your post. I will like to know how you did that.

ukorsimplicity:

The image at the end of your post.

It's simple as grabbing the screenshot of the website in different resolutions using Mozilla Screen resolution feature then using a graphics design software to nicely fit the screenshots on a downloaded png photos of a desktop, mobile, etc.