Jan. 26, 2017 | Lesson 1 (CSS Fundamentals)

Today, I started a new course called CSS Fundamentals on lynda.com. This course was less hands on than my previous one, but it was a good intro course to understanding the importance and use of CSS.

CSS stands for Cascading Style Sheets, which is a style sheet language developed to control the presentation of markup language documents like HTML. HTML controls the structure of the web, while CSS controls the presentation of it.

A good visual example of this is you can think of HTML as the structure of a new building. You can see the structure as it’s being built, but you don’t really know what the building is going to look like.


CSS, on the other hand, serves as the king of the building and determines what the outside of the building will look like.

You can change how things look by simply changing the CSS files, all without changing the underlying structure – or HTML. In terms of syntax, CSS is not a markup language like HTML, or even a scripting language like JavaScript. Below are a few things CSS is.


Websites cane be controlled and constructed by five main elements.


Now, we’ve talked about HTML and CSS, the other three (JavaScript, PHP and mySQL) are other languages used to control websites. JavaScript controls the behavior within the browser. Server side language, such as PHP, controls processing and business language. And databases, such as mySQL, store content.

A website might use all of these elements, while other it might only use HTML and CSS. This modular approach means that you can change each of these elements independently of each other. In terms of CSS, you can change the entire layout and design of a page without ever chaining its content or structure. This can also speed development and site maintenance by controlling the formatting for an entire site through a small number of CSS files.


All browsers have a default style sheet that is applied to HTML. By some this is considered “unstyled.”


While it certainly looks unstyled, that’s not entirely accurate. Before authors were allowed to control HTML pages through CSS, browsers had to have some way of displaying HTML content visually. Although the approaches among early browser manufacture differed, essentially they all developed default style sheets that told the browsers how to display specific elements.

When you write CSS, one of the things you’re actually doing is overwriting those default browser styles, and replacing them with how you want the page to look.


Now, let’s get into some of the syntax of CSS and how to read the language. CSS style sheets are made up of two parts: the selector and the declaration. The selector, here “p” for paragraph, tells the browser which elements or elements in the document style.


The above selector, targets all paragraphs within a style document to be formatted. While this element selector is pretty simple, selectors can be very complex depending upon which elements on the page you’re trying to target. Selectors can be grouped together or even combined to allow for more precise element targeting.

The declaration, which is enclosed in these curly braces, uses the formatting instructions for the style. Here, there are two rules: one telling the browser which font to use and another defining the size of the font.


The rules themselves are made of two parts: the property and the value. These are separated by colons and use a semicolon to tell the browser to stop evaluating and move on to the next rule.


While this syntax is simple, you will need to learn the myriad of selectors and selector combinations which make it possible to exercise a greater amount of control over page elements. You’ll also need to learn the various properties you can set for each of the elements and the values that are allowed for that property.

For the most part, the use of whitespace doesn’t matter. For example, the image below shows that both these CSS rules will give you the exact same results.


However, sometimes, whitespace does matter, so it’s important to be familiar with when whitespace is important and when it’s not.


Now that I’ve went over a little bit of CSS syntax, I’m going to focus on selectors in a bit more detail. Selectors allow us to tell the browser which elements on the page we want to style. In some cases you want to apply styles broadly all across the site. In  other situations, you’r going to want to target a smaller number of elements or even a single element. Understand how selectors work will allow you to do just that.

We’ll start with the Element Selector which are global in nature, meaning they’re going to affect every element of that type in a styled document. You simply need to know what the tag is for a given element in order to style it.

Unlike HTML, we don’t need angled brackets around the tag name, just the tag itself. For example, to style a paragraph you’ll use “p”, for h1 headings you’d use “h1”, for unordered lists you’d use an “ul” and so on. While these selectors are efficient, they’re also very broad, which is why they’re mostly used to set global, site-wide styles.


Another basic selector type is the Class Selector. Classes are HTML attributes that can be seton any HTML element. You can name a class anything you want and you can use it on as many elements and as many times on the page as you need. In the image below, for example, the browser would look through all the elements on the  page and apply styling to any elements with the class attribute of “subheading.”


Note that classes are identified in CSS by the period in front of their name.

Next, ID Selectors are similar to Class Selectors in that they represent an HTML attribute. They differ from classes in one very important aspect: IDs must be unique to the page. Meaning that if you assign an ID to a page element, no other element on that page may have that specific ID. In this example, the browser would find the element on the page that has the ID attribute of “sidebar” and then apply styling.


IDs are identified by the octothorps, or as is more commonly known, the pound symbol, in front of the ID name. For those more Twitter oriented, you could also call it the hashtag symbol.

You can also make a Class and ID Selectors element-specific by adding an element to the front of the selector. This limits the styling to only elements with the specific class or specific ID applied to it. For example, below, styling will only be applied to h2 headings with a class of subheading, or divs with an ID of sidebar.


This allows you write a single general class or ID style and then follow that with a more focused element-specific style, if necessary. Also, here are three important things to remember:


Another type of selector is the Descendent Selector. These selectors allow you to target an element based on where it’s found within another element. You simply string the selectors together, separating them with white space. The parent selectors are added first, followed by each successive nested selectors.


For example, in the above image, the browser would find any span elements inside of paragraphs elements which were also inside of div elements.

Below, are a couple of examples of how this would work. In the first example, the browser would locate any paragraph found within a div tag, and then apply the styling. In the second one, it would find any span element inside of the paragraph, which is also inside of a div and then apply the styling.


You can also group selectors together by using commas between the selectors themselves. This can make writing styles more efficient; by grouping selectors together, they don’t need the same styling. Instead of writing three separate selectors like on the left, you can simply write one Group Selector on the right.

Previously, we talked about being consistent with the CSS rules that you create when applying styles. The same could also be said when structuring your website with HTML. New authors often structure the same content in different ways on different pages. This makes it considerably harder to write global styles for the entire site. Below is an example.


On page one it’s structured with a div tag, on page two with a block quote and on page three with simple paragraph tag. To style this consistently across the site, you’d need several different rules that are essentially doing exactly the same thing. By establishing a guideline for how content should be structured , and then making sure that you’re consistent in following those guidelines, you can mean the process of writing styles much easier for yourself.



Jan. 30, 2017 | Leave Request (Work)

Today I had to fill in for an co-worker, so I was not present in class today. On Monday’s county commissioners have their morning meetings in the courthouse. I usually cover Alfalfa County commissioners’ meeting.

We like to use video recordings of the meetings both for accuracy, and so that our subscribers can view the meetings on our website if they are members of that community. I use my Canon T3i set up on a tripod to take video. I use Adobe Premier Pro for video editing. I don’t do a lot of cutting to the video.

Once I’ve finished editing, I post the video onto our Youtube channel as well as our website.

Jan. 25, 2017 | Lesson 8 (HTML Essentials)

For the final lesson of HTML Essential Training, I got a crash course in JavaScript. JavaScript is a scripting language that helps control the behavior of a website, and while it’s a serious programming language that entire applications are built off of, this is just a short introduction and basic look at JavaScript.

In this lesson, I worked on scripting the behavior of an aside text that contained an HTML, CSS and JavaScript tab. Without the scripting, each tab functions as page region links, but with the scripting, each tab were supposed to be clickable.

Much like how you create inline styles, you add scripting elements at the end of the HTML document just below the footer tags using script tags. I’ve also created a “comment” that tells me what the script tag is about: “tabbed panels.”

At the core of writing JavaScript are the functions. Functions are reusable blocks of code that can perform tasks when called upon. They help write efficient applications by grouping commonly performed tasks into a single block of code, which can then be executed if it’s needed.

The first function that I wrote was “window.onload = function() { }”. Below you’ll see it highlighted in the Brackets application.


Now, what this means is “window” is referencing an object, in this case the document window itself, or the page you’re on. “Onload” is referencing an event, or when the window is finished loading. So basically what this is saying, that once the page has loaded I’m going to perform a function, which is whatever is in the curly braces.

Before I move on, I made a couple of comments in the curly braces to remind me of what has to happen within this function.


I created another function giving it the name “displayPanel”, and inside the curly braces there I gave myself reminders that I want the panels to display and respond to clicks, or change the panel display and activate tabs.


Now, once I’ve finished scripting, I could save the document and be done with, but as it is more efficient to externalize CSS code, it is the same with JavaScript. To do that, I simply created a new file (command+n, or control+n), saved the file as (shift+command+s, or shift+control+s) and created a New Folder called “_scripts”, and saved the file as “tabs.js”.

I then selected all the scripting, excluding the “script” tags, cut it from the document (command+x, or control+x) and pasted it into the new “tabs.js” file (command+v, or control+v). I deleted the script tags underneath the footer and added a scripting tag underneath the header at the top of the HTML file.


Unlike the CSS link tag, the JavaScript tag must have a closing tag.

Now, this is post is very condensed compared to what we went over in today’s lesson, but to be honest I didn’t quite understand all that was in the lesson. This is a subject that makes me think HTML and CSS were a breeze, and I’m probably going to have to do further studying on JavaScript before a get a good grasp on what I’m learning.

Jan. 23, 2017 | Lesson 7 (HTML Essentials)

Now I’ve begun Lesson 7 for HTML Essential Training and here I’m dealing with CSS, or Cascading style sheets. While HTML deals with more structure and organization of pages, CSS handles the appearance and design.

Now, this single lesson did not give me an in-depth look at CSS, rather a quick intro and basic rundown of CSS, which is important to have knowledge with HTML.

To start my basic intro to CSS, I learned about creating inline styles. Most CSS styles are created on sheets then referenced to with the anchor tag, but inline styles is created directly in the HTML file.

In this basic HTML document, I want to change the color of the h2 heading to red, so I create the style in the h2 tag.


While HTML has attributes and values, CSS as their properties and values. The color is the property, red is the value, and the semicolon indicates the line is over.

I went further to change the font style, and instead of being bold, the h2 headings is now normal.

Now, while this is a correct way of applying styles, it isn’t the most efficient way. The problem with inline styles is that if you want all of your h2 headings to have the same style, you would need to go through every h2 heading and apply this. Now you can simply copy and paste, but if you have a client that likes the heading but wants it to be green instead, you would have to go through every heading and change the color to green.

Inline styles do have a place. If you’re going to do an HTML email, inline styles are one of the only ways that you can apply styling to certain email clients. Another way is in scripting. Let’s say your going to build a widget dynamically. A lot of people will in their JavaScript write inline styles that go in to style their specific elements.

Instead of referencing a CSS style in a separate file, it is just as efficient to apply a style element to the head of the HTML document. So in this lesson I’m going to take the style I applied to the h2 heading and move it to the head of the document, that way it can be applied to every h2 heading if I want.

To do this, I first applied a style tag underneath the title then indicated my selector (which tells the browser, or user agent, this is the element, or elements, that I want to style). In this case that is the heading 2, so all I do is type “h2”. Next, I type in my properties, which are grouped together using curly braces “{“. And finally, I type in the same style I used in the h2 tag between my two curly braces.

To show that this style works with all h2 headings, I added another below.


I now can make my CSS styles more selective to only apply to my first h2 heading by applying a class attribute with a value of alert to that particular h2 heading. To make sure my CSS style only applies to this I then delete “h2” then add “.alert”. What that means is that the “.” tells my browser to look for a “class” attribute with the value of “alert”.

I can now also apply this style to the h1 heading by giving it a class attribute with an “alert” value.


This would cause me to be even more descriptive with my selector by adding h2 to tell my browser that I want it to find an h2 that has a class of alert applied to it.

Next, I worked with controlling typography of CSS styles. The HTML file I used already had one CSS style for the body with a width of 70% and a margin of 0 and auto. What these two is essentially center all of content on the page even when I resize the browser.

I then moved onto create a style of the h1 heading starting with the font-family using Georgia font, which is installed on almost every computer out there when it ships. It’s important to use a font that is also on the client machines, but we’ll also use “fall-back” fonts like Times New Roman and then finally “serif”.

I then indicate the font size with 2em. I could use pixels, but 16 pixels looks larger on a desktop than it does on a phone. So using 2em is called a relative unit of measurement saying whatever the default font-size is on the user agent, give me twice that size.

I then tell the browser I want the font-weight to be normal, so it’s no longer bold and finally change the style to italic.

For the paragraph selector I’ve used Arial, Helvetica and sans-serif for the font-family while using 1em in font-size. There are two different properties that I’ve used called line-height and text-align. Line-height is the space between the individual lines like double spacing. For this I used 1.6. In text-align (how the edge of the paragraph should be aligned) I’m using justify. I could also use left align, right align and center.

I can use the margin property to control the spacing of the elements on the page. Here I change the margins to 1em space, 0 space, .4em. This is shorthand notation and margins are set in a clockwise fashion starting at the top. So this is saying that for the top I want 1em, for the left and right I want 0, and for the bottom I want .4em.

One last thing I can do is that if I want all of my font to be the same as what I set the paragraph (Arial, Helvetica, sans-serif). I could take care of this globally by moving all of this to the body, adding a font property. I tell the browser 100% Arial, Helvetica, sans-serif. Now 100% is essentially the same as 1em. I’m saying, give me your default font size. All I would need to do then is delete the “font-family” from paragraph since I no longer need it there.

Aside form controlling the formatting of typography, controlling the color of elements on the page is probably the most common part of basic page styling. So first,I’m going to add a color to the html selector using the property background-color and the value of #777 to get a gray color.

This is called hexadecimal notation. Essentially, color is defined on the screen as RGB (red, green, blue), and you can go from zero to 255 for each of those values.

Next I want to change the background color of the body element, which only has a width of 70% of the entire page (which is the HTML). Instead of a color I could also use a graphic image, but I’m just going to use white. To apply color to things like borders I could use a property “border-bottom” that’s 10px thick, solid, and gold color.

Instead of hexadecimal values for color, I could also use an RGB notation, which is what I used for the h1 heading. To that for the background color I used rgb(44, 45, 140) to get a blue background. since the black text color of the h1 heading is too dark, I want it to be lighter, so I used a color property with a hexadecimal value of #ddd for a light gray.

Finally, I’m working with creating external stylesheets and linking them to the html document to make them “site-wide.” Now, I could continue to adding styles to the head of the document, but this ultimately inefficient. Whenever I make a change to one page, I would have to go to every page and make the same changes for consistency. This way I could make changes to the css and it would change across pages.

To do this I created a new file and save it in the “07_06” folder under the name “styles.css”.

Next, I returned to the html document, select all the css and cut it from the document and paste it to my css file I created.

Now, this takes away all the styles that have been added because I do not actually have a link between the html document and css file yet. To do that I created a link tag that doesn’t need a closing tag. I also needed to add this to “Page Two” document as well so that the css will apply to that as well.

To show that changing anything to styles.css will also apply to both the external.htm and page2.htm, I added style changes to the anchor tags on both documents. By changing the text-decoration to “none” the link will no longer have a hyperlink underline. I also changed the color to red. I also wanted to have a hover style using the selector “a:hover” and changing the color to black.

Jan. 20, 2017 | Lesson 6 (HTML Essentials)

For Lesson 6 of HTML Essential Training I learned more about creating lists in HTML, which can be a very useful way to organize content. The first type of list I learned was “unordered lists”. I wanted to make the items in the image below into a simple unordered list.


To do this I surrounded them in an unordered list tag. Then I surrounded each individual item in a “listed item” tag.

In the image just above, you’ll see a few listed items that could use further coding to organize such as “item 3.1”, “item 3.2” and “item 3.3”. Since they are sub items to “Item three” I’ll need to organize them further.

First I indented them in the Brackets application, which doesn’t do anything to them in the browser, but it helps me organize them visually. I then take the closing listed item tag on “Item three”, cut it then paste it under “item 3.3”. I then wrap items 3.1-3.3 in unordered list tags to finish.

Another useful type of list that is very similar to unordered lists is the ordered list. These two are so similar that they almost share the same exact syntax with just one letter difference. To show the difference both visually in the Brackets application and in the browser I’ve demonstrated in the exercise files from lynda.com.

The ordered list tag can be a little more flexible by adding other attributes, like what number the list should start, or even going a step further and having the list count down instead of up.


I can even change whether the list is ordered using roman numerals or even the alphabet by using the type attribute.

The final type of list that I learned about was the “description list”, which was pretty straightforward and is used in conjunction with the “definition term” and the “definition description” tags. These tags are commonly used with terms or names and their definitions.

To use these, I surround the entire list with the description list tag, each term is wrapped in the definition term tags, and the definitions are wrapped in the definition description tags like in the images below.

Jan. 18, 2017 | Lesson 5 (HTML Essentials)

Okay, I have some major catching up to do, so while my blog posts today may not match up dates I’ve labeled them to help me keep track of what day I should have uploaded these.

In Lesson 5 I worked with adding links to my site by using the anchor tags – – or “a” tags. While there are link tags – – in HTML they are used to request an external resource for the page like a CSS file.

The a tags are a little more extensive because they use a hypertext reference, or href, attribute that tells the browser where you’d like to go when the link is clicked.

Lesson 5 - href1.PNG

Now, the a tags can use other attributes along with href such as target and rel (or relationship attribute).

Another, more common, attribute that is used in a tags is the title attribute. This helps make links more accessible by giving the link a title, which can be read and interpreted by assistive devices, search engines or other content readers.


Linking to other pages within your site is probably the most common function of the anchor element. In the HTML code below, we’ll be using the anchor element to link to other pages in these documents.


Starting with line 10, I’ll be wrapping the text “same.htm” in an anchor element to help give me a grasp of how to write a tag code while also using titles.


It’s pretty simple, but at times I will also need to link to a page that is located in a different folder. To link to that page, I’ll need to know the directory it’s located. For example, I want to link to the reference.htm, I’ll need to know that it’s located in the “extras” folder, which is located in the “info” folder.


However, I also have to be aware of where my linked page is located in relation to the current page I’m on. For instance, in the images below, I want to link from the “about.htm” to the “links.htm”, which is located one directory above. To link to this I would use “../” to signal I want to jump to the directory above my current position.

If I have to link to a page two directories above my current page, I would use “../” twice.

Another common function is to redirect users to pages and sites that are external to the site they’re currently on. In this exercise, I’m going to link this page to lynda.com, but in order for it to work I have to be sure and use the entire protocol like “http://…” or “https://…”. I CANNOT just use http://www.lynda.com in my href.

To do this I can simply click in the browser, copy the URL by using command+C (or control+C on Windows) then pasting the URL using command+V (or control+V).

Voila! I was able to easily link to lynda.com after clicking the link on my browser. However, when I clicked that link it completely redirected my to lynda.com on that same page I was on. Instead I want to be redirected to lynda.com in a separate tab or window. To do this I have to create a target attribute.

Above, you can see that “target=’_blank'” created a new tab for lynda.com.

On occasion, you may want your users to be able to download a file or some type of resource from your site. In this exercise I’ll use both a zip file and pdf file to download. It works much the same way that the rest of the links do by using an anchor tag and giving the directory to the file.

Next I used the pdf file in place of the zip, but instead of downloading the file it shows a view of the pdf.


In order for the pdf to give me an option to download, I add the “download” attribute to the anchor tag.


Finally, I worked with linking to regions on a page. This is common in websites like Wikipedia that will use links in the table of contents to click on and reach certain regions on the page. Here, I link to sections on this page.


To do this, I first needed to add an “ID” attribute to each section’s headings. For example, on Section 3’s heading I added “id=’three'”. Then in the anchor tag there is a key difference in the href attribute between linking to a different page and linking to a region. When linking to a region I use a “#” symbol.


And for the final touch, I added a link that will take me back to the top of the page once I’ve scrolled to the bottom.


Jan. 19, 2017 | Absent

Today, I wasn’t in class because I was attending the North Country Classic where our Alva High School basketball teams were competing. The last tournament of the season… until post season begins.

I took several pictures (like I always do) from each game, then chose my best shots during my editing process in Lightroom. After captioning my pictures, writing two articles from each game, I turned in everything into Dropbox to be proofed and published for our paper for Friday.

Jan. 17, 2017 | Lesson 4 (HTML Essentials)

In Lesson 4, I learned more about structuring content in HTML using sectioning and semantic elements.

If you’ve visited a website you can tell that most have very similar layouts that make it easy for us to navigate. However, when authoring a website in HTML, we have to make it this layout readable for both humans and machines by using the sectioning and heading elements such as h1-6, article, asides, nav, and section. In addition to these sectioning elements, HTML also has several semantic elements that can help add structure and meaning to the document.

An example is this next document where we have a very basic outline that has no sectioning elements, nor semantic structure. Each text is separated by paragraph tags, and that’s basically it.

To give it more structure and an outline that is consistent with most websites, I first want to go through the document and give it headings (h1-h6) to give it more structure. I can easily establish that “My Big Blog” needs an h1 heading, “Things I like” should be an h2, while the h3 heading pertains to “My favorite books”, “My favorite movies and shows”, and so on. For the h4 headings, I’ll use those for the sections that are connected to their h3 headings.


To add a few more sectioning elements, I still need to mark up the <nav>, <article>, <section> and <aside> (which is optional).

This document doesn’t really have a navigation panel, but it does have a marker for where the navigation will be located at “site navigation”. I want to go ahead and wrap it with navigation tags to set that place holder.


Next I mark the sections. “My favorite books”, “My favorite movies and shows”, and “My favorite music” – along with their sub categories, are each their own section so I wrap them in the section tags to mark them.


For the aside tag, I included the “Spotlight favorite” with this, which is basically a judgment call, I could’ve used another section tag, but I felt that it is not entirely necessary to the document, so I marked it with aside tags.


As far as the article tag goes, the entire content from below the navigation tags all the way to the end of the “Spotlight favorite” paragraph is wrapped in article tags.

There is one more element that can be used for structuring and semantic purposes, but it is suggested to use it as a last resort. It’s called the div element. It is only to be used when no other element is suitable. It can also be used with the class,lang, and title attributes to mark up semantics common to a group of consecutive elements. An example is in the list of favorite books in the “My Big Blog” document.


Above, you’ll see that the books now have a slightly different outline with an h5 heading along with the author and short synopsis. I’ll now separate each of the three books with a div tag.


You’ll notice that this doesn’t really change any visual elements, but this document has CSS applied to that I will add with a class attribute. I could also use and ID attribute, but ID attributes can only be used once. Since I want to add a style to all three, I’ll use a class attribute instead.


Jan. 6, 2017 | Absent

So this blog post is late coming, but it has been a crazy past week. Last Friday, I attended a basketball tournament, which our local high school was competing, for our Newspaper.

As per usual, I took several pictures throughout the girls’ and boys’ game then edited them through Adobe Lightroom. At the time I didn’t do any editing in Photoshop because I didn’t need any formatted for our newspaper since we weren’t going to print till Saturday night.