Summer Course 2013: Day 3 Make Your Own Website


showing hidden files and folders, spectacle shortcuts, sublime text 2 skin, stackoverflow, html5 snippet, div, class, id, first-type-of, height, margin, padding.

Installing sublime text 2, SideBarEnhancements

cmd+shift+p, install, Sidebarenhancements to install.

Open Sublime Text 2 > Preferences > Browse Packages > User > SideBarEnhancements > Open With > Side Bar.sublime-menu

Right click on a file in sublime text 2 and select Open in Browser.

Comments in HTML and CSS


<!-- here you add your comments -->


/* here you add your comments */

CSS properties

  • border none, dotted, dashed, solid, double, groove, ridge, inset, outset
  • text-align, center, left, right

margin auto

margin with auto

    background-color: white;
    width: 300px;
    height: 600px;
    margin: 0 auto;
    border: 10px solid #ccc;

blockquote, pre, code

    blockquote tag
    somethng here.
    something here.

    pre tag
    First line
    second line
    third line

    code tag
    First line
    second line
    third line

Styling blockquote

Example 1

blockquote {
    margin: 1em 3em;
    color: #999;
    border-left: 2px solid #999;
    padding-left: 1em; 

Example 2

    margin: 1em 3em;
    padding: .5em;
    background-color: #f6ebc1; 

blockquote p {
    margin: 0; 

More examples

CSS trick




<a href="" target="_blank">Visit Google</a>

<a href="" target="_self">Visit Google</a>

Same level anchor, One level up, sibling folder

// folder1/anchor.html
    <li><a href="index.html">Folder Index.html</a></li>
    <li><a href="../index.html">One level up index.html</a></li>
    <li><a href="index.html" target="_blank">Same level Folder1/index.html with a new tab</a></li>
    <li><a href="../folder2/index.html">Folder2/index.html</a></li>

Internal links

internal links

<ul >
    <li><a href="#link1">
     Internal link 1</a></li>
    <li><a href="#link2">
     Internal link 2</a></li>
     <li><a href="#link3">
     Internal link 3</a></li>
     <li><a href="#link4">
     Internal link 4</a></li>

<div id="link1">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde voluptas suscipit velit minima quisquam. 
    Temporibus doloremque amet nihil nobis in quod facere cum voluptates eaque nulla sequi consequuntur rerum sunt.
    Repellat nam tempore officiis numquam recusandae animi mollitia velit quia.</p>
    <h3><a href="#top">Top</a></h3>

Project Structures

- index.html
|- css 
|- img

Update all css links.

<link rel="stylesheet" href="css/mystyle.css">
// Or
<link rel="stylesheet" href="../css/mystyle.css">


In index.html page type the following including alternate text. alt means "Specifies an alternate text for an image".

<img src="img/builder.jpg" alt="builder">

You can specify the dimention of the image.

<img src="img/builder.jpg" alt="builder" height="42" width="42">

Don't do hotlinkig. Finding a link by right-click an image and Copy image URL.

  • You are using other's bandwidth.
  • You have no control


<img src="" alt="builder">

You must use an image which you are allowed to use it. Your own images or creative common images.

Emmet Doc

Emmet doc

7 Awesome Emmet HTML Time-Saving Tips

Written on June 19, 2013