Coding page

Why this page?

Since launching this website in August 2020, a lot of time was spent on learning front-end development. Server-end programming was also addressed as a solution to get inputs from visitors for further treatment. This all has resulted in changes to this webpage multiple times. In January 2021, a major re-design was undertaken as my coding skills improved. In July 2021, I again changed the webpage to have a better storage environment for the various files, coding examples, and trials I created. And in September 2021, the overhaul was due to the many available trials, projects, examples, and tutorials.

A new way of publishing these trials was necessary. Files and coding examples are classified along the major lines in webpage design, i.e. CSS, HTML, Javascript, and other programming tools. However, I am conscious that this classification is somewhat artificial as all these techniques are needed together to make today's webpages attractive and worthwhile the visits. In January 2022, I changed again the layout of this page. Tutorials, trials, and coding examples were spread allover the place. Therefore, I started to re-organize the page based on major trends in front-end development. I regrouped some trials and examples, based on major coding blocks that are present in webpages, such as background, animation, header, etc. Further updates and adjustments will be looked for along these lines.

Webpage foundations

Window object Browser object model (BOM) Document object model (DOM) DOM examples HTML basics CSS basics JavaScript basics Web components-01 Web components-02 Webpage design

HTML (hypertext markup language)

HTML tutorials

HTML-01-elements HTML-02-tags HTML-03-attributes HTML-04-formatting HTML-05-forms HTML-06-graphics HTML-07-media HTML-08-API HTML-09-iframe HTML-10-image-maps HTML-11-object HTML-12-landmarks HTML-13-fieldset-legend HTML-14-SVG HTML-15-SVG-path HTML-16-SVG elements-01 HTML-17-SVG elements-02 HTML-18-SVG elements-03 HTML-19-details element HTML-20-SVG icons HTML-21-SVG-animation elements HTML-22-SVG-basic shapes HTML-23-SVG-container elements HTML-24-SVG-descriptive elements HTML-25-SVG-filter primitive elements HTML-26-SVG-font elements HTML-27-SVG-gradient elements HTML-28-SVG-graphics elements HTML-29-SVG-light source elements HTML-30-SVG-never-rendered elements HTML-31-SVG-paint server elements HTML-32-SVG-renderable elements HTML-33-SVG-shape elements HTML-34-SVG-structural elements HTML-35-SVG-text content elements HTML-36-SVG-uncategorized elements HTML-37-canvas-01 HTML-38-canvas-02

HTML attributes

HTML tags

CSS (cascading style sheets)

CSS tutorials

CSS-01-styling CSS-02-styling text CSS-03-layout CSS-04-values and units CSS-05-variables CSS-06-variable fonts CSS-07-selectors CSS-08-pseudo-classess CSS-09-pseudo-elements CSS-10-selectors_pseudo CSS-10-@ rules CSS-12-flexbox CSS-13-grid CSS-14-perspective CSS-15-aspect-ratio CSS-16-CSS functions CSS-17-gradients CSS-18-CSS reset CSS-19-animation CSS-20-display CSS-21-styling images CSS-22-nesting CSS-23-blend modes CSS-24-cascade layers CSS-25-site accessibility CSS-26-logical properties CSS-27-footer position CSS-28-houdini CSS-29-media queries CSS-30-container queries CSS-31-transitions CSS-32-subgrid

SCSS tutorials

SCSS-tutorial-01 SCSS-tutorial-02 SCSS-tutorial-03

CSS properties

JavaScript

JS tutorials

JS-01-variables JS-02-operators JS-03-arrays JS-04-conversions JS-05-functions JS-06-loops JS-07-conditional JS-08-strings JS-09-expression syntax JS-10-objects_OOP JS-11-data types JS-12-events JS-13-time and date JS-14-canvas JS-15-numbers_math JS-16-forms JS-17-modules JS-18-prototypes JS-19-design patterns JS-20-lexical structure JS-21-JSON JS-22-object properties JS-23-filter JS-24-set object JS-25-innerHTML-innerText-textContent JS-26-classes JS-27-asynchronous JS-28-decorators JS-29-search webpage JS-30-JS libraries

JavaScript libraries

jQuery-01-core jQuery-02-effects jQuery-03-HTML jQuery-04-traversing jQuery-05-jQuery selectors jQuery-06-jQuery effect methods jQuery-07-traversing methods jQuery-08-jQuery event methods jQuery-09-HTML_CSS methods jQuery-10-jQuery miscellaneous methods jQuery-11-jQuery properties jQuery-12-jQuery-date and time examples jQuery-13-jQuery-image examples jQuery-14-jQuery-menu examples

JavaScript methods

