BZSA Logo

Welcome

to BizStream Academy!

Welcome!

BizStream Academy is here to provide you affordable and accessible programs to learn software through mentorship and hands-on instruction.


Some quick 'rules'

  • We are here for you!
  • Every question is important
  • Be sure to help each other
  • Have fun!

Who is everyone?

A little bit about BizStream and BizStream Academy..

Who is everyone?

Mentor and student Introductions

  • What is your name?
  • Why are you here?
  • What is your favorite hobby?

Why do we do this?

  • Programming is awesome!
  • Tech = Great Jobs, Great Opportunity & a Great Future
  • You can dive into learning code at anytime and find your passion

How are we going to do this?

  • Our Job: To spark interest and guide you
  • Team of Mentors
  • Final Project
  • Independent Study

Terms

  • Web Design: The process of planning, structuring and creating a website

  • Web Development: The process of programming dynamic web applications

  • Front-End: The outwardly visible elements of a website or application (These are the coding languages we will be focusing on today)

  • Back-End: The inner workings and functionality of a website or application.

Lets Get Started!

But before we get to coding...

Setting up our workspace

  • Go to https://glitch.com/
  • Sign in with either Google or email
  • Select New Project and select hello-webpage
  • Select project name at the top left and rename it a unique name
  • Select 'Show' and pick the 'In a new window' option

Lets Break Down These Files..

Anatomy of a website

Your Content
+ HTML: Structure
+ CSS: Presentation
= Your Website

A website is a way to present your content to the world, using HTML and CSS to present that content & make it look good.

Get Started: Folder Structure

A website is basically a folder that holds a bunch of files

This includes:

  • HTML Files
  • CSS Files
  • Images
  • Script files
  • Anything else that will appear on your site

Note: File names should not include spaces or special characters. File names ARE case sensitive.

Diagram showing html-site folder with sub-folder for images, index.html, and styles.css

What is HTML?


HTML stands for HyperText Markup Language.

HTML is the programming language used on EVERY website. It is what the browser uses to render a web page by reading the tags and interpreting the content of the web page.

HTML consists of tags enclosed in angled brackets <html>, also known as elements, and most commonly come in pairs, with a beginning and an end. HTML is styled using CSS.

Tip: Use the “View Source” option when viewing ANY web page

Anatomy of an HTML element

  • Element
    • An individual component of HTML
    • Paragraph, heading, table, list, div, link, image, etc.
  • Tag
    • Marks the beginning & end of an element
    • Opening tag and Closing Tag
    • Tags contain characters that indicate the tag's purpose
      <tagname>Text/content that will be visible</tagname>
      <p>This is a sample paragraph.</p>

Anatomy of an HTML element

Container Element

An element that can contain other elements or content


Stand Alone Element

An element that cannot contain anything else

Tag Breakdown

Tag breakdown

Doctype

The first thing on an HTML page is the doctype, which tells the browser which version of the markup language the page is using.

<!DOCTYPE html>

* The doctype is case-insensitive.
DOCtype, doctype, DocType and DoCtYpe are all valid
(although that last one is pretty weird).

HTML Tag

After <doctype>, the page content must be contained between <html> tags.

<!DOCTYPE html>
<html>

</html>

Head and Body Tags

Head: The head contains the title of the page & meta information about the page. Meta information is not visible to the user, but has many purposes, like providing information to search engines.

Body: The body contains the actual content of the page. Everything that is contained in the body is visible to the user.

Nesting

All elements "nest" inside one another

Nesting is what happens when you put other containing tags inside other containing tags.

Nesting: Example

Elements are 'nested' inside the <body> tag.

<body>
  <p>A paragraph inside the body tag</p>
</body>

Paragraphs 'nested' inside list items.

<ul>
  <li>
    <p>A paragraph inside a list item</p>
  </li>
</ul>

Element: Paragraph

<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
<p>Paragraph 1</p> <p>Paragraph 2</p>  <p>Paragraph 3</p>
<p>Paragraph 1</p>


<p>Paragraph 2</p>
<p>Paragraph 3</p>

