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)
- Syntax highlighting
- Syntax proofing
- Git integration
- Uploads to the server
- Code hide-collapse
- Fast preview
- Become a pro to buy full-fledged development suit and a $10,000 workstation!!!
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
- Quick and lean editor with full-fledged Emmet integration
- Real-time HTML and CSS, and English mistakes catch
- Git integration
- Fast uploads to Your server
- Immediate images preview
- Selections Shrink to hide perfect-ready lines of Your code
Install 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:
- lang (language)
- title
- description
- author
- review date
Header
Copy and Paste to start quickly
AMP HTML declarations
paste, then edit where necessary:
- title
- description
- author
- review date