EVALUATION

Throughout this unit, many things were covered. Most being related to interactive design, however still valuable for graphic designers such as myself. Before starting this unit, ideas were very different about web design and coding. Everybody takes advantage of it, and have no idea how much work and knowledge goes into it. It is pretty sad to be honest. 

Task 1 involved closely studying a chosen website. Things like layout, grid system, colors, fonts, interactivity, accessibility and function had to be noticed and taken down. The big jump was changing work done on illustrator into an actual website. 

Code that seemed impossible at the beginning became a lot more clear after a w3 schools crash course. 

The website task has taught me how to prepare a design for a coder to find easy, recognizable and to be able to code. It also taught me how to prepare a file for a developer, with png's ready to go, images in a folder, font file, and ALL named for developer's convenience. 

If i ever have to code a website again, will definitely use programs like bootstrap and any related programs to help in time and ready code. However, you must first learn the basics by coding it yourself.  

The development of the website has also taught me that code is mostly common sense and pretty straight forward. Commands are given to the computer and it does as it's told. 

This unit also made me aware of aspects that I was not aware of related to coding. Aspects include resizing, different browsers and different devices. The knowledge gathered will surely help me in future projects.

Task 3 Blogs - Blog 5 - CSS

Thankfully, I decided to put all CSS code into one file thus saving all the hassle to put them into one file.

The main problem(repeated problem once again) was the background attachment. The background-attachment property sets whether a background image is fixed or scrolls with the rest of the page. In this case, relative did not work as it was not valid for a background attachment. I changed it from relative to scroll, so it would scroll when the user scrolls down the website. 

When it comes to error no.2, I forgot to give a unit to the padding of the search bar, being 5px.

Task 3 Blogs - Blog 4 - HTML - Watch Later & History

Both have basically the same templates. Larger video on top, with a list of other videos underneath. However, I did not make the videos clickable to go to the video itself. When it came to my website, I aimed at creating a simple & clean looking design. 



It is basically all divs, headers and paragraphs.(history and watch later).


Watch Later's Errors:

Errors through out all HTML code were all the same. Before realizing what the mistakes were, I was literally at panic station. After realizing what the mistakes were, they weren't complicated like I thought. The main thing I learned is that you will only get better at code through trial and error. That is how to learn and study code.

Error 3 was a common error throughout my website. Basically the error was that you could not put a link tag inside of an unordered list tag. So it was solved by putting the <a> inside of <li> tags.

The rest of the errors were small mistakes. All were arranged with the help of google to errors I did not understand.

Task 3 Blogs - Blog 3 - HTML - Account

Account is basically the same code as home page. The different factors are the profile picture and timeline photo. 
However, more problems aroused with the home page. The biggest problem was the timeline photo(cover photo). For some reason, the picture did not want to stay fixed. After playing around with percentages, vw, and pixels, i managed to get it to stick n the correct location. More problems aroused when it came to resizing the page. Everything was moving around and resizing. With the fixed option, that was also fixed. 

Otherwise, code was basically copy and paste with the 3 columns. The same problem as the home page and all other html pages was the duplicate ID. That will have to be arranged. 

A cool effect is in the timeline photo, where it is fixed to the screen, meaning that when scrolling down image stays there, underneath the background.(thanks sir:) ) 

Sadly, I discovered that I have made a noob mistake. After uploading the website, I decided to check IF by any chance, they looked different on different browsers.. 

As you can see, the sidebar does not look as it was intended to when visiting the website through Internet Explorer and Firefox, whereas through google chrome all is good. Should have checked this before uploading the website. Dumb mistake. 


Internet explorer:

Firefox:

Google Chrome: