Web Dev Blog

Sharing my experiences of building websites!

Happy New Year

New Website Refresh Coming Soon

New Website Under Construction
Jan 8, 2021
Happy New Year 2021!
In this blog, the first of 2021, I will be sharing some interesting things about the new Frontntweaks website coming down the road.

This current website is a few years old and needs to be reset, as it has many unused files and access baggage in it’s database.
It once was a very fast WP site, but has since showed it’s mileage…… Read More
Jump straight to the video:
Test with New WP site

Developers End of the Year Checklist – Updated 2020
Dec 22, 2020
Just A Simple End of Year List – Updated for 2020 As this crazy 2020 comes to a close, I updated my original post that was created an year ago to add two more checkboxes.They are listed on the checklist below. Things to check off to close out your business… Read More

Using GTmetrix to Test Web Core Vitals
Dec 4, 2020
Testing Your Website For Web Core Vitals A new version of the popular website testing tools GTMetrix has added Google’s Web Core Vitals to their test results. …..Read More

End of the Year Projects
Nov 15, 2020
In this post, there is no video, nothing technical, no reviews, just a little rant on why I am always so busy towards the end of the year.
This trend has been going on for the past 3 or 4 years and I just don’t know why it is…..Read More

RecordCast Online Screen Recorder & Video Editor
Oct 25, 2020
RecordCast Review A new Free online all in one screen recorder and video editor. This is a test of the Beta version and is available to anyone for use. ….. Read More

Tools That Help

Helpful Tools


Supercharge the Git capabilities built into Visual Studio Code.


Aims to break down CSS rules into as small and reusable parts as possible. This is commonly referred to as a Subatomic Design System…

Free Useful OnLine Tools


A free, open source CSS framework based on Flexbox and used by more than 200,000 developers.


A React.js based library for creating sleek presentations using JSX syntax that gives you the ability to live demo your code.


A Node library which provides a high-level API to control headless Chrome or Chromium over the DevTools Protocol. It can also be configured to use full (non-headless) Chrome or Chromium.

Blitz JS

The full-stack React Framework.

Vulcan JS

The full-stack React+GraphQL framework.


You can run Lighthouse in Chrome DevTools, from the command line, or as a Node module. You give Lighthouse a URL to audit, it runs a series of audits against the page, and then it generates a report on how well the page did.

Type Scale

Preview and choose the right type scale for your project. Experiment with font size, scale and different webfonts.

Redwood JS

Bringing full-stack to the JAMstack

Flexbox Playground

the main container decreases and increases size to demonstrate the responsive design behavior of flexbox..

Epic Spinners

Css only. Easy to use. VueJS integration.

CSS Matic

The ultimate CSS tools for web designers

Complete CSS Cheat Sheet

A total of 29 pages, structured into different paragraphs: backgrounds, borders, fonts, texts, Column, Colours, Grid positioning and a lot more (including UI). makes it simpler to support differing browsers by attempting to recreate the missing features with polyfills.



Firebase is Google’s mobile platform that helps you quickly develop high-quality apps and grow your business.


A mighty, modern linter that helps you avoid errors and enforce conventions in your styles.


a state management pattern + library for Vue.js applications.


A React.js based library for creating sleek presentations using JSX syntax that gives you the ability to live demo your code.


Sapper is a framework for building extremely high-performance web apps.
Each page of your app is a Svelte component

Spring Boot

An open source Java-based framework used to create a micro Service.

Fauna db

The database built for serverless, featuring native GraphQL.

Framer Motion

An open source React library to power production-ready animations. Design fluid animations for the web, across desktop and mobile.

Laravel Vapor

Laravel Vapor is a serverless deployment platform for Laravel, powered by AWS.

CSS Transition Playground

Hovering over an item will cause the width, height and background-color of the item to change.

Stackbit Beta

Build Jamstack sites, fast……
Requires Github and Netlify account.


Free framework to build super fast WordPress themes using React.


Part spreadsheet, part database, and entirely flexible, teams use Airtable to organize their work, their way.


Coolors is a fast and easy tool that let you generate beautiful color palettes or color combinations.

Beautiful Colored Gradients

A handpicked collection of beautiful color gradients for designers and developers.


Deploy modern static websites with Netlify. Get CDN, Continuous deployment, 1-click HTTPS, and all the services you need. Get started for free.


A physics-based animation library for React inspired by the natural world.


Rollup is a module bundler for JavaScript which compiles small pieces of code into something larger and more complex, such as a library or application.


A GraphQL client, for rapid iteration.
Instead of writing GraphQL queries, client write typescript code in their application, and queries are generated at runtime.


GraphQL Engine is an opensource service that connects to your databases & microservices and auto-generates a production-ready GraphQL backend ….


