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 topics, and trials I created. And in September 2021, the overhaul was due to the many available trials, projects, topics, and tutorials.

A new way of publishing these trials was necessary. Files and coding topics 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 topics 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 topics, 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)-1 Document object model (DOM)-2 HTML basics CSS basics JavaScript basics Web components-1 Web components-2 Webpage design Back-end programming

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-details element HTML-15-SVG HTML-16-SVG elements-01 HTML-17-SVG elements-02 HTML-18-SVG elements-03 HTML-19-SVG-path 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-grid CSS-11-subgrid CSS-12-flexbox CSS-13-@ rules 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-positioning CSS-28-houdini CSS-29-media queries CSS-30-container queries CSS-31-transitions CSS-32-language settings

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-get_set element-text JS-26-classes JS-27-asynchronous JS-28-decorators JS-29-search webpage JS-30-JS libraries JS-31-web storage

JS-HTML properties

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-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-menu JS-message box JS-multilanguage JSON-examples JS-OOP JS-parent-child 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

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

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 topics

PHP-topics-01 PHP-topics-02 PHP-topics-03 PHP-topics-04 PHP-topics-05 PHP-topics-06 PHP-topics-07 PHP-topics-08 PHP-topics-09 PHP-topics-10 PHP-topics-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 Node.js-09-watermarking

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/动画

01-background animation 02-box-shadow animation 03-CSS_based animation 04-grid animation 05-header animation 06-JS_based animation 07-pre-loaders 08-rotation 09-shapes 10-text animation

CSS applications/CSS toepasingen/CSS 应用

01-first letter 02-line up things 03-paint API 04-positioning 05-scrolling 06-selection

drawing/tekening/绘图

creating shapes draw animated shapes draw shapes 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 navigation-7a navigation-7b tabs

optimization/optimalisering/优化

onload page settings optimize loading techniques 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/圖片

01-download images 02-image manipulation 03-filter images 04-responsive images 05-insert media 06-use JavaScript on images 07-overlay images 08-magnify images 09-images map 10-images effects 11-images watermarking

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 popup-04 screen-dark light mode screen-full screen screen-light dark() function-1 screen-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-1 digital clocks-2 multifunctional clock time settings

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 教程

JS-HTML properties

JS HTML eigenschappen

JS HTML 性能

JavaScript methods

JavaScript methoden

JavaScript 方法

JavaScript techniques

JavaScript technieken

JavaScript 技術

JavaScript libraries

JavaScript bibliotheken

JavaScript 库

PHP

PHP

PHP

PHP tutorials

PHP leerprogrammas

PHP 教程

PHP topics

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

主题