#Technetronic2015 (Official Guinness World Record Attempt)

Technetronic is an annual IT focused event initiated by a group of young, upcoming IT undergraduates and professionals with the purpose of improving the standard of technology in the Nation Nigeria. Technetronic 2015's main goal is to initiate advancement in the growth of computing technology and the development of software developers in Nigeria.

Technetronic 2015 will take place at the New Multipurpose Hall, Yaba College of Technology, Yaba Lagos on Thursday the 3rd of December 2015. The event will comprise of various activities which includes a Guinness World Record Attempt for The Largest Amount of People Learning How to Write Computer Programs in the World, and the first edition of the Internet and Technology Awards Nigeria.

The Largest Programming Lesson World Record Attempt, simply will be bringing together over 2500 IT oriented individuals and citizens who are passionate about technology; enlightening them on the basics and concepts of instructing electronics and computer devices, orientate them on the need for computer specialists in our fast rising ICT enabled society and highlight the importance of acquiring computing knowledge in present day Nigeria. Participants will be given a run through on how to write web programming languages such as PHP in a live practical session in attempt for the World’s Largest Programming Lesson which happens be the first technological record attempt in Nigeria involving large amount of participants, and also the biggest ICT event in 2015.

Also featuring on Technetronic 2015 agenda is The Internet and Technology Awards; the major aim of this award is to commend the continuous, never ending efforts of individuals and organizations in Nigeria’s technology industry whom have tirelessly continued to deliver quality technological services and related products. The awards boasts of categories such as hashtag of the year, university portal of the year, Internet service provider of the year, and over 47 other innovative technology and internet oriented categories.

The Organization Zinospot Ng has claimed that innovative events such as Technetronic 2015 will task developers and tech-service provider in the nation to improve the quality of services they provide, as well as create a platform to promote the nation's technology industry beyond the walls of Africa. They further encourage all individuals interested in a forward moving technology industry to partake in the events, tasking the governing bodies, organizations and institutions to emulate the National Association of Computer Science Students YABATECH Chapter, Smile Nigeria,Onsele.com, Bellanaija.com, Naijaloaded.com.ng, Olodonation.com and other notable organization and bodies involved in the project to invest in projects such as these as it is one way to tackle unemployment, promote the growth of technology in the nation and empower the youth’s in Nigeria.

Individuals and organizations who are interested in the event can visit the Technetronic 2015 website at www.technetronic.ml, call 07055069014, 08134831118, email admin@technetronic.ml for registration, enquires and sponsorship. Registration is free.

CSS3: Filters

The filter property gives You the power to manipulate image view by adding blur, changing brightness, saturation, contrast, opacity ans so on. 

We'll gonna introduce You the most important and usable of them.

NOTE: The CSS3 filter property requires vendor prefixes for some of the browsers.

-webkit-filter: blur(3px); // chrome and safari

-moz-filter: blur(3px); // mozilla and gecko

-o-filter: blur(3px); // opera

-ms-filter: blur(3px); // IE

filter: blur(3px); // for old browser versions

Syntax:

filter: function( value );

Example:

filter: blur( 3px );

We'll gonna discover 8 filter function:

blur()

This function make an image or any element blurry.

filter: blur(3px);

contrast()
This function allows You to change the contrast.
Default value is 1. If its higher than 1, the contrast will be higher and if its lower then 1, lower contrast.

filter: contrast(1.5);

brightness()
Using this function You can change the brightness.
The value is same as contrast().

filter: brightness(0.4);

grayscale()
With this You can make black and white images, with other words Grey images.
Max value is 100%. Change the value to see the effect.

filter: grayscale(100%);

opacity()
Opacity can change easily the transparency of an image or any element.
Value is also in percentes. 100% is absolutely visible, 0% is absolutely transparent.

filter: opacity(50%);

sepia()
Convert Your image to sepia.
Value is in percents. Max is 100%. Minimum 0%.

filter: sepia(100%);

