Wed, March 9

·

10 AM - 12 PM

Intro to web development - Part 1

Text editor

Get the Sublime Text 3 text editor here: https://www.sublimetext.com/3

Install Package Control

The package control allows you to install handy packages for Sublime Text like themes, code linting, toolkits, etc.

The simplest method of installation is through the Sublime Text console. The console is accessed via View > Show Console menu. Once open, paste the appropriate Python code for your version of Sublime Text into the console. Go to https://packagecontrol.io/installation and copy and paste the appropriate Python code for your version of Sublime Text into the console.

HTML (Content Structure)

Basic structure of a tag: <tag attribute="value"> content </tag>

Page structure

<!DOCTYPE html>
<html>
  <head>
    Meta information about the page
  </head>
  <body>
    Actual content page
  </body>
</html>

Meta Tags

Tags used in the <head> containing meta information about the page.

  • Title tag
<title> My site's title </title>
  • Link tag (for including external files like stylesheets and or scripts)
<link rel="stylesheet" href="style.css">
  • Meta tag (for including general information like special characters or description for SEO)
<meta charset="UTF-8">

Content Tags

Tags used in the <body> to describe the visible element of the page:

  • Paragraph
<p> text </p>
  • Headline
<h1> main headline </h1>
<h2> second-level headline </h2>
...
<h6> sixth-level headline </h6>
  • Unordered list
<ul>
  <li> list item 1 </li>
  <li> list item 2 </li>
  <li> list item 3 </li>
</ul>
  • Ordered list
<ol>
  <li> list item 1 </li>
  <li> list item 2 </li>
  <li> list item 3 </li>
</ol>
  • Image <img src="http://url.com/image.png" alt="Description of the image">
  • Hyperlink to link from one page to another <a href="http://url.com/page.html"> Visit the website! </a>

Phrase Tags

  • Important text <strong> Important text </strong>
  • Emphasized text <em> Emphasized text </em>

Divider Tag

  • Divider (container for other things)
<div>
  ...
</div>

Comments

To make HTML code disappear from the page, you can just add <!-- and --> before and after it.

<!--
  <p> This won't be on the page </p>
-->
<p> This will be! </p>

CSS (Styles)

Basic structure of a stylesheet:

selector {
  property: value;
  property: value;
  property: value;
}

And a real-world exmaple:

h1 {
  font-size: 40px;
}

.button {
  padding: 10px;
  color: white;
  background-color: red;
}

Basic visual style

  • Color of text: color: blue;
  • Color of background: background-color: green;
  • Font family (usually defined as a comma separated list of fonts. If the first font is not installed, it will use the second and so on): font-family: "Times New Roman", Georgia, serif;
  • Font size (set the font size): font-size: 24px;
  • Font style (normal, italic or oblique): font-style: italic;
  • Text align (left, right, center or justify): text-align: center;
  • Text decoration (underline or strikethrough): text-decoration: underline;
  • Opacity (0 is invisible, 1 is fully visible): opacity: .7;

Box model

Image that shows the box model

To simplify working with the box model, include the following code at the beginning of your CSS. It makes the width and height properties work independently of padding and border.

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

Units

  • Pixels (pixel on the screen): padding: 10px;
  • Percentage (usually the percentage of the width of the parent element but depends on the property): width: 50%
  • Ems (x times the parent element’s font size in pixels): font-size: 1.25em (equivalent to font-size: 24px if the parent’s font size is 16px)
  • Rems (x times the root <html> element’s font size in pixels): margin: 2rem (equivalent to margin: 32px if the root’s font size is 16px)

Color formats

  • Built-in-colors (browsers have a few basic colors built in, you can simply use them by name like red, green, blue, black, white, …): color: teal;
  • Hexadecimal (describes the RGB value as 3 consecutive hexadecimal numbers #rrggbb): color: #ff00ba In this case ff is the red value, 00 green, and ba blue
  • RGB (a different way of writing RGB colors, with decimal numbers, from 0 to 255 for red, green and blue instead of hex numbers): color: rgb(34, 12, 64);
  • RGBA (exactly the same as the previous, but additionally, the opacity of the color can be defined with the last parameter): color: rgba(34, 12, 64, 0.3);