Welcome to my Intro to Udacity final project website! This website is a "notebook" for all the main lessons I've learned throughout the Intro to Udacity course. It's also a illustration of some of those lessons.

If I had started this website with all the knowledge I now have, I know that it would look completely different. But creating this website was a learning process, and I learned every step of the way. I also learned that when creating a website, It's best to have a planned DOM and style structure from the get-go. The result of not having that is a lot of tinkering. Every time I make a small change, I introduce new bugs or style inconsistencies. Next time will be better :).

Here's how to use this site.

I've created this little schema made of lessons, concepts, and information. Lessons contain concepts. Concepts contain information. After posting a lesson, the user is only able to post a concept. After posting a concept, the user is only able to post a piece of information. After posting a piece of information, the user has the option of adding more information, adding a new concept, or starting another lesson. It's note-taking, for the OCD note-taker.

Notes that I've taken throughtout the course will have a red bubble around the lesson. Notes added by users of the site will have a green bubble. Add notes to your heart's content!

Please type in your notes here:
Note Types

Lesson 0: Basics of the Web and HTML

HTML

HTML stands for hypertext markup language. What you wrote:
Basically, the internet makes requests to servers via HTTP protocol. HTTP sends back info to the internet/you in your browser.

Structure of HTML

HTML is made up of tags and attributes. Tags that only require an opening tag are called void tags. Otherwise, most tags require both an opening and closing tag.
A complete tag is referred to as an attribute.

There are 2 ways to classify tags:

  1. inline tags
  2. block tags

Inline tags perform their function directly on the text, with no additional formatting.
Block tags put an invisible box around text. That way CSS or JS elements can refer to the entire region, not just the literal text.

Links

This is an example of a hyperlink to google.

Lesson 1: CSS

CSS Philosophy

CSS stands for Cascading Style Sheets.
CSS can be said to have a heirarchical structure. The more specific rule gets applied is the one that MOST describes the elements.

CSS Syntax

CSS uses “selectors”. That's CSS for elements. Elements have a property and a value.
CSS selectors can apply to tags, as well as classes and IDs. When using CSS to refer to a class, the selector must be prefixed with a period.

You can use CSS in HTML (although not advised). Like this:

<style>
.description { color: red;
}
</style>

Avoiding Repition in CSS

Because CSS is heirarchical, it's code can be written in such a way to minimize repitition.
A couple lines of CSS code can be applied to ALL of the instances that the tag/class/id are used in the HTML document. So if HTML is written intelligently, with tags/classes/ids consistently applied, the CSS to format that HTML document can be very simple, but will affect the web page widely.

Lesson 2: Python

Python Basic Forms

Python's grammar works like this: expression --> operator --> expression. Assignment works like this: var = expression

What’s on the right side will be stored in the left side. If 'var' is not assigned, and it was used on the right side, it would crash with a NameError.

You can add and multiply strings, but you cannot use them in subtraction or division. If you want decimal output, add a '.' at the end of your number.

Python Indexing

You can extract subsequences from strings with brackets. Ex: <string>[:]
Sample indexing positions:
+---+---+---+---+---+---+
|  P  |  y  |  t  |  h  |  o  |  n  |
+---+---+---+---+---+---+
0    1    2    3    4    5    6
-6   -5   -4   -3   -2   -1
You can leave the expression before or after the colon blank

Python Functions

You start a function with def. Return shows the output.
Functions (or procedures/methods) are ways of accomplishing a task that are meant to be reusable. All variables in the function don't exist outisde of the function call and the return values.
Functions need return statements, otherwise they will just return 'None'


Indentation is very important in Python. Functions and loops are invoked by a ':', and then the python compiler knows we're going into the content of the function by the next indent level.


Loops are also very important in Python. 'While' loops evaluate a condition and loop until the condition is False. 'For' loops iterate over a list element, and assigns variables to each element in the list until the list is over. 'For' loops are the safer of the two

Aliasing and Mutation

> a = [0,1]
> b = a <--Aliasing!
> a[1]=2 <--Mutation!
> print a,b
[0, 2] [0, 2]
> a = [0,3]
> print a,b
[0, 3] [0, 2] <--Reassigning the original list (a = [0, 3]) does not carry over the change to the aliased variable!

A mutable object is an object whose contents can change, like the list shown above.
An alias is a second name for a piece of data. In Python, aliasing happens whenever one variable's value is assigned to another variable, because variables are just names that store references to values.

Lesson 3: Servers, HTTP, Validating Input, and Jinja2 Templates

Dissecting a URL (Uniform Resource Locator)

