(watch this video in a new tab or window)
I can't teach you everything there is to know about anything when it comes to the land of computing. The web didn't even exist when I went to college. I know, I'm old. You'll be old some day too and your kids will say, you used to do what? Fill in the blank.
Anyway, there are certain things that you'll do over and over, like using the bold tag or a paragraph tag. There are many things that you'll only do once in a while. That's OK. That's where Google searching comes in. Knowing some key words and learning how to spot what you're looking for quickly is the trick. It's a great skill to have. For example, if you want to make your font a different color, try a search for 'css font color'. If you want to build a table, try 'html table'. Stack Overflow is a great resource for answers. I'm sure other's will pop up too as time goes on.
It can be pretty difficult trouble-shooting your own code problems. Think that's hard? Try trouble-shooting someone else's. There are many ways to do things, even many right ways. So if you're having trouble with your code and your peer or even your professor don't know the answer right away, don't be surprised. The best thing to do is to work in baby steps. Change one thing at a time and test it. That way it's much easier to trouble-shoot the problem.
Another thing to keep in mind is not to bang your head against a wall for a long period of time with a problem. I usually give myself a 5 minute internet search if I don't know how to do something. If I still don't have the answer, I look to my peers for help. It's amazing how quickly you'll find the answer if you just give yourself different options.
(watch this video in a new tab or window)
Let's dive into some cascading style sheets. These are examples from an external style sheet. Add something like this to your HTML to include an external style sheet:
<!doctype html>
<html lang='en'>
<head>
<link rel='icon' type='image/png' href='favicon.png'>
<link href='minimal_style.css' media='screen' rel='stylesheet' type='text/css'/>
<title>201810 IMS222</title>
</head>
The minimal_style.css has the css in it. The first code that we'll look at is a ul which is an unnumbered list. Codes here need squiggly brackets around them, then the styling is inside the squiggly brackets. Each style type is listed on the left followed by a color and the style is on the right followed by a semi colon.
Here we're setting the ul which is an unnumbered list to display.
ul {
list-style: display;
}
Here we're setting the li which is a list item to have a left margin of 2 em.
li {
margin-left: 2em;
}
Here we're setting the nav which is navigation or menu system to be 100% wide, go to the left, have a shadow, a background color, some padding, and align the text. Look at some additional CSS just to get a feel for what it looks like.
nav {
width: 100%;
float: left;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
background-color: #212121;
padding-left:2em;
padding-right:2em;
text-align: center;
}
nav ul {
list-style-type: none;
}
nav li {
width: 20%;
text-align: center;
float: left;
margin-left: 0px;
}
nav a {
background-color: #212121;
padding: 14px 32px;
display: block;
text-decoration: none;
text-align: center;
color: #eee;
}
nav a:hover {
background-color: #192A75;
}
b {
font-family: source_sans_probold;
color: #676767;
}
h1, h2, h3, h4, h5 {
font-family: source_sans_probold;
color: #192A75;
}
h1 {
font-size: 2em;
line-height: 1.15em;
margin: 60px 0px 2px 0px;
}
h2 {
font-size: 1.25em;
line-height: 1.15em;
margin: 10px 0px 2px 0px;
}
h3 {
font-size: 1.01em;
line-height: 1.01em;
margin: 5px 0px 2px 0px;
}
h4, h5 {
font-size: 1.00em;
line-height: 1.00em;
margin: 5px 0px 2px 0px;
}
p {
line-height: 1.45em;
margin-bottom: 20px;
}
section {
margin: 80px auto 40px;
max-width: 1070px;
position: relative;
padding: 20px
}
(watch this video in a new tab or window)
Cascading Style Sheets got their name because they cascade like water. The style furthest away can get changed by one that's closer. There are 3 different ways of styling. External, Internal, and Inline styling. An external style sheet is a separate document with just CSS in it. You call it whatever you want, and then reference it in your HTML. In the example here, I call it: Kirks_External_Style_Sheet.css
<link href='Kirks_External_Style_Sheet.css' media='screen' rel='stylesheet' type='text/css'/>
An internal style sheet is at the top of a web page. It's inside style tags like this:
<style>
summary::-webkit-details-marker {
color: #80C16F;
font-size: 125%;
margin-right: 2px;
}
</style>
Inline styling looks like this:
<p style='margin:3em;'>Blah, blah, blah</p>
The order is external to internal to inline. So if you have styling for a paragraph <p> in all 3 documents, the internal styling will win. It's important to note that the cascading piece only over-writes things that are the same. If you set a color in the external style sheet and don't change the color but set other things in the internal or inline style sheet, the color will still be what you set it as in the external style sheet.
(watch this video in a new tab or window)
The important thing to know about fonts on the web, is that they are a little different than fonts on your computer. If you set a font up on the web, and I don't have that font, the site is not going to look the way you want it to look for me. The two most popular ways to do fonts on the web are Google fonts and TypeKit. Google fonts can be found at https://fonts.google.com/. You embed the font by using something like:
TypeKit is an Adobe option and since I'm not a huge Adobe fan, I'll leave you to figure that one out yourself.
I'm also not a huge fan of embedding fonts because you're relying on someone else's server being up and running for your site to work. That just adds a layer of complexity to your code that may be unnecessary. Try not to go crazy with fonts. 1 or 2 on a web page is plenty.
(watch this video in a new tab or window)
Like fonts? Be original. Make your own font. MyScriptFont (at http://www.myscriptfont.com/) is a web site that allows you create a font from your handwriting. Then to convert the font to a web font use the Generator in FontSquirrel (at https://www.fontsquirrel.com/). Give it a shot, it's fun.
(watch this video in a new tab or window)
For Web Page 03, I'm going to duplicate Web Page 02, and the rename the new document Web Page 03. Then download Kirk's Bingo Board Generator. Reload the page to see the numbers change. Kirk's Bingo Board Generator creates multiple bingo boards with random number configurations. Next, view the source code, select all, copy; edit Web Page 03, select all, paste. That will overwrite text in Web Page 03 with the source code copied from the generator. Next replace my name with yours. Also, find and replace the upside down characters with nothing. Move the doctype line to line number 1. Next, look up Coolors Color Scheme generator to find colors to use for your page (for your spacer and called classes). Start the Generator. Use the space bar to change the color scheme. Copy/paste your selected scheme into your web page. Make sure you have good contrast between your colors and background-colors. Save your page and view it. I also closed some of the windows that I didn't need any longer.
To test out how to play bingo together, try to do a find and replace of class equals spacer and a number with class equals called and the number. Save and reload, you should see new colors for that number on any and every board on your web page. You can test it out multiple times. If you get 5 in a row, you say BINGO! That's how we will play this game. Just undo (shift z on my program) to undo until you get back to the colors that you added. Now you're ready for our class to play bingo.