Paragraph 1

Paragraph 2

Paragraph 3

* White space is only for humans. You can write your code with any spacing.

Element: Heading

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

* Heading number indicates hierarchy, not size. Think of outlines from high school papers

Example: Headings

Example of headings

Formatted text

<p>
    Here is a paragraph with <em>emphasized</em> text.
</p>
<p>
  Here is a paragraph with <strong>important</strong> text.
</p>

Here is a paragraph with Emphasized text.

Here is a paragraph with Important text.

* Notice: em and strong are meant to indicate meaning through style. If you want to have italicized for appearance and not to communicate meaning, you should use CSS.

Enough Talk: Let's Code!

Let's add some content to our HTML about a topic of your choosing

Add one of each level of heading with 1-2 short paragraphs of text below each heading

Use <strong> and <em> within a few paragraphs

Anatomy of an HTML element

  • Attribute
    • Provides additional information about the HTML element
    • Class, ID, language, style, identity, source
    • Placed inside an opening tag, before the right angle bracket.
  • Value
    • Value is the value assigned to a given attribute.
    • Values must be contained inside quotation marks.
    • <div id="copyright">©BizStream Academy logo 2016</div>
      <img src="my_picture.jpg" />
      <a href="http://www.bizstreamacademy.com">
        BizStream Academy
      </a>
      

Element: Link

Links have three components

  • Tag: <a></a>
  • Href attribute: "http://www.bizstreamacademy.com"
  • Title attribute: "BizStream Academy"
<a href="http://www.bizstreamacademy.com" title="BizStream Academy">BizStream Academy</a>

BizStream Academy

The <a> tag surrounds text or images to turn them into links

Link Attributes

Links can have attributes that tell the link to do different actions like open in a new tab, or launch your e-mail program.

<a href="home.html" target="_blank">Link Text</a>

Link opens in a new window/tab with target="_blank"

<a href="mailto:sponsorships@bizstream.com">E-mail us!</a>

Adding mailto: directly before the email address means the link will open in the default email program.

Relative vs. Absolute paths for links & images

  • Relative
    Relative paths change depending upon the page the link is on.
    • Links within the same directory (folder) need no path information. "filename.jpg"
    • Subfolders are listed without preceding slashes. "img/filename.jpg"
  • Absolute
    • Absolute paths refer to a specific location of a file, including the domain. "http://www.bizstreamacademy.com/returning"
    • Typically used when pointing to a link that is not within your own domain.

Enough Talk: Let's Code!

Let's add some links to our HTML!

Add links that open in the same window, a new window and link to an e-mail address.

Element: Image

Images have three components

  • Tag: <img />
  • Src attribute: "http://www.bizstreamacademy.com/ACADEMY/media/Images/academy-logo.png"
  • Alt attribute: "BizStream Academy logo"
<img src="academy-logo.png" alt="BizStream Academy Logo"/>

* Notice: This tag is our first example of a stand-alone or "self-closing" element.

Enough Talk: Let's Code!

Let's add a few images to our page.

Find some images you want to upload to your assets folder

Copy the CDN absolute path

Use that URL as the src for the image

Element: Unordered and ordered lists

<ul>
  <li>List Item</li>
  <li>AnotherList Item</li>
</ul>
<ol>
  <li>List Item</li>
  <li>AnotherList Item</li>
</ol>

Unordered list (bullets)

  • List Item
  • Another List Item

Ordered list (sequence)

  1. List Item
  2. Another List Item

Lists: Examples

Lists can be used to organize any list of items.

Examples of lists

You'd be surprised how often lists are used in web design.

Enough Talk: Let's Code!

Let's add one of each ordered and unordered lists to our page.

We can make a list of links or even a list of images!

Element: Div

  • Block level element. Each new div is rendered on a new line.
  • A division, or section of content within an HTML page.
  • Used to group elements to format them with CSS.
  • Apply IDs and Classes to divs to control their styles with CSS.

Div Examples

</div>
   <p>Content</p>
   <p>Content</p>
