Bootstrap Framework – Free Download

The Bootstrap framework is one of the most popular libraries for developing MOBILE-FIRST, responsive web pages. Using the Bootstrap framework is the quickest way to get away from the old-school default look of web pages, and into a modern look.

Bootstrap has many navigation and widget components that give a visually pleasing design. A big advantage of knowing how to use Bootstrap is that it greatly reduces much of the CSS3 customization needed to develop a responsive web page.

Free Download for CSS3 Bootstrap Framework

Download Bootstrap for free, and take a look. It’s a very big file – 6,800 lines. There are many html tags, and ways to format them. Bootstrap does much of the heavy lifting for you.

 

 

CSS3 Responsive Styling – Simple Examples

CSS3 responsive styling means the web page changes the way it looks depending on the size of the browser or screen size.

Let’s look at a simple example of how to make a site responsive.

Here is some HTML5 text for a simple web page:


<html>
++<head>
++++<link rel="stylesheet" href="styles.css">
++</head>
++<body>
++++This is the body text.
++</body>
</html>

Using CSS3 responsive styling we can make the background green:


body {
++background:green;
}

Now, this is not the most practical example, but what if you only want a green background on browsers at least 1000px wide?


@media (min-width: 1000px) {
++body {
++++background:green;
++}
}

 

This is one way to test an aspect of the browser. You can Google CSS3 media queries to find out many other browser tests you can do with CSS3.

For now, you can change the background color to red, or blue. You can change the minimum width to 500px, or whatever you like. Play with your browser width and see how it responds.

Get Fancy with CSS3 Responsive Styling

Suppose you want two columns on a wide window, but only one column to display on a narrow window.

Setup the HTML5 first:


<html>
++<head>
++++<link rel="stylesheet" href="styles.css">
++</head>
++<body>
++++<div class="responsive">
++++++column 1
++++</div>
++++<div class=”responsive”>
++++++column 2
++++</div>
++</body>
</html>

 

Now we need to connect CSS3 properties to the ‘responsive‘ class.


@media (min-width: 750px) {
++.responsive {
++++display: inline-block;
++++width: 200px;
++++border: 1px solid black;
++}
}
@media (min-width: 1000px) {
++.responsive {
++++display: inline-block;
++++width: 500px;
++++border: 1px solid black;
++}
}

css3-responsive
Responsive design means content will adapt to the shape of the screen.

With the code above you set the column width at 200px if your browser is at least 750px wide, and you set the column width to 500px if your browser is at least 1000px wide. If the browser is not at least 750px, then the columns will be stacked on one another, so it’s effectively one column. See a CSS3 example of this responsive styling.

The responsive Bootstrap layout makes CSS3 responsive styling easy. Bootstrap is a library full of pre-defined CSS3 classes. This makes designing sites fast for developers, because they don’t have to write custom code. The drawback could be that because so many people are using Bootstrap, this creates a similarity in look among Bootstrap sites. Creating unique CSS3 responsive classes can help set your site apart.

CSS3 Format Examples to Change Layout

CSS3 format commands control the display of fonts, links, colors, etc. Use the “class” construct to format the layout of tags you label with a particular class.

Name a class anything you like, and there can be multiple classes. For example, an HTML5 <p> tag can have class named indent.

<p class="indent">This is a paragraph</p>

 

Then make a CSS3 format command that indents every tag of the class indent.

.indent  {

margin-left: 10px;

}

 

Span the CSS3 Format

Use the </span> tag to limit indentation to only the first line. Simply wrap the first word of a paragraph in the <span> tag.

<p><span class="indent">This </span>is a paragraph</p>

 

Add Margins to the CSS3 Format

.gap_below {

margin-bottom: 25px;

}

 

Then add the “gap_below” class to the desired HTML tag.

<p class="gap_below"><span class="indent">This </span>is a paragraph</p>

 

Special Constructors for CSS3 Format

Dynamic changes to the style when a user hovers over an element is a powerful, attention grabbing effect. Filter this effect by first selecting a “class”, and then select a “constructor”.  The hover constructor is often used.

.orange_link:hover {

color: orange;
background: gray

}

 

 

CSS3 Tricks to Exaggerate Your Links

Use CSS3 tricks to exaggerate your links. While HTML5 has basic defaults that make your links noticeable, CSS3 can be used to make them grab the user’s attention.

Remeber that your HTML5 links are shown in the <a> tags. Use the following CSS3 to change all the link color, and remove the underline:

a {
++++color:  red;
++++text-decoration:  none;
}

 

Tray an effect that will pop-out and grab the user’s attention. The CSS3 hover “selector” styles a link when a user hovers over it.

a:hover {
++++color: white;
++++background: red;
}

 

Visit this CSS3 link styling site for many more examples. Please share this page if it was useful. Thanks!

 

Cascading Style Sheet Language CSS3

A Basic Introduction

Cascading Style Sheet language CSS3 is a companion language to HTML5. While HTML controls the content of a webpage, an externally linked CSS file controls how the content is displayed.

CSS3 is the latest version of CSS. It is used in companion with HTML5.

Change Background with Cascading Style Sheet Language CSS3

To change the background color of a <body> tag, for example,  the code is:

body { background: blue; }

 

CSS files are typically saved with a name like “styles.css“.

Connect Cascading Style Sheet Language CSS3 to HTML5

 

In order for stylings to be seen on a page, the CSS file must be meta-linked to the HTML file to apply the stylings. The code to link the file should be placed in inside the <head> tags.


<!DOCTYPE html>
<html lang="en">

<head>

<title>Page Title</title>

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

</head>

<body>

</body>
</html>

 

The above code example creates a meta-link. The href attribute must point to the correct name and path of the CSS file. It is common practice to keep CSS files in a folder named “css“.

One of the key features of CSS3 is that only one file is needed per web application. Once you link that style sheet to all the desired HTML pages, then all those pages will be changed according to the CSS3 commands.

Change Text Color with Cascading Style Sheet Language CSS3

Another simple command is changing the text color of the body.


body {
background: blue;
color: green;
}

 

Sufficient practice with CSS3 commands will allow any designer take control of how content is displayed.

Python Reserved Words to Know

This post is as a reference for Python reserved words.

Python reserved words have special meaning, and must only be used in regard to their special meaning. They include:

and not as
global assert del
while elif or
else from with
if pass break
import class raise
continue return def
lambda yield except
print exec finally
for try in
is

You must not use these words as variables, because they already have a special command meaning for Python.

Python understands these commands like a trained dog understands “sit”. So again, you must not use Python reserved words as variables.

Program with Python Reserved Words

You can use one of these Python reserved words to write your first Python program.

print 'Hello World!'

 

This, of course, is the classic ‘Hello World!’ program, written in Python.

Computer Hardware Architecture Basics

Before learning how to program computers, take a moment to understand the computer hardware architecture basics.

The Central Processing Unit

The CPU can execute commands extremely fast. The catch is, it has to be told what to do, or it won’t do anything.

The Main Memory

The main memory stores information that the CPU can retrieve extremely fast. Anything stored here will vanish when the computer is turned off.

The Secondary Memory

This stores memory but it is very slow. We need it because it can store memory even without power. Examples of this are a hard drive, USB stick, or disk drives.

The Network

The network can serve as remote secondary memory, because information is stored over the network that you can retrieve.

The Input and Output Devices

This could be a mouse, keyboard, monitor, speaker, joystick, etc. You use these to interact with your computer.

Properly Edit HTML5 – How To

To properly edit HTML5, every page of content should be wrapped with the <html> tag and the <body> tag.

This next bit is kind of tricky, but you should also include a <header> tag between your <html> and <body> tag. Within the header you should put a <title> tag. This contains meta-data about your web page, and is an important part of SEO. The title will not display on your page, but it should display on your browser tab. It is common for <title> and <h1> tags to contain the same text.

