Introduction to CSS - CSS tutorial from scratch for beginners

This is a scripting language which is mainly used for presentation of a webpages because it serves as the tools used for webpage beautification. Without it every webpage created with an HTML tags will appear very basic.

Cascading style sheet have three different method in which it can be used inside our webpages;

1.    INLINE CASCADING STYLE SHEET

      This is when we write the css code directly inside our html document with the Html tags of elements i.e both the Html and Css is in one document together such as this:

2. INTERNAL CASCADING STYLE SHEET

      This is the style of Css coding whereby, the Css code is been written within the Html document as well but not inline with the Html tags elements. Internal Css code is written inside the header tags of an html whereby we open style tags and close it as well. i.e <style> … </style>

                                                                                                                                         3.       EXTERNAL CASCADING STYLE SHEET

      This is the best form of written css coding in which the entire Css code is been written outside the Html document itself, we then reference it with link rel tag and inside the link rel again reference it the folder where you have save the CSS code to such like this ;

<link rel =”stylesheet” tyepe=”text/css” href=”css/basic.css”>.

The advantage of using external css code in our Html documents is that let say, I want to change the background of my webpage and am using external css, what I will just do is to change the background directly from the external file and all my pages will be affected and am done with that, ok we say am using internal or inline css, it will give me a lot of problem of going through all the pages which I have already created and also take a lot of time to do that.

This is the Html page :

     

This is the Css code for the above html document :

Cascading Style Sheet also have it own tags just like html tags and also use make of curly bracket {}, full colon : , semicolon ; and separate comma ,

Cascading Style Sheet make use of Id and Class selectors and both have their own way of using them;

ID selector: It use # sign to indicate that the attribute of the Id selector not a Class selector and the function of Id selector is that a particular  attribute is for meant for the indicated id name in the div tags of an Html document ;

      #sidebar{

               Background-color: green;

               Color : red;

               Font-size: 16px;

               Font-Family:sans-serif;

      }

Class selector: It use (.) sign to indicate that the attribute  class selector not an Id selector and the function of Class selector is that the  attribute is for meant for all indicated class name in the div tags of an Html document that bear the Class Name and often use where you want the same look for them all ;

      .sidebar{

               Background-color: green;

               Color : red;

               Font-size: 16px;

               Font-Family:sans-serif;

      }

What is HTML?

INTRODUCTION TO HTML:

 Firstly we need to ask ourselves WHAT IS HTML?

Html is the language used in creating a website you see when you surf the net. (note : it is not a programming language) it provides a way to structure the content for websites.

Full meaning of HTML

H   -  hyper

T   -  text

M -   mark

L   -   language

WHY LEARN HTML?

HTML is the foundation and structure of all web pages. For example our human body needs a  With HTML, you will be able to organize text or add images and videos to your web pages. It is the first thing you need to know to someday create beautiful web pages! …like i’ve done lol.

When using HTML you need a text-editor, well there are several out there to download for free but I make use of “Sublime Text 3” because its not heavy.

TAGs:<>

These are used to define how your web browser must format and display your content. A tag normally have an open tag ( <> ) and a close tag ( </> ).

 BASIC STRUCTURE OF A WEB PAGE

<html>-this is use to start the description of the web page.

<head>-This is use to enclose the header information that usually does not appear in the browser

<title>- This is use to specify what is display on title bar of the browser.

<body>- The text between <body> and </body> is displayed in the browser window.

CREATING YOUR FIRST WEB PAGE

Before starting writing your codes,it is advisable to create a folder on your desktop in which all the codes will be saved. The folder maybe named MyWebPages.

1.     Launch sublime text editor

2.     Type the basic structure of web page which is;

<html>

    <head>

        <title>My Page design</>

     </head>

     <body>

     I love doing what I do

     </body>

  </html>

                

this is an example

When you click on “Open in Browser” it will display like the image below;

now we getting some where…

Learning JavaScript made easy

                                        JAVA Script

JavaScript is a programming language of Html and its a scripting language. JavaScript doesn’t compile meaning it doesn’t translate to other languages before executing.It transpile.

JavaScript is language that function from the front end. It is non blocking meaning it doesn’t refresh.

                                       Variables (JavaScript)

