Introduction to

html, css with GitHub Pages

by Eddie Abou-Jaoudé

GitHub Pages

Free static website hosting

Register with GitHub

Use your name eg. eddiejaoude

Create a Repository

With name eg. eddiejaoude.github.io

Create a File

index.html with your name inside

Visit your url

eg. http://eddiejaoude.github.io

DONE!

You have a website online

html

"HTML is a markup language for describing web documents (web pages)"

from W3Schools.com

HTML stands for Hyper Text Markup Language
A markup language is a set of markup tags
HTML documents are described by HTML tags
Each HTML tag describes different document content

from W3Schools.com

Examples

Heading 1

									
										 <h1> ... </h1>

Heading 6

									
										 <h6> ... </h6>

Examples

Paragraph

									
										 <p> ... </p>

Link

									
										 <a> ... </a>

Examples

Link with property

									
										 <a href="path/to/source"> ... </a>

Image

									
										 <img src="path/to/image.png" alt="Picture description" />

Examples

Comment

									
										 <!-- ... -->

Full page example

							
<!DOCTYPE html>
<html>
	<head>
		<title>Title of the document</title>
	</head>

	<!-- My visible page -->
	<body>
		<h1>Eddie Jaoude</h1>
		<p>Description of Eddie Jaoude ...</p>
	</body>
</html>

css

CSS stands for Cascading Style Sheets
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
External stylesheets are stored in CSS files

from W3Schools.com

Examples

							
h1 {
    color: red;
    font-size: 40px;
}

p {
    color: blue;
    font-size: 12px;
}

img {
    margin: 10px;
}

Examples

							
<p class="hero">Brief description of Eddie Jaoude ...</p>
<p>Full description of Eddie Jaoude ...</p>

							
p {
    color: blue;
    font-size: 12px;
}

p.hero {
    color: red;
    font-size: 20px;
}

Create the file style.css

Add the following inside the <head> section

							
								<link rel="stylesheet" href="styles.css">

Full page example

							
<!DOCTYPE html>
<html>
	<head>
		<title>Title of the document</title>
		<link rel="stylesheet" href="styles.css">
	</head>

	<!-- My visible page -->
	<body>
		<h1>Eddie Jaoude</h1>
		<p class="hero">Brief description of Eddie Jaoude ...</p>
		<p>Full description of Eddie Jaoude ...</p>
	</body>
</html>

Bootstrap

Bootstrap is the most popular HTML, CSS, and JS framework in the world for building responsive, mobile-first projects on the web.

What does it do

Responsive layout
Lots of helper components
Alerts
Forms
Buttons
Navigation
Modal
...

Setup

Documentation http://v4-alpha.getbootstrap.com

							
<!DOCTYPE html>
<html>
	<head>
		<title>Title of the document</title>
		<link rel="stylesheet" href="styles.css">
	</head>

	<!-- My visible page -->
	<body>
		<h1>Eddie Jaoude</h1>
		<p class="hero">Brief description of Eddie Jaoude ...</p>
		<p>Full description of Eddie Jaoude ...</p>

		<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"></script>
	</body>
</html>

Example

Documentation http://v4-alpha.getbootstrap.com/components/alerts/

							
<div class="alert alert-success" role="alert">
  <strong>Well done!</strong> You successfully read this important alert message.
</div>
<div class="alert alert-info" role="alert">
  <strong>Heads up!</strong> This alert needs your attention, but it's not super important.
</div>
<div class="alert alert-warning" role="alert">
  <strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>
<div class="alert alert-danger" role="alert">
  <strong>Oh snap!</strong> Change a few things up and try submitting again.
</div>

Example

Results