BeRankWorthy- 7 Days To Creating My Own $3000+ State-of-The-Art Website. | Skillshare Projects

Zahib Ziaweet

SEO Consultant & Web Developer



BeRankWorthy- 7 Days To Creating My Own $3000+ State-of-The-Art Website.

Goal: I want to develop a website that matches the brand that I'm building with my company, also I needed a clean professional layout, SEO friendly, blog page structure that is different from home page, Awesome homepage with modern functionality and mobile responsness.


Timeline: is 1 week starting 12/15/15

Shuffling Through My Thoughts

I'm starting from a very basic design, I have a general Idea If what I'm going to do an how the course trailer laid out the content is exactly what I had in mind plus some.

I was thinking of starting off very basic with just a black and white theme and cool font. Here is what I was starting with.

Before 12/15/15 - Here is my site "Before" Prior to starting this course.


**********************************  NEW UPDATE ************************************************

Installed New Theme Layout

  • Installed new theme on current wordpress blog
  • Got familiar with them functionallities

Other thougths

I decided that I need to develop somthing that would match my business where there would be alot of visitors, comments, high end clients would visit. I need to give it my best effort. Came accross this course and got a bigger idea of what I wanted to do from the beginning.

First Step After Downloading of the New Template Design already much better and in the direction of what I have in mind.


**********************************  NEW UPDATE ************************************************

Uploaded Logo - Settup Blog Theme Options & Layout

  • Setup header layout
  • Setup up logo and sizing
  • Setup 

Helpful Tips: LOGO- How To Upload A Logo With Transparent Background.

I got my design and source file from a Fiverr gig, But I don't the guy sent me the source file using a higher version of illistrator, so I couldn't edit it and I didn't want to go back and ask for a older version, So I opened the .jpg file in my adobe photoshop, used the magic eraser to make the background transparent (jpeg image size was 800x700). I save as a .psd just in case, then I savedas .png and selected interlacing option. In my experience sometimes uploading a jpg puts a white box behind the image while .png with interlacing helps to read as transparent background the is flush with the back.

This is a screenshot of my logo in the header as I want it.


Helpful Tip: How to change footer message to 2016 and still hyper link your brand name back to your home page.


The instructor tells you how to chagne this section but I changed it but I my domain name was no longer hyperlinked to the home page, which I wanted to do for SEO reasons.

Thankfully you can put html code right there in the footer.

Here is what I have in my footer section exactly

© <a href="">BeRankWorthy</a> 2016

You can just replace with your website link and website name.

**********************************  NEW UPDATE ************************************************

New Background Photo

  • Created Home Page
  • Created Transparent Header
  • Added Beautiful Background Image
  • Added Paralox Scrolling
  • Added logo
  • Created Home Page Static

Other Thoughts

I wanted something that would represent professionalism and reflect what I would be doing. Got this photo from the gallery in the course. I may change it later on but it works for me. I'm getting very familiar with this template. I've also seen these paradox scroling effects on other websites like this one that we are on right now and Bob Procotors website. It's soo awesome I got my hands on this for FREE. Thanks Malik!


**********************************  NEW UPDATE ************************************************

New Services Section

  • Created 3 modules
  • added custom text
  • added services
  • added icons
  • added the 100% circle fill thingy
  • Added button
  • added border line

Other thoughts

I fixed the dis alignment after I took the snapshot. I'm going to change these service in the middle, I think. This is good for now until I go back over the wordings and do the proper linking.


**********************************  NEW UPDATE ************************************************

New Call To Action Section 

  • added text to footer
  • edit high res photo
  • loaded the new photo
  • placed text over with effects
  • added button with call to action


**********************************  NEW UPDATE ************************************************

New what we are good at section

  • added new skills section
  • changed the percentages
  • edit the skill names


**********************************  NEW UPDATE ************************************************

New testimonial and Social Media Section

  • Added 2 new testimonial slides
  • Added social media links at the bottom
  • Verified the links and images sizes


**********************************  NEW UPDATE ************************************************

  • Added new blog page
  • Added 2 blog post
  • Added search blog portin
  • Added facebook widget
  • Added Contact 7 form widget


**********************************  NEW UPDATE ************************************************

  • Added contact page
  • added background image, text, arrow pointed down and rounded picture
  • Re organized home navigation
  • Added office, location, contact us
  • Added map & contact form
  • changed background color
  • changed font to match rest of the site
  • changed text and hoover color on contact page
  • Made flush the bottom of the footer to the section above
  • Tested the contat form to insure it works and where the email will go




Please sign in or sign up to comment.