Navigation Menu

Skip to content

Instantly share code, notes, and snippets.

@jaantollander

jaantollander/notes.md

Created December 29, 2017 12:29
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jaantollander/df3bb557e1faa3f13926f13746b748b1 to your computer and use it in GitHub Desktop.
Save jaantollander/df3bb557e1faa3f13926f13746b748b1 to your computer and use it in GitHub Desktop.
Download ZIP
Web development course exam practice notes
Raw
notes.md

HTML

Tags & Structure

Basic HTML Structure

<!DOCTYPE html>
<html>
  <head>
    <title>title</title>
    <meta> ... </meta>
    <link> ... </link>
  </head>
  <body>
    content ...
    <!-- comment -->
  </body>
</html>

Common Tags for Blogs

<h?> header </h?>
<p> paragraph </p>
<i> italic </i>
<a href="url"> link </a>
<div> ... </div>
<img src="filename.jpg">
<br>
<span style="color:red"> red </span>

Text Formattting

<h?> heading </h>
<b> bold </b>
<i> italic </i>
<u> underline </u>
<strike> strikeout </strike>
<sup> superscript </sup>
<sub> subscript </sub>
<small> small </small>
<tt> typewriter </tt>
<pre> pre-formatted </pre>
<blockquote> block quote </blockquote>
<strong> strong </strong>
<em> emphasis </em>
<font> ... (this is obsolete use css instead) </font>

Section Divisions

<div> Division or section of page content </div>
<span> Section of text within other content </span>
<p> Paragraph of text </p>
<br> Line break
<hr> Horizontal line
<nobr> Line Break <nobr>

Images

<img src="url" alt="text">

Linking Tags

<a href="url"> link text </a>

List

<ol> Ordered list </ol>
<ul> Un-ordered list </ul>
<li> List item </li>
<dl> Definition list </dl>
<dt> Term or phrase being defined </dt>
<dd> Detailed definition of term </dd>

Tables

<table> ... </table>
<tr> Table row </tr>
<th> Header cell withing table row </th>
<td> table cell withing table row </td>

Frames

<frameset> ... </frameset>
<frame> ... </frame>
<noframes> ... </noframes>

Forms

<form> form input group declaration </form>
<input> Input field withing form </input>
<select> ... </select>
<option> ... </option>
<textarea> ... </textarea>

Attributes

href   Specifies the URL for a link
src    Specifies the URL for an image
id     Specifies an unique identifier for an element
class  Specifies one or more class names for an element (refers to style sheet)

CSS

Style

selector {
  property:value;
  property:value;
}
/* comment */

Selectors

.class             selects all elements with class="class"
#id                selects all elements with id="id"
*                  selects all elements
element            select element
element, elements
element element
element < element
element + element
[attribute=value]

https://www.w3schools.com/css/ https://www.w3schools.com/cssref/css_selectors.asp

URL

Uniform Resource Locator is a reference to a web resource that specifies its location on a computer network and mechanism for retrieving it. A URL is a spesific type of Uniform Resource Identifier (URI).

scheme:[//user[:password]@host[:port][/path][?query][#fragment]]
  • scheme: URI scheme, such as http(s).
  • authority part:
    • username and password
    • host: registered name or IP adress
    • optional port number
  • path
  • query: query string of key value pairs key1=value1&key2=value2
  • fragment: contains a fragment identifier proving direction to a secondary resource, such as section heading in an article.

https://en.wikipedia.org/wiki/URL

HTTP

Request methods

  • GET: The GET method requests a representation of the specified resource. Requests using GET should only retrieve data.

  • POST: The POST method us used to submit an entity to the specified resource, often causing a change in state or side effects on the server.

https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods

Response status codes

  1. Information responses
  2. Successful responses
    • 200 OK : The request has succeeded
  3. Redirection messages
    • 300 Multiple Choices : More than one possible responses. User should choose one of them.
    • 301 Moved Permanently : URi of requested resource has bee changed.
    • 302 Found : URI of request has been changed temporarily.
    • 304 Not Modified : Used for caching purposes. Tells the client that the response has not changed so client can continue to use same cached version of response.
    • 307 Temporary Redirect : Server sent this response to direct client to get requested resource to another URI with same method that used prior request.
  4. Client error responses
    • 400 Bad Request : Server could not understand the request due to invalid syntax.
    • 401 Unauthorized : Client must authenticate itself to get the requested response.
    • 403 Forbidden : The client does not have access rights to the content, i.e they are unauthorized, but unlike 401 client's identity is known to the server.
    • 404 Not Found : The server cannot find the requested resource.
    • 410 Gone : Requested content has been permanently deleted from server, with no forwarding address.
  5. Server error responses
    • 500 Internal Server Error : The server has encountered a situation it doesn't know how to handle.
    • 502 Bad Gateway
    • 503 Service Temporarily Unavailable
    • 504 Gateway Time-out
    • 550 Permission Denied

JavaScript

Primitive types

undefined
null
Number
String
Boolean
Symbol

syntax

var foo = 'hello';
var array = ['hello', 'world'];

var bar = function(arg) {
    console.log(arg);
    return arg;
};

function bar(arg) {
    console.log(arg);
    return arg;
}

if (condition) {
    ...
} else if (condition2) {
    ...
} else {
    ...
}

for (var i=0; i<5; i++) {
    console.log(i);
}

var i = -1;
while (++i < 100) {
    console.log(i);
}

var object = {
    firstname: "foo",
    lastname: "bar"
};

https://autotelicum.github.io/Smooth-CoffeeScript/literate/js-intro.html

JQuery

Makes easier to manipulate a page of HTML after it's displayed by the browser. JQuery provides jQuery function which lets you select elements using CSS selectors. jQuery function has shorthand notation $. Using jQuery consists of traversal and manipulation of the HTML document.

// Ensures that the page is in state where it's ready to be manipulated
$(document).ready(function() {
    console.log('ready!');
});
// Alternative syntax
$(function() {
    console.log('ready!');
});
$('CSS selector');
$('#hide_elem').click(function(){
    $('#elem').hide();
});

https://code.tutsplus.com/tutorials/20-helpful-jquery-methods-you-should-be-using--net-10521 http://jqfundamentals.com/chapter/jquery-basics

APIs

Representational state transfer (REST)

Constraints of RESTful API

  • Client-server architecture
    • Separation of concerns
    • User interface - data storage
    • Allows components to evolve independently
  • Statelessness
    • No client context is being stored on the server between requests
    • Each request contains all the information necessary to service the request, and the session state is held in the client.
  • Cacheability
    • Responses must define themselves as cacheable or not.
  • Layered system
    • A client cannot tell whether it is connected directly to the end server, or to an intermediary along the way.
  • Code on demand
    • Can customize clients functionality by transferring executable code such as Java applets or JavaScript.
  • Uniform interface
    • Resource identification in requests
    • Resource manipulation through representations
    • self-descriptive messages
    • Hypermedia as the engine of application state

Application is addressable if it exposes interesting aspects of its data set as resources (URIs).

Sessions & Security

Django

Model Layer

Abstraction layer for interacting and manipulating data of your web application.

  • Interaction with the database
from django.db import models

class Person(models.Model):
    first_name = models.CharField(max_length=30)
    last_name = models.CharField(max_length=30)

View Layer

Encapsulates the logic responsible for processing a user's request and for returning the response.

views.py

def view(request, question_id):
    return HttpResponse('Hello World')

def index(request):
    # Renders a Django template as Http response
    context = {...}
    return render(request, 'index.html', context)

urls.py

from django.conf.urls import url
from . import views

urlpatterns = [
  url(r'^(?P<question_id>)', views.view, name='view'),
]

Template Layer

The template layer provides a desiner-friendly syntax for rendering the information to be presented to the user.

Syntax

{{ variable }}
{{ variable|filter}}
{{ variable|filter|filter2|...}}
{% tag %} ... {% endtag %}

Example

{% extends "base.html" %}

{% block title %}{{ section.title }}{% endblock %}

{% block content %}
<h1>{{ section.title }}</h1>

{% for story in story_list %}
<h2>
  <a href="{{ story.get_absolute_url }}">
    {{ story.headline|upper }}
  </a>
</h2>
<p>{{ story.tease|truncatewords:"100" }}</p>
{% endfor %}
{% endblock %}

Forms

Framework to facilitate the creation of forms and the manipulation of form data.

Admin

Automated admin interface.

Security

  • Clickjacking protection
  • Cross-site forgery protection
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment