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.
Wednesday, 7 June 2017
Thursday, 1 June 2017
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.
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:
Thursday, 25 May 2017
Task 3 Blogs - Blog 2 - HTML Home Page
Basically, the first steps to coding my website was seeing what would be the same code, and what code would be different. For Example, the top bar or menu bar, all code is the same in all HTML files. After creating the basic layout of the home page with different divs, boxes, headers, text, interactivity, icons and so on, the HTML pages had to be linked.
The website has a menu bar, three columns(col.1, col.2, col.3) of videos(in this case static pictures), name of video, views, and uploader. When coding the website I had a problem when resizing the page. Before coding this website, I never had an idea of how many times divs are used. Now I know... So basically, home page was pretty simple. When it came to the sidebar, it was a bit more complicated, but managed. Consists of divs(once again), hover option, fonts,ids, classes, headers, links & icons.
A problem I discovered in class with Mr.Redd was that you must put the links inside the lists, as links can not be a child of a link. Had to change this on every single HTML page(was a bit*h).
As you can see, code has been arranged with the links inside the lists.
Another problem encountered was a duplicate error. Not knowing this hassled me as all need to be changed into different id's. ID's were changed into different classes in order to solve this issue.
The website has a menu bar, three columns(col.1, col.2, col.3) of videos(in this case static pictures), name of video, views, and uploader. When coding the website I had a problem when resizing the page. Before coding this website, I never had an idea of how many times divs are used. Now I know... So basically, home page was pretty simple. When it came to the sidebar, it was a bit more complicated, but managed. Consists of divs(once again), hover option, fonts,ids, classes, headers, links & icons.
A problem I discovered in class with Mr.Redd was that you must put the links inside the lists, as links can not be a child of a link. Had to change this on every single HTML page(was a bit*h).
As you can see, code has been arranged with the links inside the lists.
Another problem encountered was a duplicate error. Not knowing this hassled me as all need to be changed into different id's. ID's were changed into different classes in order to solve this issue.
Task 3 Blogs - Blog 1
Process of Coding - overview of what was done in task(website)
In the first coding lesson, I honestly loved it. Everything was going smooth, learning about what HTML and CSS actually are. Coding simple things like how to open an html file, headers, body, opening & closing tags, I felt like a kick ass coder like those in the movies, an A Game Hacker. Was a great feeling. SADLY, that feeling only lasted for about a week.
A week after was the second lesson of coding. That was the day where my opinion towards code changed completely. Was not managing to understand what was going on while trying to catch up to the code on the big screen.
Throughout these weeks, I learned that coding is something to be learned alone. You must be in a relaxed state with W3 Schools by your side. Since I had no idea how to even start my website for Task 3, I had to do a W3 Schools Crash Course. It worked. In less than 3 days I basically learned everything there was to know for basic website coding. What I did was take a lot of notes on how to code.
Things like divs, breaks, links, language option, title attribute, html links, size attributes , headings, color, fonts, horizontal rules, styles, formatting text, and styling HTML with CSS was studied. After taking all these notes, I would look up for the code of something I did not know how to code.
Styling HTML with CSS
Basically, CSS can be added to HTML elements in 3 ways. These are Inline, Internal & External.
Inline - by using the style attribute in HTML elements.
INLINE Example:
<h1 style="color:blue;">
Internal - by using a <style> element in the <head> section
INTERNAL Example:
<style>
body {background-color:powederblue;}
h1 {color:blue;}
p {color:red;}
</style>
External - by using an external CSS file(like it was done during lessons)
EXTERNAL CSS Example:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
Other criteria include CSS fonts, CSS border, CSS Padding & Margin, id Attribute, Class Attribute, external references, local links, adding images as links, lists including unordered lists, ordered lists. These led to Horizontal Lists(menu bar ;))
IMAGES OF WRITTEN CODE
In the first coding lesson, I honestly loved it. Everything was going smooth, learning about what HTML and CSS actually are. Coding simple things like how to open an html file, headers, body, opening & closing tags, I felt like a kick ass coder like those in the movies, an A Game Hacker. Was a great feeling. SADLY, that feeling only lasted for about a week.
A week after was the second lesson of coding. That was the day where my opinion towards code changed completely. Was not managing to understand what was going on while trying to catch up to the code on the big screen.
Throughout these weeks, I learned that coding is something to be learned alone. You must be in a relaxed state with W3 Schools by your side. Since I had no idea how to even start my website for Task 3, I had to do a W3 Schools Crash Course. It worked. In less than 3 days I basically learned everything there was to know for basic website coding. What I did was take a lot of notes on how to code.
Things like divs, breaks, links, language option, title attribute, html links, size attributes , headings, color, fonts, horizontal rules, styles, formatting text, and styling HTML with CSS was studied. After taking all these notes, I would look up for the code of something I did not know how to code.
Styling HTML with CSS
Basically, CSS can be added to HTML elements in 3 ways. These are Inline, Internal & External.
Inline - by using the style attribute in HTML elements.
INLINE Example:
<h1 style="color:blue;">
Internal - by using a <style> element in the <head> section
INTERNAL Example:
<style>
body {background-color:powederblue;}
h1 {color:blue;}
p {color:red;}
</style>
External - by using an external CSS file(like it was done during lessons)
EXTERNAL CSS Example:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
Other criteria include CSS fonts, CSS border, CSS Padding & Margin, id Attribute, Class Attribute, external references, local links, adding images as links, lists including unordered lists, ordered lists. These led to Horizontal Lists(menu bar ;))
IMAGES OF WRITTEN CODE
Subscribe to:
Posts (Atom)