Week 0: HTML and CSS

Agenda:

Why learn to code?
Course Overview, Resources
Weekly Overview
GitHub, GH Pages
HTML, CSS, Bootstrap
Assignment

Overview:

This week we will cover the basics of building websites with HTML and CSS. The assignment for this week will be to create your own website, which you will use to submit your weekly assignments for the rest of the semester. The content from today's class is intended to get you started, but you will likely need to spend some time at W3 Schools or other instructional websites. While it is important this week to create a functionally viable website, you'll have the opportunity to hone and refine the styling over the course of the semester.

Our main goal for this week is to make sure that we're comfortable designing and building websites from scratch. There are lots of services or content management systems that help develop and host web content (Squarespace, Wordpress, Drupal, etc.). These services can be very useful in the short term, but in their efforts to streamline development they abstract and obscure the fundemental elements of web design. This means that developers need to learn how to use the service instead of learning web fundamentals. That idiosyncratic knowledge is not necessarily transferable, and there's no guarantee how long these services will stay in business. That's why this week we'll focus on building websites from scratch using HTML elements. These are the basic building blocks from which everything on the internet is composed.

Resources:

Example Files
W3 Schools - HTML
W3 Schools - CSS
W3 Schools - Bootstrap
Shiffman - GitHub Pages for Hosting p5.js Sketches

More Advanced:
Shiffman - HTML/CSS/DOM

For additional help:
YouTube Series - HTML
YouTube Series - CSS
YouTube Series - Bootstrap

Preview for Next Week:
p5 Website
Shiffman - Intro to p5js

GitHub

Exercise 0.0: Getting set up with GitHub

GitHub is the version control and collaborative network where the world goes tp write software. For the purposes of this class, we will use GitHub as a hosting service for our websites as well as version control (backup) for our code. We'll first make sure everyone is set up with GitHub, then we'll start writing HTML and CSS. By the end of class, we'll make sure that everyone is able to save and upload their websites. Daniel Shiffman has a great tutorial series on using Git and GitHub; the introduction video has an explanation of why GitHub is so useful.

Step 0: Download and Install Software

Step 1: Create and Clone a New Repository

Step 2: Add Content to the Repository

Step 3: Save the Changes to the Remote Repository

You have successfully synced your local directory with your remote repository. Anytime you work on your code, make sure to not only Ctrl+S to save often, but also periodically commit your changes and push them to your repository. Making changes to your website, committing and pushing them to your repo will also be the way in which you will turn in assignments.

Step 4: GitHub Pages

So far, we've created a repository and synced it to our local drive. We know that this directory is to be the source code for our website. So far it contains only an index.html file, which is pretty minimal (eventually, our repository should include a folder for each week, each with its own index.html file). However, the next step for now is to get our bare-bones website hosted on the web. For that, we can use a convenient service called GitHub Pages. Since we're using GitHub for version control anyway, it's straightforward to also use it as a hosting service. It will automatically update our website every time we push to our remote repo! (that saves a time-consuming step compared to other hosting platforms).

That was a lot of steps, but this is a really important workflow! You'll need to go through this process at least once a week, so it will become routine. Over the semester, as we start to use more features of GitHub, it will start to make more sense why it's useful. Being comfortable with using GitHub is a prerequisite for most programming gigs.

