Tag: css3

Posted on by — Leave a comment

Adding Javascript To About Me Page

[callaction url=”https://www.youtube.com/user/JPlaya01″ background_color=”#333333″ text_color=”#ffffff” button_text=”Go Now” button_background_color=”#e64429″]Subscribe To My Youtube Page[/callaction]

Making About Me Interactive

If you have been following this series thus far then you should have an About Me page that looks similar to the following:

About Me Page Pre Javascript
About Me page before javascript implementation

So far we have added the HTML, integrated Bootstrap and added some custom CSS. This blog will serve as an introduction to Javascript. Javascript is the programmig language of the web. HTML defines the content, CSS defines the layout, Javascript defines the behavior. In this tutorial I will introduce you to the high level concepts of Javascript with fine tuned examples later to come.

Random Color Generator

To get you started on the basics of Javascript I will take you through creating a random color generator that will change the background color. This process will require adding a new button to the HTML as well as a new tag <script>. It will also involve an external script that contains the logic for changing the color. Below your phone number add the following HTML

<button id="color-change" class="btn btn-default">Change Background Color</button>

Nothing special the javascript will use this button later. Now create a new folder, call it js/ and inside create a new file called main.js. Inside this newly created file add the following contents.

window.onload = function(){
  document.getElementById('color-change').onclick = function(){
    /* In HTML colors are represented in a 6-digit hexadecimal string
    The values range from 0-9 and A-F*/
    var letters = '0123456789ABCDEF';
    //Colors in HTML are always prepended with a #
    var color = '#';
    //Loop 6 times and randomly select a character from the letters variable
    //Then concatanate to the color string
    for (var i = 0; i < 6; i++ ) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    //set the background color of <body> to the random color
    document.body.style.backgroundColor = color;
  };
};

I’m going to break this down top to bottom:

  • window.onload – The window object represents an open window in a browser, onload is a javascript event that runs the specified function once everything on the page loads.
  • function() – A JavaScript function is a block of code designed to perform a particular task.
  • document.getElementById(‘color-change’)- get the button we just created based on it’s ID
  • .onclick = function(){ – onClick is a Javascript event that fires when an element is *WAIT FOR IT…..* CLICKED!
  • var letters = ‘0123456789ABCDEF’; – a variable called letters that holds all the possible values for a HTML color string
  • var color = ‘#’; – In HTML color strings always start with # followed by 6 characters. Here we initialize a color string.
  • for (var i = 0; i < 6; i++ ) { – A Javascript loop that runs 6 times and evaluates everything between {}
  • color += letters[Math.floor(Math.random() * 16)]; – Remember that color string and letters string? Here we add (concatenate) onto
    the color string and select a random character from the letters string
  • document.body.style.backgroundColor = color; – Set the background color of <body> to the newly generated color.

Your page should look similar to this:

About Me Page Newly Added Button
About Me Page Newly Added Button

If you click the button your background should change to a random color like so:
About Me Page Random Color
About Me Page Random Color

Conclusion

I know it isn’t terribly fancy but you just wrote your first web app! It’s not that difficult is it?! Continuing forth I will add more advanced features to teach more in-depth skills. If you haven’t already please subscribe to my blog via email and feel free to leave any comments below!

Posted on by — Leave a comment

Styling Our About Me Page With CSS

[callaction url=”https://www.youtube.com/user/JPlaya01″ background_color=”#333333″ text_color=”#ffffff” button_text=”Go Now” button_background_color=”#e64429″]Subscribe To My Youtube Page[/callaction]

Cascading Style Sheets

Cascading Style Sheets or CSS is the language that describes how HTML documents are displayed. In other words it is the language that styles the web. It is the 2nd cornerstone of web development, with the 3rd being javascript. Like with all my tutorials I will give you a brief introduction to the language and teach you the innerworks bit by bit over various demos.

Our Current Situation

If you have been following along then you should have a basic about me page built. Here is mine:

<!DOCTYPE html>
<html>
<head>
<title>About Jyrone Parker</title>
</head>
<body>
<h1>Hi I Am Jyrone Parker</h1>
<img src="https://en.gravatar.com/userimage/70717632/53adbdecac04d4ffbe3449993c901a73.jpg?size=200"/>
<audio loop autoplay>
<source src="http://freesound.org/data/previews/353/353234_3162775-lq.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<p> I am CEO and lead engineer at J Computer Solutions LLC, a consultancy that places software and DevOps engineers at companies in need.
<div itemscope itemtype="http://schema.org/LocalBusiness">
<h1 itemprop="name">Contact Me</h1>
Phone: <span itemprop="telephone">
<a href="tel:+18594024863"> 859-402-4863</a>
</span>
</div>
</p>
</body>
</html>

As it stands currently this page is UGLY! I’m going to import a CSS framework to start off with. A framework basically is a bunch a code that boilerplates stuff for you, so you can focus more on the core of what you are trying to accomplish. My framework of choice is Bootstrap the way you add CSS code to your HTML markup is via the <link> tag. In the head of your document add the following:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

This will load the latest bootstrap css into your webpage. Notice the href does not have to be a remote address. If you have a folder called css/ and downloaded the bootstrap code you can call it like href=”css/bootstrap.css”.

Prepping The HTML

Before we do any styling we need to add a few <meta> tags to the top of the <head> section for Bootstrap to work properly. Please add  the following right below the <head> tag:


<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

Elements, IDs & Classes

CSS can interact with the HTML document via elements, ids, and classes. An Element is a tag such as <body> or <h1>. An id points to one specific tag on an HTML document and ONLY one such as <title id=”about-me-page-title”>. A class applies a style to every element with that class AND everything in between that element such as


<div class="cool-section">
<p id="cool-paragraph">
Some text goes here
</p>
</div>

In this example both <div> AND  <p> have the class “cool-section” applied to it because <p> is a child of <div>; However <p> has addition styling that <div> does not because of its id.
 

Creating main.css

I know I said we would be using Bootstrap to do our styling, but I want to make one addition to the background color of the body. Create a folder called css and in that folder create a folder called main.css. In a CSS file the syntax is as follows


element{
property:value;
}

or


#id{
property:value;
}
.class{
property:value;
}

Since I want to change the body element and I want to change the background color to this nice gray I like I put in the following rule:<pre><code class=”language-css”>


body{
background-color: #667;
}

If you are wondering how #667 = gray, it’s because HTML uses hexadecimal for color, here is a good reference if you need it http://www.w3schools.com/colors/colors_picker.asp. Save the file and right below the Bootstrap link place this link

<link rel="stylesheet" href="css/main.css">

Navigation Bar

One of the bootstrap components is the nav bar. HTML5 added a <nav> tag that defines a set of navigation links for your document. Copying the example snippet from the Bootstrap website and removed what wasn’t needed.


<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Jyrone Parker</a>
</div>
</div><!-- /.container-fluid -->
</nav>

Ignore all of the data- attributes right now that’s javascript related, but notice all of the classes in this section these are pre-defined Bootstrap styles. I suggest getting familiar with the documentation. Add this nav bar right below your opening <body> tag refresh your page and notice the changes.
 

Styling Content

The first thing I want to do is make my content a fixed width, this will give it a consistent look across devices. To do this I will wrap all my content (minus nav) in a div with class container. I also want everything in this div to stand out. Luckily Bootstrap has a class for content you want to stand out it’s called jumbotron. Lastly we want all text to be centered, Bootstrap provides a text-center defintion.
<div class=”container jumbotron text-center”>
//previous code
</div>
The finishing touch will be preformed on our profile picture. Bootstrap offers some img classes to help us. On the <img> tag add the following classes:


<img class="img img-rounded" src="https://en.gravatar.com/userimage/70717632/53adbdecac04d4ffbe3449993c901a73.jpg?size=200"/>

Now save and refresh the page, notice how much better it looks? In case you missed anything here is what my page markup looks like:

<!DOCTYPE html>
<html>
<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>About Jyrone Parker</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="css/main.css">
</head>
<body id="">
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Jyrone Parker</a>
    </div>
  </div><!-- /.container-fluid -->
</nav>
<div class="container">
	<div class="jumbotron text-center">
<h1>Hi I Am Jyrone Parker</h1>
<img class="img img-rounded" src="https://en.gravatar.com/userimage/70717632/53adbdecac04d4ffbe3449993c901a73.jpg?size=200"/>
<audio loop autoplay>
<source src="http://freesound.org/data/previews/353/353234_3162775-lq.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<p>
I am CEO and lead engineer at J Computer Solutions LLC, a consultancy that places software and DevOps engineers at companies in need.
<div itemscope itemtype="http://schema.org/LocalBusiness">
	<h1 itemprop="name">Contact Me</h1>
		Phone: <span itemprop="telephone"><a href="tel:+18594024863">
859-402-4863</a></span>
</div>
</div>
</p>
</div>
</body>
</html>

You can also see my latest code on Github. Next we are going to add some interactiveness with some javascript!! If you haven’t already please subscribe to my blog via email to get notifications on when I post. If you have any questions please leave them in the comments!d