Web User - UK (2019-10-16)

18 16 - 29 October 2019 Email us yourwebsite building questions [email protected]

You can jazz upeven the most boring images with a good filter, but ifyou don’twant to permanently change

your pictures, cssFilters letsyou usecode to alter images onyour website while leaving the original file intact

Get hints to make your
site better
There are some clever tools
that scanyourwebsite and
provide tipstohelpyou
improveit. An interesting
new addition isWebhint
(webhint.io), which looksfor
a range of potential problems
from accessibilitytosecurity
and suggests whatyou can doto
fix them.Webhint draws out a lot
of detail soyou’ll needtodecide
whattoprioritise, but ifyou’re
lookingfor newwaystoimprove
thewayyour site isconstructed,
Webhint will pinpoint where
there’sroomfor improvement.

Watch Google Search news
Google has launched another
great series on its Google
WebmastersYouTube channel
(bit.ly/gwchan486) called Google
Search News. PresentedbyJohn
Mueller, it’s a great monthly digest

of the latesthappenings in and

around Google that affectweb

builders. Ifyou see something

you’re intersted in, there are links

tomore about eachstory in the

information posted below the

video.Watch the first episodeat

bit.ly/news486.

1

GotocssFilters (www.cssfilters.co)

and either upload the imageyou

wanttouse^1 or choose astock image

toexperiment with.^2 The thumbnails

across thetop of the screen^3 are

preset filters based on the onesyou

find on Instagram. Click and hold the

mouse button down asyou moveto

scroll through the options.

2

If you’reconfident with usingcolours

(or just liketoexperiment),you can

createyourown filter or fine-tune an

existing onetobetter fityour photo.

On the Generate tab,you’ll find slidersat

thetop^1 tochangecolours, brightness

and other elements, and an Overlay

sectionatthe bottom^2 for adding more

effects.

3

Onceyou’ve settled on a filter that

you like,click the CSSCode tab.^1

Copythecode in the CSS section^2

and pasteit intoyour site’s ‘.css’ file.

Use the information in the Markup

section^3 tobuild the image links in

your HTML file, adding<figure

class=”filter”></figure>

tags around any images.

Specialist tips, top tools and practical help

Build a Better Site

Top Tips of the Fortnight

MINIWORKSHOP|Addfilters to your images with CSS

cssFilters:www.cssfilters.co| 10 mins| Anywebsite

Deal of the Fortnight

GoDa ddy (uk.godaddy.com) is offe ring

WordPress hosting for £1.20 per month for

the first year. Use thecodeGDD1mwp

when you ch eck out.

Web-building Helpdesk

Q

A WordPresspluginis asking

meto enter a‘shortcode’ into

mysite, otherwise it won’t

display the widget I’m tryingto use.

How doI enter ashortcode?

Gary Freeman, via email

A

Since version 5.0 ofWordPress,you

can addshortcodes asa block

straightfromthe AddNew

interface.Click the plusbuttontoadda new

block,openthe Widgets section andchoose

Shortcode.These are abit likeHTML tags,in

thatyou can

dropthem

intothe text

and

WordPress

will action

the

instruction

insidethe

squarebrackets, ratherthandisplay the

actualcode onthe page asif itweretext.

Andy Shaw, Technical & Reviews Edit or

1

2

3

1

2

1

2

3