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.
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.
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.
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:
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:
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!
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 folio page:
The about page:
The contact page:
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:
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:
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