Daniel Shiffman has created a tutorial video on using GitHub Pages for Hosting p5.js Sketches. He does some things a bit differently (it's no longer necessary to change to a gh-pages branch, we're using GitHub Desktop instead of Terminal and we're not yet working with p5.js) but it still may be useful to see someone going through the steps one more time.

HTML

HyperText Markup Language

(From W3 Schools) HTML is the standard markup language for creating Web pages.


	<!DOCTYPE html>
	<html>
	<head>
		<title>Page Title</title>
	</head>
	<body>
		<h1>This is a Heading</h1>
		<p>This is a paragraph.</p>

	</body>
	</html>
	 

Example explained:

HTML Tags

HTML tags are element names surrounded by angle brackets HTML tags normally come in pairs like <p> and </p> The first tag in a pair is the start tag, the second tag is the end tag The end tag is written like the start tag, but with a forward slash inserted before the tag name Only the content inside the <body> section (the white area in the image below) is displayed in a browser.

HTML Page Structure

Below is a visualization of an HTML page structure:

<html>
<head>
<title>Page title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>


HTML Elements

An HTML element usually consists of a start tag and end tag, with the content inserted in between:


	<tagname>Content goes here...</tagname>
	 

The HTML element is everything from the start tag to the end tag:


	<p>My first paragraph.</p>
	 
Start tag Element content End tag
<h1> My First Heading </h1>
<p> My first paragraph. </p>
<br>    

HTML elements with no content are called empty elements. Empty elements do not have an end tag, such as the <br> element (which indicates a line break).

HTML elements can be nested (elements can contain elements). All HTML documents consist of nested HTML elements.

HTML Attributes

Attribute Description
alt Specifies an alternative text for an image, when the image cannot be displayed
disabled Specifies that an input element should be disabled
href Specifies the URL (web address) for a link
id Specifies a unique id for an element
src Specifies the URL (web address) for an image
style Specifies an inline CSS style for an element
title Specifies extra information about an element (displayed as a tool tip)

A complete list of all attributes for each HTML element, is listed in: HTML Attribute Reference.

HTML Formatting

HTML also defines special elements for defining text with a special meaning.
HTML uses elements like <b> and <i> for formatting output, like bold or italic text.


	<b>This text is bold.</b> <i> This text is italic.</i> <br> 
	This is <sub>subscript</sub> and <sup>superscript</sup>
	 

This text is bold. This text is italic.
This is subscript and superscript

Tag Description
<b> Defines bold text
<em> Defines emphasized text 
<i> Defines italic text
<small> Defines smaller text
<strong> Defines important text
<sub> Defines subscripted text
<sup> Defines superscripted text
<ins> Defines inserted text
<del> Defines deleted text
<mark> Defines marked/highlighted text

HTML Links

HTML links are defined with the <a> tag The link's destination is specified in the href attribute. Destinations can be local or web-based (absolute URL) Attributes are used to provide additional information about HTML elements.


	<a href="https://w3schools.com">This is a link<a>
	 

HTML Images

HTML images are defined with the <img> tag The source file (src), alternative text (alt), width, and height are provided as attributes The <img> tag is empty, it contains attributes only, and does not have a closing tag.


	<img src="img_girl.jpg" alt="Girl in a jacket"<a>
	 

Other useful HTML tags

HTML Headings
HTML Paragraphs
HTML Tables
HTML Lists
HTML Iframes
HTML Entities

CSS

Intro to CSS

CSS describes how HTML elements are to be displayed on screen, paper, or in other media. CSS saves a lot of work. It can control the layout of multiple web pages all at once. CSS can be added to HTML elements in 3 ways:
Inline - by using the style attribute in HTML elements
Internal - by using a <style> element in the <head> section
External - by using an external CSS file

CSS Syntax

CSS Colors

CSS Borders

CSS Margins

CSS Padding

CSS Fonts

Bootstrap

Bootstrap Grid System

Bootstrap's grid system allows up to 12 columns across the page.

If you do not want to use all 12 columns individually, you can group the columns together to create wider columns:

span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1
 span 4  span 4  span 4
span 4 span 8
span 6 span 6
span 12

Bootstrap's grid system is responsive, and the columns will re-arrange automatically depending on the screen size.

Grid Classes

The Bootstrap grid system has four classes:

The classes above can be combined to create more dynamic and flexible layouts.

Basic Structure of a Bootstrap Grid

The following is a basic structure of a Bootstrap grid:

<div class="row">
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
</div>
<div class="row">
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
</div>
<div class="row">
  ...
</div>

First; create a row (<div class="row">). Then, add the desired number of columns (tags with appropriate .col-*-* classes). Note that numbers in .col-*-* should always add up to 12 for each row.

More About Bootstrap Grid System

Bootstrap Templates