In JavaScript, a variable contains a value, such as "hello" . When you use the variable, you refer to the data it represents.

e.g    var room =26;

          var name = “Stanley”

You use variables to store, retrieve, and manipulate values that appear in your code. Try to give your variables meaningful names to make it easy for other people to understand what your code does.

                                        Declaring Variables

The first time a variable appears in your script is its declaration. So you can refer to it later on in your script. You should declare variables before using them. You do this using Var keyword; see the example above.

                         Naming Variables

·        Do not give your variable a key word .

·        Variable must not contain spaces.

·        Can not start with  numbers but can end with numbers

          Eg   var 23long   ------à this is wrong

                      var long23  -------à this is correct.

·        Variable are case-sensitive.

·        You can use a dash or underscore  ( - or _ )at the beginning or at the middle of a variable.

       Eg             var  sta_nlo

                         var  _stanlo

·        You can name a variable using camelcase.

        Eg             var  firstName

Variables should not start with a Cpital letter but use camelcase instead.

                               VARIABLE DATA TYPES

1.     Number Data Type: this is divided into 2

Ø integer values

Ø floating-point values

                                            Integer Values

Integer values can be positive whole numbers, negative whole numbers, and 0. They can be represented in base 10 (decimal), base 16 (hexadecimal), and base 8 (octal). Most numbers in JavaScript are written in decimal.

                               Floating-point Values

Floating-point values can be whole numbers with a decimal portion. Additionally, they can be expressed in scientific notation. That is, an uppercase or lowercase "e" is used to represent "ten to the power of".

 A number that contains a decimal point and that has a single "0" before the decimal point is interpreted as a decimal floating-point number.

                                     String Data Type

You use the string data type to represent text in JavaScript. You include string literals in your scripts by enclosing them in single or double quotation marks. Double quotation marks can be contained in strings surrounded by single quotation marks, and single quotation marks can be contained in strings surrounded by double quotation marks. The following are examples of strings:

eg

"Happy am I; from care I'm free!" 

'"Atlast, I’m free!" roared the technician.'  

"45" 

'c'

         

                                         Boolean Data Type

Whereas the string and number data types can have a virtually unlimited number of different values, the Boolean data type can only have two. They are the literals true and false. A Boolean value is a truth-value: it specifies whether the condition is true or not.

                               JavaScript Operators

·         +     :addition

·         _     :subtraction

·         X    :multiplication

·         /      :division

·         <     :less than

·         >     :greater than

·         %  ( modulo):
                    This is used to check if a number is even [ this always get the remainder in calculation]   e.g 10%5= 0

·         <=   :less or equal to

·         >=    :greater or equal to

·         =   : this is used to assign a value from the right to your left

·         ==   :this mean equal to

·         ===   :this mean you tell computer to check if they are of the same type  (compare).

·         !=    :not equal.

·         !==   :not equal value or not equal type

                              Conditional Statements

These are statements used to perform different actions for different decisions.

They are as follow

IF Statement

ELSE Statement

ELSE IF  Statement

Operators in Javascript

According to javascript.com, Operators are the symbols between values that allow different operations like addition, subtraction, multiplication, and more.

There are ten operators in Javascript

+ (The Arithmetic operator)

- (The Subtraction operator)

= (The Assignment operator transfers values. In other words, it assigns the value on the right to the value on the left eg var room_number = 3; this means that this 3 has been assigned into that variable)

== (The “Equivalent to” operator)

=== (The Strict comparison. This means that it should not just check to know if it is equal but also to check if  they are of the same type)

% (Modulus. This checks when a number is even.)

> (The Greater Than operator)

< (The Lesser Than operator)

/ (Division Operator)

>= (The Greater or Equal operator)

<= (The Lesser or Equal operator)

Javascript statements are formed with operands and operators and this eventually resolves to a value.

These are javascript statements

1+2

(2*3) + (6*5)

x =62

The values in the statements are the operands while the symbols between the values are the operators.

To get the value of 1 + 2:

Assign a name to both operands. E.g. “Addition”

Then, document.write which runs the operation. If the operation is successful, it will appear on the webpage.

var addition = 1 + 2;

document.write (addition);

On your webpage, your answer will be displayed as '3'

Reading, Updating and Deleting data from a MySQL database using PHP

Updating and Deleting data from a MySQL database using PHP

In my previous article, i explained how to create and insert data into MySQL using php, you can check it out here!. Today, i'm going to show you how to read, update and delete data stored in this same db.

Reading Data

First, We create a database.php file. This file would set up the connection parameters required to connect us to our db.


<?php
//database.php

  //setting connection parameters
  CONST DBHOST = "localhost";
  CONST DBUSER = "root";
  CONST PASS = "";
  CONST DBNAME = "learning_insert";

  //setting up connection
  $conn = mysqli_connect(DBHOST, DBUSER, PASS, DBNAME);

  //echo error message if connection fails
  if(mysqli_connect_errno()){

    die('Failed to connect to db'.mysqli_connect_error().'('.mysqli_connect_errno().')');
  }else {
    echo "success";
  }

?>

Next, let us create a users.php file that displays all our users' data. Let's add the php codes below to that file
<?php
//users.php
  require "database.php"; //this connects us to our db through database.php
  $sql = "SELECT * FROM `user_info`";
  $res = $conn->query($sql);
  $users = $res->fetch_all(MYSQLI_ASSOC);
  print_r ($users);
?>
When you open the page on the browser, you'd see a nice looking array of all our users and their data.

We can beautify this array using some html <li> tags and a little php.

<?php
//user.php

  require "database.php"; //this connects us to our db through database.php
  
  $sql = "SELECT * FROM `user_info`"; //select everything in the table called user_info
  
  $res = $conn->query($sql); //perform the query
  
  $users = $res->fetch_all(MYSQLI_ASSOC); 
  //print_r ($users); commented out so the array of users won't show
?>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Our users</title>
  </head>
  <body>
    <h1>This is  our list of users</h1>
    <ul>
     <?php

      foreach ($users as $user) {
        $userf = $user['firstname'];
        $userl = $user['lastname'];

        echo "<li>".$userf." ".$userl."</li>";
      }
      ?>
    </ul>
  </body>
</html>

The foreach() function picks each user in $users one after the other and sets it to be $user. $users is a multidimensional array made up of all the data stored in the user_info table. $user is an associative array with key-value pair of the user_info table parameters and the corresponding content of that parameter. For example, the first call of $user would yield

$user['firstname'] = timo
$user['lastname'] = onyuike
$user['phonenumber'] = 9876543

Next we create two variables $userf and $userl and assign  $user['firstname'] and $user['lastname'] respectively to these variables. It is these variables that would be displayed on the users page.

Updating Data

Let's say we want to change a certain user's name from "timo" to "timoty", This is quite a trivial  process. Let's get started!

Create an update.php file and require database.php and create a $new_name variable as shown below:

?php

//update.php

   require "database.php";

   $new_name = "Timothy";

?>

Next, we add the sql query required to update the data. The syntax is usually like this:

UPDATE table_name SET parameters_to_change  =  new_value WHERE conditions_to_identify_targets.

Note that parameters_to_change and conditions_to_identify_targets can be more than one. 

Now, we add a query to our db file

<?php

  require "database.php";

  $new_name = "Timothy";

  $sql = "UPDATE `user_info` SET  firstname = '{$new_name}' WHERE firstname = 'timo' AND lastname = 'onyuike'";

 //query the db

if($update = mysqli_query($conn, $sql)) {

    //if succesful

    echo "profile updated successfully";

    header("location:users.php"); //redirect to users.php

   }else{

 echo mysqli_error($conn);

    }

?>

Deleting Data

Finally, let's delete some data from our db. Let's say we want to delete "Janet Grumpy" from our db, we'd create a delete.php file and add the following codes to it.

<?php

  require 'database.php';

  $sql = "DELETE FROM `user_info` WHERE  firstname = 'Janet' AND lastname = 'Grumpy'";

  if($update = $conn ->query($sql)){

    header("location: users.php ");

  }else{

echo "Deleting failed";

}

?>

That's all.

We have successfully read, updated and deleted data in a MySQL database using PHP.