Panorama across harbour of Sydney CBD

Web Design Group

This Group meets at 2:00pm - 3rd Saturday each month at Sydney Mechanics' School of Arts, 280 Pitt Street. Visitors are welcome

Check out the Group's   ►   ►   ►   "Active Construction Site"   ◄   ◄   ◄

An introduction to QR code

Css demonstrations With the wide spread use of QR codes becoming so important during the current pandemic, their use is now very familiar to many people. In particular, they have been used for Covid-19 virus tracing where people enter public buildings and business premises are required to login using an app on their mobile phones.

However, QR (Quick Response) codes have been used since the late last century for a range of purposes including displaying multimedia content, mobile operating systems, QR payment (widely used in Asia and India), website login, restaurant ordering, joining a Wi Fi network, video games and lots more. Create your own free QR code here now.
The included QR code says “Welcome to our Web Design page.” Try it now! 😃

The girl with a pearl/CSS earring

Css only portrait projectCSS art that looks like an oil painting of a woman This is stunning, by Louise. I absolutely love this sort of CSS art and I know that this took them ages to put together. It was well worth the effort though, as it’s up there with some of the best CSS art I’ve ever seen.
Source: Piccalilli Newsletter - Issue #52 - Published on the 4th of August 2020

Original: Girl with a Pearl Earring is an oil painting by Dutch Golden Age painter Johannes Vermeer, circa 1665 - Location‎: Mauritshuis, The Hague, Netherlands.
Movie: The Girl with a Pearl Earring is also a 2003 drama film available for paid viewing.

Free Text-To-Speech and Text-to-MP3 for English

Easily convert your English text into professional speech for free. Perfect for e-learning, presentations, YouTube videos and increasing the accessibility of your website. Our voices pronounce your texts in their own language using a specific accent. Plus, these texts can be downloaded as MP3. In some languages, multiple speakers are available. Australian accent voices are available, one male and one female.
Go here to » Free Text-To-Speech and Text-to-MP3 for English.

Css demonstrationsDiscover special effects available with:

The border-radius CSS property rounds the corners of an element's outer border edge. You can set a single radius to make circular corners, or two radii to make elliptical corners. Radius applies to the whole background, even if the element has no border; the exact position of the clipping is defined by the background-clip property.

Use this excellent live Mozilla demo site to discover how "border-radius" can be used to jazz up any website. Also see what happens if you add or remove the "/" within the radius values.

🐨 Make your pages cheerful with Emojis 🐰

Inserting Emojis on a webpage can add interest or draw attention to an important message or text. You can easily add some as decorations or else just to make it cheerful. A quick search of this Emoji List will help find many fascinating characters.

Click to select your emoji and you have two ways to insert an emoji into your HTML page. The easy way is to click the Copy button and Paste it (Ctrl + V) directly into your HTML code 😃. The other way is to scroll down and copy the emoji's Codepoints unicode number Eg. U+1F603, replace U+ with "😃" and Paste it into your HTML page. Have Fun 😃.

What's My Chain Cert?

This site tests if your server is serving the correct certificate chain, tells you what chain you should be serving, and helps you configure your server to serve it. "Click here to Test it now"SSL Test site

Flow text around an image with CSS Shapes

By using CSS Shapes, we allow ourselves the freedom to specify various coordinates that will create a custom path, and eventually create our custom shape. There are two main CSS properties that we will use to achieve the desired effect; Clip-path and Shape-Outside.

When used together, these two properties compose the foundation properties of CSS Shapes. Shape-outside and clip-path take many different vales, but the three I will focus on are circle(), ellipse(), and polygon(). While circle() and ellipse() will namely create a circle or ellipse respectively, the polygon() function is able to take an unlimited set of coordinates, that when connected, will create your desired shape. Like with most things in life, we learn by example and by actually doing it.
» Enjoy the full tutorial at Medium

New way to test accessibility with Chrome DevTools

Lighthouse web auditor logoChrome version 60 released in 2017 included an exciting new DevTools feature called Audits 2.0. This panel replaces the previous Audits panel with a new set of tests powered by Lighthouse. Lighthouse is a tool which checks for various performance and best practice metrics, including accessibility. Under the hood, these accessibility tests are powered by aXe, the open source accessibility engine from Deque.

It's important to note that a tool like the new Audits panel can only really check for a subset of accessibility issues (basically anything that can be automated). There are still a number of areas that this tool can't test, so make sure you're manually checking your site as well.

Here's a helpful guide if you're not quite sure how to manually check for accessibility issues:

Plus a 5 minute video: The new way to test accessibility with Chrome DevTools - A11ycasts #23

Brackets web editor logoAdobe's Brackets Web Editor has much to offer

Brackets is a modern open-sourced web site editor that enables quick editing of HTML, CSS and Javascript files. It's available as a free download for all operating systems with installation as easy as point and click.

The Brackets editor has everything you need for working with files and directories along with creating new files. The code completion - parsing and hints - features allows you to quickly assemble applications without knowing exact syntax. An ever growing selection of useful extensions are included, any of which can be easily activated using the Extension Manager. Also, the helpful online documentation plus features like Quick Edit is what has made Brackets so popular. » More info and download Brackets here.

The Sydney PC & Technology User Site Incorporates - Responsive Web Design

Selection of mobile screensResponsive Web Design is about creating webpages that look great when viewed on any device and screen size. Whether viewed on a TV, desktop, tablet or smart phone, web pages should provide an enjoyable, user friendly experience for everyone. This can be achieved by adding "media queries" to the responsive site's CSS style sheet. Media queries then automatically adjust and re-arrange the content of a website to suit the screen width of the viewing device being used.

To illustrate how Sydney PC & Technology User Group HOME page layout and content is automatically re-sized and repositioned in response to various screen sizes, this full width column, plus two columns, three columns and four columns are used. To see it in action, open this responsive page using any of the latest desktop browsers, then grab the edge of the browser window and slowly drag it narrower or wider. You will see the layout automatically adjust itself to fit the new width of the browser, even if you make the page as narrow as a mobile phone. Media queries may also be set to add or remove any page element and do lots more to create a better viewing experience.

Total Validator

Logo of Total-validatorTotal Validator is an (X)HTML validator, an accessibility validator, a spell checker, and a broken links checker all rolled into one tool allowing one-click validation of your web pages.
Since its release Total Validator has become extremely popular with Web developers around the world. Each year millions of validations are performed using the desktop tools, of which over a quarter of a million copies have been downloaded. This excellent validator provides numerous options and quickly displays its results using your favourite browser.

Total Validator provides the following basic features:

  • The best HTML5 validation against the W3C Markup Standards
  • Accessibility validation against the WCAG (1.0 and 2.0) and the US Section 508 standards
  • Check for broken links
  • Spell check English, French, Italian, Spanish, and German
  • One-click, and DOM-based validation using our Browser extensions
  • Validate local pages, and pages on intranets or other private sites
  • Versions available for Windows, OS X, and Linux

Download Total Validator and validate your web pages today.

☆   ☆   ☆   ☆   ☆

Webcity provides hosting and domain registration for our club's website.

Office: 47 Bourke Rd
Alexandria NSW 2015
Ph 1300 655 590
Webcity Support

PHP Info

Check this site's phpinfo file here.

You are safe