Cert 4 Web Design Cluster; Week 7
In week 7 the class looked at;
Using external Fonts like Google Fonts and how to add one or more fonts in to your css instead of the standard fonts found on a persons computer. https://www.google.com/fonts
Also looked at Font Awesome which is the use of Iconic Font that can be place into a web site from https://fortawesome.github.io/Font-Awesome/ the fonts are made out of CSS coding.
Web site game to test if you can pick serif text http://www.tothepoint.co.uk/more/fun/shoot_the_serif/ .
Had a basic over view on how to validate HTML code and the use of Google Developer tools in Chrome.
Google Developer Tools allows you to open web pages and have a look at the code of the web site in how the web site was constructed. It can also be used to work out problems when building your own web page.
How to validate HTML in my web site to see if there is any problems with my code and layout structure to see if there will be any problems when read by serves or web readers. Looked at validator.W3.org for HTML validation and jigsaw.W3.org to validate your CSS.
Had a look at the web site CSS Zen Garden http://csszengarden.com and how the use of CSS can make your web site look. It had all the same HTML code and content in the web page examples but each example use different CSS code to change the appearance and layout of the web page. To show the function and power of CSS use in web page design.
Best practice is to have a external CSS style extension instead of having CSS inside the HTML pages for your web site it is easier to make changes to one style extension then going through individual HTML pages one ate a time to change code.
Next we looked at colour and hex colour system. Hex stands for hexadecimal which is a positional numeral system base of 16 distinct symbols. 0–9 to represent values zero to nine and A, B, C D, E, and F to represent values ten to fifteen. Sourced from https://en.wikipedia.org/wiki/Hexadecimal .
Depending on your computer and screen there is 16.8 million colours to be seen it is bracken down into bit’s.
16-bit colour also know as High colour the computer and monitors can display 65 536 colours combinations
24-bit colour display also know as True colour with 16 777 215 colours combinations being able to be displayed on a monitor.
32-bit colour displays 4 294 967 296 colour combinations which can create more convincing shadow gradients and transparencies.
Most of the time users do not notice the difference in the bit colour range only when programs use shadows and transparencies and other visual elements effects then these things may be notice. From http://www.computerhope.com/issues/ch001557.htm .
How a colour Hex Color Code is set is using a six digit colour code using the three primary colours of red, green, and blue.
Red is written FF0000,
green 00FF00 and
blue 0000FF, and changing these digits will give different colour options.
http://www.color-hex.com gives examples of hex colour codes and what colour they make. “A Quick Color Explanation” can be found on http://www.htmlgoodies.com/tutorials/colors/article.php/3478951
The class was given some web address of colour games and also use hex codes. They were;
to test our colour skills did okey in same could of done better in others.
The last of what we looked at was having a Dynamic web page design so it can be display from large to small screen displays. So the contents of the web site can change from a horizontal layout on a big screen to a vertical to a small screen like a smartphone.
The CSS code needed for this is example from:
http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
@media only screen and (max-width: 500px) {
.gridmenu {
width: 100%;
}
and;
http://www.w3schools.com/css/css_rwd_mediaqueries.asp
Need have a bet of a play to see how it all works.