saturate()
This function saturates the image.
Default value is 100% and its unchanged. Higher and lower value makes the changes.

filter: saturate(220%);

invert()
Inverts the samples in the input image.
Value of 100% is absolutely inverted, and value of 0% is unchanged.

filter: invert(100%);

EXAMPLE CODE:

<html>
<head>
<style>
#lee_hyori {
width: 580px;
height: 370px;
-webkit-filter: sepia(100%);
-moz-filter: sepia(100%);
-o-filter: sepia(100%);
-ms-filter: sepia(100%);
filter: sepia(100%);
}
</style>
</head>
<body>

<img id="lee_hyori" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtn0lGNpIoG7LYb2RYQ0Nn3w47mdUfSnkqZ82mfn5WJlv-gDIsSJMCL7VN8Cny2pmutjagmZtVIObPWSFSl2pAr1g12gdrW1LrLkE7hq6LGrhD5UVI6MHblQj7tc4vUN_tz91-H99uQqCN/s1600/lee-hyori-3106-1920x1200.jpg"/>

</body>
</html>

Blur Effect : CSS

Now and here we'll gonna discover how to create blurred images and element. 

The below example shows You how to to make an image to look blurry.

To do that we use the filter property.

filter: blur(3px);

Two words and 1 value.

The value can  be any number followed by "px".

To make it cross-browser we simply use vendor prefixes.

-webkit-filter: blur(3px);

-moz-filter: blur(3px);

-o-filter: blur(3px);

-ms-filter: blur(3px);

filter: blur(3px);

Example code:

<html>
<head>
<style>
.lee_hyori {
width: 580px;
height: 370px;

-webkit-filter: blur(3px);

-moz-filter: blur(3px);

-o-filter: blur(3px);

-ms-filter: blur(3px);

filter: blur(3px);

}
</style>
</head>
<body>

<img class="lee_hyori" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtn0lGNpIoG7LYb2RYQ0Nn3w47mdUfSnkqZ82mfn5WJlv-gDIsSJMCL7VN8Cny2pmutjagmZtVIObPWSFSl2pAr1g12gdrW1LrLkE7hq6LGrhD5UVI6MHblQj7tc4vUN_tz91-H99uQqCN/s1600/lee-hyori-3106-1920x1200.jpg"/>

</body>
</html>


You can use this for everything from images to forms, paragraphs and so on.

Change the styles of the selected area usign CSS

This tutorial demonstrates how to use the ::selection selector, which allows you to set different font and background color for the marked area. The default is black fonr color and blue background. Now let us show You how to change that.

First we simply call the ::selection selector.

::selection {
// You can add only 2 properties : color, background 
}

NOTE:
The ::selection selector is not supported in Internet Explorer 8 and earlier versions.

Firefox support the ::selection selector, but the -moz- vendor prefix is required.( ::-moz-selection )


EXAMPLE:

<html>
<head>
<title>::selection selector</title>
<style>

::selection {
color: #fff;
background: #000;
}

::-moz-selection {
color: #fff;
background: #000;
}

</style>
</head>
<body>

<p>This is a simple example.</p>
<p>Shows you how to use ::selection.</p>
<p>You can change the color.</p>
<p>Also the background.</p>
<p>Enjoy with our Tips & Tricks every day.</p>

</body>
</html>


DEMO cannot be added because it will effect to the other elements of the page.

Vertical and Horizontal Center Alignment of Element(CSS)

    Vertical and Horizontal Center Alignment of Element(CSS)

This is for those who knows CSS.

As you know you can set specific element in the center of it's parent using "margin: auto;".

Using CSS position property.
With this property you can set your element without affecting the others.
Im going to show you how to set the element in the center verticaly and horizontaly. To do that you need to use also the margin: auto; property.
We simply add :

margin: auto;
position: absolute;

• if we want to set it centered horizontaly we do that:

margin: auto;
position: absolute;
left: 0;
right: 0;

