CS1 Course Reference

Welcome! This page is meant to be a reference page as you complete assignments for CS 1. It may be helpful to have it open in a separate tab as you're completing assignments.

This page will grow as we learn more about HTML, CSS, and JavaScript. Check back often!

Example Sites:

Below, you can find my examples for (some of) the sites we will create in class.

Feel free to "View Page Source" or open in DevTools!

Assignment Name Concept Webpage
1.1 - HTML Hello World HTML Syntax Hello World
N/A Basic Tags Practice My History
1.2 - How-To Guide Lists Tofu Recipe
2.1 - Style My Page Lists Template
Big Site 1: About Me About Tr. Canora!
4.1 - Navbar Flexbox & Positioning Top Nav
4.2 - Trading Cards Flexbox Socks
Big Site 2: Restaurant Bella Cucina
7.1 - Shop External Styles Nike

HTML Tag Reference:

Tag Name Purpose Tag Example Result
Heading Creates text that is big and bold. Meant to be a title for a section (or a whole page) of your site. Higher numbers create smaller text! <h1> thru <h6> <h1>This is a big, bold title!</h1>

This is a big, bold title!
Paragraph The most basic tag. Shows a paragraph of text. <p> <p>This is just some text</p>

This is just some text
Bold Makes some text bold (thicker and darker). <b> The word <b>bold</b> is <b>bold</b> The word bold is bold
Italic Makes some text italic (slanty). <i> The word <i>italic</i> is <i>italic</i> The word italic is italic
Ordered List Makes a list that goes by numbers or letters. <ol> <ol>
  <li>Item Number One!</li>
  <li>Item Number Two!</li>
</ol>
  1. Item Number One!
  2. Item Number Two!
Unordered List Makes a list that goes by bullet points. <ul> <ul>
  <li>Item Number One!</li>
  <li>Item Number Two!</li>
</ul>
  • Item Number One!
  • Item Number Two!
List Item An item in an ordered or unordered list. <li> See Above See Above
Horizontal Rule A horizontal line. This is a self closing tag, so it does not get a friend! <hr/> <hr/>
Anchor (To New Page) A link that takes us to a different page. Put the filename (or URL) of the new page inside the href argument. <a> <a href="new_page.html">Click here!</a> Click here!
Anchor (To a Location on the Same Page) A link that scrolls us to a section of the current page. Put the id of the target anchor inside the href argument, with a # in front. <a>

<a id="anchor">This is the destination</a>

<a href="#anchor">This is the link you'll click</a>

This is the link you'll click
Image An image. Put the filename of the image in the src argument. This is a self closing tag, so it does not get a friend! <img/> <img src="smile.jpeg"/>
Table A grid. You're looking at a table right now! <table> <table>
<tr>
<th>Top Left</th>
<th>Top Right</th>
</tr>
<tr>
<td>Bottom Left</td>
<td>Bottom Right</td>
</tr>
</table>
Top Left Top Right
Bottom Left Bottom Right
Table Row A horizontal row inside a table. Needs to be inside a table. <tr>
Table Heading A centered, bold title inside a table. Needs to be inside a table row. <th>
Table Data Something inside a table. We can put text, or almost any other element inside a td. Needs to be inside a table row <td>
Title Sets the name of the page, which is shown by Chrome in the tab bar. This tag MUST be in the head. <title> <title>Tr. Canora's Area</title> Look at the tab bar!
Favicon Sets the icon of the page, which is shown by Chrome in the tab bar. This tag MUST be in the head. <link/> <link rel="icon" href="smile.jpeg"/> Look at the tab bar!

CSS Property Reference:

Property Description Values Example
height and width Sets the height or width of an element A number with a unit. In this class, we'll be using percent (%) and pixels (px) most often. Make sure your unit is touching your number! height: 200px;
text-align Sets text (and some other types of elements) to be left-justified, right-justified, or centered

start

center

end

 text-align: center;
color Sets the color of text A named color (eg. blue, red, etc) or a hex color (eg. #00ffff, #102798, etc) color: #ff2255;
background-color Sets the color of the background of an element A named color (eg. blue, red, etc) or a hex color (eg. #00ffff, #102798, etc) background-color: #00ffaa;
font-family Sets the font of text inside an element A comma-separated list of fonts. By default, here are your options: arial, verdana, tahoma, georgia, garamond, monospace, cursive font-family: cursive;
font-size Sets the size of text inside an element A number with the unit pt. Make sure your unit is touching your number! font-size: 20pt;
font-weight Sets the "boldness" of text A number without a unit. 400 is the default, anything larger will be bold, anything smaller will be thin. font-weight: 800;
position Controls how elements are placed on the screen
  • relative: Part of the party, but scooched.
  • absolute: Not part of the party, but scrolls.
  • fixed: Not part of the party, doesn't scroll.
 position: fixed;
Flexbox A VERY powerful way of laying out elements Click here for an AMAZING flexbox reference