study

A diary of some sort. An interesting one.

How To Code HTML And CSS

This md contains my notes from the course Learn To Code HTML and CSS. Also, click here to access the website built by following this course/book.

Lesson 1

The title of the lesson is “Building your first web page”. Here are a few bullets I found interesting:

Lesson 2: Getting to Know HTML

Interesting bullets:

Lesson 3: Getting to Know CSS

Interesting bullets:

Lesson 4: Opening the Box Model

Interesting bullets:

Lesson 5: Positioning Content

Interesting bullets:

Lesson 6: Working With Typography

Interesting bullets:

Prior to reading this section of the course, I was already pretty well-versed most of the concepts presented in this lesson. Properties like font-weight, text-transform, letter-spacing, line-height, and most css properties that have to do with manipulating the look of text on a html page are not foreign to me.

A few properties/elements/concepts that were strange to me are bulleted below:

Lesson 7: Setting Backgrounds and Gradients

Interesting bullets:

Lesson 8: Creating Lists

Interesting bullets:

Lesson 9: Adding Media

Interesting bullets:


<audio src="file.mp3" autoplay controls></audio>

We now have:


<audio autoplay controls>
	<source src="file.ogg" type="audio/ogg">
	<source src="file.mp3" type="audio/mpeg">
	<source src="file.wav" type="audio/wav">
</audio>


<video src="earth.ogv" controls></video>


<video src="some-video.ogv" controls poster="some-thumb.jpg"></video>


<video controls>
	<source src="some-video.ogv" type="video/ogg">
	<source src="some-video.mp4" type="video/mp4">
	Some text specifying the video's <a href="#">download link</a>
</video>


<iframe src="some-url" frameborder="some-value" width="some-other-value" height="yep-more-values"></iframe>


<figure>
  	<img src="some-image.jpg">
  	<figcaption>caption used in place of image alt</figcaption>
</figure>

Lesson 10: Building Forms

Interesting bullets:

To tie these all together, here’s an illustration:


<input type="text" name="username">


<form action="#" method="post">

<input type="email" name="useremail">
<input type="date" name="userdob">
<input type="tel" name="usertel">

</form>


<textarea name="userstory">Some Placeholder Text</textarea>


<input type="radio" name="month" value="June" checked> June
<input type="radio" name="month" value="July"> July
<input type="radio" name="month" value="August"> August


<input type="checkbox" name="food" value="None" checked> None
<input type="checkbox" name="food" value="Egg"> Egg
<input type="checkbox" name="food" value="Fish"> Fish
<input type="checkbox" name="food" Value="Meat"> Meat


<select name="gender">
	<option value="None" selected>None</option>
	<option value="Male">Male</option>
	<option value="Female">Female</option>
</select>


<input type="submit" name="submit" value="Send">


...

<label>
	<input type="checkbox" name="month" value="April"> April
</label>
<label>
	<input type="checkbox" name="month" value="May" checked> May
</label>
<label>
	<input type="checkbox" name="month" value="June"> June
</label>

...


...

<fieldset>

<label>
	...
</label>

...

</fieldset>

...

Lesson 11: Organizing Data with Tables

Interesting bullets:


<table>
	<tr>
		<th>Heading 1</th>
		<th>Heading 2</th>
		<th>Heading 3</th>
		<th>Heading 4</th>
	</tr>

	<tr>
		<td>Text 1.1</td>
		<td>Text 1.2</td>
		<td>Text 1.3</td>
		<td>Text 1.4</td>	
	</tr>

	<tr>
		<td>Text 2.1</td>
		<td>Text 2.2</td>
		<td>Text 2.3</td>
		<td>Text 2.4</td>
	</tr>

	<tr>
		<td>Text 3.1</td>
		<td>Text 3.2</td>
		<td>Text 3.3</td>
		<td>Text 3.4</td>
	</tr>

</table>


<table>

	<caption>Placeholder Text</caption>

	<thead>
		<tr>
			<th> ... </th>

			...

		</tr>
	</thead>

	<tbody>
		<tr>
			<td> ... </td>

			...

		</tr>

		...

	</tbody>

	<tfoot>
		<tr>
			<td> ... </td>

			... 

		</tr>

		...

	</tfoot>

</table>