JS-1-array-methods JS-2-ES6-methods JS-3-number-methods JS-4-object-methods JS-5-string-methods JS-6-boolean-methods JS-7-string-HTML-wrappers JS-8-date-methods JS-9-math-methods JS-10-RegExp-methods JS-addEventListener-method JS-adoptNode-method JS-after-method JS-animate-method JS-appendChild-method JS-append-method JS-apply-method JS-assign-method JS-at-method JS-attachShadow-method JS-before-method JS-bind-method JS-blur-method JS-call-method JS-caretPositionFromPoint-method JS-charAt-method JS-charCodeAt-method JS-click-method JS-clonenode-method JS-close-method JS-closest-method JS-codePointAt-method JS-compareDocumentPosition-method JS-computedStyleMap-method JS-concat-method JS-contains-method JS-copyWithin-method JS-createAttribute-method JS-createAttributeNS-method JS-createCDATAsection-method JS-createComment-method JS-createDocumentFragment-method JS-createElement-method JS-createElementNS-method JS-createEvent-method JS-createExpression-method JS-create-method JS-createNodeIterator-method JS-createNSResolver-method JS-createProcessingInstruction-method JS-createRange-method JS-createTextNode-method JS-createTreeWalker-method JS-defineProperties-method JS-defineProperty-method JS-dispatchEvent-method JS-elementFromPoint-method JS-elementsFromPoint-method JS-endsWith-method JS-entries-method JS-evaluate-method JS-every-method JS-exitFullscreen-method JS-exitPictureInPicture-method JS-exitPointerLock-method JS-fill-method JS-filter-method JS-findIndex-method JS-findLastIndex-method JS-findLast-method JS-find-method JS-flatMap-method JS-flat-method JS-focus-method JS-forEach-method JS-freeze-method JS-fromAsync-method JS-fromCharCode-method JS-fromEntries-method JS-from-method JS-getAnimations-method JS-getAttribute-method JS-getAttributeNames-method JS-getAttributeNode-method JS-getAttributeNodeNS-method JS-getAttributeNS-method JS-getBoundingClientRect-method JS-getClientRects-method JS-getElementById-method JS-getElementsByClassName-method JS-getElementsByName-method JS-getElementsByTagName-method JS-getElementsByTagNameNS-method JS-getOwnPropertyDescriptor-method JS-getOwnPropertyDescriptors-method JS-getOwnPropertyNames-method JS-getOwnPropertySymbols-method JS-getPropertyOf-method JS-getSelection-method JS-group-method JS-groupToMap-method JS-hasAttribute-method JS-hasAttributeNS-method JS-hasAttributes-method JS-hasChildNodes-method JS-hasFocus-method JS-hasOwn-method JS-hasOwnProperty-method JS-hasPointerCapture-method JS-hasStorageAccess-method JS-importNode-method JS-includes-method JS-indexOf-method JS-insertAdjacentElement-method JS-insertAdjacentHTML-method JS-insertAdjacentText-method JS-insertBefore-method JS-isArray-method JS-isEqualNode-method JS-isExtensible-method JS-isFinite-method JS-isFrozen-method JS-isInteger-method JS-is-method JS-isNaN-method JS-isPrototypeOf-method JS-isSafeInteger-method JS-isSameNode-method JS-isSealed-method JS-join-method JS-keys-method JS-lastIndexOf-method JS-localeCompare-method JS-map-method JS-matches-method JS-match-method JS-mathmax-method JS-normalize-method JS-of-method JS-open-method JS-padEnd-method JS-padStart-method JS-parseFloat-method JS-parseInt-method JS-pop-method JS-prepend-method JS-preventExtensions-method JS-propertyIsEnumerable-method JS-push-method JS-querySelector-method JS-querySelectorAll-method JS-reduce-method JS-reduceRight-method JS-releasePointerCapture-method JS-removeAttribute-method JS-removeAttributeNode-method JS-removeAttributeNS-method JS-removeChild-method JS-removeEventListener-method JS-remove-method JS-repeat-method JS-replaceAll-method JS-replaceChild-method JS-replaceChildren-method JS-replace-method JS-replaceWith-method JS-requestFullscreen-method JS-requestPointerLock-method JS-requestStorageAccess-method JS-reverse-method JS-scrollBy-method JS-scrollIntoView-method JS-scroll-method JS-scrollTo-method JS-seal-method JS-search-method JS-setAttribute-method JS-setAttributeNode-method JS-setAttributeNodeNS-method JS-setAttributeNS-method JS-setPointerCapture-method JS-setPrototypeOf-method JS-shift-method JS-slice-method JS-some-method JS-sort-method JS-splice-method JS-split-method JS-startsWith-method JS-substring-method JS-substr-method JS-toExponential-method JS-toFixed-method JS-toggleAttribute-method JS-toLocaleLowerCase-method JS-toLocaleString-method JS-toLocaleUpperCase-method JS-toLowerCase-method JS-toPrecision-method JS-toReversed-method JS-toSorted-method JS-toSpliced-method JS-toString-method JS-toUpperCase-method JS-trimEnd-method JS-trim-method JS-trimStart-method JS-unshift-method JS-valueOf-method JS-values-method JS-with-method JS-writeIn-method JS-write-method

JavaScript techniques

