The HTML 2.0 specification was published in November of 1995. Since then, the HTML 3.0 draft specification expired on September 28, 1995, without becoming recommended, but HTML 3.2 became a W3C (World Wide Web Consortium) recommendation on January 14, 1997.

The public draft for HTML 4.0 was released on July 8, 1997 and was officially recommended by the W3C in December that year. Then the current HTML5 standard was first published in 2009 but not ratified as a standard until October of 2014.

In addition to this official work on HTML, the browsers have been making their own additions to HTML. Some changes were eventually adopted into W3C HTML Recommendations; others remain proprietary coding aspects that only the individual browsers recognize. The browsers’ versions of HTML changed, too, in a game of marketing and programming one-upmanship, hoping to lock Web developers into using one browser or the other exclusively.

HTML characteristics

html stands for Hyper Text Markup Language- it is a “formatting” language not a programming language. An extremely simplified explanation of how works is that it works by turning on and off formatting options TAGS.

for example the following html :

<p> the <i>silly</i> <b> dog</b> jumped up </p>

over the <i><b>tree </b></i>

would render in a browser as below:

the silly dog jumped up

over the tree

Writing html rules

• The formatting options are called TAGS
• Tags are always written within < > angle brackets eg <p> beginning of a paragraph
• Generally TAGS are closed off by writing the tag with a </  > eg </p> end of paragraph
• Tags can be nested but they should be closed in the reverse order of what they are opened
  eg: <i><b>tree </b></i>
  NOT
  <i><b>tree </i></b>
  
• With the implementation of html tags can written in upper or lower case
  eg <P> is the same as <p> and both are completely valid

As the title state this is just a quick overview so that will do on rules for now 🙂

HTML development Tools

To write html you only need the simplist of text editors (MS Word is not a text editor!!) a program such as Notepad will allow you to write perfect HTML – I’ll admit slowly but it is still a perfect tool. And then all you need is a browser such as Chrome, Internet Explorer, Microsoft Edge, Firefox or Safari to name a few to check your rendered HTML documents.

In professional environments you would more than like be using tools along the lines of  Notepad ++, Sublime text, Composer, Dreamweaver or a million other options.

Your development tool doesn’t matter its how well you know and how well you use it!!!

Here are a couple of handy links

html tag reference guide

CSS reference sheet

html colour codes

Primary colours

In web design we often use the additive RGB colour scheme where by the primary or main colours that can make up every other colour are Red Green Blue hence the name RGB. 

Primary colors form the basis for all other shades. Every other colour we use in web design consists of a combination of these three colours in varying amounts, brightnesses, tints, and shades.

RGB decimal and hex

On the web, we use RGB (red-green-blue) and hex values to represent colours.

The RGB color system defines all colors as a combination of three different values: a particular shade of red, another of green, and another of blue. So:

– rgb(85, 15, 157) is cadburys purple in decimal colour notation

– rgb(0, 0, 0) is black  in decimal colour notation

– rgb(255, 255, 255) is white  in decimal colour notation

The hex color system converts each value to a hexadecimal (base 16) representation, like so:

– #550f9d is cadbury purple in the hex colour notation

– #000000 is black in the hex colour notation

– #ffffff is white in the hex colour notation

The color wheel

A basic colour wheel contains the 12 standard colors used to create color schemes. Each section represents colours that can be achieved with different saturations, hues, tints, shades, and mixes of neighbouring colours.

The color wheel can be used to define how the balance and what makes  color schemes work.

4 simple examples of colour schemes

Colour schemes generally work best when one of the following patterns is used.

1. Monochrome

A monochrome color scheme consists of various tints, shades, and saturations of a single base colour. They’re very cohesive.

 2. Complementary

Complementary schemes are based on two colors from opposite sides of the color wheel. Because the two colour are vastly different, such schemes can be very dramatic and stunning.

3. Analogous

Analogous schemes feature  colours that sit next to each other on the color wheel. Because of the tonal similarities, these schemes can create a very cohesive, unified feel.

4. Triadic

To  triadic colour scheme is based on the three colors at the points of an equilateral triangle. This creates a diverse, yet balanced, scheme.

There are other colour scheme types but those 4 are a good place to start.

Hue, Saturation and Lightness

Hue defines the degree to which a color can be described as similar to or different from red, orange, yellow, green, blue, indigo, and violet (the colors of the rainbow). So when you describe a color as “greenish blue,” you’re defining it in terms of two hues.

Color saturation (also know as chroma and intensity)  refers to the intensity of colour in an image. In technical terms, it is the expression of the bandwidth of light from a source.  When colour is fully saturated, the colour is considered in purest (truest) version. Primary colors red, blue and yellow are considered truest version color as they are fully saturated.
As the saturation increases, the colors appear to be more pure. As the saturation decreases, the colors appear to be more washed-out or pale.
definition src: https://www.techopedia.com/definition/1968/color-saturation

