""Do you hear what I hear".....Christmas special at Connect Church Bendigo

This evening, I attended our Christmas musical at Connect Church Bendigo. The musical was titled "Do you hear what I hear" and it was put together by our church volunteers. It was a great show. Here are a few images from the show.

To know more about our musical and our church go to http://www.connectchurch.com.au.

Melbourne Motorcycle expo 2018

Today, i traveled down to Melbourne to attend the Melbourne Motorcycle expo. This event occurs every two years. There were a number of motorcycle brands on display as well as various other exhibitors selling various items. I was hoping to see SWM Motorcycles, but they were not there. An odd thing happened. As I was sitting on the KLR 650, some chap came up to me and said that "this is your bike...". I thoroughly agree.

Michael camera House. Melbourne photo show

`Today, i traveled down to Melbourne to see the Melbourne Photo show at Michael's Camera House in Melbourne. They were displaying lots of new camera technologies and having presentations by guest speakers. I attended lectures by Claire Emmanuel, who is notable for her photographs of horses,

and Chris Smith, who is known for his portraiture of women.

This technology is so exciting.

Visit to Echuca on grand final eve

Today is grand final eve in Victoria. It is a public holiday. I decided that I would pay a visit to the northern Victoria Port of Echuca as a way of spending the day. I has visited Echuca previously but this time I took the train up there. I took about an hour to get there and it was a pleasant train journey and a nice day.

Visit to the Rochester Silos.

This afternoon, along with some friends from Connect Church, I paid a visit to the town of Rochester, which is just north of Bendigo. We drove up in an old Rolls Royce! After lunch at Kits Cafe, which we have preciously visited, we saw the artwork on the local silos, which is quite spectacular.

White Nights Bendigo

Tonight, we celebrated White Nights Bendigo. This has become an annual celebration in Bendigo as well as other cities in Australia. Basically, the city's buildings get lit up and animated by various light shows. it is an annual event. I took my camera along and got a few photos. Enjoy.

Murach’s HTML5 and CSS3 4th Edition

Murach’s HTML5 and CSS3 4^th Edition

This is my review of the recently published book titled Murach’s HTML5 and CSS3 4^th edition. This is the first time that I have used an electronic book, which was quite and experience. In the following review, I will simply go through the book and give my general thoughts on the subject.

Section 1 The essential concepts and skills

Chapter 1: Introduction to web development

Pages 4 – 5: How web applications work

I thought that your diagram on page 4 gave a good overview of how the internet works generally.

Pages 6 – 7: How static web pages are processed.

A good explanation of static web pages and how HTML works.

Pages 8 – 9: How dynamic web pages are processed.

Generally a good overview of how dynamic web pages work.

Pages 10 – 11: A survey of web browsers and server-side scripting languages.

These pages explained about the more common browsers and the more widely used server-side scripting languages.

Pages 12 – 13: How client side JavaScript fits into web development.

These pages gave a good overview of the many uses of JavaScript.

Pages 14 – 15: An introduction to HTML and CSS.

Generally a good overview of how HTML works.

Pages 16 – 17: The CSS for a web page.

Generally a good introduction to the idea of CSS.

Pages 18 – 19: A short history of HTML and CSS standards.

It was interesting to learn about the history of HTML and CSS. I did not know that there will be no CSS4.

Pages 20 – 21: Tools for web development.

I already use Adobe Brackets, as well as Notepad++ and Visual Studio Code.

They are all good editors. I prefer Visual Studio Code.

Pages 22 – 23: An IDE for web development.

I have used Dreamweaver in the past and I found it very memory hungry. I have not used any of the other IDE’s.

Pages 24 – 25: FTP programs for uploading files to the web server.

I have used FileZilla in the past and it works well. I have not used any of the other programs.

Pages 26 – 27: How to view deployed web pages.

These pages gave a good explanation of the concepts behind URL’s and accessing web pages generally.

Pages 28 – 29: How to view the source code.

Been there and done that….!

Pages 30 – 37: Five critical web development issues.

I have found in the past that these issues are important. It is good that you discuss them at the beginning.

Pages 38 – 39: Responsive web design.

RWD is becoming increasingly important. I will be fascinated to see just what this book teaches about it.

Perspective

This chapter provided a general overview of the concepts and terms behind HTML5 and CSS3. I look forward to seeing how this book expands upon them. I get the feeling that this is not a book for beginners as the authors covered a lot of information fairly quickly.

Chapter 2: How to code, test and validate a web page.

Pages 46 – 47 The HTML syntax

A good introduction to the basics of a HTML5 page.

Pages 48 – 49 How to code elements and tags

Perhaps you should explain just what these tags do before you discuss them!

Pages 50 – 51 How to code attributes

I cannot help but wonder if you are not moving a bit fast here! I think that some one new to HTML might start to get a bit lost until they know what these tags actually do.

Pages 52 – 53 How to use comments and white space

Comments and white space are important.

Pages 54 – 55 The CSS syntax

The author does not explain just what CSS does! She explains how it basically works but not what it does.

Pages 56 – 57 How to code basic selectors

Is it a bit too early to be talking about type selectors, classes and Id’s here?

Pages 58 – 61 How to use Brackets to work with HTML and CSS files

I like using Adobe Brackets. It is a good choice as it has a nice interface and is easy to use. It takes very little practice to get used to it.

Pages 62 – 63 How to use Brackets to work with HTML and CSS files

Do you think that it is worth talking about Emmett as well as extension managers here? This might confuse a person who is new to HTML5 and CSS.

I do feel at this early stage that new users should be typing things in by hand.

Pages 64 – 65 How to edit an HTML file

Perhaps at this point you should be giving the user a simple HTML file to type in. Learning how to deal with coding errors takes time and practice.

Pages 66 – 67 How to start and edit a CSS file

Perhaps at this point you should be giving the user a simple CSS file to type in first. I cannot but help think that you may be going to fast here for some people!

Pages 68 – 69 How to use split view and the quick edit feature

Do we really need to be talking about these features at this point?

Pages 70 – 71 How to preview an HTML files

Do we really need to be talking about these features at this point?

Pages 72 – 79 How to test, validate and debug an HTML file and a CSS file

Surely this is a topic for a later date! It is too early to be talking about debugging and validation here.

Perspective

On your perspective on page 80 you say this:

“Now that you’ve completed this chapter, you should be able to create and edit HTML and CSS files using Aptana (you mean Brackets) or the editor of your choice. Then, you should be able to test those files by displaying their web pages in your web browser and in any other web browsers that your users might use. You should also be able to validate the HTML and CSS files for a web page.”

I totally disagree. I do not feel that I have learned anything of value here.

This is just an overview and I feel you have presented much of this information too early. The reader needs to get familiar with coding simple HTML5 and CSS pages before even thinking about things like debugging, Emmet and validation. These are topics for later in the book.

Chapter 3: How to use HTML to structure a web page

Pages 86 – 87 How to code the head section

The author should have mentioned that SEO stands for Search Engine Optimisation. Otherwise these pages provided a good introduction to the Head section.

Pages 88 – 89 How to include metadata

These pages gave a good explanation of metadata and when and why keywords are no longer used by some search engines.

Pages 90 – 91 How to code text elements

I am glad that you explained that block elements begin on a new line.

I do feel that headers should be explained in there own page. The same for paragraphs, they deserve two pages of their own.

Pages 92 – 93 How to code special blocks of text

The examples here worked well.

Pages 94 – 95 How to code inline elements for formatting and identifying text

All your examples worked well here. I had not heard of <abbr>, <cite>, <code>, <dfn>, <q> or <var> previously.

Pages 96 – 97 How to code character entities

I tried the examples on page 97 and all worked well.

Pages 98 – 99 How to code core attributes

These really are CSS items. I can see where discussing them here could cause some confusion for some newer readers.

Pages 100 – 101 How to structure the content of a page

This was a good introduction to semantic elements.

Pages 102 – 103 How to use some of the other HTML5 semantic elements

I had not previously heard of some of these elements.

Pages 104 – 105 When and how to code div and span elements

Div and span elements are getting somewhat old fashioned now but it is good to mention them.

Pages 106 – 107 How to code links, lists and images

How to code absolute and relative URLs

These pages provided a good discussion about absolute and relative paths

This is something that is good to know.

Pages 108 – 109 How to code links.

These pages provided some good examples about using links and the various ways they can be coded.

Pages 110 – 111 How to code lists

These pages provided some good examples about ordered and unordered lists.

Pages 112 – 113 How to include images

These pages provided a comprehensive overview about using images.

Pages 114– 117 The HTML file

I enjoyed typing this simple web page in.

Perspective

This chapter generally gave a good overview of creating a web page with all the various elements that go into putting a page together. I do feel that some simpler examples as we go along might help.

Chapter 4 How to use CSS to format the elements of a web page

Pages 124 – 125 An introduction to CSS

I felt hat these pages provided a good overview of using style sheets externally of internally. It was good that you mentioned that that last mentioned declaration will override the previously mentioned declaration.

Pages 126 – 127 Two ways to provide for browser compatibility

It was interesting to learn about the shiv for the older browsers and normalize.css.

Pages 128 – 129 How to specify measurements and colours

It was good to know about relative and absolute measurements. I have seen em before but not rem.

Pages 130 – 131 How to specify colours

These pages gave a brief overview about how a user can use colours. I do think a few more examples using each method would be useful.

Pages 132 – 133 How to use the CSS3 colour specifications

I have previously used RGB and Hex values, but I have never heard of HSL or HSLA values.

Pages 134 – 135 How to code selectors for all elements, element types, ids and classes.

These pages gave a good starter to the subject. Your examples worked well.

I feel that you can probably talk about id’s and classes in a bit more detail as they are important subjects.

Pages 136 – 137 How to code relational selectors.

The examples on page 137 illustrated the concept very well.

Pages 138 – 139 How to code combination of selectors and how to code attribute selectors.

I tried all your examples and they worked well.

Pages 140 – 141 How to code pseudo classes and pseudo element selectors.

I tried all your examples and they worked well. I am glad you made the distinction between pseudo classes and pseudo elements. Once again all the examples worked well.

Pages 142 – 143 How to work with cascading Style Sheets.

This provided an interesting discussion about cascading order in style sheets.

Just what !important means I am not sure!

Pages 144 – 145 How to work use the Developer tools to inspect the styles that have been applied.

It was interesting to see how the developer tools worked in both Chrome and

Mozilla. It may take some time to get used to these tools.

Pages 146 – 147 How to work with text

I tried all the examples and they worked well.

Pages 148 – 149 How to set other properties with styling fonts

I tried all the examples and they worked well. It was interesting to see how line-height worked.

Pages 150 – 151 How to set properties for formatting text

Again, your examples worked well.

Pages 152 – 153 How to use CSS3 to add shadows to text

Again, your examples worked well. I experimented with different colours and attributes to see just what effect I would get.

Pages 154 – 155 How to float an image so that text floats around it.

Again, your examples worked well. It was good to see how to float and image so that the text flows around it.

Pages 156 – 161 A web page that uses external style sheets

I typed this web page in and it all worked. It bought everything together just nicely.

Perspective.

This chapter gave a good overview about how to use CSS selectors to format our web pages. This chapter only scratched the surface of what is a

big topic in itself.

Chapter 5 How to use the CSS box model for spacing, borders and backgrounds

Pages 168 – 169 An introduction to the box model

The image on page 169 gave a good depiction of just how the box model works in regarding to padding and margins. I have never seen those formulas used before!

Pages 170 – 171 A web page that uses the box model

The web page gave good examples of how the box model works.

Pages 172 – 173 How to size and place elements

These pages gave an in depth discussion about sizing and placing elements. They will make more sense with some good examples.

Pages 174 – 175 How to set margins

These pages gave an in depth discussion about setting margins. It was interesting to know that margins can be collapsed if they follow each other.

Pages 176 – 177 How to set padding

These pages gave an in depth discussion about setting padding.

Pages 178 – 181 A web page that illustrates sizing and spacing

I typed in the new CSS rules and it certainly improved the look and feel of the web page. I liked the way it was all centered.

Pages 182 – 183 A version of the CSS that uses the reset selector

It was interesting to see how the reset selector reset all the margins and padding back to zero. The unordered list also lined up much better.

Pages 184 – 185 How to set borders and backgrounds

It was fun experimenting with the different styles and widths or borders and backgrounds.

Pages 186 – 187 How to use CSS3 to add rounded borders and shadows to borders.

It was rather cool to see how to get rounded borders with shadows.

Pages 188 – 189 How to set background colours and images.

I had fun playing with all the different combinations of background colors and images.

Pages 190 – 191 How to use CSS3 to set background gradients.

I tried your examples and could not get the first gradient (the one for #eg1) to appear. The other examples worked very well.

Pages 192 – 195 A web page that uses borders and backgrounds.

I typed in the CSS and it all came up as expected.

Perspective.

I now have a good understanding of how the box model is used for margins, borders, padding, backgrounds and images. I am more confident in getting the right spacing, borders and backgrounds that I will need in the future.

Chapter 6 How to use CSS for page layout

Pages 202 – 203 How to use float elements in 2 and 3 column layouts

Your examples on page 203 worked well.

Pages 204 – 205 How to use floating in a 2 column fixed width layout

Your example on page 205 worked well.

Pages 206 – 207 How to use floating in a 2 column, fluid layout

Your example on page 207 worked well.

Pages 208 – 209 How to use floating in a 3 column, fixed width layout

Your example on page 209 worked well.

Pages 210 – 217 Two web pages that use a 2 column, fixed width layout

I finally got the first web page to work well, with a bit of tweaking.

Pages 218 – 221 The speaker page

I did not bother with this page as I feel that I am getting it by now.

Pages 222 – 225 How to use CSS3 to create text columns

It was interesting to see how the column selector works.

Pages 226 – 231 How to position elements

I typed in your example on page 229 and experimented with it.

Perspective

After going through this chapter, I can better understand how to develop web pages that have headers, footers, and 2- or 3-column layouts. Using CSS to do these layouts, clearly makes web pages easier to create and maintain as well as look a whole lot better as it makes things easier to size up.

Chapter 7 How to work with lists, links and navigation menus.

Pages 240 – 245 How to code lists

I am familiar with unordered lists and ordered lists. It was interesting to see the start attribute on page 243. it was also interesting to see how you can use lists within lists on page 245.

Pages 246 – 247 How to code description lists

It was interesting to see that they are now called description lists and not definition lists.

Pages 248 – 249 How to format lists

It was fun to see what sort of results I could get by using small images instead of the usual bullets.

Pages 250 – 251 How to change the numbering system for an ordered list

It was nice to see what sort of results I could get by changing the values for an ordered list.

Pages 252 – 253 How to change the alignment of list items

Changing the alignment of the list items makes them look better.

Pages 254 – 255 How to code links

I noticed that you did not code an access key here. The title attribute is new to me.

Pages 256 – 257 How to format links

The examples on page 257 worked well.

Pages 258 – 259 How to use a new browser window or tab

The examples on page 259 worked well.

Pages 260 – 261 How to create and link to placeholders

As I am familiar with place holders, I did not bother typing in any examples.

Pages 262 – 263 How to link to a media file

The examples on page 263 worked well.

Pages 264 – 265 How to create email, phone and Skype links

I has never heard of phone and Skype links.

Pages 266 – 267 How to create navigation menus

Knowing how to get a hover effect on a link is pretty cool.

Pages 268 – 269 How to create a horizontal navigation menu

It is interesting to see how you can manipulate lists to create menus.

Pages 270 – 271 How to create a two-tier navigation menu

Your example here worked well. It is nice to see how to make a two-tier menu system.

Pages 272 – 275 How to create a 3 tier navigation menu

Once again, your example worked out well.

Perspective

This chapter did provide a good overview of what can be done with lists and links.

Chapter 8 How to use Responsive Web Design

Pages 282 – 283 Introduction to Responsive web design

The author did a good job of explaining the three main elements of responsive web design.

Pages 284 – 285 How to test a Responsive web design

The best way to test a responsive web design is just resize it on the browser.

It will take a while to get used to using the developer tools in Chrome and Firefox.

Pages 286– 289 How to implement a fluid design

These pages gave a good discussion about the relative strengths of fluid vs fixed layouts.

I can see where converting fixed widths to fluid widths can be confusing at first but it made sense with a bit of practice. I typed in your example on page 289 and it all came together.

Pages 290– 291 How to use other units of measure with responsive design

I typed in the same example using “vw” and “vmin”. It was noticeable in the first example that there was some padding when I ran the program but not with the second example.

When I used the vw measure in the first example, the text on the page moved to the left. When I used vmin in the second example, all the text on the page shifted to the centre.

Pages 292 – 293 How to size fonts

Your examples on page 293 all worked. I used to wonder at what em’s were all about.

Pages 294 – 295 How to scale images

Your examples on page 295 all worked. The images scaled well.

Pages 296 – 297 A web page with fluid design

I just read through these pages.

Pages 298 – 299 How to use CSS3 media queries

It was interesting reading about just how the viewport metadata operates.

Pages 300 – 303 How to code media queries and common media queries for a responsive design.

I could only read through these pages and make what sense of them that I could. Things no doubt will make more sense as we begin to code the actual media queries.

Pages 304 – 305 How to build responsive menus with the SlickNav plugin..

I did manage to download SlickNav and code it in. I got a result but at first I was not sure of it’s valsue

Pages 306 – 313 A web page that uses Responsive Web Design.

I typed in the example but found that I could not get the “top nav” menu to work for some reason. Everything else worked out OK. I noticed that the examples that you provided worked very well though. Perhaps it was just my bad typing. I also noticed that on your examples, the SlickNav plugin did work once the web site was resized

Perspective

It is quite cleat that as mobile devices such as cell phones and tablets have increased extensively over the last few years, there is a need for responsive web design. I though this chapter provided a good introduction to the subject. I can see where media queries can be cumbersome to use. Obviously, we have not scratched the surface yet.

Section 2 Page layout and responsive web design

Chapter 9 How to use Flexible Box layout for page layout and RWD

Pages 324 – 325 Getting started with the Flexible Box Model layout

These pages provided a very good introduction to the Flexible Model layout.

The author explained the concepts of the box model very well. I am not sure why they do not call the main axis the “x” axis or the cross axis the “y” axis. You think that that would make more sense!!

Pages 326 – 327 How to create your first Flexible Box

I typed in your example and it worked well. It was easy to customise.

Pages 328 – 329 How to Flex Box properties

I typed the various properties for justify content and it was interesting to see what they could do.

Pages 330 – 331 How to align flex items along the cross axis

Again, I typed the various properties for the cross axis and it was interesting to see what could be achieved. The end result did look ugly though!

Pages 332 – 333 How to wrap and align wrapped flex items

I am not sure why you would use these properties.

Pages 334 – 337 How to allocate space to flex items

Both examples on page 335 worked well. I just read through pages 336 and 337.

Pages 338 – 339 How to change the order of flex items

This did not work in Opera or in any of the browsers that I tried.

Pages 340 – 347 A responsive web page that uses flexbox

After I got everything typed in, I noticed that all worked well. The SlickNav menu did not show up but everything else resized well

Perspective

I do feel that this chapter gave a good introduction to the concepts of the flexbox. This is a subject I have struggled to come to terms with in the past.

Chapter 10 How to use Grid Layout for page layout and RWD

Pages 352 – 353 Getting started with Grid Layout

These pages provided a good introduction to the concept of grid layout.

Pages 354 – 355 How to create a basic grid.

The example on page 355 came up well. I had fun experimenting with it.

Pages 356 – 357 How to set the size of grid tracks.

The three examples on page 357 all worked. Although it took a little while to get my head around what was happening.

Pages 358 – 359 Auto fit and auto fill

The three examples on page 359 all worked. You just have to experiment with these things.

Pages 360 – 361 How to align grid items and grid tracks

This made for interesting reading. I am sure it will make sense when we get to do the examples.

Pages 362 – 363 A page layout that uses alignment

The example worked well. It was interesting to see how it all came together.

Pages 364 – 365 How to define the grid areas for elements

When I typed the HTML into the page, everything came together well. I am starting to see the sense of this.

Pages 366 – 367 How to use named lines

The same as before. Everything worked well after I typed them in. I must say though that I find doing things this way a bit tedious.

Pages 368 – 369 How to use template areas

Pages 368 – 369 How to use template areas

I typed this program in and it all worked well. Doing things this way is a bit more intuitive than the previous examples.

Pages 370 – 371 How to use the 12 column grid concept

Doing things this way was a lot easier to get your head around than the previous examples. I was actually able to get my head around this.

Pages 372 – 381 A responsive web page that uses grid

After typing everything in and studying your book example, the website worked just nicely. I am starting to see how using a grid layout makes more sense than media queries.

Perspective

I must say here that I have looked at a few other tutorials on grid layout and they did not really make much sense to me. This was the first time that a tutorial on this subject did explain the concept quite well and I started to understand the idea of grid layout.

Section 3 More HTML and CSS skills as you need them

Chapter 11 How to work with images and icons

Pages 392 – 393 Basic skills for working with images

I had heard of JPEG, GIF, PNG before but WebP was new to me.

Pages 394 – 395 How to include an image on a page

These pages gave a good overview about how to add an image to a web page. I thought the idea of using CSS to resize and image was a novel idea, but I prefer to use an image editor.

Pages 396 – 397 How to align an image vertically

Your example on page 397 worked well. I had fun experimenting just how I can align the images.

Pages 398 – 399 How to float an image

I got your example to work OK.

Pages 400 – 401 Advanced skills for working with images

I had not seen <figure> and <figcaption> before.

Pages 402 – 403 How to use the picture element

The <picture> element was completely new to me.

Pages 404 – 405 How to use image rollovers

This example worked well. It was good to see that we do not have to use JavaScript to get this effect.

Pages 406 – 407 How to create an image map

Working out how to put an image map together was fun.

Pages 408 – 409 Related skills for working with images

As I am very familiar with working with image editors, I only read through these pages.

Pages 410 – 411 How to get images

It is good to know where to get images.

Pages 412 – 413 How to get and work with icons

It is good to know where to get icons.

Pages 414 – 415 How create favicons

This was explained previously.

Pages 416 – 417 How to work with scalable vector images

When I first typed in your example on page 417, it did not work properly.

I had to look elsewhere (https://www.w3schools.com/html/html5_svg.asp) to find a better tutorial on this subject.

Perspective

I do believe that this chapter provided all the essential basic skills for working with images. Obviously an image editor will be a useful addition to one’s box of tricks. There were a number of new things that I, learned here such as the picture element as well as <figure> and <figcaption>. Obviously, there will always be new things to know with HTML.

Chapter 12 How to work with tables

Pages 422 – 423 Basic HTML for coding tables

These pages were a good introduction to what tables are all about.

Pages 424 – 425 How to create a table

I thought that throwing in the “left” class was a bit confusing here. It does not appear to align the table header to the left.

Pages 426 – 427 How to add a header and footer

<thead> <tbody> and <tfoot> were new to me.

Pages 428 – 429 Basic skills for formatting tables

The example on page 429 came up well. I had nor previously understood what collapsed borders were all about.

Pages 430 – 431 How to use the CSS3 pseudo-classes for formatting tables

Everything formatted as expected. I am getting the hang of pseudo-classes.

But they can seem a bit tricky at first.

Pages 432 – 433 Other skills for working with tables

Using <figure> and <figcaption> certainly makes the table more appealing.

Pages 434 – 435 How to merge cells in a row

It was good to see how to merge cells and use pseudo-classes to realign the elements.

Pages 436 – 437 How to provide for accessibility

This was interesting to know.

Pages 438 – 439 How to next tables

The example on page 439 worked well.

Pages 440 – 441 How to control wrapping

I tested the no-wrap property and it did not seem to make any difference to the web page whether it was there or not.

Pages 442 – 443 How to make tables responsive

I added in the media query on page 443 and it worked well. It resized just nicely.

Perspective

Tables are fairly simple to implement, although they can get complicated once we start using pseudo classes. I though that this chapter gave a quite comprehensive study as to what tables are all about.

Chapter 13 How to work with forms

Pages 448 – 449 How to use forms and controls

I am already familiar with submitting form data. These pages did provide a good refresher though.

Pages 450 – 451 How to use buttons

I am already familiar with buttons having used submit and reset previously, but I have not seen the “image” type previously. The <button> type is new also.

Pages 452 – 453 How to use text fields

These pages provide a good description of how to use text fields.

Pages 454 – 455 How to use radio buttons and check boxes

These pages provide a good description of how to use radio buttons and check boxes.

Pages 456 – 457 How to use drop-down lists

These pages provide a good description of how to use drop-down lists although I had not seen an “optgroup” previously.

Pages 458 – 459 How to use list boxes

These pages provide a good description of how to use list boxes.

Pages 460 – 461 How to use text areas

I had not heard of “wrap” before. These pages provide a good description of how to use text areas. I can see where it is better to use CSS to style the text area.

Pages 462 – 463 How to use labels

I can see where associating the “for” attribute of the label with the “id” attribute of the related form control is useful.

Pages 464 – 465 How to group controls with fieldset and legend elements

I can see where including the <fieldset> and <legend> tags makes things more readable.

Pages 466 – 467 How to use the file upload control.

This control was completely new to me. I was surprised how easily it works.

Pages 468 – 469 Other skills with working with forms.

How to align controls

The example on page 469 worked well. I can see how it is easier to use CSS to style the form elements.

Pages 470 – 471 How to format controls

Adding the new CSS to the form certainly improved the appearance of the form.

Pages 472 – 473 How to set the tab order and assign access keys

The examples on page 473 worked well.

Pages 474 – 475 How to use the HTML5 features for validation

As far as “autocomplete” is concerned, I noticed that my browser does complete things by itself. It is good to know that we can turn it off if we need to.

It is important to know just what the required field does.

These pages gave a good introduction to the data validation aspects of html5. I can see where it is an advantage to do validation on the client and not the server if possible.

Pages 476 – 477 How to use regular expressions for data validation

It is good to see that HTML5 now supports regular expressions. I had previously seen these things in PHP. I feel it will be better to do the validation on the client side rather than the server side. Typing in these patterns can be kind of “interesting”.

Pages 478 – 479 How to use a datalist to present entry options

I typed this example in and it was interesting to see how it displayed in the different browsers. It does make a select list more powerful.

Pages 480 – 481 How to use the email, url and tel controls

These controls were new to me.

Pages 482 – 483 How to use the number and range controls

Seeing how the number and range control work was new to me. They are visually impressive. They do provide better ways to enter this type of data.

Pages 484 – 485 How to use the date and time controls

These controls were completely new to me. It is good to know that they are there. It was interesting to see how the different browsers managed them.

Pages 486 – 487 How to use the search control for a search function

This is probably a useful feature to know about.

Pages 488 – 489 How to use the colour control

I was fascinated to see how using this control changed the colour of the input box. It did behave differently in Internet Explorer.

Pages 490 – 491 How to use the output element to display output data

What is interesting about this control is the fact the we can do calculations with it. I noticed that it does use some JavaScript.

Again, it functions differently in the different browsers.

Pages 492 – 493 How to use the progress and meter elements to display output data

Having these progress bars on the page looked cool, but I am not sure if they are very practical on any web site.

Pages 494 – 495 A web page that uses HTML5 data validation

I took me a while to type this HTML and CSS in but the result was worth it.

Perspective

It is fascinating to see how we can now do validation on the client side just using HTML5 and CSS. In the past we needed to use JavaScript or PHP for this. It is interesting to see how that as HTML evolves, it seems to be taking on what had previously been the domain of scripting languages.

Chapter 14 – How to add Video and Audio to your web site

Pages 506 – 507 An introduction to media on the web.

I had not heard of WebM, AAC or FLAC previously.

Pages 508 – 509 Video codecs.

These pages provided a good description of just how video codecs operate.

Pages 510 – 511 Audio codecs.

These pages provided a good description of just how audio codecs operate. I had not heard of Opus or PCM previously.

Pages 512 – 513 Audio and video support in current browsers

It is good to know what browsers support what type of file. I am glad to see that Flash is on the way out. I did not know previously what MIME types were.

Pages 514 – 515 How to encode media

I had previously used the AVS video converter. I downloaded the Miro Video Converter and I was impressed to see how easily that it converted a couple of files in different formats.

Pages 516 – 517 How to add audio and video to a web page

It was interesting reading about the object and param elements. I did not bother coding them in as the author wrote that this is not used anymore.

Pages 518 – 519 How to use the embed element

I was able to use the embed element to get an audio file to work in my browser. I also added the YouTube video that you referred to and it came up well in my browser. However, when I tried to add other YouTube videos, I could not get them to show up? I forgot to click on the Share link and then the Embed link to get the correct HTML for the video. Then it worked OK.

Pages 520 – 521 How to use the HTML5 video and audio elements

These pages made for good reading.

Pages 522 – 525 A web page that offers both audio and video

This website was very easy to code.

Perspective

This chapter provided a very clear and concise overview of what the various video and audio types are and how to use them in a web page.

Chapter 15 How to work with fonts and printing

Pages 530 – 531 How to embed fonts in a web page

I had not seen this way of doing things before. I did not know that you could import fonts in this manner.

Pages 532 – 533 How to use Google fonts

I had a lot of fun importing various Google fonts. It was good to see that we can import more than one at a time if we need to.

Pages 534 – 535 How to use Adobe Edge web fonts

I generally got the same results as with using Google fonts. I liked the Google fonts page better as it was nicer to use.

Pages 536 – 545 The skills for formatting printed web pages

It was intriguing to see how to use a CSS to style a page for printing. I had no seen that before.

Perspective

It was great to see how to use programs like Google fonts and Adobe fonts to embed different fonts into our web pages. This means we are not just stuck with the usual fonts the computer provided us with.

It was also very informative about how to use a style sheet to format a printed page. I will be using one of these from now on.

Chapter 16 How to use CSS3 transitions, transforms, animations and filters

Page 550 – 551 How to use CSS transitions

I tried all three examples on page 551 and they all worked fine. These pages provided a good introduction to how transitions work.

Page 552 – 553 How to create an accordion using transitions

I tried the example on page 553 and it came up well. I can see where accordions are very practical for saving space.

Page 554 – 555 How to use CSS3 transitions

I tried the example on page 555 and it was certainly a cool effect.

Page 556 – 557 A gallery of images with 2D transforms

I experimented with the example on page 557 and got a lot of interesting effects.

Page 558 – 559 How to use CSS3 animations

The end result was fun to watch.

Page 560 – 561 How to set the key frames for a slideshow

Again, the end result was this slideshow was fun to watch. It is intriguing to see that we can now use CSS and not JavaScript to get these sort of effects.

Page 562 – 565 How to use CSS3 filters

Again, it is impressive that we can use CSS to achieve these sort of image effects. I personally would rather use an image editor to achieve these sort of effects with my own images.

Perspective.

I find it fascinating the we can now use these sort of effects and filters in CSS. But whether I want to use them or not is questionable! They say that it is good to only have one animation per page and to not overdo effects as they can make our looking at our web pages a bit overwhelming. I believe that I will use them sparingly, if at all.

Section 4 Web design and deployment

Chapter 17 – How to design a website

Pages 572 – 573 Users and usability

I can see where “usability” is the keyword here. I had not heard the term “above the fold” previously. Grouping related items into separate components and limit the number of components on each page also makes sense. These pages were a good into into making a website usable.

Pages 574 – 575 The current conventions for usability.

These pages were a good overview of the various conventions used to create websites.

Pages 576 – 577 Design guidelines

I can see where it makes sense to go mobile first. Responsive web design is important these days. I can see where it would make sense to use a separate mobile design for an older legacy website.

Pages 578 – 579 How to use the home page to see the site

Those nine guidelines on page 579 described the basic design process very well.

Pages 580 – 581 Let the users know where they are

I can see where using breadcrumbs and highlighting the active links are very important.

Pages 582 – 583 Make the best use of web page space

I certainly did not like this web page. They could have gotten rid of the photo with the salmon in it. It looks as though the Salmon might still have the hook in it’s mouth. That could upset some environmentalists.

Pages 584 – 585 Divide long pages into shorter chunks

I had never heard of chunking before. Obviously, it makes sense to divide the page into well designed “chunks”. I can see where accordions and tabs come in useful here.

Pages 586 – 587 Know the principles of graphic design

I can see where those four principles of web design and those typographical guidelines are crucial to having a good web site.

Pages 588 – 589 Write for the web

I can see where keeping it short, simple and concise is important.

Pages 590 – 591 How to design a website

It is obvious that good design is important to get right from the start, just like good design is important for any project.

Pages 592 – 593 Step 1: Define the audience and set the goals.

Clearly, knowing your audience is critical.

Pages 594 – 595 Step 2: Define the site map

A site map gives us a clear road map and it will make things easier as we push on.

Pages 596 – 597 Step 3: Wire-frame the critical pages

I can see where a wire frame will be an important blueprint for the web site.

Pages 598 – 599 Step 4: Illustrate the critical pages

I can see where using a program like Photoshop to create a visual image of the website is critical.

Pages 600 – 601 Other design considerations

Obviously, designing and creating a web site can be a job for one person or for many, depending on the situation.

Pages 602 – 603 Top down designs and prototyping

It makes sense to prototype a web page so that we can catch any mistakes early on.

Perspective

This chapter makes it clear that good design is critical for the correct implementation of any web site. Building a web site can often involve the services of several people, and the site must be well designed and maintained and very readable. This is where the services of a good designer can come in handy.

Chapter 18 How to deploy a website to a server.

Pages 608 – 625 I could only read through this chapter. Most of this stuff is familiar to me but is certainly worth knowing for new people.

I am familiar with FileZilla. It was good to see that it wa swell explained here.

It is important to know how to get your website into the two major search engines. I did not know that Yahoo was a part of the Bing network.

It was interesting to learn about using robots to prevent indexing of certain pages and folders. I had no seen that one before.

I had wondered just what Google webmaster was all about. I had never heard of the other five websites.

Perspective

I was for the most part familiar with this material, having built and deployed a couple of websites in the past. A few things were new, such as using robots

as well as sites like Google webmaster. I will certainly keep these in mind for the future.

Section 5 Other skills for professional web developers

Chapter 19 How JavaScript and JQuery are used to enhance web pages

Pages 630 – 631 Introduction to JavaScript

Your examples on page 631 worked OK.

Pages 632 – 633 Three ways to include JavaScript in a web page

It is good to know how and where to add our JavaScript.

Pages 634 – 635 How DOM Scripting works

It is vital to know just how the DOM works! It makes understanding JavaScript much easier. The illustration on page 635 showed this quite well.

JavaScript is quite a big topic by itself.

Pages 636 – 637 Methods and properties for DOM Scripting

To be honest, I found these pages a bit confusing. I typed in the examples at the bottom of page 637 and got no result!

Pages 638 – 639 How JavaScript handles events

I typed in the JavaScript program on page 639 and it worked OK.

Pages 640 – 643 The email list application in JavaScript

The program did everything it was meant to. The error messages came up fine.

Pages 644 – 645 Introduction to JQuery

These pages provided a good introduction to just how to get hold of JQuery, either by CDN or by inclusion in a website.

Pages 646 – 647 How to code JQuery selectors, methods and event methods

I could only read through these pages. I can see where some body who is new to JavaScript would get a bit confused just here.

Pages 648 – 651 The email application in JQuery

The program worked well, once it got it typed in correctly.

I can see where JQuery is useful and it is a rather big topic.

Pages 652 – 653 How to use JavaScript and JQuery as a programmer

I finally got your program on page 653 to work once I got everything typed in correctly.

Pages 654 – 655 A slide show application

The program on page 655 worked OK, but I noticed that the images seem to come in randomly rather than in order.

Pages 656 – 657 Three sources for tested JavaScript and JQuery

I am familiar with Dynamic drive and JavaScript source. I have also experimented with the JQuery UI in the past. It is good to know how to source these sort of scripts.

Perspective

JavaScript and JQuery are big topics and you only skimmed over it here. It is worthwhile to know how to use it and when to apply it, even if you don’t fully understand how to use it.

Chapter 20 How and when to use third party development tools

Pages 662 – 663 Introduction to some third-party web development tools

I have looked at these programs and I can see where they are useful.

Pages 664 – 667 How to use Emmet, Git and Github

I could only read through these pages and see what was in them.

Pages 668 – 671 How to use Sass

I did not go to the trouble of installing Sass. I just read through these pages.

Pages 672 – 675 How to use Bootstrap

I it was interesting to see how the different columns spread out as the page was resized. It was also good to learn about popper.js. I had not heard of that one previously.

Pages 676 – 677 How to use the Bootstrap components

I typed in your example on page 677 and it worked well.

Pages 678 – 681 How to use Node.js and Gulp.js

These pages were a good introduction to node.js and gulp.js. These can be a big subject by themselves.

Perspective

It is fascinating to see just what new technologies are coming along. This chapter provided a good overview of new and evolving technologies such as node.js, bootstrap etc. I am sure there was more you could have included here but that would make this chapter too long.

Overall perspective about this book.

I must say that this is a very comprehensive book. Reading it in an electronic format was new to me. It saves having to store bulky books. I am familiar with HTML and CSS but I did learn a number of new things from this book.

The important points that I learned were:

Several new HTML tags, such as <abbi>, <code>, <dfn>, <figure> and <figcaption> to name a few.

New measurements such as rem.

New colour values such as HSL and HSLA.

New types of links such as Phone and Skype links.

New ways of layout such as the Flexible Box model and Grid layout.

New things to use in tables such as pseudo classes and new tags such as <tbody> and <thead>.

Data validation on the client as well as new form controls such as email, url, tel and colour controls.

New forms of media such as WebM, AAC and FLAC etc.

New third party tools such as Emmet, Github and Sass.

The two big things that stuck out for me was that I feel that in Chapter 10, I finally got my head around Grid layout. I have struggled with this subject in the past, so I feel you explained it well and your examples worked well.

In chapter 13, I got lot of your subject of working with forms. I was impressed to see that we can now have PHP style validation on the client. This might save a trip to the server.

If there was anything I did not like it was that a few of your examples did not

work properly when I typed them in. Maybe it was just my bad typing or my computer!!!!

In summing up, I can see the importance of a book like this to anybody who is serious about web development. HTML and CSS are constantly evolving and they do not stay still for very long. Keeping up with the changes is vital and this book does a good job as a keeping the reader abreast of the changes that are happening.

I do feel that this is not a book for beginners, but a goof book for the intermediate to advanced web site developer who wants to keep up with the constantly evolving world of web development.

Thank you once again for sending me this book and I hope you like this review. I did appreciate reading being sent this book and I hope to correspond with you again in the future.

Cheers

Gerry Gates