Below is a picture from a text editor to show you a properly edited basic page.

basic HTML5

HTML5 Makes Your Page Respond To Different Screen Sizes

Visit some random web pages and play with size of your browser window. Alternatively, view the pages on a desktop and then a smart-phone. Does the page respond to different screen sizes? If it does then you can assume that it was edited in HTML5.

Now take a moment to view the source code of the world’s first web page. You can view the source code and the HTML that was written. Using Google Chrome to view source code you click on ‘Tools’ and select ‘Developer Tools’. Notice that the HTML is a bit different from HTML5. That’s because HTML is a living language that constantly evolves. HTML5 simply represents a point when the W3C decided to mark it as the latest standard for HTML editing.

 

Must Know HTML5 Tags

You should become familiar with must know HTML5 tags that appear on almost every page.

If you want to put an image on your page then you will need to use the <img> tag with a src attribute. The source attribute contains the URL for your image.

For an example you can go to Google Images. Be sure to click on ‘Search Tools’ and ‘Labeled for Reuse’ so you do not violate any copyrights. Search for an image you like, right-click on it, and select ‘Save Image URL’.

Example of HTML5 <img> Tag

Here is an example of how to edit your HTML5 tag to display a standard Google image.

<img src=”https://encrypted-tbn2.gstatic.com/imagesq=tbn:ANd9GcSdW68P3DrocDWRhCvvr_SrKUyffhspfjGUqlHo03NbOlEbBi9w” />

 

Note that the image tag is self-contained. It does not have a separate </img> closing tag.

Example of HTML5 <img> Tag with Size Percentage Attribute

Here is an image of some bananas, with the width adjusted to 50%:

<img src=”https://encrypted-tbn3.gstatic.com/imagesq=tbn:ANd9GcTq9pG5b4c2fo2EIV044MAChiwDCYt4ReShWJg0cqwrQGu7xFlNzA” width=”50%” />

 

Notice that you can use a percentage for adjusting the width. This is a nice feature to give your site a responsive quality.

Example of HTML5 <a> Tag Wrapped Over <img> Tag

You can also make the image a link itself. You can do this if you want to direct a user to another URL by clicking on the image.

The following is an example of how to edit your code so the image of bananas links to an article about bananas.

<a href=”http://healthyeating.sfgate.com/health-benefits-one-banana-day-3316.html”>
++++<img src=”https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTq9pG5b4c2fo2EIV044MAChiwDCYt4ReShWJg0cqwrQGu7xFlNzA” width=”50%” />
</a>

 

As you can see, you simply put the <img> tag inside the <a> tag. Wrapping tags inside tags is a common practice with HTML5 editing, and it can go several layers deep. However, it is not permitted to overlap tags.

For example, the series of tags <p> <h2> </p> </h2> is not allowed. You can probably see by now why overlapping tags does not make sense.

Example of Using HTML5 Smaller Header Tag

You can make a smaller heading as follows:

<h3>This is a smaller heading. Use it where you want a small heading.</h3>

 

Example of HTML5 List Tags

You can also creat a numbered list, or as the tag suggests, an ordered list as follows:

<h4>Top Three Rock Guitar Players</h4>
++++<ol>
++++++++<li>Jimi Hendrix</li>
++++++++<li>Jimmy Page</li>
++++++++<li>Eddie Van Halen</li>
++++</ol>

 

You can also do an un-ordered list that shows bullet points.

<h4>Random Prime Numbers</h4>
++++<ul>
++++++++<li>1973</li>
++++++++<li>677</li>
++++++++<li>3</li>
++++</ul>

 

Lists can add a nice dynamic to your page content. You can practice making lists at this free and interactive HTML Lists Tutorial at W3 Schools.

 

There are no universal rules on how to use indentations, but you should try to edit it so that it’s easy to read. Your eyes will thank you later. Writing clean code could also help you land a job.