High Performance Websites

Practical application of modern web skills and knowledge to build high performance websites.

last update 16/9/2020

Contents

The time is now

Website Development Overview

Developing fast, modern connected websites.

Lease and domain name and host it

The Internet is a giant network of connected computers, each with an assigned an IP address (a typical IP address looks like 66.249.66.1). Domain names were invented as an easy to navigate to these IP addresses.

A hosting company manages the computers (called web servers) connected to the Internet. These web servers are where your website’s files are stored. To create a website we need both a domain name and web hosting to store the files.

Domain names are available in many different extensions, the most popular being .com. We find an available domain name, lease it from a domain name registrar, and set it's domain name settings to match your hosting settings.

When the domain name and the hosting are correctly set the domain name points to the files you create on the hosting computer. Your website is 'live'.

Use a web builder to develop a website

You can manually code websites. But the modern web is built using web builders and content management systems. For blogs, web building systems like Wordpress, Ghost, and many others can be used to create blogs write and upload content. Other modern web builders like Webflow enable codeless web development enabling you to write, structure and update websites without coding.

Connect the site to essential web services

With a website designed and built, you can install essential web services and also web tools to extend the site. You would commonly install Google Analytics to track and measure the site's visitor behavior, and Facebook Pixel to track and measure the visitors arriving from your Facebook business page. There are also many tools that can be installed to enhance the functionality of a modern website.

Grow the site over time

With the site up and running you 'grow the site' traffic by regularly adding new content and developing the site's network online by linking the site to other sites, and earning backlinks from other sites to your own.

Domains, Hosting and Website Tools

Launch your own thing and run it like a pro.

Namelix

A useful business name generator to generate a short, brandable business name using artificial intelligence.
https://namelix.com/

NameCheckr

A useful tool to check domain & social username availability across multiple networks.
https://www.namecheckr.com/

Namecheap

Namecheap is my go to ICANN-accredited domain name registrar. A great source for low cost domain names. I've used this service for years.
Find your domain name

Dreamhost Web Hosting

With a domain name leased, you need to host it somewhere to 'serve' it up the world. Dreamhost offers web hosting, virtual private servers, dedicated hosting, shared hosting and cloud storage. I've been using Dreamhost for the past 15 years. It's great if you manage a lot of different domains.
Sign up for hosting

Webflow

Webflow gives you fine control to design, build, and launch responsive websites visually, and hosts your website as well.
Start with a free Webflow account

WordPress

You can install Wordpress on a hosted custom domain name or have WordPress.com host it for you. It's a free and open-source content management system based on PHP and MySQL. You install Wordpress then you theme it and away you go.
Visit Wordpress

IFTTT

With Iffttt you create 'applets; connecting web services to make things your apps can't do on their own.
https://ifttt.com

HTML and CSS Basics

The following excerpts are from Mozillas excellent open source Web Development 101 resources found on the Mozilla Web Docs website.

The Internet

The Internet is a system of interconnected computers, and the world wide web is a system of interconnected pages that lives on the Internet. Web sites are spaces to access, share, and interact with multimedia content. The people who build the web– web developers and designers– use a computer coding language called HyperText Markup Language or HTML to make web pages. When you access the web, you’re using a piece of software called a browser to display pages.

The Evolution of the Web

In the early days of the web, many pages were static. There was lots of information sharing, but not much interaction. You can see the early web using the Internet Archive’s wayback machine and search for apple site link.

HTML

HTML is not a programming language, it's a markup language. A markup language defines the structure of a page's content. HTML consists of a series of elements used to wrap different parts of the content.

Web designers use HTML “tags” to tell the browser what to do with content. When we want to tag some content, we surround it with a matching pair of words, each word surrounded by a set of brackets “< >”. When tags are used online, the brackets alert the browser software that it’s a tag. The word or character inside each bracket tells the browser important information about what’s inside.

Any web page you visit is actually an HTML file, which is just a text file– a bunch of words–with HyperText or Markup Language added to the content.

CSS

Cascading Stylesheets — or CSS — is the first technology you should start learning after HTML. While HTML is used to define the structure and semantics of your content, CSS is used to style it and lay it out. For example, you can use CSS to alter the font, color, size, and spacing of your content, split it into multiple columns, or add animations and other decorative features.

You can learn to style HTML using CSS (Cascading Style Sheets) further with Mozilla's excellent walkthrough.

Web Apps

Websites (or parts of websites) that allow users to do something on the web are called web applications. Web applications are powered by programs (code) that let the client computer (the one you use to browse with) to work with the server (the computer where the website lives) to make something happen.

Website builders or content management systems

We use website builders or content management systems to create websites with lots of different pages and frequently updated content, such as blogs or shopping sites. These tools pull together HTML and CSS (Cascading Style Sheets, used to add visual styles to web sites) along with other programming languages to speed the process of website creation.

Google's Webmaster Tools

Google offers a wide range of free webmaster tools. They are free, high-performance tools. You just need to install them. You can track visitor site behavior, monitor the results of ad campaigns, and also monitor the performance and search ranking of the site.

Google Analytics

Google Analytics tracks a websites traffic and site visitor behavior. You sign up for a free account and embed the tracking code into the head section of your site. Then, you start collecting site analytics. It does tack some time to learn how to use Google Analytics, but mostly because you won't necessarily have data (site traffic) when you are starting out. Once you do, it becomes clear how to use this mega app.

Sign Up For A Free Google Anaytlics Account

Google Search Console

Google Search Console is a no-charge web service by Google for monitoring your site’s performance in search. Search console is fiddly to set up , but perist and you can track the search ranking of your site, and resolve any search ranking issues.

Google Search Console

PageSpeed Insights

