We Meet the third Saturday of each month at the Sydney Mechanics Institute 240 Pitt St Sydney from 2 pm

What we did

March 2017

This month we looked at a tutorial called “Web Design for Kids”. It is written by Joni Trythall, it has eleven lectures and is published by Envatotuts+. It builds a simple one page site called Tuts+ Town. It has eleven tutorials covering all the basics. The first starts with how the web works, the web designers job. Planning a site by sketching out a diagram of the site. It then looked at the basics of how a site is constructed.

Next is “Getting Ready” it looks at sketching a site in more detail, what web editors are available, organising files and using a browser to check your work. 

“HTML Structure” takes a simple look at what html is and how its elements are constructed. Then goes on to show in detail how the sample site is constructed. We then moved on to “HTML Content” this describes adding content using containers added in the last tutorial. We discovered sections, divs and how to add images and list to the site.

Next up “CSS” that is Cascading style sheets. This looks at how the site is styled by creating a separate file with instructions for the browser to follow. It goes into how to relate html to css and how a css instruction is written. The next tutorial is “CSS Layout”. It looks at css order, the box model about margins and padding and flexbox about moving the html elements around the layout. It then goes into how to create specific css for the site.

The tutorials then go on to “Images” “Images are added using HTML and resized and positioned using CSS” This tutorial looks at what types of images are around, how to get free images and editing them. It also shows some examples of how to greyscale, blue and change the opacity of and image using CSS.

In “Design Basics” Joni looks at pulling the elements of HTML and CSS into a design pattern. The tutorial discusses how to tie content and images into a layout that the user will find easy to use. This includes ideas like visual hierarchy, the use of whitespace, Typography and the use of colour. The next two tutorials look at those topics in detail.

“Typography”, explains how to use type face to create the look of the site. It looks at the deference between san and san-serif fonts and the various parts of a letter. It details ideas on spacing; between letters, between words then looks at ideas on alignment. There are some practical examples of CSS to use in creating the site.

Using “Colour” is detailed in the next tutorial with a look at the three types of colour definition RGB HEX and HSL. The tutorial covers items like the colour wheel and how colours are created. The three primary colours red yellow and blue are combined to create secondary colours and these are combined to create tertiary colours. It has a brief look at the meaning of colours and how to use a colour palette to find good contrasts and readability. There are examples of the CSS code to use in the site.

Finally, there is a “wrap up” which includes ideas on how to get the site hosted including some free hosts, like Neocites which is described in some detail.

Web Beacons

To finish the day John Simons gave us a run down on Web Beacons which are “used to monitor the behavior of the user visiting the Web site” Its like a cookie in stealth mode. Here are some of the links John used.

http://www.webopedia.com/TERM/W/Web_beacon.html

https://www.simonewebdesign.it/how-to-create-web-bug-aka-beacon-image/

http://www.pujoljulia.com/tracking-pixel-web-beacon-tag-control-data.html

There is no meeting in April as it is Easter Saturday so I hope to see you all on the 20th May.

Steve South

Sig Leader