Now when you resize the page it wil be always at the center.

• You can also set vertical center alignment by doing this :

margin: auto;
position: absolute;
top: 0;
bottom: 0;

• Or set centered alignment for horizonal and vertical :

margin: auto;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;

Now no matter what you resize, the heigth or the width of the page the element will be always at the center of the page.

EXAMPLE:

<html>
<head>
<title></title>
<style>
.myDiv {
width: 300px;
height: 230px;
background: red;
margin: auto;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
</style>
</head>
<body>
<div class="myDiv"></div>
</body>
</html>



#easilylearnhtml

Change the cursor image of the mouse

           Change the cursor of the mouse

This tutorial demonstrates how we can change the cursor image for our elements with just one line of code.

The syntax is very easy:

cursor: url(URL to image);

but if you want it to work fine, in addition you have to add auto after this :

cursor: url(URL to image), auto;

Example:

<html>
<head>
<title>I am changing my cursor image</title>
<style>

#block {
width: 400px;
height: 240px;
background: #333;
cursor: url(Cursor-icon.png), auto;
}

</style>
</head>
<body>
<div id="block"></div>
</body>
</html>


LIVE DEMO:

We are accepting question here and in our facebook page. 

Pure JavaScript Live Form Validation(Non styled)

This is a perfect example for cool and responsive popup Sign Up/In form.
All you need to do is to add the HTML, CSS and Javascript to your page and add some styles.

You should pass the code here :

EXAMPLE:

<html>
<head>
<title>Form Validation</title>
<style>
// Here paste the CSS CODE
</style>
</head>
<body>
// Here paste the HTML CODE

<script>
// Here paste the JAVASCRIPT CODE
</script>
</body>
</html>





****HTML CODE****

<div class="form">
<form action="http://www.easilylearnhtml.blogspot.com" method="get" class="form">
Username: <input type="text" class="user" />
<br />
Password: <input type="password" class="pass" />
<br />
Email: <input type="text" class="email" />
<br />
<input type="submit" class="submit" />
</form>
</div>


****CSS CODE****

body {
margin: 0;
padding: 0;
}
.user, .pass, .email {
border: 1px solid #BFBFBF;
}


****JAVASCRIPT CODE****

function addEventHandler(evtTarget, evt, fnction, bubl) {
if (addEventListener) {
evtTarget.addEventListener(evt, fnction, bubl);
} else if (attachEvent) {
evtTarget.attachEvent("on" + evt, fnction);
}
} // cross-browser event handler


// Real time for validation

function autoFormValidation(form, patt) {

addEventHandler(form, "input", function(e) {
var pattern = patt;
var target = e.target.value;
var check = pattern.test(target);
if (!check) {
e.target.style.border = "3px solid red";
} else {
   e.target.style.border = "3px solid green";
}
}, false);

addEventHandler(form, "input", function(e) {
if (e.target.value == 0) {
e.target.style.border = "1px solid #BFBFBF";
}
}, false);
}

// checks if the fields are filled correct

addEventHandler(document.querySelector(".form"), "submit", function(e) {
if (document.querySelector(".user").value == 0 || document.querySelector(".pass").value == 0 ||
document.querySelector(".email").value == 0) {
e.preventDefault();
alert("Some of the forms arent filled");
}

if (document.querySelector(".user").style.border == "3px solid red" ||
document.querySelector(".pass").style.border == "3px solid red" ||
document.querySelector(".email").style.border == "3px solid red" ) {
e.preventDefault();
alert("Edit the red fields...");
}
}, false);




autoFormValidation(document.querySelector(".user"), /^\w{4,}$/); // username input
autoFormValidation(document.querySelector(".pass"), /^\w{6,}$/); // password input
autoFormValidation(document.querySelector(".email"), /^[a-zA-z0-9_]{4,}[@]{1}[a-z]{2,}\.{1}[a-z]{2,}$/); //email input


LIVE DEMO:

Username:
Password:
Email: