Menu

Results for category "Web Development"

5 Articles

Bootstrap

After installing Bootstrap you can quickly get started! Bootstrap uses a 12-column responsive layout placed inside a container.


Here is an example that shows the 12-column responsive grid clearly:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    
    <style type="text/css">
      div { border:1px solid grey; }
    </style>
  </head>
  <body>
    <!-- bootstrap -->
    <div class="container">
      <div class="row">
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
      </div><!-- /row -->
    
      <div class="row">
        <div class="col-md-8">.col-md-8</div>
        <div class="col-md-4">.col-md-4</div>
      </div><!-- /row -->
    
      <div class="row">
        <div class="col-md-4">.col-md-4</div>
        <div class="col-md-4">.col-md-4</div>
        <div class="col-md-4">.col-md-4</div>
      </div><!-- /row -->
    
      <div class="row">
        <div class="col-md-6">.col-md-6</div>
        <div class="col-md-6">.col-md-6</div>
      </div><!-- /row -->
      
      <div class="row">
        <div class="col-md-8 col-md-offset-2">.col-md-8 .col-md-offset-2
          <h1>h1. Bootstrap heading <small>Secondary text</small></h1>
          <h2>h2. Bootstrap heading <small>Secondary text</small> <span class="label label-info">New</span></h2>
          <h3>h3. Bootstrap heading <small>Secondary text</small></h3>
          <h4>h4. Bootstrap heading <small>Secondary text</small></h4>
          <h5>h5. Bootstrap heading <small>Secondary text</small></h5>
          <h6>h6. Bootstrap heading <small>Secondary text</small></h6>
          <p class="lead">This is some lead text.</p>
          <p class="text-center bg-primary">This is a <em><mark>standard</mark> centered <strong>bg-primary</strong></em> paragraph.</p>
        </div><!-- /col-md-8 .col-md-offset-2 -->
      </div><!-- /row -->
      
    </div><!-- /container -->
  
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Responsive Web Design

Responsive Web Design is a technique/technology that involves using fluid, proportional grids and CSS3 media queries. It is relatively easy to implement if you are starting from scratch. It’s a little more difficult to add to existing sites because of it’s use of containers. If you want to get started with a Responsive Web Design here are a few simple steps you can follow:

1) Add a viewport meta tag in the head:

<meta name="viewport" content="width=device-width, initial-scale=1">

2) Add a “breakpoint” in your CSS:

@media screen and (max-width: 767px) {
  /* smaller than 1024x768 for example */
  CSS { ... }
}

3) Define your custom CSS.

4) Repeat steps 2 & 3.


Here is an example that uses two elements with widths of 50% (a maximum of 390px each due to the containing element and padding) which stack on top of each other when the screen width is smaller than 768px:

<!DOCTYPE html><html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style type="text/css">
    body { 
      margin:0;
      padding:0;
    }
    .container {
      margin:auto;
      max-width:800px;
    }
    .grey { 
      background-color:#ccc;
      color:#fff;
      padding:20px;
    }
    .section { 
      box-sizing:border-box; 
      float:left;
      padding:5px;
      width:50%;
    }
    @media screen and (max-width: 767px) {
      .section { width:100%; }
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="section">
      <div class="grey">
        Section 1: Some content.
      </div>
    </div>
  </div>
  <div class="container">
    <div class="section">
      <div class="grey">
        Section 2: Some more content.
      </div>
    </div>
  </div>
</body>
</html>

mousemove event (jQuery)

Here is a little script that allows an element with the id “follow” to follow the mouse cursor:

$(document).mousemove(function(){
  // Displays the mouse x and y coordinates inside #mouseposition.
  $("#mouseposition").html("x:"+event.pageX+", y:"+event.pageY+"."); 
  // #follow must have absolute positioning.
  $("#follow").css("left", event.pageX);
  $("#follow").css("top", event.pageY);
});

Email form processing via PHP

Here is a PHP script that sends an email from an HTML form (submitted via POST):

<?php
/*
 *
 * email form processor
 * form contains: email, subject, message.
 * email is sent from php@php.net.
 *
 */
  $email=$_POST["email"];
  $subject=$_POST["subject"];
  $message="email sent from ip address: "
  . $_SERVER["REMOTE_ADDR"]
  . "\nmessage: " 
  . $_POST["message"];
  $from="php@php.net";

  mail($email, $subject, $message, "From:".$from);
?>

Hello world!

I have set up this WordPress site while learning Web Development. I have a PHP redirect in the root (/) folder of my site. It looks like this:

<?php
  header("Location: http://www.poneet.com/wordpress");
?>