In this video, I’ll show you all the tools and resources I use to create my WordPress website. I’ll also show you how I use it too, so you can implement it to design and build a better website.
➤ Resources mentioned below (Click “SHOW MORE”)


  1. Collect UI - &
    Handpicked UI inspiration for your web design projects. Organised into categories for easy viewing.
  2. Milanote -
    Perfect tool to help you organise your thoughts on a visual board to keep things organised.
  3. Adobe XD -
    The best tool to design & prototype anything. And It’s FREE!

Colour & Fonts

  1. Whatfont
    A chrome extension to “spy” on what fonts other websites are using
  2. Myfonts -
    Where you can download fonts that you see on the internet and use for your website. Free & Paid.
  3. Google Fonts -
    Most WordPress Themes will feature the Google fonts - you can use this resource to find what’s most popular & also see what the fonts look like.
  4. Adobe Colour -
    Best tool to create color palettes for your websites or design.

Assets - Images/Icons/Illustrations

  1. Unsplash & Pexels - &
    Amazing resources of images for personal or commercial use without attribution
  2. Adobe Stock & Shutterstock - &
    Best paid resources of images you can use for your web design projects. Much more selection!
  3. Flaticon -
    The largest database of free icons available in PNG, SVG, EPS, PSD and BASE 64 formats.
  4. Undraw -
    Open-source illustrations for any idea you can imagine and create. SVG & PNG.
  5. Convert SVG file to PNG -
    Download the SVG file from then convert to PNG file before uploading to website.
  6. Fiverr - (Use HOGANCHUA for 10% Off)
    Best place to hire freelancers starting from just $5. Get icons, logos, product renderings, product photography and so much more!

Image Editors

  1. Fotor -
    Super simple photo editor. Perfect for resizing and cropping images before uploading to website.
  2. Clipping Magic -
    Automatically remove image backgrounds in seconds online. Great for profile pictures and product photos.
  3. Canva -
    Best tool to create amazing designs for anything for free. From Blog post featured images, to thumbnails, to ebook covers and so much more.
  4. Pixlr -
    A lite version of Photoshop. Web based and Free.


  1. Pingdom Website Speed Test -
    Test your websites loading times with different locations around the world.
  2. Compressor io -
    Reduce your image size without much quality loss.
  3. Responsinator -
    Test your WordPress websites mobile responsiveness on all devices.

Other Useful Tools

  1. 0to255 -
    Perfect for hover states and keeping on colour scheme.
  2. Freepik -
    Another amazing graphic resource
  3. Lorem ipsum -
    Generate placeholder text for your designs.
  4. Gradient UI -
    Generate beautiful gradients.
  5. Placeit -
    Create mockups, logos, videos & designs in seconds!

My Basic Web Design Guide -
My Recording Equipment:



20+ Must Have Web Design Resources for Your WordPress Website Projects for 2021!
1.10 GEEK