Website Development | Portfolio

Since the last deadline for the website, I have learned a lot in terms of coding. Ive done my training on Codecademy.com, and Ive been looking at tutorials on all kinds of sites like youtube, css-tricks and W3schools.

In my last web design project, I didn’t include any personal information or any current projects, there was no background image or colour and the buttons were simple colour switches when hovered over. In my own opinion I could have definitely done a lot better if I hadn’t left it to the last minute.

On the brighter side of things, I’m well prepared for the up and coming deadline for the website, because I gave myself time to learn different techniques using text editors and more advanced coding skills. I have stopped using Adobe Dreamweaver CS5 and switched to a more user friendly text editor called “Brackets”.

I find brackets more efficient because it only contains the tools I need on screen, nothing else. Dreamweaver seems to over-complicate the interface, which puts me off. Brackets highlights lines with opened tags or coding errors which is very useful. It also allows you to store all of the images you are using for your webpage in the toolbar on the left, along with their URL’s when you need them.

When using the live preview on brackets, it opens a separate google chrome tab catered for Brackets. It allows you to make adjustments live, so you can see the outcome of the changes you are making instantly. In dreamweaver, you must re-open your live preview each time to see your outcome (which becomes extremely frustrating).

Recently, I have been learning to create buttons that when hovered over, spin a full 360 degrees before transforming into a coloured version of the original button when the cycle has finished. So far I have completed all but one of my buttons, but I should have this done in a few hours.

shown below is a screenshot of what my website looks like at the moment:

Image

As you can see, my homepage contains a picture of me and my friends. When this picture was taken, it held such a relevance to my personal life, and when I first tried it out as my homepage I wasn’t sure If liked it. But when I designed the header text on the webpage, the clear blue sky played an advantage. Because the picture was so colourful and I personally think its something nice to see when you first access the page, I decided to keep it.

Image

As you can see from the picture above, I have used a scrolling black screen which has a page about my personal life and why I chose DMD, what I enjoy about it and what I want to eventually want to end up doing. Obviously its not finished, but the code is all there locked up in my CSS stylesheet. This page responds to my “Me” button, located at the top on my navigation bar (pictured at the top of this post). When clicked, it will automatically scroll down to this page. I spent a long time getting the opacity right because I wanted to still keep a hint of my background, but I still wanted to make it readable (when the opacity is too low, you cannot see the words because of the image behind, the sky blocks you from reading the white text).

The page itself is responsive using a code I wrote in my CSS, which enabled the body to shrink (including the image) as you minimize the page, allowing easy access on a mobile device.

I hope to have the website done on wednesday, ready for the hand in date.

Advertisements

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s