Dynamic SEO-Friendly .htaccess File

The Code Copy the following to a plain text editor and save as .htaccess. Then, via FTP, upload to the root folder of your website (usually called public_html). It will be suitable for most hosting environments, but not all. You can find the website template I’ve also written which contains this .htaccess example here. <files Dynamic SEO-Friendly .htaccess File

How to Create Circles with CSS

Last Updated: April 6th, 2018 Making circles with CSS is very simple. Just make the radius half of the width and height of the element to make a perfect circle, or simply use: border-radius:50% Responsive Circle With or Without Text Inside Narrow your browser window horizontally to test the circle’s responsiveness. Hello CSS .circle{width:50%;height:0;font-size:20px;color:#fff;text-align:center;line-height:0;padding:25% 0;border-radius:50%;background:#09f} How to Create Circles with CSS

How to Link to the W3C CSS3 Validation Page

Automatic Method: You should now simply use: https://jigsaw.w3.org/css-validator/check/referer?profile=css3. Manual Method: Typically, if we want to link dynamically to the W3C Valid CSS page, we use this link: https://jigsaw.w3.org/css-validator/check/referer That’s perfect if you’re using all CSS2.1, as that’s the default checker, but if you implement even one CSS3 style, you’ll fail validation. So, we can no How to Link to the W3C CSS3 Validation Page

Canonical Link Guide and Tools

Canonical Link WordPress Plugin Download Now | See on WordPress.org | Support Canonical Link Firefox Add-on Download Now | See on GitHub | Support This add-on will also help you to verify your canonical links are set up correctly. Canonical Link Script <link rel="canonical" href="https://<?php echo $_SERVER[‘HTTP_HOST’]; ?><?php echo parse_url( $_SERVER[‘REQUEST_URI’], PHP_URL_PATH ); ?>" /> Canonical Link Guide and Tools

Pure CSS Minimalist Image Hover Rollover

Demo: (only use one of the CSS methods below) CSS Sprites (New Method) .hov{display:block;width:245px;height:195px;background:url(images/hover.png)} .hov:hover{background-position:0 -195px} For this to work, simply stack the normal state image on top of your hover image making one image. They should be exactly the same size and stacked perfectly on top of each other. So, in this example the Pure CSS Minimalist Image Hover Rollover

A-Z of Web Business Mistakes

This is in no way intended to be a definitive, be-all-to-end-all list, but hopefully some may find it helpful. I’ve certainly made some of these mistakes in the past. We’re always learning and the best instance of learning is when you learn something you may be doing wrong, admit it, and come out more knowledgeable A-Z of Web Business Mistakes

Muhammad Ali Knockout

Web Hosting: Best vs Worst

Being a web designer for 10+ years now, I’ve seen a wide range of web hosting setups and I’ve done just about every task associated with a hosting account and website that you can think of. Some hosts were a breeze to navigate and set things up, and some were not. The Best Web Hosting Web Hosting: Best vs Worst