JS-arrow functions JS-async functions JS-calculator JS-callback functions JS-collections JS-counter JS-destructuring JS-export to file JS-filter JS-generators JS-hoisting JS-invoke JS in iframe JS-lang picker-01 JS-lang picker-02 JS-lang picker-03 JS-menu JS-message box JS-multilanguage JSON-examples JS-OOP JS-querySelector JS-randomize JS-save to file JS-search methods JS-show-hide nav JS-show-hide JS-slider-trial JS-useful techniques JS-web components JS-webpage activity

PHP

PHP tutorials

PHP-01-basic PHP-02-data types PHP-03-conditionals PHP-04-functions PHP-05-forms PHP-06-date_time PHP-07-sessions PHP-08-arrays PHP-09-file handling PHP-10-network PHP-11-reg_expressions PHP-12-superglobals

PHP examples

PHP-examples-01 PHP-examples-02 PHP-examples-03 PHP-examples-04 PHP-examples-05 PHP-examples-06 PHP-examples-07 PHP-examples-08 PHP-examples-09 PHP-examples-10 PHP-examples-11

Node.js

Node.js tutorials

Node.js-01-basics Node.js-02-environment Node.js-03-REPL Node.js-04-npm package manager Node.js-05-Node.js events Node.js-06-HTTP server Node.js-07-file management Node.js-08-modules

Python

Python tutorials

Python-01-basics Python-02-data types Python-03-operators Python-04-lists Python-05-tuples Python-06-sets Python-07-dictionaries Python-08-conditionals Python-09-functions Python-10-classes_objects Python-11-scope_modules Python-12-JSON Python-13-PIP Python-14-file handling

Java

Java tutorials

Java-01-basics Java-02-variables Java-03-data types Java-04-operators Java-05-math Java-06-conditionals Java-07-arrays Java-08-methods Java-09-classes Java-10-class methods Java-11-packages Java-12-various Java-13-user input

Topics

animation/animatie/动画

animation-background animation-box-shadow animation-CSS_based animation-grid animation-header animation-JS_based animation-pre-loaders animation-rotate animation-shapes animation-text

CSS properties/CSS-eigenschappen/CSS 属性

conic gradient first letter line up things paint API positioning pseudo-classes scrolling selection

drawing/tekening/绘图

creating shapes draw animated shapes draw shapes svg using JavaScript using grid

flex-grid

flex-by-examples grid-by-examples-1 grid-by-examples-2 grid-by-examples-3 grid-by-examples-4 responsive grid

navigation/navigatie/导航

accordions navigation-1 navigation-2 navigation-3 navigation-4 navigation-5 navigation-6 tabs

optimization/optimalisering/优化

onload page settings optimize loading webpage optimization webpage protection-images webpage protection-text

photo gallery/fotogalerij/ 图片库

images carousels images sliders images thumbnails photo-gallery-1 photo-gallery-2 photo-gallery-3 photo-gallery-4 photo-gallery-5 photo-gallery-formats

pictures/foto's/圖片

images-downloading images-drag image images-effects images-enlarge pictures images-fine-tuning images-insert images-lightbox images-magnifying images-map images-overlay images-wheelzoom images-working with

queries/query's/查询

container queries media queries-01 media queries-02 media queries-03

screen modes/scherm modi/屏幕模式

modals-01 modals-02 modals-03 popup-01 popup-02 popup-03 screen-dark light mode full screen screen-light dark() function-1 prefers-color-scheme-1

text/tekst/文本

text-animation-effects text-styles text-styling write-to-file

time/tijd/时间

analog clock-1 analog clock-2 analog clock-3 analog clock-4 analog clock-5 digital clocks-01 digital clocks-02 local time multifunctional clock timing

Webpage foundations

webpagina fundamenten

网页基础

HTML (hypertext markup language)

HTML (hypertext markup taal)

HTML(超文本标记语言)

HTML tutorials

HTML leerprogrammas

HTML 教程

HTML attributes

HTML kenmerken

HTML 属性

HTML tags

HTML tags

HTML 标签

CSS (cascading style sheets)

CSS (trapsgewijze opmaakmodellen)

CSS (层叠样式表)

CSS tutorials

CSS leerprogrammas

CSS 教程

SCSS tutorials

SCSS leerprogrammas

SCSS 教程

CSS properties

CSS eigenschappen

CSS 属性

JavaScript

JavaScript

JavaScript

JS tutorials

JS leerprogrammas

JS 教程

JavaScript libraries

JavaScript bibliotheken

JavaScript 库

JavaScript methods

JavaScript methoden

JavaScript 方法

JavaScript techniques

JavaScript technieken

JavaScript 技術

PHP

PHP

PHP

PHP tutorials

PHP leerprogrammas

PHP 教程

PHP examples

PHP voorbeelden

PHP 例子

Node.js

Node.js

Node.js

Node.js tutorials

Node.js leerprogrammas

Node.js 教程

Python

Python

Python

Python tutorials

Python leerprogrammas

Python 教程

Java

Java

Java

Java tutorials

Java leerprogrammas

Java 教程

Topics

Onderwerpen

主题