Lightness, also known as value or tone, defines the perceived brightness of a color compared to pure white.

Color resources

If are not naturally gifted in the area of colour selection then there are lots of resources for you to use on the web. Below are just a couple to get you started.

Adobe Color CC, This is great tool from Adobe which allows you to specifc a starting colour and then choose the colour scheme you want and it will give the colour codes you need. You can adjust your clour selection live on the site

Colour Calculator This is also a great resource for choosing colours and has some great info on colour theory

Color Scheme Designer 3 (Paletton) Color Scheme Designer is very easy to use and its choice of colour principles present a variety of options. While it doesn’t teach its users why the colors work well together (Kuler’s dynamic color wheel is much more effective in that regard), its results are great as a starting point.

1. Get the clients functional and non-functional requirements. (basically this is the clients needs- what does the website need to DO)

Eg The client has said they want a photo gallery but did they mean 1 or 20 photo galleries. Did they want the images in the galleries when clicked on to open or not open a larger version? Or did they want on clicking the image to go to an actual web page with more information about the image? (you read more about functional and non-functional requirements here)

Client’s needs

Before starting your plan, you’ll need as much information from your client as possible. The more you know, the less back-and-forth e-mails you’ll need to sift through.

Listen to their ideas

Usually, clients won’t tell you what they want, it’s up to you to ask them. They want reassurance that their brief will be fulfilled the way they visualized it, but they have a hard time explaining how they see their future website. The best way to overcome this problem is communication. It’s essential to get to know your website design clients by asking questions that will tell you about their business. You want to find out the mood they’re going for, what they like and what they don’t.

But don’t be scared to give them your ideas

You are the “expert” so if what the client has in their head is unrealistic or unreasonable then tell them and work with them towards a good solution.

Useful tools at this point are client questionnaire

A useful and efficient way to find out more about what the clients needs rather than what they think they need or want is to get them to fill out a questionnaire.

List the most important questions that will help you understand the project. What’s the purpose of this website? Who’s the target audience? Who are your competitors? What actions do you want the visitors to take? Etc.. I prefer in the first instance for the questionaire to have no more than 10 questions.  And from these 10 questions I will have at least 10 more for the client but these first 10 are a good starting point. It is important that you get this questionaire filled out by the client before you start drafting the proposal and not after.  Once you have your questionaire answers you will be able to hopefully give them ball park costings , and finalize your formal agreement on budget, scope of project, timeline, and ownership.

2. Define what success means

So you have the websites functional and non-functional requirements and based on this specification you should be able to define what success will mean in regards to the website. Yes a working website is a success measure but other success measurements could be the amount of traffic, user interactions, search engine position etc.

As stated in the original article “Besides the description of the site, you need to know what the expectations are for it. Take a news site for example, what’s the goal? Is it to make make as many ad impressions as possible or is it to provide the best reading experience? How are those goals going to be measured? “

3. Start planning a top-level framework/storyboard  and navigation map

A top level framework doesn’t have actual images but more defines where the structural elements such as the main navigation, header, social links, slideshow, galleries etc will go. There are lots of free tools as well as high end commercial ones or you could do it on paper. what you develop it in isn’t important- what is important is that you include ALL of the structural elements. Therefore you may need to do more that one top level sketch/storyboard if your website will have more than one page layout. You can read more about storyboards and navigation maps here

At this point you are thinking about the following:

Element placement

You can’t start your website without knowing where things go. Here’s where you decide that. You can even meet up with your client to discuss the best placement for your content.

Information hierarchy

A sitemap with a list of links can be overwhelming to a client and even the designer. By laying out the sitemap, you will be able to see how the pages fall into place which will allow you to make adjustments before you get too far ahead.

Interactivity

When creating your wireframes, you must ask your questions: How are these elements going to interact with each other? Will the visitor take the actions I want him to take? How will the visitor move around the site? Here’s where user experience plays its role. So you created your layout. Next, you will create your interface.

This is a great resource about web layouts  10 Rock Solid Website Layout Examples

4. Add or think about a grid

There are many CSS Website frameworks now that make responsive websites using Grids incredibly easy. Grid also allow you to mathematically ensure that your page layout will adhere to design golden rules such the rule of thirds etc.  My favorite CSS grid framework is Bootstrap but there are many other available.

Before starting to design anything you need a proper grid. There are no valid excuses for starting without a grid – they will definitely ensure that your design will look as good as it possibly can. A grid will help you to structure the layout of the different sections; it will guide you through the specific screen size requirements, and help you to create responsive templates, so you’re consistent in terms of spacing as well as many other design issues.

