HTML, CSS, JS & Co.

Ever wanted to write and maintain your own web page but were lost in translation? Let me briefly introduce you to how it works and what you need to consider. Basically, there are three points to think of:

1. Domain

Get a domain and register it: (world wide web).your-domain.(top-level domain). Mine is: ericroth.org whereas .org is my chosen top level domain in the domain name system. To such a hosted domain, you then upload your website content. This content, you first write in a combination of the following:

2. Your side

For basics, you’ll need to learn a bit about the code languages HTML to define the content of web pages, CSS to specify the layout of web pages and JavaScript to program the behavior of web pages. Try and play around in these popular sandboxes: Codepen and Jsfiddle.

HTML & CSS
  • With HTML (5 currently being the latest evolution) you can create your own Web site.
  • CSS (3 currently being the latest evolution) is a language that describes the style of an HTML document. CSS describes how HTML elements should be displayed.
  • W3.CSS is a modern CSS framework with built-in responsiveness:
    • Smaller and faster than other CSS frameworks.
    • Uses standard CSS only (No jQuery or JavaScript library).
    • Speeds up and simplifies web development.
    • Supports modern responsive design (mobile first) by default.
    • Provides CSS equality for all browsers. Chrome, Firefox, IE, Safari, and more.
    • Provides CSS equality for all devices. PC, laptop, tablet, and mobile.
JavaScript
  • JavaScript (JS) is the programming language of HTML and the Web.
  • jQuery is a JavaScript Library. jQuery greatly simplifies JavaScript programming.
  • AngularJS extends HTML with new attributes. AngularJS is perfect for Single Page Applications (SPAs).
  • JSON (JavaScript Object Notation) is a syntax for storing and exchanging data, it is text, written with JavaScript object notation.
  • With AJAX (the search fields in this site are AJAX driven; no need to hit enter), you can:
    • Read data from a web server – after the page has loaded.
    • Update a web page without reloading the page.
    • Send data to a web server – in the background.
  • W3.JS is a modern JavaScript library for modern HTML applications:
    • Smaller and faster than other JavaScript libraries.
    • Designed to speed up application development.
    • Designed for all devices: PC, tablet, and mobile.
  • AppML stands for Application Modeling Language. AppML runs in any HTML page. No installation is required. AppML is a tool for bringing data to HTML applications:
    • From objects
    • From files
    • From databases

3. Server side

  • SQL is a standard language for storing, manipulating and retrieving data in databases.
  • PHP is a server scripting language, and a powerful tool for making dynamic and interactive Web pages.
  • ASP stands for Active Server Pages. ASP is a development framework for building web pages.
  • Node.js is an open source server framework. Node.js allows you to run JavaScript on the server.

Some Samples

Get here some samples as used in this site. You can see the codes as well as the live performance of these snippets.

Page Loader Image

You get the animated zooming-out image on page load with the code below:

add_action( 'wp_footer', function() { ?>

<div class="loader"></div>

	<style>
.loader {position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 99; background-image: url('PATH TO YOUR IMAGE'); opacity: 0.5; background-position: 50% 50%; background-size: contain; background-repeat: no-repeat; -webkit-animation: scale-out-rotate 2.5s both; animation: scale-out-rotate 2.5s both;}
@-webkit-keyframes scale-out-rotate {0% {-webkit-transform: scale(1) rotate(0deg);} 100% {-webkit-transform: scale(0) rotate(360deg);}}
@keyframes scale-out-rotate {0% {-webkit-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg);} 100% {-webkit-transform: scale(0) rotate(360deg); transform: scale(0) rotate(360deg);}}
	</style>

	<script>
jQuery(document).ready(function ($) {

/*Preload images*/
var myimages=new Array()
function preloadimages(){
for (i=0;i<preloadimages.arguments.length;i++){
myimages[i]=new Image()
myimages[i].src=preloadimages.arguments[i]
}}
preloadimages('PATH TO YOUR IMAGE')

$(window).load(function() {
    $(".loader").fadeOut("slow");
    });

});
	</script>
<?php });

(Summaries) Number Counter

You get what you see on the frontpage with the codes below:

ericroth.org - Here, I am. Mind's unleashed. Not yet unf*ckwithable but inexorably attending the School of Life. Continue Reading
<div class="number-counter">
<div class="number-counter-content">
<div class="card-counter-black">
<div class="row-counter">

<div class="column-counter"><div class="card-counter" id="multimedia-card">
<span class="dashicons dashicons-playlist-audio" style="font-size: 200%; margin-left: -0.25em; margin-bottom: 0.5em;"></span><br>
<span style="font-size: 125%"><a href="SOME_URL"><span id="counter" class="counter-value" data-count="250">0</span>+ Media</a></span><br>
<small><em>Multimedia</em></small>
</div></div>

</div>
</div>
</div>
</div>
add_action( 'wp_footer', function() { ?>

	<style>
.row-counter {margin: 0 -2.5px;}
.row-counter:after {content: ""; display: table; clear: both;}
.column-counter {float: left; width: 20%; padding: 5px 5px 5px 5px;}
.card-counter {padding: 15px 0px 15px 0px; text-align: center; color: #f2f2f2;}
.card-counter-black #multimedia-card {background: rgba(0,0,0,0.65)}
.card-counter-black #multimedia-card:hover {background: rgba(0,0,0,0.75)}
	</style>

	<script>
jQuery(document).ready(function ($) {

var a = 0;
$(window).scroll(function() {

  var oTop = $('#counter').offset().top - window.innerHeight;
  if (a == 0 && $(window).scrollTop() > oTop) {
    $('.counter-value').each(function() {
      var $this = $(this),
        countTo = $this.attr('data-count');
      $({
        countNum: $this.text()
      }).animate({
          countNum: countTo
        },
        {
          duration: 15000,
          easing: 'linear',
          step: function() {
            $this.text(Math.floor(this.countNum));
          },
          complete: function() {
            $this.text(this.countNum);
            //alert('finished');
          }
        });
    });
    a = 1;
  }
});

});
	</script>

<?php }});

Scroll Indicator / Progress Bar

You get what you see at the very bottom of all pages with this code:

add_action( 'wp_footer', function() { ?>

<div class="progress-container"></div>
<div class="progress-bar" id="myBar"></div>

<style>
	.progress-container {width: 100%;}
	.progress-bar {width: 0%; position: fixed; overflow: hidden; bottom: 0; height: 5px; background: #dd3333; z-index: 99999;}
</style>

<script>
window.onscroll = function() {scrollIndicator()};
	function scrollIndicator() {
	var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
	var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
	var scrolled = (winScroll / height) * 100;
document.getElementById("myBar").style.width = scrolled + "%";
}
</script>

<?php });

Count-Up / -Down Timer

You get what you see in the footer on every page with this code:

add_action( 'wp_footer', function() { ?>

<style>
	.countuptimer {padding-top: 25px; margin-bottom: -5px;}
	.units-style-up {font-weight: bold; color: #bfbfbf;}
	.seconds-style-up {font-size: 125%; color: #dd3333; vertical-align: -0.10em;}
</style>

<script>
// Set the date to count up from
	var countUpDateSiteLaunch = new Date("Jul 1, 2017 12:00:00").getTime();

// Update the count up every 1 second
	var x = setInterval(function() {

// Get today's date and time
	var now = new Date().getTime();

// Distance between now and the count up date
	var distance = now - countUpDateSiteLaunch;

// Time calculations
	var years = Math.floor(distance / (1000 * 60 * 60 * 24 * 7 * 4.33 * 12));
	var months = Math.floor((distance % (1000 * 60 * 60 * 24 * 7 * 4.33 * 12)) / (1000 * 60 * 60 * 24 * 7 * 4.33));
	var weeks = Math.floor((distance % (1000 * 60 * 60 * 24 * 7 * 4.33)) / (1000 * 60 * 60 * 24 * 7));
	var days = Math.floor((distance % (1000 * 60 * 60 * 24 * 7)) / (1000 * 60 * 60 * 24));
	var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
	var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
	var seconds = Math.floor((distance % (1000 * 60)) / 1000);

// Output the result in element with ID
	document.getElementById("countuptimer").innerHTML = "<span class='units-style-up'>" + years + "</span>" + "y " + "<span class='units-style-up'>" + months + "</span>" + "m " + "<span class='units-style-up'>" + weeks + "</span>" + "w " + "<span class='units-style-up'>" + days + "</span>" + "d " + "<span class='units-style-up'>" + hours + "</span>" + "h " + "<span class='units-style-up'>" + minutes + "</span>" + "m " + "<span class='units-style-up seconds-style-up'>" + seconds + "</span>" + "s ";

}, 1000);
</script>

<?php });

And here’s the code for the opposite, the Count-Down Timer:

add_action( 'wp_footer', function() { ?>

<style>
	.countdowntimer {padding-top: 25px; margin-bottom: -5px;}
	.units-style-down {font-weight: bold;}
	.seconds-style-down {color: #dd3333;}
</style>

<script>
// Set the date to count up to
	var countDownDate = new Date("Oct 31, 2031 17:00:00").getTime();

// Update the count up every 1 second
	var x = setInterval(function() {

// Get today's date and time
	var now = new Date().getTime();

// Distance between now and the count up date
	var distance = countDownDate - now;

// Time calculations
	var years = Math.floor(distance / (1000 * 60 * 60 * 24 * 7 * 4.33 * 12));
	var months = Math.floor((distance % (1000 * 60 * 60 * 24 * 7 * 4.33 * 12)) / (1000 * 60 * 60 * 24 * 7 * 4.33));
	var weeks = Math.floor((distance % (1000 * 60 * 60 * 24 * 7 * 4.33)) / (1000 * 60 * 60 * 24 * 7));
	var days = Math.floor((distance % (1000 * 60 * 60 * 24 * 7)) / (1000 * 60 * 60 * 24));
	var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
	var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
	var seconds = Math.floor((distance % (1000 * 60)) / 1000);

// Output the result in element with ID
	document.getElementById("countdowntimer").innerHTML = "<span class='units-style-down'>" + years + "</span>" + "y " + "<span class='units-style-down'>" + months + "</span>" + "m " + "<span class='units-style-down'>" + weeks + "</span>" + "w " + "<span class='units-style-down'>" + days + "</span>" + "d " + "<span class='units-style-down'>" + hours + "</span>" + "h " + "<span class='units-style-down'>" + minutes + "</span>" + "m " + "<span class='units-style-down seconds-style-down'>" + seconds + "</span>" + "s";

}, 1000);
</script>

<?php }});

World Population Counter

You get what you see in the following project with the codes below:

World Population - The capacity of our environment to provide space and supply energy (incl. food) is limited. Continue Reading
<div style="text-align: center; font-size: 200%; font-weight: bold; color: #800000;">
<span id="worldpopulation"></span>
</div>
add_action( 'wp_footer', function() { ?>
	<script>

function maind(){
	startdate = new Date()
	now(startdate.getYear(),startdate.getMonth(),startdate.getDate(),startdate.getHours(),startdate.getMinutes(),startdate.getSeconds())
}
function ChangeValue(number,pv){
	numberstring =""
	var j=0 
	var i=0
	while (number > 1)
	 { 
	    numberstring = (Math.round(number-0.5) % 10) + numberstring
	    number= number / 10
	    j++
	    if (number > 1 && j==3) { 
			numberstring = "," + numberstring 
			j=0}
	    i++
	 }
	 numberstring=numberstring
if (pv==1) {document.getElementById("worldpopulation").innerHTML=numberstring }
}
function now(year,month,date,hours,minutes,seconds){
	startdatum = new Date(year,month,date,hours,minutes,seconds)
	var now = 5600000000.0
	var now2 = 5690000000.0
	var groeipercentage = (now2 - now) / now *100
	var groeiperseconde = (now * (groeipercentage/100))/365.0/24.0/60.0/60.0 
	nu = new Date ()
	schuldstartdatum = new Date (96,1,1)
	secondenoppagina = (nu.getTime() - startdatum.getTime())/1000
	totaleschuld= (nu.getTime() - schuldstartdatum.getTime())/1000*groeiperseconde + now
	ChangeValue(totaleschuld,1);
	timerID = setTimeout("now(startdatum.getYear(),startdatum.getMonth(),startdatum.getDate(),startdatum.getHours(),startdatum.getMinutes(),startdatum.getSeconds())",200)
}
window.onload=maind

	</script>
<?php }});

Side Nav Buttons & Logo

You get what you see in the bottom-left corner with the code below:

add_action( 'wp_footer', function() { ?>

	<style>
/*Hoverable sidenav buttons with top menu links*/
.mySidenavContainer {position: fixed; z-index: 999; bottom: calc(100vh - 86%);}
.mySidenav a {position: absolute; left: -120px; width: 155px; padding: 8px 10px 8px 10px; transition: 0.3s; text-align: right; text-decoration: none; background-color: rgba(0, 0, 0, 0.85); color: white !important; border-radius: 0 10px 10px 0;}
.mySidenav a:hover {left: 0;}

/*Eric Roth logo with link to Home | Start Over*/
.SOME-CLASS {position: fixed; z-index: 999; bottom: 20px; left: 15px; cursor: pointer; width: 75px; height: 75px; transition: -webkit-transform 1s; transition: transform 1s;}
.SOME-CLASS:hover {-webkit-transform: rotate(360deg); transform: rotate(360deg);}
	</style>

	<script>
jQuery(document).ready(function ($) {

var $mySidenavContainer = $('<div class="mySidenavContainer"><div class="mySidenav" style="height: 40px;"><a href="https://SOME-URL/" title="TITLE">TEXT<span class="dashicons dashicons-admin-users" style="color: #009900; margin-left: 10px; padding-top: 1px;"></span></a></div><div class="mySidenav" style="height: 40px;"><a href="https://SOME-URL/" title="TITLE">TEXT<span class="dashicons dashicons-businessman" style="color: #ff3300; margin-left: 10px; padding-top: 1px;"></span></a></div>');

var $SOME_VARIABLE = $('<div class="SOME-CLASS"><a href="https://SOME-URL/" title="TITLE"><img src="PATH TO YOUR IMAGE" alt="ALT TEXT" style="border-radius: 50%" /></a></div>');

// inject the buttons (only if certain screen size)
if (matchMedia('only screen and (min-width: 768px)').matches) {
$mySidenavContainer.appendTo('body');
$SOME_VARIABLE.appendTo('body');
}

// fadein and fadeout on mousemove or touchmove
$(document).on("mousemove touchmove", function(){
   $(".mySidenavContainer, .SOME-CLASS").stop().show().css('opacity',1).animate({opacity: 0}, 5000);
 });

});
	</script>

<?php }});

Keep it simple & safe

This site got hacked & spammed all over and yet, I haven’t gone phishing… Learn more about all the threats out there

To ease your life, you may opt for one of the web-hosting services featuring a drag-and-drop website builder. They also include the hosting of your domain and website. Do some search – there are plenty of them around and most of them are free of charge up to a certain limit of features.

If you wanted to do the writing by yourself though, you may choose one of these templates to get started with and adapt them to your own need and taste. Here again, you host by yourself or have it hosted with an appropriate service.

Once live: Testing

Make sure your website works the way it should or at least you want it to. Here are some very useful online testing tools for your perusal:

Valid CSS! I have put this site to the tests and it validates meaning that I have taken the care to create an interoperable web site. → W3C

My Interests

My cares, concerns and hobbies certainly consist of traveling, discovering and global politics next to notably all the 58 Projects, you’ll find in My Interests.

Discover some matters of substance!

Multimedia

Besides my digital bookshelf, you’ll also find my fav movies, YT music channel and tracks from all over this site in Multimedia.

Categories
Eric Roth

The Latest

Before You GoSubscribe To The Latest

Sign up for alerts by e-mail whenever a new entry is posted. Enter your e-mail address below and hit the button to receive notifications of new stuff delivered to your inbox.

WYSIWYG – Once you subscribe, you will get news & updates about content of this website. Get a random taste of current content to learn what to expect: Stay Tuned and catch RSS & Atom Feeds

Eric Roth

Eric Roth

Contact

Personal

Professional

Eric Roth

Eric Roth

Contact

Personal

Professional