code-institute-submissions / first-milestone-project-30 Goto Github PK

First milestone project!

This project has been worked on as a base website for promoting myself in the future as a devloper.

Using a few different landing pages i've been able to show off a variety of styles and include some variation in the images and layout properties that have been used on the site, at the heart of this is the Bootstrap styling module.

UX!

I wanted the website to be ver clean and simple in its look, i didn't want to much clutter on the screen. That is why i have used a simple dropdown menu to displey the links to the other couple of other pages on the site.

I've tried to follow this rule with the social media links at the bottom of the page. By keeping the images nice and big and bold without the addition of un-needed text to say what they link to it keeps the look and feel of all the pages consistant and clean.

Features!

The dropdown menu at the top of all three pages keeps consistancy across all the pages and is very simple to use for the user.

Social media links, these are a nice feature than when the user hover's over the top of them you see a slight change in there color. The links have also been set up so they open in a new webpage so that the user can simply close the social media tab on there brower and the original webpage is right there where they left it.

Contact me information, a simple bit of CSS styling here provides a cool little feature where the background for the information changes style when the user hover's over each section. The styles fade in and out nicely so there is no sudden flicking back to the original style, everything is nice and smooth.

Technology's used!

This project has the bootstrap styling links and uses the grid system at its core for the layout design of the page.

Font awesome is used for the small symbols in the contact me page and the sybols used in the social media links at the footer of the page.

Google fonts are also linked as i used one of there fonts for the page.

There is also a link in to javascript to give the drop down navbar the functionality to work as a dropdown bar.

Testing.

When makiing changes to any of the code on this site i have made sure to check how it looks on the browser, From making sure the nav and footer elements fill the full width of the page to making sure the background images are posistioned properly. I have'nt got any forms on my page that i have needed to test to make sure they submit to the right location. When including the nav bar i tested to make sure the animation of the nav bar was working correctly in both desktop and mobile views. The contact me page needed a fair bit of testing to get the CSS animation working correctly and in the style that i wanted it to. i tried to keep the code as clean as i could here and indeed on the rest of the website to make sure its loading times were as fast as possible. Some of the elements on the page had unwanted padding or margins around them, when viewing the page i used the google chrome devloper tools to locate the problem element and that locate what CSS stlying was causing the issue and the make the changes to get it to render properly on the page.

Deployment!

This site will be deployed on to github, its been deployed using google chrome as the platform to build and test the project.

Content!

The content for the page was all written out by myself, i have used projects that have been done on the course as a refrence but i have tried to build this from the ground up to test my knowledge.

Media!

The images i have used were from a simple google seach for some generic background images.