Take this example url: http://www.udacity.com/css.jpg?color=blue&view=nice#pic_here

  • Protocol: http
  • Host: www.udacity.com --> This is the sever you want to access
  • Path: /css.jpg --> This is evertyhing after the ".com", the document/query you want to fetch
  • Query Parameter: ?color=blue&view=nice --> These are variables being sent to the server
  • Fragment: #pic_here --> These are used to reference a particular part of the page you're looking at, for caching

HTTP (Hypertext Transer Protocol) Requests

HTTP requests and responses are the main way that information is sent to/from servers. The two most used methods in HTTP for request-response between a client and a server are GETs and POSTs:

  • GETs request data from a specified source. They can:
    • Retrieve parameters from the URL
    • Fetch documents from the server
    • It's okay to cache data in a GET request
    • The max length is the max length of the URL
    • GETs should never change data on the server
  • POSTs submit data to a server to be processed. They can:
    • Use parameters in the body
    • Be used for updating data, or making changes to the server
    • There's no max length
    • It's not okay to cache data with a POST

There are other pieces of information that make up a HTTP Request, like HTTP fields. HTTP fields are components of the header section of the request, and they define the operating parameters of a HTTP transaction


Let's extrapolate the HTTP request from this URL: http://www.example.com/foo
Sample Request Line from that URL: GET /foo HTTP/1.1

  • Method: GET
  • Path: /foo --> the actual document you want from the server
  • Version: HTTP/1.1

While GETs and POSTs can make requests to the server, the server responds with a Status Line.

Sample Status Line: HTTP/1.1 200 OK

  • Version: HTTP/1.1
  • Status code: 200
  • Reason phrase: OK --> Basically what the Status code means

Status codes begin with a 1-5 and are 3 digits. The first digit defines what status class it’s in.

Common Status Codes:

  • 200s - basically success
  • 300s- you need to do something differently technically to find the information
  • 400s - error on browser side
  • 500s - error on server side
  • 200- OK. It means that the document was found. This is the most common status code
  • 302- Found. The document was found, but it was located somewhere else
  • 404- Not Found. The document wasn’t found
  • 500- Server Error. The server crashed trying to handle the request

Validating User Input

Use the HTTP form tag to get input from the user. The form element can contain many of the following elements: input, textarea, button, select, option, label, etc.

It's possible for a user of a webpage to type html code or other types of code into web forms. If the browser rendered this as actual code, it could cause havoc for the webpage and for security. This is called "insertion". To block against this, you can use the cgi module included within Python, which has escaping in it. That would be done on the server side. Or, you can set autoescape = True in Jinja2, which is a great method for escaping when using Jinja2 templates.

It is very important to veryify on the server side that what was received from the client is what we expect to receive. It's simple to put some validation on the client side so we don't blindly use whatever is passed in from the client in our server operations, like HTML escaping. But, we also need validation on the server side, so that the data in the form is usable for whatever purpose we need it to be.

Server side validation is helpful because:

  • If the data is not desirable, the server can redirect to an appropriate error page, that helps the user enter data in the correct format
  • It can prevent crashes from storing bad data on the server
  • It can also keep the site secure, so that insertion attacks or other attacks are blocked
  • Server redirection helps to ensure that reloading a page doesn't resubmit the form, and it ensure that there are distinct pages for forms and for successful form submission.

HTML Templates and Abstraction

Basic Jinja2 syntax
{% statement %}
output
{% end statement %}

ex.
{% if name==”steve” %}
Hello, Steve!
{% else %}
who are you?
{% endif %}

For loop syntax
{% for statement %}
body
{% endfor %}


Jinja2 has built in filters, which are invoked with the "|" character. But a better way to do it is to autoescape everything:
jinja_env = jinja2.Environment( loader = jinja2.FileSystemLoader( template_dir ), autoescape = True)


Programmers use HTML templates because this technology reduces the burden of writing out each piece of HTML. Repetitive pieces of HTML can be abstracted with template code. This makes the code easier to read, and easier to debug, saving everyone time. As well, the webpage can be more dynamic and change depending on server variables being passed to the template, giving the programmer more freedom. Being able to use if statements, for loops, template inheritance, and variables in templates has changed the way programmers code today.


Other Helpful Tips:

  • Always automatically escape variables when possible
  • Minimize code in html templates. That way it’s easier to debug
  • Minimize html in code, ideally have NO html in code

Lesson 4: Exploring on my own

Media queries and max widths

Media queries helped me make this site responsive. I learned a lot about media queries by going through general assembly's dash curriculum. This site features a correct viewport, and breakpoints that make sense for the content being displayed. At those breakpoints are different font sizes.

Bootstrap framework

Bootstrap is a great framework to pop your website into a grid! I employed bootstrap on the top part of this website. Bootstrap helps make the textarea and the submit button flex well. This helps make the most of the header space.