jfraboni · August 29, 2015 14:27
diff --git a/definition-list.html b/definition-list.html
 <dl>
  <dt>Canada</dt>
  <dd>A very cold country</dd>
  <dt>Brazil</dt>
  <dd>A very warm country</dd>
 </dl>
diff --git a/flexbox.css b/flexbox.css
 .flex-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin: 20px;
    padding: 4px;
 }
diff --git a/flexbox.html b/flexbox.html
 <div class="flex-row">
    <div>One</div>
    <div>Two</div>
    <div>Three</div>
    <div>Four</div>
    <div>Five</div>
 </div>
diff --git a/form.css b/form.css
 .example-form {
    /* Just to center the form on the page, use: margin: 0 auto;*/
    margin: 20px;
    width: 400px;
    /* To see the outline of the form */
    padding: 1em;
    border: 1px solid #CCC;
    border-radius: 1em;
 }

 .example-form div + div {
    margin-top: 1em;
 }

 .example-form label {
    /* To make sure that all labels have the same size and are properly aligned */
    display: inline-block;
    width: 90px;
 }

 .example-form input,
 .example-form textarea {
    /* To make sure that all text fields have the same font settings
    By default, textareas have a monospace font */
    font: 1em sans-serif;
    /* To give the same size to all text field */
    width: 300px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    /* To harmonize the look & feel of text field border */
    border: 1px solid #999;
 }

 .example-form input:focus,
 .example-form textarea:focus {
    /* To give a little highlight on active elements */
    border-color: #000;
 }

 .example-form textarea {
    /* To properly align multiline text fields with their labels */
    vertical-align: top;
    /* To give enough room to type some text */
    height: 5em;
    /* To allow users to resize any textarea vertically
    It does not work on every browsers */
    resize: vertical;
 }
diff --git a/form.html b/form.html
 <form class="example-form">
    <div>
        <label for="name">Name:</label>
        <input type="text" id="name" />
    </div>
    <div>
        <label for="mail">E-mail:</label>
        <input type="email" id="mail" />
    </div>
    <div>
        <label for="msg">Message:</label>
        <textarea id="msg"></textarea>
    </div>

    <div class="button">
        <button type="submit">Send your message</button>
    </div>
 </form>
diff --git a/grid.css b/grid.css
 .example-grid {
    margin: 20px;
 }

 .row-img {
    margin: 4px;
 }
diff --git a/grid.html b/grid.html
 <div class="example-grid">
  <div class="row">
      <div class="col-md-2"><img src="../img/cherries.jpg" class="row-img"></img>
      </div>
      <div class="col-md-10">Cherries are tasty things that grow on trees! You can eat them and feel good about yourself!</div>
  </div>
  <div class="row">
      <div class="col-md-2"><img src="../img/black-currant.jpg" class="row-img"></img>
      </div>
      <div class="col-md-10">Black Currents are tasty things that grow on bushes! You can eat them and feel good about yourself!</div>
  </div>
  <div class="row">
      <div class="col-md-2"><img src="../img/apple-in-grass.jpg" class="row-img"></img>
      </div>
      <div class="col-md-10">Apples are tasty things that grow on trees! You can eat them and feel good about yourself! They make great pies!</div>
  </div>
 </div>
diff --git a/indentation.html b/indentation.html
 <body>
    <div id="container" class="container">
        <p>
            This paragraph tag belongs to the div tag with id "container", and the div tag belongs to the body tag!
        </p>
    </div
 </body>
diff --git a/index.html b/index.html
 <body>
    <div id="container" class="container">
        <!-- ALL YOUR MARKUP GOES BELOW HERE -->
        
        
        
        
        <!-- ALL YOUR MARKUP GOES ABOVE HERE -->
    </div>
    <!-- other html... -->
diff --git a/table.css b/table.css
 table {
    margin: 20px;
 }

 table,
 th,
 td {
    padding: 4px;
    border: 1px solid black;
 }