5. Choose your typography and colour scheme

Exploring different typefaces and colours is part of the discovery phase of a project. Generally you don’t want to use more than two different typefaces in a website. One for headings and one for the body type. For websites Google Fonts is a great typography resource and tool.

Your colour scheme maybe defined by the clients existing branding or you may have alot more freedom but you can some great colour resources are:

https://color.adobe.com/create/color-wheel/

https://color.hailpixel.com/

https://www.canva.com/learn/website-color-schemes/

http://colorschemedesigner.com/csd-3.5/

You may also like to read simple intro to colour theory and web design

6. Gather all of the main resource

You are just about ready to design the visual components and what the main visual design will actually look like but to ensure that you have the images that you need

7. Design the Visual Components and Visual Design

(Content coming soon)

8. Develop the prototype

(Content coming soon)

9. Refine everything

(Content coming soon)

10. and possibly repeat

This step really depends on the type of project

Defining (Designing) the functional and non-functional requirements is a key step in the web development process and one that not only applied to software development, but website development as well.

Defining (Designing) the functional and non-functional requirements of a website BEFORE you begin may seem tedious and I will admit with some clients it is like pulling teeth but it is very important that you know what the website is actually “meant to do” and “how it is meant to act” before designing the way it is meant to look.  And from this perspective the functional and non functional requirements can ensure that you meet the clients expectations and what I use as a handover checklist and the basis of the contract to ensure there is no spec creep.

And while the terms come from software engineering they are just as important in web development to ensure that your pages interact, perform (behavior, load time etc.) with each other and user in the manner that client expected.

Functional Requirements

Functional requirements describe what the software / website should do (the functions).  Think about the core operations.

Because the “functions” are established before development, functional requirements should be written in the future tense. In developing the web application for the portfolio website, some of the functional requirements could include:

• The website shall/will show galleries of images that open to new pages
• The website shall/will allow galleries to be sorted by date and topics
• The website shall/will be responsive
• The website shall/will allow users to complete a contact form
• The website shall/will show address and directions to office
• The website shall/will have about page
• The website shall/will have homepage
• The website shall/will on the homepage have a custom instagram feed
• The website shall/will allow website owner to update all page content from a web based admin area

And the list would go on. Tedious and not to the same level as software development projects but still important so you do not miss anything important in the website development.

Non-Functional Requirements

Unlike functional requirements the non-functional requirements are not concerned with the functions of the website but instead  look at the criteria to which website is expected to conform to. Non-functional requirements can include things like response time, development time, usability and reliability. It can also be closely tied to user satisfaction.

Some non-functional requirements for a portfolio website could include:

• The website shall/will be easy to use by all external users
• The website shall/will be easy to use by all website admins

Each requirement is not related to an operation or what the application should do. Instead, the main focus in this case is the ease of use and performance. That’s the idea of non-functional requirements. Which can make non-functional requirements hard to measure and define when they have been successfully met.

Developers should always establish requirements before any coding begins so that they can effectively meet the projects requirements and to avoid project spec creep. Identifying functional and non-functional requirements is key to defining the projects over success or failure. By establishing the functional and non-functional requirements, you have a guide to follow in ensuring that a website meets it specifications.

The site itself makes it very easy to search for images and download them. There is no need to sign up for an account and be bombarded with the spam. So check them out at Pexels.com

An algorithm is a detailed step-by-step instruction set or formula for solving a problem or completing a task. In computing, programmers write algorithms that instruct the computer how to perform a task.

When you think of an algorithm in the most general way (not just in regards to computing), algorithms are everywhere. A recipe for cooking a cake is an algorithm, the method you use to solve addition, subtraction or a long division problems is an algorithm, and the process of stacking a dishwasher is an algorithm. Even your morning routine could be considered an algorithm!

Algorithms are fascinating and, although some are quite complex, the concept itself is actually quite simple.

The Benefits of Algorithmic Thinking

Algorithmic thinking, or the ability to define clear steps to solve a problem, is crucial in subjects like Math and Science. People use algorithms without realizing it all the time, particularly in Maths but also in everyday life. Algorithmic thinking allows people to break down problems and conceptualize solutions in terms of discrete steps in a procedure.

An algorithm is a way of designing something so it can converting into code that will adhere to the six basic computer operations. So every line in an algorithm must be match one of Six Basic Computer Operations.

The Six Basic Computer Operations are:

1. A computer can receive information
2. A computer can out put information
3. A computer can perform arithmetic
4. A computer can assign a value to a variable or memory location
5. A computer can compare two variables and select one of two alternative actions
6. A computer can repeat a group of actions

Algorithm Rules

Algorithm

