CSS Tutorial: How to create a responsive navigation bar for your website

In this tutorial, we are going to look at how to use Bootstrap to create your own responsive website.

What is a Responsive Website?

First off, what is a responsive site? Simply stated, a responsive website is one that adapts to the device used to view the site. The layout of the site changes so as to reduce the amount of resizing, panning, and scrolling needed, in order to provide an easy reading and navigation experience.

This site learncodingfast.com is an example of a responsive site.

If you view the site on a laptop, this is what you would see. The menu bar is on top with four menu items: HOME, ABOUT, PYTHON TUTORIAL and CSS TUTORIAL. The sidebar for my email subscription form is on the right.

responsivewebsitelaptop

However, if you view the site on your mobile phone, you will see a different layout. The top menu bar has collapsed into a single button with three horizontal lines. Clicking on the button will show you the layout below. If you scroll down, you’ll notice that the sidebar has also been pushed down.

responsivewebsitemobile

As you can see, a responsive website makes for a more pleasant reading experience on a mobile device as it reduces the need to do any horizontal scrolling.

These days, it is important to make your website mobile-friendly as more and more people are surfing the net on their mobile phones. The good news is that it is pretty easy to code a responsive site. In the past, companies had to develop separate versions of their websites for desktop and mobile devices. This is no longer the case with the introduction of Bootstrap.

Bootstrap

So what is Bootstrap?

Bootstrap (also known as Twitter Bootstrap as it was developed by Twitter) is a hugely popular framework that you can use as a basis to create your own website. It contains pre-defined HTML and CSS components that you can use to build your own website. With Bootstrap, you do not need to code every single line of CSS and HTML yourself. All you have to do is know the names of the different classes in Bootstrap and include them in your own code. For instance, if you want to create a navigation bar that collapses into a single button when the screen size is reduced, you can use Bootstrap’s navbar-collapse class and data-toggle and data-target attributes by adding them to your HTML code.

In addition, you can also modify Bootstrap’s CSS rules if you want to make changes to the design.

Sounds abstract? Don’t worry. The two videos below by Coder’s Guide will give you an idea of how Bootstrap works. The first video gives you an introduction to Bootstrap and the second video shows how you can create a responsive navigation bar using Bootstrap.

It’s pretty cool…. Oh, and did I mention that Bootstrap is FREE? Yes, it is!!! You can download Bootstrap here.

You can download the source code in the video here. http://pastebin.com/raw.php?i=a515nrBg

Updates to Bootstrap 3

Note that the videos were created in 2013 and a recent update to Bootstrap 3 requires that you wrap the nav-brand and your responsive drop down button in a div with a class of navbar-header.

In other words, add the line <div class="navbar-header"> just before <a class="navbar-brand" href="#">Tech Site</a> and close the div by adding </div> just after </button>.

Javascript and jQuery

Another thing to point out is that Javascript and jQuery are needed for the responsive navigation bar to work. Do not worry if you don’t know Javascript or jQuery. You do not need to do any Javascript coding yourself.

The video mentioned importing jQuery from a CDN. CDN stands for Content Delivery Network and is kind of like an online library that stores source code and other Web content. The jQuery file that you need can be downloaded from this library. The other JS file needed can be found in the downloaded Bootstrap folder.

Here are the two lines in the HTML code that are responsible for linking to the two JS files needed.

<script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src = "js/bootstrap.js"></script>

 

Ok, that’s all for today’s tutorial. I hope you have found it useful.

Have fun ‘bootstrapping’!

 

Python Tutorial: How to write a simple encryption/decryption program

Fancy sending a secret note to your friends/secret lover/spouse? In this Python tutorial, we are going to go through a simple program that allows you to do just that. Before we start, this tutorial assumes you have knowledge of the concepts covered in my book Python: Learn Python in One Day and Learn It Well.

Specifically, you need to know:

  1. How to use the range() function to read a string
  2. How to accept user input and print output to the screen
  3. How to manipulate strings (e.g. Concatenate two strings)
  4. How to use the while and if statements

Before we start coding our program, we have to first briefly explain what Unicode is, as this concept forms a major component in our encryption/decryption program.

Simply stated, Unicode is a computing industry standard for the consistent encoding, representation, and handling of text. Fundamentally, computers can only deal with numbers. Hence, in order for them to interpret letters like ‘A’ or characters like ‘@’, these letters and characters have to be translated into numbers.

