General Assembly

Coding for beginners: HTML and CSS

By Chen Hui Jing / @hj_chen

General Assembly

About web development

What is web development?

The process of building websites

How to get started?

Your computer

  • This image is pure CSS.

A clear mind

A clear mind

Code is numbers, letters and symbols

Regardless of what programming language you use, all code can be read in any text editor.

Javascript

close: function () {
  this.ul.setAttribute("hidden", "");
  this.index = -1;

  $.fire(this.input, "awesomplete-close");
},

Code credit: Lea Verou

C

#include "8cc.h"
static int count_leading_ones(char c) {
  for (int i = 7; i >= 0; i--)
      if ((c & (1 << i)) == 0)
          return 7 - i;
  return 8;
}

Code credit: Rui Ueyama

Assembly

ctable	 segment para public 'DATA
  db	9 dup(' ')
  db	9,10,' ',12,13
  db	13 dup(' ')
  db	27
  db	4 dup(' ')
  db	' !"#$%&',39,'()*+,-./0123456789:;<=>?@'
  db	'ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_`'

Code credit: Happy codings

HTML and CSS are the foundation of the web

Basic technology stack

For structuring and presenting content For formatting the look of the web page For providing dyamic, interactive capabilities

Tools we'll be using

  • Text editor: Atom (open-source software)
  • Browser: Chrome (excellent Dev Tools)

Note that these tools are just that, tools. You can choose to use other text editors and browsers as well. These were chosen because of some conveniences they afford.

General Assembly

Internet basics

Advanced Research Projects Agency (ARPA)

  • Set up in 1958 for R&D to expand the frontiers of technology and science
  • Computers used to be monoliths which couldn't communicate with each other
  • Best and brightest minds in the country came up with the concept of computer networking

Packet switching technology

  • Traditional communication networks used analog, circuit switching
  • Circuit switching is like an MRT train running on tracks, while packet switching is like cars on the Expressways

Protocols

  • Transmission Control Protocol (TCP) handles breaking up data into packets to be sent and reassembling them at their destination
  • Internet Protocol (IP) handles the formatting and addressing of the data packets
  • Every device connected to the internet needs a unique IP address

TCP/IP

Transmission of data makes use of 4 layers

Application layer Transport layer Internet layer Link layer Sending Application layer Transport layer Internet layer Link layer Receiving IPv4, IPv6 HTTP, FTP, SMTP etc. TCP, UDP MAC, ADP

World Wide Web

  • Invented by Tim Berners-Lee in 1989
  • Created the 3 essential technologies that power the World Wide Web:
    1. Hypertext Transfer Protocol (HTTP) for retrieving text from other documents via hypertext links
    2. Uniform Resource Identifier (URI) which is the unique identifier for every resource on the web
    3. Hypertext Markup Language (HTML) for structuring and presenting content on the web

Clients and Servers

Server Server Internet Service Provider Client Client Clients request resources/services from Servers Connect -> Request -> Response -> Terminate

From server to your browser

Enter a URL in the address bar

https://www.unicorn.com/rainbow.html URL consists of the: protocol , server , requested file

Browser sends request to server and server locates the requested file

https://www.unicorn.com/rainbow.html

Server returns the file to the browser which displays it

https://www.unicorn.com/rainbow.html Rainbows The colours of the rainbow are generally said to be red, orange, yellow, green, blue, indigo, and violet.

Everything is connected by links

A link on a web page is a pre-entered URL. Clicking the link sends a request to the server.

https://www.unicorn.com/rainbow.html Rainbows The colours of the rainbow are generally said to be red, orange, yellow, green, blue, indigo, and violet. If you’ve never seen a rainbow before, you’re missing out. Check out our gallery of rainbows .

The server sends the requested file back to the browser, which replaces the current page with the new file.

https://www.unicorn.com/gallery.html Gallery

Absolute vs. Relative links

Absolute paths ask for a file from a specific location, which includes the protocol and server.

<a href="http://www.unicorn.com/gallery.html">Gallery<a>

Relative paths ask for a file without specifying a server.

<a href="gallery.html">Gallery<a>

The browser will hence assume you're referring to the same server as the page you're on.

General Assembly

Create your first project

Basic folder structure

  1. Create a new folder, name it whatever you want
  2. Create a file called index.html and another file called styles.css
project styles.css index.html

General Assembly

Hypertext Mark-up Language (HTML)

Hypertext Mark-up Language (HTML)

  • Structures the document and tells browsers what a certain element's function is
  • Content is "marked-up" using tags
  • Tags usually (but not always) come in pairs,
    <p>This is an example of a paragraph element</p>
  • The opening tag, closing tag and everything in between is a HTML element

Structure of HTML document

<!DOCTYPE html>
<html>
  <head>
    <title>Example page</title>
  </head>
  <body>
    <h1>Hello world</h1>
  </body>
</html>

Document type element

<!DOCTYPE html>
  • Appears just above the <html> tag
  • Tells the browser to render the HTML in standards mode
  • Let's validation software know which version of HTML to validate against
  • Advised to use the HTML5 doctype

<html> element

<html lang="en">
// HTML code for web page
</html>
  • Represents the root of an HTML document
  • Encouraged to specify a language attribute
  • Language attribute aids speech synthesis (screen readers), translation tools and other language-related functionality

<head> element

<head>
  <meta charset="utf-8">
  <title>Your site title</title>
  <meta name="description" content="A short description of your website">
  <meta name="author" content="Your name">
  
  <link rel="stylesheet" href="css/styles.css?v=1.0">
</head>
  • Contains instructions for the browser and meta data for the website
  • Title and description are what shows up on search engine results
  • Stylesheets are also declared here

<body> element

<body>
  <header>
    <img src="img/logo.png" alt="Site logo">
    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <h1>Page header</h1>
    <p>Some content in a paragraph. Brownie tiramisu toffee sweet roll sesame snaps halvah. Fruitcake donut pie ice cream jujubes danish dragée. Bear claw jelly dessert lemon drops bonbon donut. Sugar plum sugar plum candy canes ice cream powder tootsie roll sweet. Sugar plum biscuit macaroon fruitcake cookie cupcake jelly-o cupcake. </p>
  <main>
</body>
  • Represents the main content of the document
  • Should only be one <body> element on a web page

Formatting your web page

  • <address>
  • <article>
  • <footer>
  • <header>
  • <h1>
  • <h2>
  • <h3>
  • <h4>
  • <h5>
  • <h6>
  • <hgroup>
  • <nav>
  • <section>
  • <dd>
  • <div>
  • <dl>
  • <dt>
  • <figcaption>
  • <figure>
  • <hr>
  • <li>
  • <main>
  • <ol>
  • <p>
  • <pre>
  • <ul>
  • <caption>
  • <col>
  • <colgroup>
  • <table>
  • <tbody>
  • <td>
  • <tfoot>
  • <th>
  • <thead>
  • <tr>
  • <button>
  • <datalist>
  • <fieldset>
  • <form>
  • <input>
  • <keygen>
  • <label>
  • <legend>
  • <meter>
  • <optgroup>
  • <option>
  • <output>
  • <progress>
  • <select>
  • <details>
  • <dialog>
  • <menu>
  • <menuitem>
  • <summary>
  • <abbr>
  • <b>
  • <bdi>
  • <bdo>
  • <br>
  • <cite>
  • <code>
  • <data>
  • <dfn>
  • <em>
  • <i>
  • <kbd>
  • <mark>
  • <q>
  • <rp>
  • <rt>
  • <rtc>
  • <ruby>
  • <s>
  • <samp>
  • <small>
  • <span>
  • <strong>
  • <sub>
  • <sup>
  • <time>
  • <u>
  • <var>
  • <wbr>
  • <area>
  • <audio>
  • <map>
  • <track>
  • <video>
  • <embed>
  • <object>
  • <param>
  • <source>
  • <canvas>
  • <noscript>
  • <script>
  • <del>
  • <ins>

Basic HTML5 template

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>title</title>
    <meta name="description" content="A short description of your website">
    <meta name="author" content="Your name">
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <!-- page content -->
    <script src="script.js"></script>
  </body>
</html>

Top to bottom, left to right

  • Web pages are made up of rectangular boxes
  • These boxes are placed from top to bottom, left to right
http://www.unicorn.com

Block-level elements

Block-level elements take up the entire width of the container.

Rainbows

A rainbow is a meteorological phenomenon that is caused by reflection, refraction and dispersion of light in water droplets resulting in a spectrum of light appearing in the sky.

