WEB501 Website Build

Final Blog

Well my website build has finally come to an end and I’m very happy with the final result, however, there are some aspects of it that I’m a little bit disappointed how they turned out but unfortunately, I just ran out of time.

I had to make quite a few adjustments to the overall layout and design because of my limited experience with bootstrap, Small things like image and video placement.

I’m not happy with how my Navbar came out, it looks good on desktop, but when you shrink it down to device mode there are some issues with sizing and some of the images are not the best quality.

Today I put in all my meta tags, installed google analytics, sorted out my media queries and corrected all the niggling little issues I had with images sizing, Putting in image responsive fixed a lot of the sizing problems.

I have finished now and are looking forward to showing Maegen the end result along with getting it marked ūüôā

 

 

WEB501 Website Build

Blogs 7-10

After completing the initial base build of the index page, i once again went to http://www.layoutit.com/ and generated the layout for my gallery, products, and contact pages.

The next step was to start implementing some color, image insertion and text/font insertion.

I made an ID with the background color¬†#c49ad6 (pale purple) that I wanted to use as a background color. After inserting the ID in a lot of the ‘boxes’ and noticing large white gaps in between the elements, it dawned on me that I can just use the color scheme in the container which fixed up the white gaps.

I then remembered in one of our classes that we could insert a background image to use instead of a solid color, so I googled ‘website’ background color and found a great image which I then inserted into my container-fluid bootstrap override in my css¬†instead of a solid color.

1

 

I then looked for two suitable fonts for my website which I found at http://www.1001freefonts.com/. I downloaded a font called great vibes to use for the page-header, slogan, and some headers. I downloaded a font called redressed to use for all paragraphs.

3

4PNG

5

I then started the process of inserting images. I had some difficulty¬†with the images as my sister-in-law¬†didn’t supply me with many good photos, There were some really good ones taken from professional photographers but many were of bad quality. Luckily Maegen had done the makeup for the bride and bridesmaids at my wedding so I used some of them as well as the professional ones that she supplied. I am not entirely happy with the images on the website at this stage as some of them do not look great due to resizing issues, I will come back to them at a later stage.

Inserting content into the index page, I googled beautiful wedding photos to find a great one for the page header, I found a good one, inserted it, and then put a banner text ID in with the correct attributes I wanted such as the great vibes font.

I then inserted three images into the first columns located under the slogan which I had inserted under the page header. Under those three images, I then inserted my text with the <p> tags and wrote my text that had been written with SEO in mind.

The gallery page was very quick and simple, but like i said, I wasn’t entirely happy with the image quality and will come back to it.

I created an image ID for the gallery which i used and also overrode some attributes of the carousel.

7

6

The final part of the gallery page was inserting a YouTube video on makeup tips and tricks, very simple and it worked a treat. I had to of course, adjust some size settings which went to plan.

8

The next step was to insert all the content into the Products page. I’m really happy with how the page come out, it looks fantastic.

The first step of building the products page was to find png file format images of all the logos of makeup brands Dramateyez Make Up uses, This was a difficult process as it took lots of downloading different images to find transparent backgrounds, I got there in the end. I also inserted links into the images to their respective websites, Revlon, Maybelline etc. To finish off the product page, I inserted a couple images of Maegen applying makeup to clients.

The last page  I built was the contact page, which went according to plan, however, I need to work out how to position the foxy form centered.

9

I am very happy with how the website is looking, however, I have a few issues which need fixing up.

Some of the issues I am having are with the Navbar, Image positioning, Image quality and Media queries. I will have these sorted out for the final hand in.

 

 

 

 

 

 

 

 

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/

http://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