Week 6: End Game

This is the final week I’ll be working on my site before it’s submitted.

I’ve primarily been working on positioning elements on each of the pages following feedback, and exploring fluid design as much as I can. Unfortunately I haven’t been able to implement this as much as I would have liked, but after it is submitted I will definitely be working on getting the site as responsive as possible in the future, because that will obviously be an important consideration for the user, particularly when accessing my site on mobile devices. All of the updated pages are below with the code underneath. All of my individual project pages haven’t changed since they were shared last, so I haven’t included them here.

index_wk6

index_html

index_css

folio_wk6

folio_html

folio_css

about_wk6

about_html

about_css

contact_wk6

contact_html

contact_css

One of the main issues I had to work on this week was getting my nav bar menu items at the top of the page working on all browsers. I had initially trialled it on firefox and i.e. and it had work, but following feedback from another class member, I learned that it wasn’t working on other browsers. I discovered that along the line it had been set to position:sticky instead of position:absolute, which based on the position settings I had created for it, caused it to drop off the right-hand side of the page on smaller browser sizes. This was fixed eventually, and I decided to move all the menu items further toward the centre of the page so that there wouldn’t be any issues on other browsers in future.

All of the work I wanted to complete on the site has now been completed, so please let me know if there’s any issues that crop up for you when accessing the site here: C2 By Design.

 

Advertisements

Week 5: Carousel Images

This week I’ve been working on updating a few issues on my site in response to feedback I’ve gotten. I’ve been able to implement most of the features I wanted, but there are still some elements (like responsive design) that I haven’t had the time to properly look into yet.

The major achievement for me this week was creating a carousel of images on my homepage – basically having a hero image which changes every few sections, scrolling through my portfolio works. I used a guide over at w3schools.com which was by far the easiest to implement out of all the different methods I looked into. I’m hoping to potentially be able to include links with these images to their respective portfolio page, but that will probably take some time to wrangle.

index_wk5_state2

index_wk5_state1

index_wk5_html

index_wk5_css

As you can see, the first image is the initial state will cycle through each of the portfolio project images, as seen in the second state in the image below. This cycles every three seconds, so visitors can see at a glance some of my work in a short amount of time.

I’ve also been working on this week’s SBEs; here’s a screengrab and the code below:

table_navmenu_wk5

table_html

table_css

It’s a little hard to see, but the nav menu with the white background is being hovered over, using a: hover to change its state.

I’ve been working primarily on creating a back button on the individual project pages, which you can see below:

honestea_wk5

honestea_html

honestea_css

This helps it act in a much more user friendly manner, and doesn’t leave users ‘stranded’ so to speak, when they access each individual page.

The site is:

C2 By Design

Feel free to take a look, and I’d love to hear any feedback about it!

Week 4: Visual Mockups

I’ve been working on my visual mockups for my folio website. I’ve had to refine a few things following beginning working on the site, so I’ve made some adjustments to these to reflect that.

The homepage:

mockup1

The folio page:

mockup2

The about page:

mockup3

The contact page:

mockup4

The contact page was initially supposed to include a contact form, but following some issues I’ve decided that for now I will leave it as a simple info page, and potentially down the track work on converting it into a form.

I’ve developed all of my pages now, including all of the individual portfolio pages. I also included the background as specified on the visual mock ups above. The code is linked below each page for reference:

mockup1

index_html

index_css

folio-page_wk4

folio_html

folio_css

about-page_wk4

about_html

about_css

contact-page_wk4

contact_html

contact_css

honestea_wk4

honestea_html

honestea_css

sunsilk_wk4

sunsilk_html

sunsilk_css

arthousepage_wk4

arthouse_html

arthouse_css

illustration_wk4

illustration_html

illustration_css

conceptsketches_wk4

concept_html

concept_css

hotel49_wk4

hotel_html

hotel_css

designfoundry_wk4

foundry_html

foundry_css

dancefest_wk4

dancefest_html

dancefest_css

I’ve also optimised all of my images to include on these pages, and I’ve just used the Export>Save for Web function in Photoshop:

image-optimisation

All of my images are now ready to include on the pages at the right size and quality, which will help loading speeds.

Let me know what you think, feedback is always welcome!

C2 By Design