Week 4- Project Management

Project Management:

I set aside an hour on Thursday and two hours on Sunday to work on my website. I am now becoming better at identifying mistakes and errors, and am pretty confident when it comes to html and css.

I worked on-

• Fixing the Navigation bar on the top while scrolling. I couldn’t get it to work even though I set the position as fixed, and width 100% in my css. It turns out that I forgot to put a semi-colon after the 100%. Also, I did not have z- index in my css. This is a link that I referred to while fixing my navbar- http://sixrevisions.com/css/fixed-navigation-bar/
• Making sure that my html and css are readable.
• Getting people’s opinions about my website and making changes to it-
  • Changed the placeholder text in the “Message” and “Email” fields of my contact form.
  • Removed the transparent box from my homepage
  • Added a more suitable background image to the packages page.
• Browser testing on Mozilla Firefox and Google Chrome. https://karlwebmedia.wordpress.com/2017/06/01/browser-testing/
• CSS and html validation: I did not expect to have any errors in my html, but it turns out I did. They were mostly minor issues like no spaces, no alt text for images, etc which have now been fixed. I was having a few minor problems with the css validation as well (mostly typos) but I have fixed them. Click here to see screenshots of my final, error free CSS and html validation check- https://karlwebmedia.wordpress.com/category/html-and-css-validation/

Week 3- Project Management

I completed all of my tasks for the week, and am moving closer to a finishing the website.

Project Management: Tasks for the week-

• Redesigned the locations page based on recommendations. I added a map of New Zealand in the beginning which shows locations of destinations.
  I also changed the way I displayed images of locations- I created one slideshow each for the North and South Island destinations using html, css, and javascript.
• Html and CSS for the Locations Page.
• Html and CSS for the Packages Page.
• Changed the appearance of the testimonial slider (home page) to something more simple and less blocky looking.
• Changed the colour of pages on the navbar when hovering over them and when active.
• Linked all the pages together

Screenshots:

Locations page- map and content.  Also, you can see that the active page is indicated by a change in colour on the nav bar

Slideshows for North Island and South Island  Locations-

Packages Page-

Homepage (New Testimonial Slider)-

 

My plan for the coming week-

• Fix Navigation bar on the top while scrolling
• Go through my html and css to make sure it can be easily understood by anyone else who may read it.
• Make minor improvements to my pages as I think of them.
• Get people’s opinions about my website and make changes as i see fit.
• Browser testing
• CSS and html validation

Week 2- Project Management

Week 2 turned out to be quite productive! I finished way more than expected given my coding inexperience.

Project Management

My initial plan for week two was to work on the second page of my website- html and css, and improve/modify my home page.  I allotted an hour a day to researching how to add certain elements such as sliders and low opacity boxes to my website. Since my weekdays were pretty busy, I decided to spend 6 hours on Saturday and Sunday on coding for the second page.

To sum up- I spent an hour each day (Monday-Friday) on research, and 6 hours on both Saturday and Sunday coding.

I underestimated my coding speed and was able to complete both my Contact and About Us pages.

Contact page

As you can see in the screenshot, my contact page is quite simple (exactly like this page in my prototype). I did not want to have any unnecessary background image or other elements. I want the page to be simple, easy to understand and uncluttered.

I showed last weeks home page to a few people and received some recommendations from them. I have incorporated a few of these changes on the page.

About Us page

Changes to the home page

• I added a section on the top of the home page (directly under the navbar) which provides a little information on New Zealand. The information/ text box is not mobile responsive. I will work on making individual elements mobile responsive once I have finished the desktop versions of all the pages. I also added a “View Our Deals” button.

• I changed the look of the destinations section on the page, aligning the images properly and adding dark grey backgrounds to the North and South Island titles.

• I added a “What Our Clients Say” section (testimonials). I expected a slider to be fairly easy to create but it took me a while to get this working. This section is not mobile responsive. 

 

• The good news is that I finally managed to get the background images for two of the home page sections to appear. I had named one of my “section” classes something other than- section. Apparently this was the problem.

I think I’ve learned quite a bit this week, and did not anticipate how satisfying it would be to see my code turn into actual web pages.

Week 1- Project Management

Over the past week, I have started working on the html and css for my website. I’m completely new to coding, so I started by going through lynda and codeacademy resources.

Here is a link to the sitemap I will be using to create my website-

https://karlwebmedia.wordpress.com/category/sitemap/

Project Management:

The first step that I took was to organise tasks for the week. My aim was to finish the basic structure and stlying for the first page (home page) of my website.

I spent 1-2 hours everyday learning how to code, and another 2 hours daily experimenting with everything i learned and trying to create the home page.

I worked on the html and css for the content on the home page, as well as the navbar, footer and greycontainer which will be applied to the subsequent pages.

Progress and Experience:

I have finished the html structure and css for the web page, but had a few issues which I hope to get solved in class this week.

I had a little difficulty with aligning certain items (search) on my nav bar but eventually figured it out. I still have to make the navbar stay fixed on top of the page while scrolling. I also created the form which enables people to subscribe to a newsletter.

I had alignment issues with this form, since I didn’t wish to use all twelve skeleton framework columns. Skeleton seems to be arbitrarily aligning my form to the left, while I want it to be centered.

I also cannot seem to get the background image to appear behind the form.

As you can see in the above image, the form is aligned to the left, and the background image is not visible.

On scrolling down, you come to the next div in which I am once more unable to move the images to the center of the page.

At the bottom of the page is the footer.