Today is the final day! To start I began validating my code on http://www.w3.org/.
The index page is almost perfect, the validator doesn't like the '#' in <a href= #>~ Top ~</a>, which is kind of required for the function to work. No doubt it will appear on every page then so there won't be any perfectly clean code pages.
On the alternatives page, there was issues with the validator trying to figure out the Javascript. there wasn't much I could do with breaking the JS so I just left it. excluding the '#' at the bottom, there was a total of 7 warnings and 5 errors, all in the JS.
Just like the Alternatives page, Contacts has the same issue with he validator about the Javascript. Again, other than that it was fine so I just ignored it.
Index, More Info, Tips and Facts Page:
mystyle.css had no errors!:
The media queries page also had no errors!:
Now that the site is more or less finished, I'll go over what I've learned from this project. The main and probably most obvious is how to make a site responsive.
Using @media screen and (max-width: 980px) {} in a css file and putting in new design changes the sites layout to fit on whatever size you see fit. On the project I used 3 sizes that should fit on desktops, tablets and smartphone. ( 980px, 650px and 480px). Although, looking back over it, I would have liked to fix the issue with the videos and google map to fit properly within the associated sizes.
I learned how to reset all the values of the css in browsers so that you can make your css the way you want without the browser automatically applying widths and heights, etc...
I learned how to make a button in the footer that brings you back to the top of the screen, handy for when the site has to fit in a smart phone and the content gets WAY too long, so having a back to top button is very efficient.
I learned some basic video editing. Using Adobe Premiere, I had to make a video about Ballyogan Recycling Center. To make the video not awful to watch I had to piece different clips from different video files together and put a sound file over them. I also used titles to show what was going on in the video. I think next time I need to make a video, I shouldn't try film somewhere that isn't on private property and will actually allow me to get good shots instead of trying to get good shots while hiding the camera from the workers.
I learned researching skills as I had to search for content for my site. As it was about a certain place, there wasn't many sources so I had to really burrow deep into what sources I had to obtain relevant bits of information. I also had to think of the site to begin with and prepare proposals to justify why to start work on the site in the first place.
Finally, I expanded my knowledge of javascripts. Through labs and the project, I learned how to make pop-ups that appear 'onload', pop-ups that appear 'onclick', popups that allow the user to enter inputs and have the javascript preform actions like basic maths and how to make a semi-working alert clock.
The first I implemented on my site was the 'onclick' javascript. I had to use 3 as I had 3 pictures that could be clicked. When the picture gets clicked a popup message appears stating that the user is about to leave the site. The message has 2 buttons, one says 'ok' and leads the user to the linked site, and the other says 'Cancel', which keeps the user on the same page.
Secondly was the clock. I thought just having the clock was a bit too basic and decided to try add a little twist too it. Unfortunately I only got it semi-working.Whats suppose to happen is that if the clock is between the opening times, a message appears below saying that the Center is OPEN, and when its during closing times, displays 'CLOSED'. I had problems that whenever I changed the code to something that I thought would work, the clock wouldn't appear on the page, which was fairly frustrating. The issue is that according the the code, the Recycling Center is ALWAYS open and never closes, which would be a big problem if the site was to go live.
Overall, the project was a good tool and enjoyable experience at gaining some vital experience with designing a website!
No comments:
Post a Comment