Site speed is a metric Google uses to rank websites. So we need to make our fast, or be penalised by Google. The PageSpeed Insights tool reports on site performance for mobile and desktop. It's free and it works.

Tes Your Page Speed

Google Trends

Google Trends is a free tool that provides access to actual search requests across Google Search.

See What the World is Searching

Google Chrome

Chrome is Googles fast, simple and secure web browser. With Chrome you can create multiple user 'profiles' that synchronise across devices. This means you can flexibly access and manage multiple clients or projects very flexibly. Chrome also has great developer tools built in for looking under the hood of sites and testing and optmising.

Download Chrome

Web Builders

Website builders or content management systems to create websites by pulling together HTML and CSS (Cascading Style Sheets, used to add visual styles to web sites) along with other programming languages to speed the process of website creation.

Webflow

Web Flow is the class leading codeless web developer tool that runs in the cloud. It's fantastic. Great support, great features and a pleasure to use. You do need to understand basic web development principles here. it's free to get started. You get a designer, a CMS (not free) and interactions (animations and interactivity).

Wordpress

WordPress powers a large percentage of web blogs on the Internet. It can be installed on you can install and host it on a hosted custom domain name using WordPress.com to host it for you. It's a free and open-source content management system based on PHP and MySQL. You install Wordpress then you theme it and away you go.

Ghost

Ghost is an open-source blogging platform written in JavaScript and distributed under the MIT License, designed to simplify the process of online publishing for individual bloggers as well as online publications.

Card

Card is a simple, free, fully responsive one-page sites for pretty much anything. Pretty cool concept, and beautifully implemented. I have not tested it's page speed or tried to build anything with Card, but it looks promising. These tools are all over the web, but this one caught me eye.

Numerous Other Web Builders

There are hundreds of modern web builders available. I will come back here and update this later, with the most popular of web building tools.

Web Designing Tools and Apps

Tools for designing and media production for the web.

Photoshop CC

Photoshop is the world's primary image editing program for creating, designing and editing images. You can edit photographs or groups of photographs, create digital graphics and composites from scratch, and design and produce app user interfaces. Photoshop is your swiss army knife for digital media. Photoshop easily becomes the heart of any digital studio.

Canva

Canva is an online drag-and-drop design tool, with plenty of designs and layouts to base your designs on. If you don't want to learn or use Photoshop you can use Canva to crank out business cards, logos, presentations, and graphic designs.

Image Cyborg

Image Cyborg is a handy tool for downloading images from a website (a URL). This can be be very useful and far quicker than manually copying and pasting images, or saving them.

Visit Image Cyborg

Video Cyborg

This is the video version of Image Cyborg. Download video from youtube, dailymotion, any website just paste any link/url with a video.

Visit Video Cyborg

Apps Cyborg

More handy web tools from this Apps Cyborg.
https://appscyborg.com/

Google's collection of open source designer web fonts

Google's collection of open source designer web fonts.
visit the site

Adobe Typekit

Typekit is Adobe's service for fonts. You can browse fonts, sync to your computer or use install them on a website. Instead of licensing individual fonts, you can sign up for Adobe Creative Cloud plan that best suits your needs and get a library of fonts from which to choose.
Visit Typekit

Find any font with Fount

Fount will tell you which web font in your font-stack you are actually seeing – not just what is supposed to be seen. It’ll also tell you the font size, weight, and style. Note Adobe Typkit also supports this feature.
Visit the site

Website Onboarding Tools

Collect emails and grow your audience

Hello Bar

Hello Bar is a website 'bar' that greets people as they enter your site.

Survey Monkey

Survey Monkey allows you to measure and understand feedback from site visitors, with surveys.

Subscribers

Subscribers is a free tool for push notifications. You can create custom, schedulable, dynamic, and even automatable push notifications for Desktop And Mobile.

Slaask

Slaask is a $29 p/m Slack integration app. It's a bridging chat app between your website and Slack, enabling live chat with your website visitors via Slack. There are several conversational and collaborative hubs like this one that allow you and your teammates to answer your customers’ queries as easily and efficiently as possible from Slack.

Website Privacy Policy Tools

Tools for generating website privacy policies.

Privacy Policies

Generate privacy policy documents outlining how you will protect the personal data and digital privacy of your site visitors.
generate a free privacy policy

Cookie Consent

Generate a Use our Cookie Consent form to comply with GDPR and ePrivacy Directive.
Visit the site

Web FAQ

  • Do I need to know HTML/CSS to build a website?

    No. But it helps. You can now use codeless editors like WebFlow. These tools let you code without coding. Knowing a little HTML and CSS will give you understanding.

  • How do I lease a Domain Name?

    You can use Namecheap or any ICANN-accredited domain name registrar to lease a domain name. You find a domain name that is available with the extension you want (for example, .com)

  • Can I sell a domain name?

    Yes, domain names are like real estate for web, with strong demand for brandable custom domain names.

  • What is a subdomain?

    A subdomain is a child domain under the main domain name. For example, art.josephstrid.com is a subdomain of josephstrid.com. We create subdomains using our web hosting tools. They don't require a separate domain name registration.

  • Can I cancel my registration of a domain name?

    You can cancel your domain registration at any time, or simply let your domain registration expire making the name available for others to register.

External Links

Digital-age skills help people live and work in today’s world.

How to read, write, and participate on the web.

Essentials HTML & CSS

Domain Name Generators

Freemind Newsletter

It’s one email a week with everything interesting I’ve read or discovered, plus new guides and book notes. It's all about living your life according to your nature.


Error. Your form has not been submittedEmoji
This is what the server says:
There must be an @ at the beginning.
I will retry
Reply
  • Creative Mind
  • Techniques and Tactics
  • CREATING THE LIFE YOU PREFER