Week 02, Day 02.

What we covered today:

  • Warmup Exercise
  • Review
  • Sublime Package Control and Good Packages
  • Advanced CSS
    • Positioning
    • Display
    • Transitions
    • Google Fonts
    • Custom Fonts
  • Semantic HTML
  • Introduction to Markdown
  • Homework

Sublime Text

Sublime Text is a very powerful application, but in order to take full advantage of it we use a thing called Package Control. Firstly we need to install it!

If you are using Sublime Text 3, copy this code...

import urllib.request,os,hashlib; h = 'eb2297e1a458f27d836c04bb0cbaf282' + 'd0e7a3098092775ccb37ca9d6b2e4b7d'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)

Or if you are using Sublime Text 2, copy this code...

import urllib2,os,hashlib; h = 'eb2297e1a458f27d836c04bb0cbaf282' + 'd0e7a3098092775ccb37ca9d6b2e4b7d'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); os.makedirs( ipp ) if not os.path.exists(ipp) else None; urllib2.install_opener( urllib2.build_opener( urllib2.ProxyHandler()) ); by = urllib2.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); open( os.path.join( ipp, pf), 'wb' ).write(by) if dh == h else None; print('Error validating download (got %s instead of %s), please try manual install' % (dh, h) if dh != h else 'Please restart Sublime Text to finish installation')

Once you have copied the code, open up the Sublime Text console. View > Show Console. Once that is opened, paste the code you copied into the text box down the bottom.

Wait a little while, and it should say a success message or say that a missing dependency was installed. When this happens, hit enter, then restart Sublime Text (as in, quit the application).

To check that it works - click Sublime Text > Preferences and if Package Control is visible, you are all sorted.

The first package that we need is called "Emmet", it should mention Ex-zen coding. To install a package...

Sublime Text > Preferences > Package Control > Install Package and then type Emmet. Hit enter when you find the right package. It will give you a successful message and show you a bit of documentation about Emmet. Restart Sublime Text!

Emmet is really helpful when writing HTML, it automates a lot of stuff for us. Check out here and here. They will give you lots of information about how to use Emmet.

Brief Intro to Emmet

Everything with Emmet comes from writing down a shortcut and then hitting tab at the end of the shortcut.

Tag Name

Whether it is a p, a div, or anything else. If you type the tag name, and then hit tab, it will create the element.

