Code First: Girls UCL

Spring/Summer 2016

Recap:

How do we develop websites?

Task!

Go to the GitHub repository for this session: https://github.com/code61/html2
Download the code into your coding_course folder (by clicking 'Download ZIP' in the bottom right).

Cascading Style Sheets

created by the World Wide Web Consortium (W3C) - the people who maintain HTML - to solve the problem of formatting and styling a document.

This allows HTML to do its job - defining the content of a document.

You can have multiple CSS files for one HTML document.

<!doctype html>
<html>
<head>
    <title>Hello!</title>
    <meta name="description" content="this is an example page">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div>
        <h1>this is my main header</h1>
        <p>this is a paragraph</p>
    </div>
</body>
</html>

body {
    font-family: 'Open Sans', 'Helvetica', Arial, sans-serif;
    padding: 20px 10px 0 5px;
}

h1 {
    color: red;
}

your "style.css" file

<!doctype html>
<html>
<head>
    <title>Hello!</title>
    <meta name="description" content="this is an example page">
    <style>
        body {
            font-family: 'Open Sans', 'Helvetica', Arial, sans-serif;
            padding: 20px 10px 0 5px;
        }
        
        h1 {
            color: red;
        }
    </style>
</head>
<body>
    <div>
        <h1>this is my main header</h1>
        <p>this is a paragraph</p>
    </div>
</body>
</html>

Also possible, but what if you want the same theme across your files?

<!doctype html>
<html>
<head>
    <title>Hello!</title>
    <meta name="description" content="this is an example page">
</head>
<body style="font-family: 'Open Sans', 'Helvetica', Arial, sans-serif; padding: 20px 10px 0 5px;">
    <div>
        <h1 style="color: red;">this is my main header</h1>
        <p>this is a paragraph</p>
    </div>
</body>
</html>

Also possible, but not practical at all.

The <link> tag

first_site
---- index.html
---- images
|    ---- background.jpg
---- stylesheets
|    ---- main.css

<!-- in index.html -->
<link rel="stylesheet" type="text/css" href="http://www.my_site.com/stylesheets/main.css">

/* in main.css */
body {
  background-image: url("http://www.my_site.com/images/background.jpg");
}

absolute links - the complete url

including http:// or https://

Local links

first_site
---- index.html
---- images
|    ---- background.jpg
---- stylesheets
|    ---- main.css

<!-- in index.html -->
<link rel="stylesheet" type="text/css" href="/stylesheets/main.css">

/* in main.css */
body {
  background-image: url("../images/background.jpg");
}

root-relative links

relative to the site’s root

document-relative links

relative to the file where the link is written

Let's start

open exercise1.css

Basics

h1 { 
    color: red; 
}

This is a rule set

a css selector

selectors have different types

a declaration

the property :

its value;

h1 { 
    color: red; 
    font-family: sans-serif;
    padding: 20em;

}

this is a declaration block

Task!

Open exercise1.css in Sublime Text and in Chrome.
Make the h1 turn red.
Continue with the exercise until exercise1.html looks like exercise1_solution.png.

Demo: Selectors & Attributes!

Selectors

<h2 id="products_title">Our scrumptious puddings</h2>
<ul id="products_list">
  <li class="product_item">Black forrest gateau</li>
  <li class="product_item">Rasberry lemon swirl cheesecake</li>
  <li class="product_item">Sticky toffee pudding</li>
  <li class="product_item">Death-by-chocolate cake</li>
</ul>

h2 { 
  font-size: 40px;
  color: pink;
}

element selector

/* make the h2 with id="products_title" purple */
h2#products_title { color: purple; }

/* remove the bullets from all li with class="product_item" */
li.product_item { list-style-type: none; }

/* make any element with id="products_title" purple */
#products_title { color: purple; }

/* make any element with class="product_item blue" */
.product_item { color: blue; }

attribute selectors

manipulating your HTML

* {
font-family: sans-serif;
}

universal selector

Writing code that scales

use GitHub to demo

Hosting your website on GitHub

Competition

Put into practice the skills learnt on the course

Work individually or in groups of 2-3 to create a landing page for a website.

Form teams by Week 3, and collaborate on Slack

A visually appealing design - good use of CSS, HTML elements, and Twitter Bootstrap
Good formatting
- Code split into the appropriate files
- Files indented properly
A live website (Github page, Heroku or own domain)
Extras e.g:
- A contact form (for example name and email)
- Social buttons
- Widgets
- As many different HTML elements you can manage

Interactive elements (like forms) on the website don’t need to be functional, but should be present if they need to be for the visual aspect of the design.

(optional) Good organisation
- Version control using GitHub
- Sensible commit messages