</div>
<div id="header">
   <h1>Main Heading</h1>
</div>

Grouping elements with div

  • The div tag is used everywhere to group elements together into sections.
  • You can wrap groups of elements in a div to style them differently.

Enough Talk: Let's Code!

Let's add some divs your site to separate content into different sections.

  • Add a container div

  • Nest two div sections that will be your sidebar and main content

Next Up..

Lets Write Some CSS!

CSS: What is it?

CSS = Cascading Style Sheets

CSS is a "style sheet language" that lets you style the elements on your page.

CSS is works in conjunction with HTML, but is not HTML itself.

CSS: What can it do?

All colored text, position, and size

Screenshot of homepage

The CSS Rule

The CSS Rule

The CSS Rule

selector {
   property: value;
}
  • A block of CSS code is a rule.
  • The rule starts with a selector.
  • It has sets of properties and values.
  • A property-value pair is a declaration.

CSS Syntax

Declarations: Property and value of style you plan to use on HTML element.

Declarations end with a semicolon

Declaration groups are surrounded by curly brackets.

selector {
    property: value;
    property: value;
    property: value;
}

Connecting CSS to HTML

3 ways

"Inline"

"Embedded"

"External"

Connecting CSS to HTML: Inline

<p style="color:red">Some text.</p>

Uses the HTML attribute style.

Difficult to use in large projects

Not preferred.

Connecting CSS to HTML: Embedded

<head>
<style type="text/css">
p {
    color: blue;
    font-size: 12px;
}
</style>
</head>

Inside <head> element.

Uses <style> tag.

Can only be used in one html file

Connecting CSS to HTML: Linked

<head>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
  • Shared resource for several pages.
  • Reduced file size & bandwidth
  • Easy to maintain in larger projects.
  • Preferred by nerds everywhere!

Take a look at your CSS file

How is it being added to your site?

Selector: Element

p {
    property: value;
}

Selects all paragraph elements.

img {
    property: value;
}

Selects all image elements.

CSS Color Values

Your browser can accept colors in many different ways:

  • Color name (ex. red)
  • Hexadecimal value (ex. #FF0000)
  • RGB value (ex. rgb(255, 0, 0))
  • HSL value (ex. hsl(0, 100%, 100%))

The 17 standard colors are: aqua, black, blue, fuchsia, gray, grey, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow.

Property: Color

The color property changes the color of the text.

p {
    color: red;
    color: #ff0000;
    color: rgb(255, 0, 0);
}

Property: Background-color

The background-color property changes the color of the background.

p {
    background-color: black;
    background-color: #000000;
    background-color: rgb(0,0,0);
}

Enough Talk: Let's Code!

  • Add some rules to your css file
  • Change the font color and background color of different types of elements
  • Try selecting links, paragraphs, and lists

Property: Font-family

The font-family property defines which font is used. Each property can have one or more comma separated values.

p {
    font-family: "Times New Roman";
    font-family: serif;
    font-family: "Arial", sans-serif;
}

Specific font name

Generic name

Comma-separated list

List of Web Safe Fonts

Property: Font-size

The font-size property specifies the size of the font.

p {
    font-size: 12px;
    font-size: 1.5em;
    font-size: 2rem;
    font-size: 100%;
}

Pixels

"em"

"rem"

Percentage

Property: Fonts (shorthand)

p {
    font-style: italic;
    font-weight: bold;
    font-size: 10px;
    font-family: sans-serif;
}
OR
p {
    font: italic bold 10px sans-serif;
}

Enough Talk: Let's Code!

  • Change the fonts of your page
  • Try changing the font sizes and styles for different elements
  • Also try using Google Fonts to add a new font to your site

Reusing code

As a general coding principle, Don't Repeat Yourself (DRY).

To reuse CSS, we use IDs and classes.

Don't Repeat Yourself

IDs vs. Classes

ID -- Should only apply to one element on a webpage, i.e., a webpage only has one footer.
The "#" is how you tell CSS "this is an id."

Class -- Lots of elements can have the same class, i.e., There can be many warnings on one webpage.
The "." is how you tell CSS "this is a class name."

Selector: ID

Select all element tags with an id of "footer".


CSS
#footer {
  property: value;
}
HTML
<div id="footer"><p>Copyright 2016</p></div>

Selector: Class

Select all elements with a class of "warning".


CSS
.warning {
  color: red;
}
HTML
<p class="warning">It's a trap!</p>

Enough Talk: Let's Code!

  • Add an ID and/or class to the divs you have already created in your HTML.
  • Add CSS rules to target these elements

Selector: Position

p em {
  color: yellow;
}

Selects all em elements that are within a paragraph

<p>This is <em>important.</em></p>

The associated HTML.

Selector: Position

  • Position selectors are more specific
  • They look for elements inside other elements
  • We seperate nested elements with a space

Selector: Position

So this code:

ul li a strong{
  color: purple;
}

Means "find a strong tag inside a link inside a list item in an unordered list"

<ul>
  <li>
    <a href="programs.html">Our <strong>program</strong></a>
  </li>
</ul>

Cascading

Styles "cascade" down until changed

p{
  color:blue;
  font-family: 'Helvetica';
}
.red {
  color: red;
}
#special {
  font-family: Arial;
}
<p>Paragraph</p>
<p class="red">Paragraph</p>
<p class="red"id="special">Paragraph</p>

Cascading priority

Your browser also assigns priority based on the specificity of the selection. More specific selectors have higher priority.

.main .sale .clearance p { //Most specific
  color: red;
}
.header .title p {
  color: green;
}
.footer p { //Least specific
  color: blue;
}

Cascading priority

The tie-breaker is position. Rules lower in the file overwrite rules higher in the file

a {
  background-color: yellow;
}
a {
  background-color: teal;
}
a { //This rule wins
  background-color: black;
}

Comma Separated Selectors

CSS also allows you to specify a set of styles to multiple selectors at once.

#content p, footer .container p {
    color: blue;
    background: #333;
}

p, .list li, a {
    color: red;
}

You can have as many comma separated selectors as you want. Each CSS element is separated by a space and a comma.

Enough Talk: Let's Code!

Add some comma separated CSS to your site to apply styles to multiple selectors.

Inline Vs. Block in HTML/CSS

Every HTML element has a default 'display' type. For most, they will either be 'inline' or 'block'.

Block: a block element will take up the full width of available space and will stay on its own line.

Inline: an inline element will only take up as much space as the content it has and it will not start on a new line.

Inline Vs. Block Examples

Block: div, h1, p

Inline: img, span, a

Inspect elements below to see how they act in HTML:

This is a heading

This is a paragraph

cat test span tag test link here

Inline Vs. Block Force them to change

Using CSS, we can change the default value for the 'display' of an HTML element. So if we wanted the default display of inline to change for an img tag, we could use this css:

img {
    display: block;
}

This will cause the img tag to sit on it's own line and take up as much space as it can.

Adding a span tag

Span tags are primarily used within headings or paragraphs to manipulate certain sections of text.

<p>This is normal text 
<span class="highlight">but this is specially colored</span> 
but now it's normal text again.</p>

CSS to go with that HTML:

.highlight {
    color: red;
}

Enough Talk: Let's Code!

Add a span tag with a class on it inside one of your headings or paragraphs. Then style it with CSS.

Pseudo Classes

Pseudo classes are used to target specific HTML elements based on a change in state, location compared to other HTML elements, and attributes.

You can target these 'states' by adding a colon (:) after a CSS selector and then the state of the HTML element you want to target.

Pseudo Classes Example

In the examples below, a:hover would be used if you wanted to change the CSS for a link when someone hovers over them with their mouse.

a:hover {
    color: blue;
}

Enough Talk: Let's Code!

Using the ":hover" pseudo class, add a hover state to one of your html elements

The Box Model

Small box surrounded by packing peanuts in a larger box

Box Model

All HTML elements can be considered as boxes. In CSS, the term "box model" is used when talking about design and layout.

The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content.

Graphic illustrating box model

Padding

Space between the border and the content

Graphic illustrating box model, padding highlighted

Padding

Notice that the padding adds to the total width of the box.

Graphic illustrating box model, padding highlighted

Padding

15 pixels on all sides

padding: 15px;

10 pixels on top only

padding-top: 10px;

10 on top, 5 on right, 3 on bottom, 5 on left

padding: 10px 5px 3px 5px;

Padding

Four values

padding: top right bottom left;

Three values

padding: top right/left bottom;

Two values

padding: top/bottom right/left;

One value

padding: all;

Padding

padding: 10px 20px 30px 40px;
Graphic illustrating box model, with uneven padding

Enough Talk: Let's Code!

Try adding some padding to some elements.

Remember: you can write out "padding-left", "padding-right", etc. or you can use shorthand declarations.

Border

The edge around the box.

Graphic illustrating box model, border highlighted

Border

Borders are specified as "thickness, style, color."

A solid red border

border: 1px solid #ff0000;

A thick dotted black top border

border-top: 4px dotted #000000;

Two different border styles

border-top: 1px solid #ff0000;
border-bottom: 4px dotted #000000;
          

Border - Other Properties

border-width: 10px;
border-style: dashed;
border-color: #666666;
          

You can specify each property separately, or all three together.

Enough Talk: Let's Code!

Try adding a border to your images

Experiment with different border styles, thicknesses, and positions.

Margin

The transparent area around the box that separates it from other elements by creating whitespace. It can be used to horizontally center an element as well.

Graphic illustrating box model, margin highlighted

Margin

15 pixels on all sides

margin: 15px;

10 on top, 5 on right, 3 on bottom, 5 on left

margin: 10px 5px 3px 5px;

10 pixels on top

margin-top: 10px;

Wrappers

Wrappers are a good way to center content if the screen width is wider than your content.

.wrapper {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}
          

Enough Talk: Let's Code!

Center your entire document in the browser by adding a wrapper class with auto margin, width and a max-width.

  • Follow along if you get stuck!

CSS Display Property: Flexbox

The Flexible Box Layout Module, makes it easier to design flexible responsive layout structure without using float or positioning.

Flexbox

Before Flexbox, simple layout tasks were very difficult.

  • Vertically centering a block of content inside its parent
  • Making all the children of a container take up an equal amount of the available width/height
  • Making all columns in a multiple column layout adopt the same height even if they contain a different amount of content
  • Simple main content and sidebar layout

Flexbox

Flexbox applies to both a container and its direct children.

Flexbox


                .item-container {
                  display: flex;
                }
                

This defines a flex container; inline or block depending on the given value. It enables a flex property for all its direct children.

Flexbox


                .item-container {
                  .item {
                      flex: 0 1 50%;
                  }
                }
            

This is the shorthand for flex-grow, flex-shrink and flex-basis combined. The second and third parameters (flex-shrink and flex-basis) are optional. The default is 0 1 auto.

Flexbox

There are plenty of different Flexbox CSS properties that you can find here

We only need display:flex; and flex:0 1 50%; to create a two column layout.


Lets add a sidebar to our website!

Enough Talk: Let's Code!

  • Add a new CSS declaration to your wrapper class

  • display: flex;
  • Divide and wrap your existing content into two sibling divs directly under the wrapper div
  • Give one div a class name of content, and the other sidebar and add these rules to your CSS

                .content {
                  flex: 0 1 75%;
                }

                .sidebar {
                  flex: 0 1 25%;
                }
            

Responsive design

You looked at your site on a cell phone and realize it looks terrible and now you need to fix it?


Your sites current layout should look pretty smushed together on a small device

(Hint: shrink your browser!)

What is a Media Query?

A media query is a way of specifying certain CSS at different screen widths.


  @media only screen and (max-width: 750px) {
    body {
      background-color: blue;
    }
  }
  

The above code states "If the browser/device window is smaller than 750px, then the background color will change to blue."

Adding a mobile meta tag

In your HTML head, preferably at the top, but it can go anywhere in your head section.