Colours

  • Red
  • Orange
  • Yellow
  • Green
  • Blue
  • Indigo
  • Violet

The block-level tags shown in this example are h1, h2, p, ul and li.

You can refer to the full list of block-level elements here.

Inline-level elements

If an element is NOT block-level, it is inline.

Accordingly, the Munsell colour system (a 20th-century system for numerically describing colours, based on equal steps for human visual perception) distinguishes 100 hues.

<p class="ga-example-4">Accordingly, <a href="https://en.wikipedia.org/wiki/Munsell_color_system">the Munsell colour system</a> (a 20th-century system for numerically describing colours, based on equal steps for human visual perception) distinguishes 100 hues.</p>

Commonly used inline-level tags include a, input, label, img and so on.

Full list of inline-level elements available here.

General Assembly

Cascading Style Sheets (CSS)

Cascading Style Sheets (CSS)

  • Tells the browser how to display a certain element
  • Follows the general ruleset:
    1. Select the HTML element to be styled
    2. Specify the properties of the element to be styled
    3. Give the values we want each property to have

Structure of a CSS rule

selector {
  property1: value;
  property2: value;
  property3: value;
}
  • The selector identifies which HTML elements the rule will be applied to
  • The curly braces contain the property-value pairs, separated with semi-colons
  • The properties define the style of the selected element
  • The values are dependent on the property, and indicate the value of the properties to be set

Types of CSS selectors

  • Element: matches all the elements of that name on the page
    p {}
  • Class: matches all the elements with the specified class attribute, e.g. <div class="example">
    .example {}
  • ID: matches the element with the specified id attribute, e.g. <div id="example">
    #example {}

Descendent selectors

Used to select tags that are children of other tags

<ul>
  <li>4 large eggs</li>
  <li>1/4 cup milk</li>
  <li>2 tsp. butter</li>
</ul>
<ol>
  <li>BEAT eggs, milk, salt and pepper in medium bowl until blended.</li>
  <li>HEAT butter in large nonstick skillet over medium heat until hot. POUR IN egg mixture. As eggs begin to set, GENTLY PULL the eggs across the pan with a spatula, forming large soft curds.</li>
  <li>CONTINUE cooking – pulling, lifting and folding eggs – until thickened and no visible liquid egg remains. Do not stir constantly. REMOVE from heat. SERVE immediately.</li>
</ol>
ul li {
  color: green;
}
  • 4 large eggs
  • 1/4 cup milk
  • 2 tsp. butter
  1. BEAT eggs, milk, salt and pepper in medium bowl until blended.
  2. HEAT butter in large nonstick skillet over medium heat until hot. POUR IN egg mixture. As eggs begin to set, GENTLY PULL the eggs across the pan with a spatula, forming large soft curds.
  3. CONTINUE cooking – pulling, lifting and folding eggs – until thickened and no visible liquid egg remains. Do not stir constantly. REMOVE from heat. SERVE immediately.

Selector list is read from right-to-left, with the left-most being the parent.

Pseudo-selectors

Applies to selectors when certain conditions occur

a {
  /* removes underlines from 
     all text links */
  text-decoration: none;
}
a:hover {
 /* adds an underline and makes
    the font green when hovered */
  text-decoration: underline;
  color: green;
}

There are many other pseudo-selectors you can use as well. The full list is available here.

The box model

The model is made up of four boxes, from inside to outside:

MarginBorderPaddingContentMargin edgePadding edgeBorder edgeContent edge
The box model, visualised
  • Content
  • Padding
  • Border
  • Margin

When to use margin

Margin controls the space between elements.

h2 {
  margin: 5px 0 5px 0;
}

Rainbows

A rainbow is a meteorological phenomenon that is caused by reflection, refraction and dispersion of light.

Colours

  • Red
  • Orange
  • Yellow
h2 {
  margin: 20px 0 20px 0;
}

Rainbows

A rainbow is a meteorological phenomenon that is caused by reflection, refraction and dispersion of light.

Colours

  • Red
  • Orange
  • Yellow

When to use padding

Padding controls the size of the box without adjusting the size of the content within it.

h2 {
  padding: 0;
}

Rainbows

A rainbow is a meteorological phenomenon that is caused by reflection, refraction and dispersion of light.

Colours

  • Red
  • Orange
  • Yellow
h2 {
  padding: 20px 0 20px 0;
}

Rainbows

A rainbow is a meteorological phenomenon that is caused by reflection, refraction and dispersion of light.

Colours

  • Red
  • Orange
  • Yellow

Where to write your styles

Browsers will pick up your CSS if they are between a <style> tags which is a child of the <head> tag.

<!DOCTYPE html>
<html lang="en">
  <head>
    <style type="text/css">
      h1 {
        font-size: 2rem;
      }
      a {
        text-decoration: none;
      }
      a:hover {
        text-decoration: underline;
        color: darkred;
      }
    </style>
  </head>

Use a separate CSS file

As your site grows, you'll have many more styles, so it's better to move them all into a separate file.

<!DOCTYPE html>
<html lang="en">
  <head>
    <link type="text/css" rel="stylesheet" href="main.css">
  </head>

In this example, we are using main.css but you can name the file anything. This file will hold all your CSS and be linked in the <head> of every page.

CSS Specificity

0-∞

Inline styles

0-∞

IDs

0-∞

Classes, attributes and pseudo-classes

0-∞

Elements and pseudo-elements

ul {
  // CSS properties
}

0, 0, 0, 1

.class-1 .class-2 p {
  // CSS properties
}

0, 0, 2, 1

#id-1 .class-3 div {
  // CSS properties
}

0, 1, 1, 1

General guidelines for writing CSS

  • Declare your styles from lowest specificity then move up
  • Keep your specificity as low as possible
  • Name your classes sensibly
  • Never style IDs
  • Don't write inline styles

General Assembly

Using Images

Types of images

  • Content images
    • contain relevant information
    • help the user understand the content
  • Background images
    • decorative in nature
    • contribute to the overall look and feel of the site

Content images

Content images are created using the <img> tag

<img src="path/to/image" alt="Description of the image">
  • Doesn't need a closing tag.
  • Requires a <src> attribute to tell the browser where to find the image file
  • Requires an <alt> attribute which describes the image or its purpose

Background images

Background images are set via CSS

There are several properties related to backgrounds:

background-image: none
background-position: 0% 0%
background-size: auto auto
background-repeat: repeat
background-origin: padding-box
background-clip: border-box
background-attachment: scroll
background-color: transparent

background is one of many CSS properties that can be written in shorthand.

Setting background images

background-image can use relative or absolute paths

div {
  background-color: #170104;
  background-image: url('img/background.jpg');
}

It's advisable to set a background-color as a fallback for the background image

This is a div with a background image

background-position

This is used to set the position of the image

div {
  background-color: #170104;
  background-image: url('img/background.jpg');
  background-position: center center;
}

Position has been set to center center

div {
  background-color: #170104;
  background-image: url('img/background.jpg');
  background-position: left bottom;
}

Position has been set to left bottom

Background-repeat

Used for tiling patterned backgrounds

Takes the following values:

  • repeat-x: tiles the image horizontally
  • repeat-y: tiles the image vertically
  • no-repeat: don't tile or repeat anything
div {
  background-color: #EBEBEB;
  background-image: url('img/sativa.jpg');
  background-repeat: repeat;
}

General Assembly

Web accessibility

Semantics and accessibility

  • To make the web easier to use and access, and available to everyone
  • Encompasses all disabilities, including visual, auditory, physical, speech, cognitive and neurological disabilities
  • Benefits people without disabilities as well
  • Accessible websites benefit from search engine optimisation (SEO)

Basic accessibility checklist (1/2)

  • Page title: To adequately and briefly describe the content of the page
  • Image text alternatives: To make visual information accessible
  • Headings: To provide meaningful hierarchy for facilitation of navigation
  • Contrast ratio: To have sufficient luminance contrast ratio, for people with different requirements
  • Resize text: To ensure visibility and usability as text size increases

Basic accessibility checklist (2/2)

  • Keyboard access & visual focus: To provide full functionality through a keyboard, and visible focus with logical order
  • Forms, labels & errors: To have proper labels, keyboard access, clear instructions, and effective error handling
  • Multimedia alternatives: To have alternative formats for audio and visual impaired

Visit Web Accessibility Initiative (WAI) to understand more about this important aspect of the web

General Assembly

Resources

To find out more...

Sign up for GA courses

General Assembly

THE END

Websitehttp://www.chenhuijing.com

Twitter@hj_chen

Medium@hj_chen

Codepen@huijing