Unicode is the standard used for such translation. Every character in every language has a unique Unicode code point assigned to it. For instance, the letter ‘A’ has Unicode U+0041.

This code is then further encoded into binary numbers before it is stored in the computer. The most commonly used encoding is UTF-8. The UTF-8 representation for ‘A’ is the number 65.

Do not worry if you do not quite grasp the concept of Unicode or UTF encoding. For the purpose of this tutorial, all you have to know is that letters and characters are mapped into integers (numbers with no decimal parts) before being stored in the computer.

Python provides 2 built-in functions for us to change letters and characters into Unicode representations and vice versa. The first function ord() converts a character into an integer representing the Unicode of that character. The second function chr() does the reverse. Hence, ord('A') will give us 65 while chr(65) will return the character ‘A’.

Equipped with this basic knowledge of Unicode, we are now ready to write our ‘Enigma machine’.

The full code is:

result = ''
message = ''
choice = ''

while choice != '-1':
    choice = input("\nDo you want to encrypt or decrypt the message?\nEnter 1 to Encrypt, 2 to Decrypt, -1 to Exit Program: ")

    if choice == '1':
        message = input("\nEnter the message to encrypt: ")

        for i in range(0, len(message)):
            result = result + chr(ord(message[i]) - 2)

        print (result + '\n\n')
        result = ''

    elif choice == '2':
        message = input("\nEnter the message to decrypt: ")

        for i in range(0, len(message)):
            result = result + chr(ord(message[i]) + 2)

        print (result + '\n\n')
        result = ''

    elif choice != '-1':
        print ("You have entered an invalid choice. Please try again.\n\n")

Dissecting the Code

First, let’s declare three variables result, message and choice and assign them the empty string.

result = ''
message = ''
choice = ''

Next, on line 5 and 6, we use the while-loop to repeatedly prompt users to select whether they want to encrypt or decrypt the message. Alternatively, they can enter ‘-1’ to exit the program.

while choice != '-1':
    choice = input("\nDo you want to encrypt or decrypt the message?\nEnter 1 to Encrypt, 2 to Decrypt, -1 to Exit Program: ")

Next, we’ll use a if-statement to determine what to do based on the value of choice.

    if choice == '1':
        message = input("\nEnter the message to encrypt: ")

        for i in range(0, len(message)):
            result = result + chr(ord(message[i]) - 2)

        print (result + '\n\n')
        result = ''

If choice is 1 (line 8), we’ll ask them to enter the message to encrypt.

We then loop through the message character-by-character using the range() function on line 11.

On line 12, we use ord(message[i]) to get the numerical representation of the character and subtract two from that number. For instance, if the character is ‘D’, ord(message[i]) will return 68. When we subtract 2, we’ll get 66, which is the numerical representation for ‘B’. We then convert 66 to ‘B’ using the chr() function.

Finally, we concatenate the resulting character ‘B’ to the string variable result.

The table below shows how this works in greater detail. Suppose we start off with the string ‘Python’. Here’s what happens as the program loops through the word ‘Python’ to get the resulting encrypted message ‘Nwrfml’:

Python Tutorial: Encrypting and Decrypting a Message

Finally, after encrypting the message, the next two lines (14 an 15) print the string result and reset the result variable back to an empty string.

That’s it. That’s how we can write a simple encryption program. The next few lines (17 to 24) does the reverse and decrypts our message by adding 2 to the numerical representation of our message.

    elif choice == '2':
        message = input("\nEnter the message to decrypt: ")

        for i in range(0, len(message)):
            result = result + chr(ord(message[i]) + 2)

        print (result + '\n\n')
        result = ''

    elif choice != '-1':
        print ("You have entered an invalid choice. Please try again.\n\n")

Finally, the last two lines (26 and 27) inform our users that they have entered an invalid choice if they entered a number other than 1, 2 or -1.

Note that on line 26 we don’t have to write if choice != '1' and choice != '2' and choice != '-1' although we can if we prefer. This is because the very fact that the program reached line 26 means the user did not enter 1 or 2. Else, the program would have executed either lines 5 to 15 or 17 to 24.

That’s all for today’s tutorial. I hope it has been useful to you. You can download the source code here. Do leave a comment if you have any questions or feedback. If you enjoyed the post, please help by sharing it.

Have fun coding and talk again soon!