• A set of step-by-step instructions to accomplish a task.
• An algorithm must have start instruction
• Each instruction must be precise.
• Each instruction must be unambiguous.
• Each instruction must be executed in finite time.
• An algorithm must have stop instruction.

Examples

Algorithm Example 1

Write an algorithm to add 2 numbers

 Step 1: Start

 Step 2: Let a=10,b=20

 Step 3: c=a+b;

 Step 4: print c

 Step 5: Stop

Algorithm Example 2

Write an algorithm to determine a student’s final grade and indicate whether it is passing or failing. The final grade is calculated as the average of four marks.

 Step 1: Input M1,M2,M3,M4

 Step 2: GRADE ← (M1+M2+M3+M4)/4

 Step 3: if (GRADE < 50)  then
­            ­   Print “FAIL”
­            else
­            ­   Print “PASS”
­            endif

Pseudocode and Flowcharts

Pseudo code is an artificial and informal language that helps programmers develop algorithms. Pseudo code is very similar to everyday English.

FLOWCHARTS
(Dictionary) A schematic representation of a sequence of operations, as in a manufacturing process or computer program.

(Technical) A graphical representation of the sequence of operations in an information system or program. Information system flowcharts show how data flows from source documents through the computer to final distribution to users.

Program flow charts show the sequence of instructions in a single program or subroutine. Different symbols are used to draw each type of flowchart.

Flowcharts shows logic of an algorithm. They also emphasizes individual steps and their interconnections e.g. control flow from one action to the next

Standard copyright rules apply such as you can’t onsell or use any of the images in products that are onsold for example website templates, calender’s etc

As per most image library’s terms of use you can not use them in any type of product which you are onselling eg website templates, calenders etc but you can use them in your own and clients commercial work.

Examples

Navigation Maps

Navigation maps are also known as site maps, and they are a very important development tool. Navigation maps are very useful tools in the development of websites and can help to keep the development  process on track . They basically are a visual representation of how the website pages will link together. In simple websites the navigation maps are very simple because every page links to every other page but in large websites with 100’s of pages linking every page to every other page isn’t practical and their navigation site maps are very complex.

Navigation maps as a development are not to be confused with a live websites site map. On a live website you should have a sitemap for your users to aid the navigation of your website. In this instance the sitemap is a list of pages of a web site accessible to crawlers or users and should take the form of both an “html” page and an xml document. The content is the same and both development sitemaps and live website sitemaps are typically organised  in hierarchical fashion.

Complex navigation map

While Google  already blocks some types of “mixed content” on the web and makes it difficult to view non SSL websites it has now announced that from early 2020, Chrome (and other browsers will follow that example so they don’t appear “insecure” ) will block all mixed content by default, breaking some existing web pages. Which makes the information below on why all websites need to have a valid SSL certficate below even more pertinent.

What is mixed content

Mixed content is confusing. If you are viewing a web page that’s both secure and not secure. For example, a usually safe and secure web page via https but the web page is getting a JavaScript file via HTTP then it is possible that the script could be modified—for instance, if you’re on a public Wi-Fi network that isn’t secured—to insert malicious code into the  web page that could monitoring your keystrokes etc.

Google announced in September on it security blog that if your website is not using HTTPS/SSL when they implement their latest changes  in 2017, your website credibility and search engine rankings may be affected. Chrome- Googles web browser  has already begun to mark non-secure pages containing certain input fields as Not Secure in the URL bar as you can see below. 

At the moment this only appears on non-SSL pages that ask for a password or credit card information and  it’s not too noticeable. But Google  has confirmed that in the near future, this warning will appear on ALL pages served over HTTP vs. HTTPS and it will be in RED and look like this NOT SECURE- not exactly the sort of thing that will instill confidence in your website!!

There is already a lot of research which shows that Google is already using  HTTPS as a ranking factor…SSL DOES Correlate with Higher Rankings!!

Websites need to convert from HTTP to HTTPS to Avoid the ‘Not Secure’ Warning and feel confident with a Secure green padlock

Another reason why you should convert your website to HTTPS/SSL is that its safer for your visitors

HTTPS and SSL prevent man-in-the-middle attacks.

When an SSL certificate is installed on a web server, it operates as a padlock and acts as a secure connection between the web server and browser. An SSL certificate binds together your domain name (or server or hostname), company name and location. While how an SSL certificate works goes into more details–involving a public key and a private key–what you need to know here is this: Even if a hacker manages to intercept your data, he won’t have the private key to decrypt it. Basically HTTPS and SLL adds extra layers of protection.

So what do website owners need to do

The first step would be to contact their webhost and purchase and  install a Secure Socket Layer certificate (SSL)  to ensure that data between your web server and browser remains private and secure and they are not penalise by Google’s SSL update.