We need this meta tag to optimize your website for mobile devices.


<meta name="viewport" content="width=device-width, initial-scale=1">

What does the mobile meta tag even mean?

Viewport Meta Infographic

Many mobile devices pretend they have more pixels than they actually do to acheive those super high resolution. This forces the site to display at the same width of the actual device.

In other words it makes it not look tiny and crappy.

Adding mobile styles

At the bottom of your CSS file, add the following code:

@media only screen and (max-width: 750px) {
  .content, .sidebar {
    flex: 0 1 100%;
  }
}

.wrapper {
  flex-wrap: wrap;
}

Resize your browser to see how your columns now stack nicely on mobile.

Testing on "mobile" device

JavaScript

What is JavaScript?

JavaScript is a programming language that allows you to implement complex things on web pages

It makes your site dynamic

It is instructions for interactions that happen on your site

(ex. click, scroll, hover)


But lets make this a little easier for you..

What is jQuery?

jQuery is a JavaScript library that makes writing JavaScript for websites easier and more browser friendly.

jQuery: Write less, do more

How do we add the jQuery library to our site?

Before you can start coding jQuery, the library needs to be added to your site.

It should go in the head section of your HTML. Take a second to add this line of code to your site.


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>

What is a CDN?

A Content Delivery Network

Also called a content distribution network, is an interconnected system of cache servers that use geographical proximity as a criteria for delivering web content.

Document Ready

In order for jQuery to manipulate HTML, it needs to make sure that the HTML is fully loaded before running the jQuery.


$(document).ready(function(event){
// jQuery code goes in here
});

So whenever you write jQuery, you'll need to wrap that code in a document.ready function, as shown below:

$()

$() is a shortcut for jQuery(). The $() is made for selecting an element and then returning that element to perform an action on it.

make it rain cat

jQuery Selectors

The following code selects the element that has the ID header in the HTML.

jQuery selector

This is how you access HTML elements with jQuery. Once you have the element in the jQuery object, you can do stuff to it.

Enough Talk: Let's Code!

In your script.js file, remove the console.log and add the following jQuery:


$(document).ready(function(event){
  alert('it works!');
});
          

Comments

Just like in HTML and CSS, comments are for developers and are not interpreted by the browser.

Your code has two sets of comments. They show the two different ways of formatting comments.

Comments

One is to surround the comment by /* on one side and */ on the other. These comments can be multiple lines long.


        /* This comment
        is three
        lines long. */
                    

Two is to have // before the comment. This kind of comment can only be one line long.

            
        // This comment is only one line long.
                        
                    

jQuery Plugins

Don't Reinvent the Wheel

Because jQuery is widely used, a lot of people have created jQuery code(plugins) that you can download and easily add to your own site.

trike with a square front wheel

image source

Using jQuery Plugins on Your Site

jQuery plugins will come with an external file that you will need to download and reference in your site. Then you 'initialize' their jQuery by connecting it to one of your own HTML elements.

t-rex trying to plug in a cord

Real world example: Accordions

Now we're going to step through together how to add an accordion jQuery plugin.

Enough Talk: Let's Code!

In the head tag section of your HTML, add these 2 lines of CSS file references:


<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="/resources/demos/style.css" />

AFTER your jQuery script tag in the head tag of your project, add the following:


<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

Enough Talk: Let's Code!

Setup Your HTML Markup

In your HTML, add the following HTML where you want your slider to appear.


<div id="accordion">
  <h3>Section</h3>
  <div>
    <p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
  ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
  amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
  odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
    </p>
  </div>
  <h3>Section Two</h3>
  <div>
    <p>Mauris mauris ante, blandit et. Proin viverra leo ut
  odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
    </p>
  </div>
</div>
          

Initialize your jQuery Accordion

In your script.js file, add the following code:


$(document).ready(function(event){
  $("#accordion").accordion();
});

Questions?

Let's save your projects!

Presentations!

And...we are done!

Thank you for attending BizStream Academy

We hope you had fun and learned something new today

You now have the project and skill sets to keep coding!