September 20, 2016

Coding a website with HTML, CSS and SCSS

Today's Schedule

  • Make sure everyone's local environment is working
  • Review last week's homework
  • HTML Basics
  • Sprinkle in CSS
  • Layouts and SCSS
  • SVG Basics
  • Homework

Everyone start up their local environment

bundle exec jekyll serve --watch

Let's take a look at everyone's homework

http://www.dave-landry.com/classes/artg4552-2016/

HTML

From Wikipedia:

"HyperText Markup Language, commonly referred to as HTML, is the standard markup language used to create web pages."

A brief history

Created by Tim Berners-Lee in 1995 as a way to distribute research papers.

More From Wikipedia:

"The language is written in the form of HTML elements consisting of tags enclosed in angle brackets (like <html>).

Browsers do not display the HTML tags and scripts, but use them to interpret the content of the page."

So let's start writing some code

In the root directory of your project, create a new HTML file.

DOCTYPE Declaration

The Document Type Declaration is for HTML5 and "should" be the included as the first line of every HTML file. 

<!DOCTYPE html>

If a declaration is not included, some browsers will revert to their legacy "quirks mode" for rendering.

HTML Wrapper

The contents of every HTML file (except for the DOCTYPE) should be wrapped in <html> tags: 

<!DOCTYPE html>
<html>

</html>
  • Capitalization does not matter.
  • Remember to close any tags that you open.

The Head and Body

All webpages have a head and a body. The head contains information about the page (the brains) and the body contains information that will be visible to the user (the brawn). 

<!DOCTYPE html>
<html>
  <head>

  </head>
  <body>

  </body>
</html>
  • The head MUST come before the body.
  • Identation does not matter, but will help keep your sanity.

Character Encoding

Like the DOCTYPE before it, there is one more "required" tag that must be present in the head of every document. 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
  </head>
  <body>

  </body>
</html>
  • This explicitly sets the character set used, if not passed by the server.
  • Dave, did you mention how we're setting an attribute of a tag?
  • Did you also mention self-closing tags?

Stop and test

Put something in the body of the page and make sure it's rendering to your browser. 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
  </head>
  <body>
    Hello World
  </body>
</html>

Get rid of that ugly page title

One of the many tags that the head supports is <title>. 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>My cool test page</title>
  </head>
  <body>
    Hello World
  </body>
</html>

Great for browsers, bookmarks, screen readers, and SEO

Wikipedia, what's "SEO"?

"Search engine optimization (SEO) is the process of affecting the visibility of a website or a web page in a search engine's unpaid results - often referred to as "natural," "organic," or "earned" results. In general, the earlier (or higher ranked on the search results page), and more frequently a site appears in the search results list, the more visitors it will receive from the search engine's users."

Dave, what the hell does that mean?

Search engines, in their spare time, go to every webpage they can find over the internet and either add or update their listings with the information it can read from the page.

That's known as "crawling".

The more clear, organized, and descriptive the content is on a webpage, the more accurate the search engine's listing will become.

Back to the body

The basic structure of HTML was created based on what you would find in a research paper or Word document.

  • <p> for paragraphs
  • <h1>, <h2>, <h3>, etc for headings
  • <ul> and <ol> for unordered and ordered lists
  • <a> for anchor links
  • <div> for divisions
  • <span> for spans of words

Inline vs Block

Most elements in HTML take up the full width of the screen (block), forcing the next element to be positioned below it on a new line.

Some elements, like <span>, are inline, which means that it will appear on the same line as the content before and after itself, never causing a line break.

Semantic Tags

HTML5 (the newest standard) introduced a new set of tags that are more literal than the dated and obscure tags like "div" and "span". These new tags include:

  • <header>
  • <footer>
  • <nav>
  • <article>
  • <section>
  • <aside>

Questions?

Styling Content

Inline styles

Some text
Some text
Some text

Separate form and content as much as possible

CSS to the rescue

"Cascading Style Sheets"

Styles in the Head

CSS can be defined in the <head> of a document, and they will effect every element on the page. 

<head>
  <meta charset="utf-8" />
  <title>My cool test page</title>

  <style>
    p {
      color: red;
      font-size: 32px;
    }
  </style>
</head>

But Dave, what if I want to style two paragraphs separately?

The ID attribute can be set on an element so that you can specifically select it in CSS: 

Some text
<style>
  p#redParagraph {
    color: red;
    font-size: 32px;
  }
</style>
The "p" before the pound sign is optional.

HOWEVER

Element IDs should only be used on single elements. If you have multiple elements that need the same style applied to them, use the "class" attribute: 

Some text


Some text
<style>
  p.redParagraph {
    color: red;
    font-size: 32px;
  }
</style>
The "p" before the decimal sign is also optional.

Sharing Styles Between Files

Create a file called "style.css" in your root directory and cut/paste all of the code in between the <style> tags into there.

Sharing Styles Between Files

In the place of your <style> tags, create a link to that file: 

<head>
  <meta charset="utf-8" />
  <title>My cool test page</title>

  <link rel="stylesheet" href="style.css" />
</head>

Duplicate Code is Gross

Questions?

Layouts

Jekyll Compiling

Jekyll does not compile/render any files that are in folders that have names that begin with an underscore.

Create a folder called "_layouts".

Jekyll Layouts

Layouts are like CSS, in that they can be used for multiple files.

Copy all of the content of one of your HTML files into a new layout file, named whatever you want.

Sample Layout

_layouts/default.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>My cool test page</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    {{ content }}
  </body>
</html>

Template Variables

Pre-defined variables can be added to the page using double curly brackets. 

{{ content }}

Logic is executed by using a single curly bracket and a percent sign. 

{% if content %}
  {{ content }}
{% endif %}

Front Matter

In order to have a file use a template, it must be defined in the page's front matter.

Page variables are set at the beginning of the file, in between two sets of triple hyphens. 

---
layout: default
---


Body Text

What else can I do with variables?

Any variable set in the front matter is accessible in the template. 

---
layout: default
title: My Cool Page
---


Body Text

Layout using Title

_layouts/default.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>
      {% if page.title %}
        {{ page.title }}
      {% else %}
        My cool test page
      {% endif %}
    </title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    {{ content }}
  </body>
</html>

Questions?

SCSS

"Sassy CSS"

What is SCSS?

SCSS adds features to CSS that are sorely needed. SCSS files must be compiled to CSS before being rendered to the page. Features include:

  • Variables
  • Math
  • Nesting
  • Functions

Jekyll and SCSS

In order for .scss files to be compiled by Jekyll, you must include front matter. 

style.scss
---
---

p.redParagraph {
  color: red;
  font-size: 32px;
}

Valid CSS is valid SCSS

Variables

All variables in SCSS must start with the dollar sign, and are set using the colon: 

---
---

$mainColor: red;

p.redParagraph {
  color: $mainColor;
  font-size: 32px;
}

Math

SCSS can perform calculations on pixel numbers, and return the appropriate value. 

---
---

$baseSize: 20px;

p.redParagraph {
  color: red;
  font-size: $baseSize + 12;
}

Nesting

Properties can be nesting directly within eachother, and get expanded on compile. 

---
---

p.redParagraph {
  color: red;
  font-size: 32px;

  a {
    text-decoration: underline;
  }

}

Functions (mixins)

SCSS calls functions "mixins". These functions can be applied to any style and are mixed directly into their own properties on compile. 

---
---

@mixin border-radius($radius: 5px) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

p.redParagraph {
  @include border-radius(10px);
  color: red;
  font-size: 32px;
}

Questions?

SVG

"Scalable Vector Graphics"

Raster vs Vector

Container Element

All SVG graphics need to be contained inside of an SVG element: 

<body>
  <svg></svg>
</body>

Draw shapes!

Shape properties are set as attributes of the element. 

<body>
  <svg>
    <rect x="50px" y="100px" width="150px" height="100px" fill="red" />
  </svg>
</body>

You can use CSS

.box {
  fill: red;
}
<body>
  <svg>
    <rect class="box" x="50px" y="100px" width="150px" height="100px" />
  </svg>
</body>

Built-in Shapes

  • rect
  • circle
  • ellipse
  • line
  • polyline
  • polygon
  • path

Homework

Homework

Recreate the Kandinsky Google Doodle, in SVG, at 2x scale. You are allowed to ignore gradients, textures, and curved lines. A link to your completed artwork should be made available on your class website.

Consult your "textbook" when learning a new SVG shape.