diff --git a/table.html b/table.html
 <table>
    <thead>
        <tr>
            <th>First Name</th>
            <th>Last Name</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td colspan="2">Names of students in class of 2020...</td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>Bob</td>
            <td>Harrison</td>
        </tr>
        <tr>
            <td>Judy</td>
            <td>Dorsy</td>
        </tr>
    </tbody>
 </table>
	<dl>
	<dt>Canada</dt>
	<dd>A very cold country</dd>
	<dt>Brazil</dt>
	<dd>A very warm country</dd>
	</dl>
	.flex-row {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	margin: 20px;
	padding: 4px;
	}
	<div class="flex-row">
	<div>One</div>
	<div>Two</div>
	<div>Three</div>
	<div>Four</div>
	<div>Five</div>
	</div>
	.example-form {
	/* Just to center the form on the page, use: margin: 0 auto;*/
	margin: 20px;
	width: 400px;
	/* To see the outline of the form */
	padding: 1em;
	border: 1px solid #CCC;
	border-radius: 1em;
	}

	.example-form div + div {
	margin-top: 1em;
	}

	.example-form label {
	/* To make sure that all labels have the same size and are properly aligned */
	display: inline-block;
	width: 90px;
	}

	.example-form input,
	.example-form textarea {
	/* To make sure that all text fields have the same font settings
	By default, textareas have a monospace font */
	font: 1em sans-serif;
	/* To give the same size to all text field */
	width: 300px;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	/* To harmonize the look & feel of text field border */
	border: 1px solid #999;
	}

	.example-form input:focus,
	.example-form textarea:focus {
	/* To give a little highlight on active elements */
	border-color: #000;
	}

	.example-form textarea {
	/* To properly align multiline text fields with their labels */
	vertical-align: top;
	/* To give enough room to type some text */
	height: 5em;
	/* To allow users to resize any textarea vertically
	It does not work on every browsers */
	resize: vertical;
	}
	<form class="example-form">
	<div>
	<label for="name">Name:</label>
	<input type="text" id="name" />
	</div>
	<div>
	<label for="mail">E-mail:</label>
	<input type="email" id="mail" />
	</div>
	<div>
	<label for="msg">Message:</label>
	<textarea id="msg"></textarea>
	</div>

	<div class="button">
	<button type="submit">Send your message</button>
	</div>
	</form>
	<div class="example-grid">
	<div class="row">
	<div class="col-md-2"><img src="../img/cherries.jpg" class="row-img"></img>
	</div>
	<div class="col-md-10">Cherries are tasty things that grow on trees! You can eat them and feel good about yourself!</div>
	</div>
	<div class="row">
	<div class="col-md-2"><img src="../img/black-currant.jpg" class="row-img"></img>
	</div>
	<div class="col-md-10">Black Currents are tasty things that grow on bushes! You can eat them and feel good about yourself!</div>
	</div>
	<div class="row">
	<div class="col-md-2"><img src="../img/apple-in-grass.jpg" class="row-img"></img>
	</div>
	<div class="col-md-10">Apples are tasty things that grow on trees! You can eat them and feel good about yourself! They make great pies!</div>
	</div>
	</div>
	<body>
	<div id="container" class="container">
	<p>
	This paragraph tag belongs to the div tag with id "container", and the div tag belongs to the body tag!
	</p>
	</div
	</body>
	<body>
	<div id="container" class="container">
	<!-- ALL YOUR MARKUP GOES BELOW HERE -->




	<!-- ALL YOUR MARKUP GOES ABOVE HERE -->
	</div>
	<!-- other html... -->
	table {
	margin: 20px;
	}

	table,
	th,
	td {
	padding: 4px;
	border: 1px solid black;
	}
	<table>
	<thead>
	<tr>
	<th>First Name</th>
	<th>Last Name</th>
	</tr>
	</thead>
	<tfoot>
	<tr>
	<td colspan="2">Names of students in class of 2020...</td>
	</tr>
	</tfoot>
	<tbody>
	<tr>
	<td>Bob</td>
	<td>Harrison</td>
	</tr>
	<tr>
	<td>Judy</td>
	<td>Dorsy</td>
	</tr>
	</tbody>
	</table>