Classes and IDs ( # or . )

div.className
Makes <div class="className"></div>

div#tagName
Makes <div id="tagName"></div>

div.firstClassName.secondClassName
Makes <div class="firstClassName secondClassName"></div>

div.className#secondClassName
Makes <div class="className" id="secondClassName"></div>

Children ( > )

This is for nesting elements!

div>p
Makes <div><p></p></div>

header>nav>p
Makes <header><nav><p></p></nav></header>

Sibling ( + )

This is for creating elements next to each other.

header+div.container
Makes <header></header><div class="container"></div>

Multiplication ( * )

This is for making multiple elements at once.

div>ul>li*3
Makes <div>
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

Climb Up ( ^ )

This is to climb out of a nesting.

header>p^div
Makes <header>
    <p></p>
</header>
<div></div>

Grouping ( () )

This is to group chunks of elements so you don't need to worry about climbing.

(header>h1)+(nav>a)
Makes <header>
    <h1></h1>
</header>
<nav><a href=""></a></nav>

Attributes ( [] )

This is to give custom attributes.

img[src="" title="" alt=""]
Makes <img src="" alt="" title="">

Text ( {} )

This is to add text to things.

a{This is a link to something}
Makes <a href="">This is a link to something</a>

These things can all be used together!

Display

Every element on a page is a rectangular box (this is called the box-model). The display property is the thing that determines how that box behaves. There are a bunch of things that can be given to it, but the main ones are:

Inline

An inline element will accept margin and padding, but the element still sits inline as you might expect. Margin and padding will only push other elements horizontally away, not vertically. Inline elements will allow things to sit next to them and is the default value for some elements (em, span, and b).

An inline element will not accept height and width. It will just ignore it.

Inline Block

An element set to inline-block is very similar to inline in that it will set inline with the natural flow of text (on the "baseline"). The difference is that you are able to set a width and height which will be respected.

Block

A number of elements are set to block by the browser UA stylesheet. They are usually container elements, like

,
, and
    . Also text "blocks" like

    and

    . Block level elements do not sit inline but break past them. By default (without setting a width) they take up as much horizontal space as they can.

Things won't sit next to block-level elements!

None

Totally removes the element from the page. Note that while the element is still in the DOM, it is removed visually and any other conceivable way (you can't tab to it or its children, it is ignored by screen readers, etc).

Positioning

Originally designed for scripting animation effects, this is not designed for layouts (but it is very possible!) - stick to display for that.

There are a bunch of different values for this, these are the most common ways:

Static

Static is the default value. It lets the element use the normal behaviour (what it is supposed to do). The top, right, bottom, left and z-index properties do not apply. It really does nothing.

Relative

It treats position: static as its starting point and, without changing any other elements position, allows us to move it around based on its static position.

For example, if we added top: -20px to an element, it would move that element up the page by 20px.

Absolute

Position absolute is very different to relative and static. If we add this property, the browser will not leave space for that element. Instead it references its nearest positioned parent ( non-static ) - this will often reference the body element.

Make sure you reference top and left or bottom and right when you use this property. Remember that this will change the document flow!

Fixed

This is quite similar to position absolute. You reference the top, bottom, left and right - except it sticks to the place that you tell it.

This is how they create fixed navigation bars etc. Remember that it references its nearest positioned element!

nav {
    position: fixed;
    top: 0;
    left: 0;
    height: 80px;
}

Get to know this stuff! And, go here for more information.

Google Fonts

  • Go through here and Add the fonts that you want to your Collection
  • Once you have selected all your fonts, click Use (bottom right)
  • Choose the styles that you would like, and the character set
  • Choose @import, and copy and paste the code into the top of your CSS file that it shows
  • Reference the font with the code provided

Font Awesome

  • Go here and copy the CDN link - <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
  • If you aren't using a server (Node or Ruby or anything else), add https at the front of the href
  • Put this in the head of your HTML page
  • Go through here and click on the icons that you want
  • That will show you the HTML that you need

Custom Fonts

To reference custom fonts, you need to have the fonts saved in your project. Reference them in this way - make sure this is at the top of the CSS file! Reference this particular font by using the font-family name you referred to.

@font-face {
  font-family: 'GT Pressura';
  src:  url('GTPresurra.eot');
  src:  local('GT Pressura'),
        url('GTPressura.eot#iefix'),
        url('GTPressura.eot') format("truetype"),
        url("GTPressura.otf") format("opentype"),
        url("GTPressura.woff") format("woff"),
        url("GTPressura.woff2") format("woff2"),
        url("GTPressura.svg") format("svg");
}

To convert fonts, use this tool.

Fontello

This will generate a custom font for you, that you will then need to reference in your CSS. Once you have selected all the icons that you want, give it a family name (top right) and select download webfont. Make sure you have all the formats that you need (from the custom fonts section above), and reference each icon with the code that it gives you.

Variadic Attributes (margin etc.)

Variadic attributes are just shorthands to apply a number of properties. Take margin for example:

h1 {
    /* Applies to all four sides */
    margin: 1em;

    /* vertical | horizontal */
    margin: 5% auto;

    /* top | horizontal | bottom */
    margin: 1em auto 2em;

    /* top | right | bottom | left */
    margin: 2px 1em 0 auto;
}

Introduction to Markdown

What is Markdown?

Markdown was initially created by John Gruber (of Daring Fireball) as a simple way for non-programming types to write in an easy-to-read format that could be converted directly into HTML.

Markdown uses a very simple formatting syntax to accomplish the same thing that HTML does. The difference is that it's simpler than HTML and you don't have to worry about opening and closing tags. It also doesn't have all of the menus associated with most text editing programs. To format text, Markdown uses punctuation and characters you're already familiar with.

How do you write it?

This is quite a good place to learn it.

To create a paragraph...

This is a paragraph, it has nothing unusual.

To create headings...

To create headings, prefix the text with hashes (from 1 hash to 6 hashes - more hashes, less important)

# This is an H1
## This is an H2
### This is an H3
#### This is an H4
##### This is an H5
###### This is an H6

To use inline styles...

For italics, wrap the content in underscores, for bold, wrap the content in asterisks.

_This is in italics._

**This is bold.**

_You can **combine** those two things quite easily._

To create lists...

# For unordered lists, prefix text with a +, - or *

- This is one list item
- This is another

* This is one list item
* This is another

+ This is one list item
+ This is another

You can write unordered lists in a bunch of different ways!

# For ordered lists. Just write the number and a period after it

1. This is a list item
2. This is another list item

To create links...

To create links, select the things that you want to act as a link and put square brackets around them. Immediately following, have round brackets with the URL.

OR! Just put the link on the page.

[This](https://generalassemb.ly/) is a link to General Assembly.

https://generalassemb.ly/

To put an image in the file...

To put an image in the file, have an exclamation mark, followed by square brackets with a caption in it, which is in turned followed by round brackets with a URL and an optional title.

![This is Zac.](https://pbs.twimg.com/media/CLOZKEGUsAA9Wym.jpg "An optional title")

To quote someone (using a blockquote)...

To use a blockquote, prefix some text with a >

> This is a quote

To put code on the page...

To put code on the page, wrap some backticks (`) around the code.

\

var x = 5; // This is a comment if ( x < 5 ) { console.log( "something." ); } ```

Alternatively, you can have inline code by wrapping text with a single ` .

This is an inline piece of code - var x = 5;. ```

Homework