WEB501 Website Build

Blogs 1-6

I’m designing a website for my sister in law Maegen based on her Make-up business.

First step I did was create all my pages i will be building in web expression 4, Index, Gallery, Products and Contact.

Base 1

The next step was going to http://www.layoutit.com/ to design a layout for my index page.

The reason i chose to use bootstrap was for the mobile responsiveness it will give me.

Base 2

As far as content decisions go, I built the layout using an online bootstrap generator for the simple reason of it being super quick and easy to insert content in and also not having to physically build each content box.

I will be using a lot of ID’s when i start to insert content, for example, text, images and videos.

Next step was merging  all the bootstrap content into the folders i had already created and then overriding them in the CSS to accommodate for my layout, i.e Container at 80%, Navbar at 100% in the container.

I’m having a hard time implementing my Navbar override, got the container to represent 80% but still can’t get my head around the Navbar.

Base 3

Base 4

I think i will have to come back to the Navbar at this stage as i need to ask help from a fellow student.

Ok upon further investigation I realised i had a Navbar media query in place.

Base 5

I have just built a custom navbar on the websitehttp://bootstrapdesigntools.com/tools/bootstrap-menu-builder/


Once again something is wrong as none of the colors are being implemented. Grrrrrr.

Base 6

The navbars are both working as intended, linking to their respective pages but yeah, unfortunately, they don’t ‘look’ how i wanted them too, i will keep looking into it until i find the problem.

I’m stumped for ideas why the colors aren’t showing,I’ve searched for ideas to no luck so  I will have to meet up with another student and ask for help.

I have uploaded the site to Altervista for testing and implementation until a later stage when the client will upload it to a paid server.

Base 7



Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s