Grab Your Website
NAKIGOE.ORG

Online In an Hour. Love from the First Sight!

GitLab, 1 hour

Now, really, get online TODAY. Believe, getting online is possible!!!

Create a short fancy name.

Have lots of vowels, minimum consonants.

Open a storage on GitLab

check the name availability on GitLab

register the name

Host the website on GitLab for free!

You can use other website hosting platforms that link to Your GitLab storage too.

Complete Website Name with Extension is Called DOMAIN

create a repository name.gitlab.io

where the name is your short fancy name :)

name.gitlab.io is now Your DOMAIN (extremely important, reason being this is the website name!)

open the newly created repository (double click, that's all :)

create a file in the root folder: index.html

now all is set for editing!

Open index.html in the repository for editing

Copy the correct text into the index.html article

Save index.html

preview in the browser! (type in Your DOMAIN in the browser address line)

Truly Personal Domains

You should buy a personal domain from any established provider, some of them include ownership privacy into the price of the domain (site name in technical terms). The name with privacy included is usually about $15‑$20 per year, but it's worth it!

Once You've found the name You like (unique, short, tons of vowels), grab it with any available extension, .com .org etc. to gain online reputation.

Use Dreamweaver to Start Editing index.html

No time to experiment, grab Dreamweaver

You need a full-fledged development suit!!! (IDE in short)

Visual Studio Code

VS Code became MUCH better as of 2020. It is a huge surprise. Light-Weight Alternative for As-Is EquipmentVisual Studio Code

Install Git

git

This one is extremely important to keep the track of changes and versions automatically. Concentrate on creating new and useful. The changes will be documented automatically!

Proper File and Folder Names

Create folders to keep the docs organized.

In the root directory you can create themed folders.

Create a folder named articles.

no spaces, underscores, CAPS in naming the files or folders!!!

use lowcase letters and dashes to name the folders and new articles.

keep the docs organized, a couple of folders for html: articles, and personal

a folder for images

a folder for video

a folder for audio

if you would like to use underscores in names on GitHub, like _IMG folder to keep the images safer, create .nojekyll file in the root folder

Create Links to New Articles

<a href=""></a> element to create links to future html documents in the repository

create an articles folder in the repository

then the links to the files in the articles folder will look like this:

<a href="/articles/new.html">new file</a>

<a href="/articles/new.html">awesome heading for the new article</a>

where the slash sign means folder articles is located at the same folder as index.html (the Root folder), and new.html is located inside of that folder

Use absolute links, You will need them for RDFa markup later. For RDFa markup viable are absolute links only, they are RDFa life!!! RDFa is all about absolute links and item identifiers, like <section id="item1"> is referenced like https://nakigoe.org/articles/new.html#item1

<a href="https://nakigoe.org/articles/new.html">new file</a>

<nav> element:
Should I nest <a> into <li> into <ul> into <nav>???

It really depends on how the complex current site navigation is.

If that is a couple of links on a page with no complications in visual presentation, then no. There is no any need to, to be exact.

Why make the structure complex if it's not represented visually in any way ?

<nav>

<a>

<a>

<a>

</nav>

But if the menu is complex visually, and there are several groups of links, images, languages - then definitely yes, to make separate groups of links targetable by CSS. In that case you have to use either <ul> <li> structure, or <div>. You much better with <ul> <li> structure if you plan to use a flex container, and especially floats in navigation bar. In that case <ul> <li> structure makes links organization more logical and understandable than <div> inside a <div> then <a>.

<nav>

<ul>

<li><a></li>

<li><a></li>

<li><a></li>

</ul>

<ul>

<li><a></li>

</ul>

</nav>

Just remember to create a separate class for the usual text list. Minimize targeting <ul> and <li> inside navigation. CSS Target <nav> <ul> <li> only if you absolutely have to. Make sure that visual text <li> and <nav> <li> styling parameters do not intersect in any way, especially if you use em units for font-size. There are tons of ways: CSS target nav ul li, then target main ul li, create a separate class for text <ul>.

Usually it is a great idea to control margins in links targeting <li> elements, and leaving <a> margins alone. Create custom classes to target custom, that is, standalone <a> elements.

CSS Classes

More specific addressing overwrites general styles. That's why use classes.

Meaningful Naming

Name classes referring to their role of the elements on the page.

Write classes names in small letters. Use CAPS letters when dividing the composite descriptions.

<div class="leftColumn"></div>

<div class="rightColumn"></div>

then apply styles in the styles section

<style>

.leftColumn {

color: red;

}

.rightColumn {

color: orange;

}

</style>

Think about readers of Your code! You may want to hire a developer to collaborate, to learn from, and to speed up the process. After all, You are going to be the one who reads the code You wrote the most; make Yourself a favour, write comments! Keep the CSS organized, especially inside AMP-HTML to automize future upgrades to Your CSS code.

Semantic HTML

h1, h2, h3, h4, h5, h6

paragraph

article

header

main

footer

AMP-HTML instead of JavaScript

an advice from kendo: "Do the right thing first, and THEN move on to advanced" You mean "Do easy things first then advanced things"? No, not easy, Do HTML right Have some order in a webpage. Avoid extreme stuff one can do with a webpage. Like in studying any language: "do the right thing first, then move on to advanced"

Study a bit of HTML, CSS and AMP HTML simultaneously, this way you can solve tons of questions.

profile page videos

use AMP elements for video, audio and images!

A bit of warning concerning AMP-HTML, the only CSS styles that are allowed are the ones that are located on one page with the HTML, that is, inline CSS and CSS code in the header. You are not allowed to link multiple CSS files as of 2020. Keep all CSS organized to be able to automate future changes!

schema.org

The schema is being constantly updated.

Check the changes attentively

Always check Supersedes / supersededBy in the property definition. Use the new, with the Supersedes property. Drafts are superseededBy new definitions.

Use with discretion. Correct minimum is O.K.

Minimum is type, name, description. Use url property when different from the current page. ImageObject, representativeOfPage=True.

Usually You have to add the stuff only required by search engines for rich snippets. Avoid RDFa-ing every word on a page, schema is not a magic lamp, unless search engine requires a certain parameter for a rich snippet (page preview in search results).

RDFa

Use RDFa when there is little mark-up expected.

avoid using much reference points resource="#" and correspondent about="#"

When doing extensive changes the the HTML later, changing lots of RDFa reference points with resource="#" and the correspondent about="#" becomes hard job.

JSON-LD

Use JSON-LD when supercharging the page with data.

JSON-LD is simple and convenient for complex structures of data.

Use JSON-LD with complex types, names, properties.

JSON syntax is minimalistic. Pay attention to punctuation.

quotes are used always, for any strings!

pairs are separated by commas

types are created with {}

arrays of similar data and types are created by []

Metadata

This one is for a search engine and a browser

Copy and Paste to start quickly

AMP HTML declarations

paste, then edit where necessary:

Header

Copy and Paste to start quickly

AMP HTML declarations

paste, then edit where necessary:

CSS

CSS properties

color
background
font-size
padding
margin
display