Framer Web is not a successor of Framer X, but rather an alternative to a macOS-only desktop client. It will continue receiving the same features and support as the web version.

Keystone JS

A scalable, extensible and open-source platform to build NodeJS applications


New Static CMS with GUI to build an extremely
safe, fast and stylish HTML website.

Gradient Hunt

Gradient Hunt is a free and open platform for color inspiration with thousands of trendy hand-made color gradients

Web Tool Kit

Java Script Online Tester

Tailwind CSS

A utility-first CSS framework for
rapidly building custom designs

Online React compiler, Online React IDE, and online React REPL.


Animated symbols and buttons packaged for Sass and CSS. We also provide a builder that gives developers the ability to select their preferred Transformicons.

Font Flipper

Preview 800+ Google Fonts on top of your own designs, without having to download the fonts first.
Font Flipper


Enter your website’s URL and we’ll show you how fast (or slow) your web hosting is performing.


A secure runtime for JavaScript and TypeScript.


Compass is an open-source CSS Authoring Framework.


A Modern Site Generator for VUe.js

Koa JS

Koa is a new web framework designed by the team behind Express, which aims to be a smaller, more expressive, and more robust foundation for web applications and APIs.


Strapi is the leading open-source headless CMS. It’s 100% Javascript, fully customizable and developer-first.


The visual code editor
Design, develop, document and deploy your design system—without writing code.
We’re currently in private beta.
We’re primarily targeting teams.

Site Inspire

A CSS gallery and showcase of the best web design inspiration, featuring over 2500 websites searchable by type, subject, and style.

Animate CSS

A cross browser library of CSS animations.

OnLine Tools For Developers.


lets you add tooltips to elements without JavaScript and in just a few lines of CSS.


Code the Future. In Your Browser.Create, edit & deploy fullstack apps

ES6 Console

Welcome to the interactive ES6 online console. A full JS console that can run all versions of JS.


Design, prototype, and collaborate all in the browser—with Figma.

Real Favicon Generator

The ultimate favicon generator. Design your icons platform per platform and make …

Free Learning Tutorials Just For You

Learn Javascript

FreeCode Camp: complete 134-part JavaScript tutorial for beginners will teach you everything you need to know to get started with the JavaScript programming language.

Svelte Framework Tutorials

Svelte Master: 27 videos
Svelte applications generate code to manipulate the DOM, which may give better client run-time performance.

JavaScript 30

Wes Bos: Build 30 things in 30 days with 30 tutorials

CSS Grid

Wes Bos: Learn all about CSS Grid [4 hrs].

APIs for Beginners

Free Code Camp: Learn all about APIs [2 hr 20min].

GraphQL with Apollo, Meteor, and React

Scott Tolinski: teaching GraphQL with Apollo, Meteor & React to build a full-stack app.

Next.js Crash Course - Server Side React

TRAVERSY MEDIA: We will look at setup and build a simple application.

Gatsby js Bootcamp

Andrew Mead:The Great Gatsby Bootcamp [4hr 38min].

React JS

Freecode Camp: Upon completion of this course, you’ll know everything you need in order to build web applications in React.

Fixing Web Problems

Clean A Hacked WP Website With Wordfence & FTP

Watch as I clean a WordPress site with malicious files using Wordfence and FTP.

Fix A 500 Internal Server Error

Follow me as I record how I
Cleaned and Restored a HTTP 500 internal server error
Wordpress website.

Restore A Hacked WordPress Site2

Follow me as I record how I
Cleaned and Restored a hacked
Wordpress website.

Fix A Hacked WordPress Site

My workflow on removing malicious files from a hacked WordPress site….

Web Security

Tools that may help you find vulnerabilities in your code, server, or website.

How To Protect Your .htaccess File

Video tutorial on adding a script to your .htaccess file.

Submitted URL Not Found (404) How To Fix It

My workflow on resolving this Google alert.

How To Force Server To Use SSL

How I determined the problem was the server was not forcing SSL.
Step by step process I used.

How To Protect Your wpconfig.php File

Video tutorial on adding a script to your .htaccess file,
to protect you wp.config file

Fix A WordPress SSL Error

My work flow to fix a Mix Content error.


Test loading speed, browser compatibility, mobile responsive tests, and more..

How To Free Lance

You want to be a freelance designer or developer, here are the things you need to know. Things that you will never learn at a Coding Boot Camp, Coding School, or College.
This manual is an ongoing project not completed yet.

New chapters to be added each month

Need A Website?

Builds clean, responsive, fast loading websites.
Also repair & fix hacked sites.

Contact Frontntweaks

  • Questions?
  • New Product Reviews
  • Say Hi!

“Websites promote you 24/7: No employee will do that.”[Paul Cookson]

Share This